Thêm CSS vào trang

Trong trang này chúng ta sẽ tìm hiểu về các cách thêm CSS vào trang.

PreviousCSS Selector NextComment trong CSS

Last updated 2 years ago

Thêm CSS vào trang

Trong trang này chúng ta sẽ tìm hiểu về các cách thêm CSS vào trang.

Tổng quan

CSS được tạo ra để hỗ trợ HTML do đó khi trình duyệt đọc đến phần khai báo CSS, trình duyệt sẽ format lại cách thể hiện của trang dựa vào phần CSS đó.

Có 3 cách để thêm CSS vào trang cụ thể như sau:

Inline CSS (thêm trực tiếp vào thẻ)

Inline CSS là cách khai báo CSS giống cách khai báo giá trị của thuộc tính style của HTML

các bạn có thể tham khảo thêm tại đây

Inline CSS được sử dụng để thêm CSS cho một thẻ HTML bằng cách thêm thuộc tính style cho thẻ đó và giá trị chính là các cặp property: value ngăn cách bởi dấu chấm phẩy (;) thể hiện CSS muốn thêm.

<!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>

Internal CSS(CSS nội bộ)

Internal CSS(CSS nội bộ) được sử dụng để thêm CSS vào một trang cụ thể. Tất cả các khai báo CSS được đặt trong thẻ <style> và thẻ <style> này được đặt trong thẻ <head> của trang.

<!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>

External CSS(Thêm file .css)

External CSS được hiểu là chúng ta sẽ tạo các file .css chứa các khai báo CSS sau đó import các file này vào trang cần áp dụng. Điều này cho phép chúng ta chỉ cần chỉnh sửa 1 chỗ duy nhất (file .css) để thay đổi ở nhiều trang.

Cách sử dụng

Đầu tiên chúng ta phải tại file .css để chứa các luật CSS

file mystyle.css

body {
  background-color: lightblue;
}

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

Để thêm file .css vào trang chúng ta sẽ sử dụng thẻ <link> và đặt thẻ này vào thẻ <head> của trang

<!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>

Lưu ý thứ tự khai báo

Khái niệm

Thứ tự khai báo của của Internal CSS và External CSS khá quan trọng trong việc CSS nào sẽ được khai báo.

Trong trang nếu CSS của Internal CSS/External CSS nào được khai báo sau thì khai báo đó được áp dụng trong trang

Ví dụ

file: mystyle.css

h1 {
  color: navy;
}

Internal CSS

h1 {
  color: orange;   
}

Internal CSS khai báo sau External CSS

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

Kết quả là <h1> có màu orange

External CSS khai báo sau Internal CSS

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

Kết quả là <h1> có màu navy

Thứ tự ưu tiên

Trong trường hợp trang có nhiều cách khai báo CSS cho cùng một selector trong trang thì thứ tự ưu tiên sẽ có quy định như sau:

Inline CSS
Internal CSS/External CSS
CSS mặc định của Browser

CSS inline sẽ có độ ưu tiên cao nhất ==> CSS Internal hoặc CSS external nằm trong <head> ==> CSS mặc định của trình duyệt