Cách kết hợp html với css

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.

1. CSS nội tuyến (Inline CSS)
2. CSS nội bộ (Internal CSS)
3. CSS bên ngoại (External CSS)

Nội dung chính

• CSS nội tuyến (Inline CSS)
  • Sự bất lợi của CSS nội tuyến
• CSS nội bộ (Internal CSS)
• CSS bên ngoài (External CSS)
• Ghi đè quy tắc CSS

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ẻ

Ví dụ 2:

  
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ẻ

  3. Muốn gặp là gặp (chèn css cho phần tử bất kỳ)

  Nhưng đôi khi chúng ta chỉ mún thay đổi thuộc tính Css của 1 phần tử nhỏ trong cấu trúc. Thì chúng ta có thể thêm trực tiếp Css vào phần tử.

  Để làm được việc đó thì chúng ta dùNg thuộc tính toàn nầu Style

  Cú pháp liên kết Html với Css là:

  style=”   ” >……

  Trong đó X là phần tử bất kỳ nào đó.

  Chú ý: Ở cách 2 và cách 3 điều là chữ Style. Nhưng 1 cái là phần từ, 1 cái là thuộc tính toàn cầu. Ý nghĩa và cách viết của chúng khác nhau.

  Tất nhiên 3 cách này có thể sử dụng cùng nhau. Vấn đề là bạn bố trí chọn lựa sao cho dễ quản lý chỉnh sửa sau này.