Trong bài học trước, chúng ta đã khởi động tìm hiểu khái niệm CSS là gì, ở bài viết này chúng tôi sẽ giới thiệu bạn các loại CSS được dùng trong kỹ thuật thiết kế website và chuẩn định dạng CSS nào có độ ưu tiên cao nhất.
Khi trình duyệt web đọc file CSS, nó sẽ định dạng nội dung dựa vào thông tin có trong file CSS.
03 CÁCH CHÈN CSS VÀO HTML
Có 03 cách chèn CSS vào HTML :
- External Style Sheet. (css ngoại tuyến)
- Internal Style Sheet. (css nội tuyến)
- Inline Style. (css cục bộ)
EXTERNAL STYLE SHEET (CSS NGOẠI TUYẾN)
Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế và cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi tài liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ.
CSS ngoại tuyến có phạm vi ảnh hưởng đến toàn bộ website chứ không chỉ một file .html riêng biệt. Do vậy mỗi khi muốn thay đổi thuộc tính của một thành phần nào đó trong website thì ta chỉ cần thay đổi file này.
Một External Style Sheet được sử dụng để xử lý nhiều trang có cùng định dạng. Bằng cách sử dụng External Style Sheet, bạn có thể thay đổi toàn bộ website thông qua một file duy nhất.
Mỗi trang HTML phải chứa liên kết đến file CSS bằng cách dùng thẻ <link> được đặt trong cặp thẻ <head></head>.
<head>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>
Một file external Style Sheet có thể được tạo bởi bất kì bộ soạn thảo như Notepad, Notepad++,... File này không chứa bất kì thẻ HTML nào, và được lưu với phần mở rộng là .css. Sau đây là một ví dụ về CSS :
“style.css”
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}
Không chèn khoảng trắng giữa giá trị thuộc tính và đơn vị (như margin-left: 20 px;). Cách viết đúng phải là : margin-left: 20px;
Không chèn khoảng trắng giữa giá trị thuộc tính và đơn vị (như margin-left: 20 px;). Cách viết đúng phải là : margin-left: 20px;
 |
Không chèn khoảng trắng giữa giá trị thuộc tính và đơn vị (như margin-left: 20 px;).
Cách viết đúng phải là : margin-left: 20px;
|
|---|
INTERNAL STYLE SHEET (CSS NỘI TUYẾN)
CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <Style> và đặt trong phần <head> của tài liệu HTML.
Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file HTML được khai báo nhưng không ảnh hưởng đến các file khác trong cùng website.
Internal Style Sheet được sử dụng khi toàn bộ nội dung chỉ có một kiểu định dạng duy nhất. Bạn thực hiện định nghĩa Internal Styles trong phần Head của trang HTML, được đặt giữa cặp thẻ <style> và </style>
<head>
<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}
</style>
</head>
INLINE STYLES (CSS CỤC BỘ)
Là viết mã trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính Style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo.
Việc sử dụng Inline Style sẽ loại bỏ đi các thế mạnh của Style sheet (bởi việc trộn lẫn nội dung và định dạng). Bạn có thể dùng phương pháp này một cách tự do trong quá trình thiết kế website các dự án bất kì.
Để dùng Inline Styles, bạn hãy thêm thuộc tính Style và thẻ tương ứng. Thuộc tính Style có thể chứa bất kì thuộc tính CSS nào.
Ví dụ sau đây sẽ minh hoạ cách thay đổi màu sắc và lề trái của đoạn text :
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
MULTIPLE STYLE SHEETS
Nếu một số thuộc tính được thiết lập cho cùng một bộ chọn với các chuẩn định dạng khác nhau, thì các giá trị sẽ kế thừa từ style sheet ưu tiên hơn.
Ví dụ, giả sử một external style sheet có các thuộc tính sau đối với bộ chọn h3 :
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
Khi đó, giả sử cũng có một internal style sheet với các thuộc tính sau dành cho bộ chọn h3 ;
h3 {
text-align: right;
font-size: 20pt;
}
Nếu như nội dung trang web được định dạng với internal style sheet cũng liên kết với với external styple sheet thì các thuộc tính đối với phần tử h3 sẽ là
color: red;
text-align: right;
font-size: 20pt;
Ta nhận thấy, thuộc tính color thừa hưởng từ external style sheet trong khi các thuộc tính text-align và font-size được thay thế bởi internal style sheet.
MULTIPLE STYLES SẼ GỘP VÀO THÀNH MỘT
Các chuẩn định dạng có thể được phân thành :
- Chuẩn định dạng đặt bên trong phần tử HTML.
- Chuẩn định dạng đặt bên trong phần HEAD của trang HTML.
- Chuẩn định dạng đặt bên trong file external CSS.
Lưu ý : Ta có thể đặt nhiều external style sheets trên cùng một file HTML.
CASCADING ORDER
vấn đề đặt ra là nếu có nhiều hơn một chuẩn định dạng đáp ứng cho một phẩn tử HTML thì khi đó chuẩn định dạng nào sẽ được sử dụng ?
Về cơ bản, tất cả các chuẩn dịnh dạng sẽ được "cascade" vào một style sheet "ảo" mới theo quy tắc sau, (trong đó mục số 4 có độ ưu tiên cao nhất):
1. Browser default (Chuẩn định dạng mặc định của trình duyệt)
2. External Style Sheet
3. Internal Style Sheet (trong phần HEAD)
4. Inline Style (trong phần tử HTML)
Vậy, Inline Style có độ ưu tiên cao nhất, nghĩa là nó sẽ ghi đè lên chuẩn định dạng đặt trong thẻ <head>, hoặc trong external style sheet, hoặc chuẩn định dạng mặc định của trình duyệt.
EmoticonEmoticon