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.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:
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.
Ví dụ:
Ouput:
body { background-color: lightblue; } h2 { color: navy; margin-left: 20px; }
Sự bất lợi của CSS nội tuyến
Liên kết với tập tin CSS bên ngoài.
Màu nền là lightblue.
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.
- 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
Tiêu
đề trang web
...Phần thân viết ở đây...
...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
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
Tiêu đề trang web
index.html
...Phần thân viết ở đây...
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:
p { color: red; float: left; padding-left: 10px; }
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.
p { color: red; float: left; padding-left: 10px; }
Tiêu đề trang web
...Phần thân viết ở đây...
Html
Tiêu
đề trang web
index.html
- Mục 01
- Mục 02
- Mục 03
- Mục 04
Đoạn văn
css
Nội dung navi