CHƯƠNG 4: CASCADING STYLE SHEETS 4.1 Giới thiệu
4.2Các cách nhúng style cho văn bản HTML
Hiện tại có ba cách để định dạng văn bản sử dụng CSS: cục bộ, nhúng vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng là liên kết đến một file riêng biệt được sử dụng phổ biến nhất.
Cục bộ: code CSS được chèn trực tiếp vào trong thẻ HTML. Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên thẻ đó.
Ví dụ
<p style=”font-size:16pt; font-weight:bold; color:blue;”>
Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay đổi cách hiển thị trên trình duyệt
</p>
Nhúng vào trang web. Cách thứ hai là khai báo code CSS nằm trong cặp thẻ <style></style> được đặt ở phần <head></head> của tài liệu. Về cơ bản nó cũng chỉ có tác động cục bộ lên file chèn đoạn code CSS này. Nó có phạm vi ảnh hưởng lớn hơn là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các file khác trong cùng một trang web. Ví dụ:
<head>
<title>Nhúng vào trang</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ /> <style type=”text/css”>
h1 {font-size: 16px;} p {color:blue;} </style>
</head>
Liên kết đến một file biệt lập. Thực tế cách cuối cùng này mới là thế mạnh thực sự của CSS bởi vì chỉ cần tạo ra một file CSS và viết code chỉ một lần. Nó sẽ ảnh hưởng đến toàn bộ trang web chứ không chỉ ảnh hưởng đến một file .html đơn lẻ hoặc chỉ một thẻ trong hàng ngàn thẻ mà bạn có. Bằng cách này ta có thể tách rời hoàn toàn những thành phần trình bày và nội dung ra khỏi nhau. Nếu viết toàn bộ code CSS trong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa chữa trang web trở nên cực kỳ đơn giản. Để liên kết file CSS đến tất cả các file .html chỉ cần chèn đoạn code sau vào giữa thẻ <head></head> của tài liệu:
<link href="style_sheet.css" rel="stylesheet" type="text/css" />
Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web của bạn. Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi.