Ngôn ngữ CSS - Vị trí đặt CSS
Bài trước
Bài sau

Vị trí đặt CSS

Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML .

  1. CSS nội tuyến (kiểu thuộc tính)
  2. CSS bên trong thẻ style
  3. CSS bên ngoại ((liên kết với một file CSS bên ngoài)

1. CSS nội tuyến (Inline CSS)

CSS nội tuyến (inline) được sử dụng để áp dụng CSS trên một dòng hoặc một phần tử. Để sử dụng CSS nội tuyến, bạn phải sử dụng thuộc tính style cho thẻ có liên quan.

Cú pháp:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Ví dụ:

<html> 
<head> <title>Ví dụ</title> </head> 
<body style="background-color:#000;"> 
<p style="color:white">^_^ Welcome To MyWebsite ^_^</p> 
</body> 
</html>

Xem ví dụ

Sự bất lợi của CSS nội tuyến

  • Bạn không thể sử dụng dấu nháy kép ‘”‘ bên trong CSS nội tuyến. Ví nếu bạn dùng dấu nháy kép thì trình duyệt sẽ hiểu đó là dấu kết thúc thuộc tính style.
  • CSS nội tuyến không được tái sử dụng.
  • CSS nộ tuyến khó khăn trong việc chỉnh sửa vì chúng không được lưu trữ ở một nơi.
  • Không thể tạo các pseudo-code và pseudo-class với CSS nội tuyến.
  • CSS nội tuyến không lợi dụng bộ nhớ cache của trình duyệt.

2. CSS bên trong thẻ style

Bên trong (thẻ style) bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để tiện cho công tác bảo trì, sửa chữa về sau). 

Ví dụ: Định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:  

<html>
 <head> <title>Ví dụ</title> 
<style type="text/css"> 
body { background-color:#000 } 
p { color:white } 
</style> 
</head> 
<body> 
<p>^_^ Welcome To MyWebsite ^_^</p> 
</body> 
</html>

Xem ví dụ

Lưu ý: Thẻ style nên đặt trong thẻ head.

3. CSS bên ngoại ((liên kết với một file CSS bên ngoài)

Bên ngoài (liên kết với một file CSS bên ngoài) Thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css). 
Đây là cách làm được khuyến cáo, đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. 
Cú pháp để chèn file css vào trang là:

<link rel="stylesheet" type="text/css" href="filename.css" /> 
Hoặc
<style type="text/css"> @import url("filename.css") </style>

Cách thực hiện
 Đầu tiên chúng ta sẽ tạo ra một file html

<html> 
<head> <title>Ví dụ</title> 
<link rel="stylesheet" type="text/css" href="filename.css" /> 

</head> 
<body> 
<p>^_^ Welcome To MyWebsite ^_^</p> 
</body> 
</html>

Sau đó hãy tạo một file style.css lưu cùng thư mục với file htm trên với nội dung:

body { background-color:#000 } 
p{ color:White } 

Sự ưu tiên: 

Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ <style> và các CSS nội tuyến. 
Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng.
Theo nguyên tắc đó trình duyệt sẽ ưu tiên theo trình tự : Các CSS nội tuyến -> CSS bên trong -> CSS bên ngoài -> CSS mặc định của trình duyệt. 
 


Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×