Cách Thêm CSS Vào HTML (Phân Biệt Inline CSS, Internal CSS Và ...

Trang chủ » Chèn Css Trực Tiếp Vào Html » Cách Thêm CSS Vào HTML (Phân Biệt Inline CSS, Internal CSS Và ...

Có thể bạn quan tâm

Để làm đẹp các thẻ HTML chúng ta sử dụng CSS, vậy làm thể nào để thêm CSS vào HTML?

Bài viết này mình xin giới thiệu đến các bạn 3 cách thêm CSS vào HTML.

Phân tích ưu nhược điểm của từng cách làm và cách áp dụng hiểu quả.

Đồng thời xác định thứ tự ưu tiên khi có nhiều hơn 1 style được áp dụng.

Cách chèn CSS vào HTML

Có ba cách:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS sẽ áp dụng trực tiếp lên một đối tượng bằng thuộc tính style.

  • Cách dùng: thêm thuộc tính style vào thẻ mở với thuộc tính CSS bất kỳ.
  • Phạm vi ảnh hưởng: Duy nhất trên 1 đối tượng.

Ví dụ 1: Tạo chữ màu cam cho thẻ <p> ta có đoạn code như sau:

<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style=”color:orange”>Chữ này màu cam thứ 1</p> <p style=”color:orange”>Chữ này màu cam thứ 2</p> </body> </html> Mẹo:Việc sử dụng inline CSS chỉ có tác dụng cho 1 phần tử, vì thế trường hợp cần style cho nhiều phần tử giống nhau sẽ sinh ra nhiều đoạn code tương tự làm nặng file HTML. Vì thế nên cân nhắc hạn chế sử dụng cách làm này.

Internal CSS

Internal CSS sẽ đặt các thuộc tính CSS và đầu trang HTML và chỉ có tác dụng trên trang đó.

  • Cách dùng: Thêm CSS vào thẻ <style>, chèn thẻ style vào phần <head> của trang HTML
  • Phạm vi ảnh hường: Chỉ trên 1 trang HTML

Cũng ví dụ thêm style chữ màu cam cho thẻ <p> như trên ta sẽ viết như sau:

<!DOCTYPE html> <html> <head> <title>Internal CSS</title> <style type="text/css"> p{ color: orange; } </style> </head> <body> <p>Chữ này màu cam thứ 1</p> <p>Chữ này màu cam thứ 2</p> </body> </html> Mẹo:Internal CSS chỉ có tác dụng trên 1 trang HTML vì thế nên sử dụng khi các thuộc tính là duy nhất trên trang HTML đó, trường hợp thuộc tính lặp lại trên nhiều trang cách làm này không được tối ưu.

External CSS

External CSS sẽ đặt thuộc tính CSS trên một file (*.css) riêng biệt, khi đó bạn có thể tham chiếu đến nhiều trang HTML khác nhau.

  • Cách dùng: Thêm CSS vào file (*.css), chèn file (*.css) vào HTML bằng thẻ <link> đặt ở phần <head>
  • Phạm vi ảnh hường: Trên nhiều trang HTML

Cũng ví dụ 1 thì bây giờ bạn sẽ tạo 2 file, 1 file html và 1 file css như sau:

<!DOCTYPE html> <html> <head> <title>External CSS</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <p>Chữ này màu cam thứ 1</p> <p>Chữ này màu cam thứ 2</p> </body> </html>

File style.css

p{ color: orange; } Mẹo: Sử dụng external CSS là rất tối ưu khi các thuộc tính CSS lặp lại nhiều lần trên các thẻ, các trang HTML khác nhau, đồng thời thuận tiện cho việc thay đổi, khi chỉ cần chỉnh sửa 1 tệp duy nhất.

Thứ tự ưu tiên

Trường hợp 1:  Trên 1 thẻ HTML vừa áp dụng Internal CSS vừa áp dụng external CSS thì cái nào được ưu tiên?

Giả sử thẻ <span> được định kiểu internal CSS như sau:

span{color:red}

Đồng thời thẻ <span> cũng được định kiểu external CSS như sau

span{color:orange}

Kết quả khi chèn thẻ <link> của external CSS bên dưới thẻ <style> của internal CSS thì nội dung trong thẻ <span> có màu cam.

<head> <link rel="stylesheet" type="text/css" href="css/style.css"> <style> span { color: red; } </style> </head>

Ngược lại thì nội dung thẻ <span> có màu đỏ.

Vậy thứ tự ưu tiên tùy thuộc vào vị trí chèn trong phần <head>, vị trí phía dưới sẽ có độ ưu tiên cao hơn vị trí phía trên.

Trường hợp 2:  Trên thẻ HTML áp dụng cả 3: inline CSS, internal CSS và external CSS thì kiểu nào sẽ được ưu tiên?

Giả sử thẻ <h1> được style cả 3 kiểu như sau:

<!DOCTYPE html> <html> <head> <title>Thứ tự ưu tiên CSS</title> <style type="text/css"> h1{ font-size: 18px; } </style> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 style="font-size: 24px;">Heading 1</h1> </body> </html>

Trong trường hợp này các thuộc tính sẽ xếp chồng lên nhau theo thứ tự ưu tiên như sau:

  • Inline CSS
  • Internal CSS và External CSS
  • Style mặc định của trình duyệt

Vậy inline CSS có độ ưu tiên cao nhất. Và theo ví dụ trên thì thẻ <h1> sẽ có cỡ chữ là 24px.

Từ khóa » Chèn Css Trực Tiếp Vào Html