Cách tạo CSS

Cách chèn bảng định dạng

Khi đọc một bảng định dạng, trình duyệt sẽ định dạng tài liệu HTML dựa trên nó. Có ba cách để chèn bảng định dạng:

Bảng định dạng ngoài

Khi phong cách cần được áp dụng trên nhiều trang, bảng định dạng ngoài sẽ là lựa chọn lý tưởng. Trong trường hợp sử dụng bảng định dạng ngoài, bạn có thể thay đổi một tệp để thay đổi toàn bộ diện mạo của trang web. Mỗi trang sử dụng thẻ <link> để liên kết với bảng định dạng.<link> thẻ ở phần đầu của tài liệu:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Trình duyệt sẽ đọc các tuyên bố định dạng từ tệp mystyle.css và định dạng tài liệu dựa trên nó.

Bảng định dạng ngoài có thể được chỉnh sửa trong bất kỳ trình chỉnh sửa văn bản nào. Tệp không được chứa bất kỳ thẻ html nào. Bảng định dạng nên được lưu với phần mở rộng .css. Dưới đây là một ví dụ về tệp bảng định dạng:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Đừng để trống khoảng trống giữa giá trị thuộc tính và đơn vị. Nếu bạn sử dụng “margin-left: 20 px” thay vì “margin-left: 20px”, nó chỉ hoạt động trên IE 6, nhưng không hoạt động trên Mozilla/Firefox hoặc Netscape.

Bảng định dạng nội bộ

Khi một tài liệu cần phong cách đặc biệt, bạn nên sử dụng bảng định dạng nội bộ. Bạn có thể sử dụng thẻ <style> để định nghĩa bảng định dạng nội bộ trong phần đầu của tài liệu, như thế này:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Định dạng-inline

Do sự kết hợp giữa biểu diễn và nội dung, định dạng-inline sẽ mất đi nhiều lợi thế của bảng định dạng. Hãy cẩn thận khi sử dụng phương pháp này, ví dụ khi phong cách chỉ cần được áp dụng một lần trên một yếu tố.

Để sử dụng định dạng-inline, bạn cần sử dụng thuộc tính (style) trong thẻ liên quan. Thuộc tính Style có thể chứa bất kỳ thuộc tính CSS nào. Ví dụ này sẽ trình bày cách thay đổi màu sắc và biên trái của đoạn văn:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Kiểu样式 nhiều

Nếu một số thuộc tính được định nghĩa bởi cùng một chọn phần trong nhiều bảng định dạng, thì giá trị thuộc tính sẽ được kế thừa từ bảng định dạng cụ thể hơn.

Ví dụ, bảng định dạng bên ngoài có ba thuộc tính cho chọn phần h3:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

Mà bảng định dạng nội bộ có hai thuộc tính cho chọn phần h3:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Nếu trang này có bảng định dạng nội bộ và liên kết với bảng định dạng bên ngoài, thì h3 sẽ nhận được phong cách sau:

color: red; 
text-align: right; 
font-size: 20pt;

Màu sắc thuộc tính sẽ được kế thừa từ bảng định dạng bên ngoài, trong khi việc sắp xếp văn bản (text-alignment) và kích thước phông chữ (font-size) sẽ bị thay thế bởi quy tắc trong bảng định dạng bên trong.