CSS được thêm vào các trang HTML để định dạng trang web theo quy tắc CSS. Có ba cách để liên kết CSS với HTML. Nội dung chính
CSS nội tuyến [Inline CSS]
CSS nội tuyến [inline] được sử dụng để áp dụng CSS trên một dòng hoặc một phần tử. Để sử dụng CSS nội tuyến, bạn phải sử dụng thuộc tính style cho thẻ có liên quan.
Cú pháp:
Ví dụ:
CSS nội tuyến áp dụng cho thẻ heading này.
Thẻ p này không bị ảnh hưởng.
Ouput:
Sự bất lợi của CSS nội tuyến
- Bạn không thể sử dụng dấu nháy kép '"' bên trong CSS nội tuyến. Ví nếu bạn dùng dấu nháy kép thì trình duyệt sẽ hiểu đó là dấu kết thúc thuộc tính style.
- CSS nội tuyến không được tái sử dụng.
- CSS nộ tuyến khó khăn trong việc chỉnh sửa vì chúng không được lưu trữ ở một nơi.
- Không thể tạo các pseudo-code và pseudo-class với CSS nội tuyến.
- CSS nội tuyến không lợi dụng bộ nhớ cache của trình duyệt.
CSS nội bộ [Internal CSS]
Nội bộ CSS được sử dụng để áp dụng CSS trên một tài liệu hoặc trang. Nó có thể ảnh hưởng đến tất cả các yếu tố của trang. Nó được viết bên trong thẻ trong phần của html.
Ví dụ 1:
p { color:blue }
Ví dụ 2:
body { background-color: linen; } h2 { color: red; margin-left: 80px; }CSS nội bộ áp dụng cho thẻ heading này.
Thẻ p này không bị ảnh hưởng.
Ouput:
CSS bên ngoài [External CSS]
CSS bên ngoài được sử dụng để áp dụng CSS trên nhiều trang. Ở đây, chúng ta viết tất cả các mã CSS trong một tệp css. Phần mở rộng của nó phải là .css ví dụ style.css.
Ví dụ:
File: style.css
body { background-color: lightblue; } h2 { color: navy; margin-left: 20px; }
Bạn cần phải liên kết file style.css này với các trang html như sau:
Liên kết với tập tin CSS bên ngoài.
Màu nền là lightblue.
Ouput:
Thẻ phải được sử dụng trong phần của html.
Ghi đè quy tắc CSS
Dưới đây là các quy tắc để ghi đè quy tắc CSS.
Bất kỳ CSS nội tuyến nào cũng có ưu tiên cao nhất. Vì vậy, nó sẽ ghi đè bất kỳ quy tắc được định nghĩa trong thẻ ... hoặc các quy tắc được định nghĩa trong bất kỳ tập tin CSS bên ngoài.
Bất kỳ quy tắc nào được định nghĩa trong thẻ ... sẽ ghi đè các quy tắc được định nghĩa trong bất kỳ tập tin CSS bên ngoài.
Bất kỳ quy tắc nào được định nghĩa trong tập tin CSS bên ngoài đều có mức độ ưu tiên thấp nhất và các quy tắc được xác định trong tệp này sẽ chỉ được áp dụng khi hai quy tắc trên không áp dụng.
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS
- Sử dụng CSS
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:
Html
- index.html
css
- style.css
Click vào dấu [+] để xem cấu trúc.
Nội fung file index.html
Tiêu
đề trang web
...Phần thân viết ở đây...
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:
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ẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.
Tiêu đề trang web
...Phần thân viết ở đây...
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.
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ị; }
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.
p { color: red; float: left; padding-left: 10px; }
Đoạn code trên tương tự như đoạn code sau:
p { color: red; float: left; padding-left: 10px; }
Cách viết bộ chọn CSS
Giả sử ta có file HTML như sau:
Tiêu
đề trang web
- Mục 01
- Mục 02
- Mục 03
- Mục 04
Đoạn văn
Nội dung navi
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ênid
div#content { width: 600px; }
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ênclass
div.navi { background: #333333; }
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
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:
div#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*/
Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo.
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 */