1. Kết nối file CSS vào file HTML
Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:
Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:
Nội fung file index.html
Nội fung file style.css
Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng.
2. Kết nối file CSS vào file HTML
Chúng ta kết nối file CSS vào file HTML thông qua thẻ <link>, cách sử dụng thẻ này như thế nào?
a) Định nghĩa và sử dụng
Tag <link /> xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài.
Tag <link /> được dùng phổ biến nhất là link tới tài liệu css.
Tag <link /> được viết bên trong tag <head>
b) Cấu trúc
<head>
<link rel=”stylesheet” type=”text/css” href=”filecss.css” />
<head>
c) Thuộc tính
Cách sử dụng: <link thuoctinh=”giatri” />
c.1) Thuộc tính tùy chọn
c.2) Thuộc tính tổng quát
Thuộc tính class
Định nghĩa và sử dụng
Thuộc tính class thường được sử dụng cho những nội dung có cùng định dạng, việc sử dụng một class thuận tiện để chỉnh sửa giống nhau của các thành phần.
Thuộc tính class được dùng chủ yếu để định dạng nội dung thông qua css, hoặc được dùng để điều khiển thành phần trong HTML thông qua script.
Thuộc tính class được sử dụng đa số các tag, ngoài trừ: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, và <title>.
Trong một tag có thể có chứa nhiều thuộc tính class, mỗi class phải ngăn cách nhau bằng một khoảng trắng.
Chú ý: Tên class không được bắt đầu bằng số, vì điều này chỉ hỗ trợ trong trình duyệt Internet Explorer.
Tên class không nên đặt quá dài hay dùng ký tự đặc biệt, vì như thế sẽ khó quản lý sau này.
Cấu trúc trong HTML
<tag class=”tenclass”><tag>
Cấu trúc trong CSS
tag.tenclass { thuộc tính: giá trị;}
Thuộc tính id
Định nghĩa và sử dụng
Một thuộc tính id chỉ được dùng duy nhất cho một tag trong cùng văn bản (giống như chứng minh nhân dân chỉ sử dụng cho một người vậy), sử dụng nhiều lần vẫn chạy nhưng khi check validator sẽ bị báo lỗi.
Thuộc tính id được dùng chủ yếu để định dạng nội dung thông qua css, hoặc được dùng để điều khiển thành phần trong HTML thông qua script.
Thuộc tính id thường được sử dụng cho những nội dung lớn, hay những nội dung có định dạng riêng (duy nhất) trong văn bản.
Trong một tag có thể có chứa duy nhất một thuộc tính id, có thể sử dụng kết hợp với thuộc tính class .
Chú ý: Tên id không được bắt đầu bằng số, vì điều này chỉ hỗ trợ trong trình duyệt Internet Explorer.
Tên id không nên đặt quá dài hay dùng ký tự đặc biệt, vì như thế sẽ khó quản lý sau này.
Cấu trúc trong HTML
<tag id=”tenid”><tag>
Cấu trúc của một tài liệu CSS
tag#tenid { thuộc tính: giá trị;}
Thuộc tính style
Định nghĩa và sử dụng
Thuộc tính style được dùng để định dạng trực tiếp cho một thành phần.
Khi sử dụng thuộc tính style, định dạng sẽ được ưu tiên hơn so với các định dạng khác.
Cấu trúc trong HTML
<tag style=”thuộc tính: giá trị;”><tag>
Thuộc tính title
Định nghĩa và sử dụng
Thuộc tính title được dùng để xác định thêm thông tin cho một thành phần.
Thông tin này thường được hiển thị khi di chuyển chuột trên thành phần.
Cấu trúc trong HTML
<tag title=”giá trị”><tag>
Bảng thuộc tính:
c.3) Thuộc tính sự kiện
d) Cách kết nối file CSS vào file HTML
Ví dụ:Thuộc tính href ta phân tích như sau:
style.css là một file có tên là style với định dạng file là .css
css là folder chứa file style.css
Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.
3. Cách viết một nội dung CSS
Viết nội dung CSS theo cấu trúc như sau:
Bộ chọn { thuộc tính: giá trị; }
Ví dụ:p { color: red; }
Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.
Ví dụ: p { color: red; float: left; padding-left: 10px; }
4. Cách viết bộ chọn CSS
Giả sử ta có file HTML như sau:
<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Tiêu đề trang web</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”screen,print” />
</head>
<body>
<div id=”content”>
<ul>
<li>Mục 01</li>
<li>Mục 02</li>
<li>Mục 03</li>
<li>Mục 04</li>
</ul>
<p>Đoạn văn</p>
</div>
<div class=”navi”>
<p>Nội dung navi</p>
</div>
</body>
</html>
a) Bộ chọn theo tên id
tag#tênid { thuộc tính: giá trị; }. Bắt buộc phải có ký tự dấu “#” và tênidví dụ: div#content { width: 600px; }
b) Bộ chọn theo tên class
tag.tênclass { thuộc tính: giá trị; }. Bắt buộc phải có ký tự dấu “.” và tênclassví dụ: div.navi { background: #333333; }
c) Bộ chọn theo cấp bậc
[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }
Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần <p> nếu sử dụng cách chọn tag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:
Ví dụ: # content p { color: #333333; } /* Chon thanh phan p theo content*/
div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/
div#content ul li { display: inline; } /* Chon thanh phan li theo content*/
5. Cách viết một comment trong file CSS
Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:/* Đây là dòng comment */
