Cách thêm CSS

Khi trình duyệt đọc biểu mẫu样式, nó sẽ định dạng tài liệu HTML dựa trên thông tin trong biểu mẫu样式.

Ba cách sử dụng CSS

Có ba cách để chèn biểu mẫu样式:

  • CSS bên ngoài
  • 样式的 nội bộ CSS
  • 样式的行内 CSS

CSS bên ngoài

Bằng cách sử dụng biểu mẫu样式 bên ngoài, bạn chỉ cần sửa đổi một tệp để thay đổi diện mạo của toàn bộ trang web!

Mỗi trang HTML phải chứa liên kết đến tệp biểu mẫu样式 bên ngoài trong thẻ <link> của phần head;

ví dụ

Kiểu样式 được định nghĩa trong phần <head> của trang HTML bằng thẻ <link>;

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

Thử trực tiếp

Bảng樣式 bên ngoài có thể được viết trong bất kỳ trình chỉnh sửa văn bản nào và phải được lưu với phần mở rộng .css.

Tệp .css bên ngoài không nên chứa bất kỳ thẻ HTML nào.

"mystyle.css" như sau:

"mystyle.css"

body {
  màu nền: lightblue;
}
h1 {
  màu: navy;
  margin-left: 20px;
}

lưu ý:Hãy không thêm khoảng trống giữa giá trị thuộc tính và đơn vị (ví dụ margin-left: 20 px;）。Cách viết đúng là:margin-left: 20px;

样式的 nội bộ CSS

Nếu một trang HTML có chỉ một bảng樣式 duy nhất, thì có thể sử dụng bảng樣式 nội bộ.

Cách này định nghĩa样式的 nội bộ trong phần tử <style> của phần head.

ví dụ

Cách này định nghĩa样式的 nội bộ trong phần <head> của trang HTML bằng phần tử <style>:

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

Thử trực tiếp

样式的行内 CSS

Cách này định nghĩa样式的行内 (còn gọi là nội bộ) có thể được sử dụng để áp dụng样式的 duy nhất cho một phần tử.

Để sử dụng样式的行内, hãy thêm thuộc tính style vào phần tử liên quan. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào.

ví dụ

Cách này định nghĩa样式的行内样式 trong thuộc tính "style" của phần tử liên quan:

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

Thử trực tiếp

lưu ý:cách này đã mất đi nhiều ưu điểm của bảng樣式 (bằng cách kết hợp nội dung với cách hiển thị). Hãy cẩn thận khi sử dụng phương pháp này.

nhiều bảng樣式

nếu trong các bảng樣式 khác nhau đã định nghĩa một số thuộc tính cho cùng một chọn lọc (element), thì sẽ sử dụng giá trị từ bảng樣式 được đọc cuối cùng.

giả sử mộtbảng樣式 bên ngoàithì đã đặt như sau cho phần tử <h1>:

h1 {
  màu: navy;
}

giả sử mộtbảng樣式 nội bộthì cũng đã đặt như sau cho phần tử <h1>:

h1 {
  màu: cam;    
}

ví dụ

nếu bảng樣式 nội bộ liên kết đến bảng樣式 bên ngoàisau đóthì phần tử <h1> sẽ là màu cam:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  màu: cam;
}
</style>
</head>

Thử trực tiếp

ví dụ

nhưng, nếu liên kết đến bảng樣式 bên ngoàitrước đóĐịnh nghĩa mẫu bên trong, thì phần tử <h1> sẽ là màu xanh đậm:

<head>
<style>
h1 {
  màu: cam;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Thử trực tiếp

Thứ tự叠加

Khi gán nhiều mẫu cho một phần tử HTML, thì mẫu nào sẽ được sử dụng?

Tất cả các mẫu trong trang sẽ được“叠加”theo quy tắc sau để tạo thành bảng mẫu“ảo”mới, trong đó ưu tiên cao nhất là:

  1. Mẫu trong dòng (trong phần HTML元素)
  2. Bảng樣式 bên ngoài và bên trong (trong phần head)
  3. Mẫu mặc định trình duyệt

Do đó,樣式 trong dòng có ưu tiên cao nhất và sẽ che phủ樣式 bên ngoài và bên trong và mẫu mặc định của trình duyệt.

Thử trực tiếp