Định dạng dùng CSS


Sử dụng CSS trong HTML

CSS viết tắt của Cascading Style Sheets (bảng định kiểu xếp tầng).

Dùng CSS khi muốn định dạng cho các đối tường trong trang web. Có 3 cách để thêm CSS vào tài liệu HTML:

  • Inline - dùng thuộc tính style của bất kỳ thẻ nào trong HTML.
  • Internal - dùng thẻ <style> trong phần <head> để quy định.
  • External - dùng một file .css rời để quy định.

Cách tốt nhất để dùng CSS là External, vì như vậy sẽ đảm bảo tính rõ ràng của tài liệu và định dạng. Tuy nhiên, trong các hướng dẫn này chúng tôi dùng Internal và một số dùng Inline để việc lấy ví dụ minh hoạ được dễ dàng hơn.

Bạn có thể học CSS một cách đầy đủ trong phần hướng dẫn CSS.


Cú pháp của CSS

CSS luôn được khai báo dạng.

element { property:value; property:value }

 Trong đó element là các thành phần của tài liệu HTML. Thông thường, đó là các thẻ HTML, lớp (class) hoặc định danh (id). Property là các thuộc tính mà bạn muốn định dạng và value là giá trị của nó.


Dùng CSS inline

Dùng CSS theo kiểu inline sẽ giúp cho bạn chỉ định một số thuộc tính nhất định cho đối tượng ngay khi khai báo thẻ HTML.

Theo cách này bạn phải dùng thuộc tính style của thẻ HTML.

Ví dụ:

<h1 style="color:blue">Đây là tiêu đề màu xanh da trời</h1>

See the Pen OVbwzX by Nguyễn Duy Hiếu (@hieu3210) on CodePen.


Dùng CSS internal

Nếu bạn muốn khai báo CSS ngay tại tài liệu HTML, có nghĩa là bạn đang dùng kiểu internal.

Muốn dùng kiểu này, bạn cần khai báo mã CSS trong vùng của thẻ <style>, thường đặt trong vùng thẻ <head>.

Ví dụ:

<head>
<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>This is a paragraph.</p>

</body>

See the Pen oXYMER by Nguyễn Duy Hiếu (@hieu3210) on CodePen.


Dùng CSS external

Việc phân tách mã CSS ra 1 file riêng sẽ đảm bảo tính rõ ràng, khoa học của tài liệu HTML. Làm như vậy ta có thể tách biệt việc điều chỉnh hiển thị các đối tượng trên trang web và cách chúng hiển thị. File mã của CSS có phần mở rộng là .css.

Trong các ví dụ, chúng tôi dùng CodePen cũng phân tách HTML, CSS và JavaScript ra thành 3 phần riêng biệt. Nhưng không có lời gọi file .css nên ta hiểu rằng cách làm đó tương đương internal.

Để gọi 1 file CSS trong HTML, ta dùng thẻ <link> theo cú pháp:

<link rel="stylesheet" href="/path/ten_file.css">