Làm thế nào để CSS cho…

Khi trình duyệt web đọc một trang web, nó sẽ đọc file HTML và các định dạng trong File CSS

Có 3 cách để chèn CSS:

  • CSS nằm ở 1 File riêng
  • CSS nằm ngay tại Code HTML
  • CSS nằm ngay tại dòng code HTML

lam-sao-de-css

CSS nằm ở 1 File riêng

Với cách CSS nằm tại File riêng thế này thì bạn dễ dàng tìm kiếm, thay thế bố cục của Web chỉ tại 1 nơi.

Và trong File HTML sẽ có một đường Link (đường dẫn) khai báo tới FIle CSS này nằm trong <head>

Ví dụ:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Bạn có thể mở chỉnh sửa File CSS bằng mọi phần mềm Editor nào. Trong File CSS này không bao gồm thẻ HTML mà chỉ bao gồm các thuộc tính CSS và File CSS được lưu với định dạng Name.css

Đây là một ví dụ về File: mystyle.css:

body {
    background-color: lightblue;
}

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

Chú ý: trong ví dụ trên giá trị của thuộc tính margin-left là 20px và bạn không được để khoảng cách giữa 20 và px: margin-left: 20 px; -> như vậy là sai

CSS nằm trong File HTML

Bạn có thể sử dụng CSS ngay trong File HTML trong trường hợp muốn CSS cho 1 trang đơn lẻ và trang đó duy nhất.

Cách thực hiện: CSS sẽ được khai báo bằng <style>…</style> ngay trong <head> của File HTML.

Ví dụ:

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;

</style>
</head>

CSS ngay tại dòng Code HTML

Trường hợp này áp dụng để CSS cho một thẻ đặc biệt. Bạn hãy nhìn ví dụ phía dưới chúng ta sẽ thay đổi màu và căn lề trái cho thẻ <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Sử dụng nhiều kiểu CSS

Trong trường hợp thẻ HTML của bạn được định nghĩa ở nhiều kiểu CSS khác nhau như ở File CSS và trong Code HTML thì với cùng thuộc tính đó cái nào được định nghĩa sau cùng sẽ được sử dụng.

Nôm na là bạn định nghĩa màu cho <h1> trong File CSS là Navy:

h1 {
    color: navy;
}

Và bạn định nghĩa <h1> trong File HTML là Orange:

h1 {
    color: orange;    
}

thì cái nào được định nghĩa sau sẽ được sử dụng.

Ví dụ:

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

=> H1 sẽ có màu Orange (Da cam) bởi vì nó được định nghĩa sau cùng

Còn ngược lại:

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

=> H1 sẽ có màu Navy vì nó được định nghĩa sau cùng

Thứ tự ưu tiên CSS ở các dạng khác nhau

Độ ưu tiên CSS sẽ được sử dụng:

  • CSS tại dòng Code HTML ưu tiên cao nhất (nó sẽ ghi đè CSS được định nghĩa trong <head>)
  • Tiếp đó mới đến các CSS được định nghĩa trong <head>
  • Các định nghĩa CSS trong <head> cái nào định nghĩa sau cùng sẽ được sử dụng

Trên đây bạn đã học được các cách sử dụng CSS và độ ưu tiên sử dụng của nó. Bạn hãy thực hành thành thục trước khi đến bài tiếp theo trong Seri tự học CSS.

Chúc bạn vui vẻ! Đừng quên để lại comment những gì bạn học được nhé!