CSS phá bỏ rào cản HTML bằng cách cho phép có thêm nhiều đặc tả thuộc tính chuẩn để phục vụ cho việc dàn trang và định dạng. Những thuộc tính này được áp dụng vào trong tài liệu mà không pháo vỡ cấu trúc HTML đã có sẵn.
Có 2 bước để bổ sung kiểu dáng CSS vào tài liệu: Khai báo style và áp dụng style cho các phần tử HTML
Áp dụng CSS vào trang HTML
Có 4 cách áp dụng CSS và trong tài liệu:
• Dùng inline style
• Nhúng các style sheet
• Liên kết với một style sheet
• Bao gộp một style sheet
Dùng inline style: là cách dùng style ngay trong câu lệnh, bạn thêm thuộc tính STYLE vào một phần tử HTML nào đó theo cú pháp như sau:
<tag STYLE=”property:value;property:value….”></tag>
Ví dụ:
<html>
<body>
<b style="color:navy;"> Màu xanh nước biển. </b>
</body> </html>
Một inline style có thể áp dụng cho bất cứ thẻ nào và chỉ có tác dụng trên chính thẻ đó. Dùng inline style làm cho tài liệu rõ ràng hơn nhưng có thể dẫn đến việc viết mã quá nhiều. Ngoài ra nó làm cho các đoạn mã dư thừa, khó bảo trì.
Để nhúng một style sheet, cần định nghĩa một khối (phân biệt bởi các thể <STYLE type = “text/css”> và </STYLE>) được đặt trong phần HEAD của tài liệu. Khối này là một tập các style rule (qui tắc về kiểu dáng), trong đó mỗi qui tắc định nghĩa style cho một phần tử hay mộ nhóm các phần tử HTML
Một style rule có 2 phần:
• Một selector (phần tử chọn) để định danh một phần tử hay một nhóm các phân từ HTML
• Một khai báo về thuộc tính về kiểu dáng được áp dụng cho selector đó.
• Cú pháp tổng quát: selector {property:value;property:value;…}
CSS không phân biệt chữ hòa và chữ thưừong nhưng bạn phải đảm bảo luôn dùng đúng cú pháp. Mỗi style rule phải bắt đầu bằng một selector hay một nhóm các selector, theo sau là một dấu mở ngoặc nhọn, tiếp theo là các khai báo thuộc tính về style. Mỗi khai báo cho một style kết thúc bằng dấu chấm phẩy và mỗi thuộc tính được phân cách với giá trị của nó bằng dấu hai chấm, và cuối cùng là một dấu ngoặc nhọn.
<head>
<style type="text/css"> <!--
B {text-transform: lowercase; font-size:18px}
P { border: silver thick solid; background-color:turquoise;} -->
</style> </head> <body>
<p>
Mỗi đoạn sẽ có viền <b>Đậm</b> màu bạc </p> </body>
Cách dùng style sheet nhúng luôn uyển chuyển và dễ bảo trì hơn cách dùng inline style. Chẳng hạn muốn thay đổi màu của P trong tài liệu, chỉ cần thay đổi một thứ: giá trị tương ứng với thuộc tính “background-color”
Liên kết đến style sheet
Có thể lưu style sheet trong một tập tin riêng biêt và liên kết nó đến một hay nhiều tài liệu, sử dụng thẻ <LINK> trong phần <HEAD>:
<LINK REL=”stylesheet” type=”text/css” href=”mystyles.css”>
Style sheet được liên kết chứa những khai báo về style, hoạt động giống như style sheet nhúng, chhỉ khác là những style rule không đóng trong cặp thẻ <style type =”text/css”></style>. Việc liên kết đến một style sheet bên ngoài cho phép nhà phát triển áp dụng style sheet cho nhiều tài liệu khác nhau.
Bao gộp một style sheet
Một style sheet bên ngoài có thể được bao gộp (import) vào trong tài liệu bằng cách dùng thuộc tính @import trong style sheet:
@import:url(mystyles.css);
Thẻ @import nên đặt ở đầu khối style hay đối với một sheet liên kết thì là ở trước bất cứ một khai báo nào. Những qui tắc được bao gộp trong style sheet sẽ được áp dụng trước những qui tắc khác định nghĩa chứa style sheet
Các cách dùng style
• Inline style: dùng cho văn bản riêng lẻ
• Style nhúng: định dáng một hay nhiều tài liệu ở tầm vực toàn cục
• Kết hợp inline để bổ sung cho style nhúng hay điều chỉnh nó cho một vài phần tử cụ thể