Cách thêm CSS vào trang HTML

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    11 thg 9, 2022

  • Số lượt xem

    1204 lượt xem


Khi trình duyệt đọc những đoạn mã CSS, nó sẽ định dạng các thẻ của trang web sao cho đúng với nội dung của đoạn mã.

Cách để chèn CSS

Có ba cách để chèn những đoạn CSS:

  • External (liên kết với file bên ngoài thông qua thẻ <link>)
  • Internal (viết những đoạn CSS bên trong thẻ <style> của trang HTML)
  • Inline (viết trực tiếp CSS cho từng thẻ HTML thông qua thuộc tính style của thẻ)

External CSS

Với cách thêm CSS bằng external, bạn có thể thay đổi cái nhìn của toàn bộ trang web bằng cách thay đổi chỉ một file!

Mỗi trang HTML phải liên kết với file CSS bên ngoài bằng thẻ <link> được đặt trong phần <head> của trang.

Ví dụ

<!DOCTYPE html>  <html>  <head>  <link rel="stylesheet" href="mystyle.css">  </head>  <body>    <h1>This is a heading</h1>  <p>This is a paragraph.</p>    </body>  </html>

 

External file phải được lưu với phần mở rộng (.css).

External .css file không nên chứa bất kỳ thẻ HTML nào.

Đây là nội dung của file "mystyle.css" được liên kết ở đoạn code bên trên:

"mystyle.css"

body {    background-color: lightblue;  }    h1 {    color: navy;    margin-left: 20px;  }

Chú ý: Không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị:
Đúng: margin-left: 20 px;
Sai: margin-left: 20px;

 

Internal CSS

Thêm CSS bằng internal chỉ được dùng khi trang web chỉ có một style duy nhất.

Internal style được viết ở thẻ <style> nằm ở phần head của trang HTML.

Ví dụ

<!DOCTYPE html>  <html>  <head>  <style>  body {    background-color: linen;  }    h1 {    color: maroon;    margin-left: 40px;  }  </style>  </head>  <body>    <h1>This is a heading</h1>  <p>This is a paragraph.</p>    </body>  </html>

 

Inline CSS

Chỉ nên dùng inline CSS khi một thẻ chỉ có một style duy nhất.

Để sử dụng inline CSS, ta viết nội dung CSS vào thuộc tính style của thẻ. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào.

Ví dụ

<!DOCTYPE html>  <html>  <body>    <h1 style="color:blue;text-align:center;">This is a heading</h1>  <p style="color:red;">This is a paragraph.</p>    </body>  </html>

Tip: Hạn chế sử dụng inline CSS vì tốn thời gian cho việc chỉnh sửa và phát triển trang web sau này.

 

Style nhiều lần trong CSS

Với cùng một selector, ta thực hiện css một thuộc tính với nhiều giá trị khác nhau trong nhiều lần, thì chỉ lần thực hiện css cuối cùng được thực thi.

Giả sử ta có một đoạn code css thực hiện style thuộc tính color với giá trị "navy"cho thẻ <h1> như bên dưới:

h1 {    color: navy;  }

 

Sau đó, ta cũng có một đoạn code css thực hiện style thuộc tính color cho thẻ <h1> nhưng với giá trị là "orange" :

h1 {    color: orange;     }

 

Ví dụ

Nếu style theo kiểu internal được viết sau thẻ <link> dùng cho việc external , thẻ <h1> sẽ có màu chữ là "orange":

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

 

Ví dụ

Ngược lại, thẻ <h1> sẽ có màu chữ là "navy": 

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

 

Thứ tự ưu tiên

Điều gì sẽ xảy ra khi chúng ta thực hiện style một thẻ HTML bằng nhiều cách?

Dưới đây là thứ tự ưu tiên của những cách css, giảm dần từ trên xuống:

  1. Inline style (bên trong thẻ HTML)
  2. External and internal style (trong phần head của trang)
  3. Browser default

Vậy, cách inline style có mức độ ưu tiên cao nhất, nó sẽ ghi đè những cách style còn lại.

 


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.