Giới thiệu về CSS

Date:13 tháng 02 năm 2020
Category: Học CSS
Type: Học

Cách làm việc của CSS

Cách viết các quy tắc

Một stylesheet được tạo bởi nhiều chỉ dẫn kiểu dáng (còn gọi là các quy tắc kiểu dáng hay style rule), quy định cách hiển thị của một phần tử hay nhóm phần tử HTML.

Ví dụ sau gồm hai quy tắc. Quy tắc đầu tiên khiến mọi phần tử h1 đều có màu xanh; quy tắc thứ hai khiến mọi phần tử p (đoạn văn bản) có chữ lớn, có phông sans-serif (phông chữ không chân):

h1 { color: green; }
p {
  font-size: large;
  font-family: sans-serif;
}

Trong thuật ngữ CSS, mỗi quy tắc CSS gồm hai phần:

selector: dùng để chọn một hoặc nhiều phần tử.
Các declaration: cung cấp các chỉ dẫn kiểu dáng cho phần tử được chọn.

Mỗi declaration (khai báo) gồm một cặp:

property: thuộc tính, như color trong ví dụ trên.
value: giá trị của thuộc tính, như green trong ví dụ trên.

Các khai báo đặt giữa hai dấu ngoặc nhọn { và } phân cách nhau bởi dấu chấm phảy.

/* quy tắc CSS chỉ có 1 khai báo */
selector { property: value; }
/* quy tắc CSS có nhiều khai báo */
selector {
  property1: value1;
  property2: value2;
  property3: value3;
}

Các selector

Trong ví dụ trước, các phần tử h1 và p được dùng như các selector. Chúng được gọi là element selector (bộ chọn phần tử), và là kiểu selector cơ bản nhất.

Một kiểu selector khác là ID selector, chọn một phần tử dựa theo thuộc tính id của nó. ID selector được xác định bởi biểu tượng # đặt trước. Ví dụ #recipe là một ID selector chọn phần tử có id=recipe.

Các declaration

Một declaration là một cặp property/value. Một quy tắc CSS có thể gồm một hoặc nhiều khai báo; ví dụ, quy tắc cho phần tử p ở ví dụ trên gồm hai khai báo font-size và font-family. Mỗi khai báo phải kết thúc bằng dấu chấm phảy. Toàn bộ khối gồm hai dấu ngoặc nhọn và các khai báo đặt bên trong nó gọi là declaration block (khối khai báo).

Vì CSS bỏ qua các khoảng trắng và dấu xuống dòng bên trong khối khai báo, nên người ta thường viết mỗi khai báo trên một dòng:

p {
  font-size: large;
  font-family: sans-serif;
}

Cách áp dụng stylesheet cho tài liệu HTML

Stylesheet ngoài

Một stylesheet ngoài là một file văn bản có phần mở rộng .css chứa các quy tắc CSS. Để áp dụng stylesheet ngoài cho tài liệu HTML, ta liên kết tới nó bằng phần tử link đặt trong head:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Stylesheet nhúng

Là stylesheet được viết trong phần tử style, trong phần head:

<head>
  <title>Required document title here</title>
  <style>
    /* các quy tắc CSS đặt ở đây */
  </style>  
</head>

Inline style

Inline style là những khai báo viết như giá trị của thuộc tính style của một phần tử. Khác với styesheet ngoài và stylesheet nhúng, các inline style không có selector, chỉ có các khai báo:

<h1 style="color: red; margin-top: 2em">Introcution</h1>

Các khai niệm lớn

Thừa kế

Cấu trúc tài liệu HTML

Tài liệu HTML có cấu trúc cha/con. Mọi phần tử đều là con/cháu… của phần tử gốc html.

Cha và con

Mọi phần tử nằm bên trong một phần tử khác, gọi là phần tử con cháu (hay descendant) của phần tử ấy. Ví dụ, phần tử h1, h2, p, em và img là các descendant của body.

Một phần tử nằm trực tiếp bên trong một phần tử khác gọi là phần tử con (child) của phần tử ấy, phần tử chứa gọi là phần tử cha (parent). Ví dụ, phần tử em là phần tử con của p, và p là phần tử cha của img.

Mọi phần tử ở mức cao hơn phần tử nào đó trong cây thừa kế gọi là phần tử ông bà (ancestor) của phần tử ấy. Hai phần tử có cùng phần tử cha gọi là hai phần tử anh em (sibling).

Tính thừa kế

Khi viết một quy tắc liên quan đến font chữ cho phần tử p, tất cả các phần tử p trong tài liệu cũng như văn bản bên trong chúng bị ảnh hưởng. Chúng ta cũng sẽ thấy rằng các phần tử em bên trong p cũng bị tác động. Nhưng img nằm trong p không bị ảnh hưởng bởi quy tắc liên quan đến font không có tác dụng với ảnh!

Ta nói rằng, phần tử con thừa kế các quy tắc CSS từ phần tử cha (không thừa kế mọi thứ, chỉ thừa kế các quy tắc có ý nghĩa với chúng).

Xung đột style: Cascade

Chuyện gì xảy ra nếu một stylesheet ngoài quy định phần tử h1 có chữ màu đỏ, trong khi một stylesheet nhúng lại quy định nó có chữ màu tím?

Khi có xung đột style sảy ra, CSS áp dụng cơ chế cascade (xếp chồng) để giải quyết.

Độ ưu tiên

Nếu bạn không sử dụng bất cứ style nào, các phần tử được render dựa theo stylesheet của trình duyệt, được gọi là user agent stylesheet. Người dùng có thể áp dụng stylesheet của họ, được gọi là user stylesheet, để ghi đè lên user agent stylesheet. Ta nói rằng các khai báo trong user stylesheet có độ ưu tiên cao hơn các khai báo tương tự trong user agent stylesheet.

Danh sách dưới đây, liệt kê các khai báo có mực độ ưu tiên từ cao nhất đến thấp nhất:

khai báo được đánh dấu !important của người dùng.
khai báo được đánh dấu !important của tác giả.
khai báo trong stylsheet viết bởi tác giả.
khai báo trong stylesheet viết bởi người dùng.
khai báo trong stylesheet mặc định của trình duyệt.

Độ cụ thể (Specificity)

Xung đột cũng có thể xảy ra trong cùng một stylesheet. Khi đó kiểu của selector được dùng để quyết định người thắng cuộc. Các selector cụ thể hơn sẽ thắng selector ít cụ thể hơn. Chẳng hạn ID selector sẽ thắng element selector.

Thứ tự

Khi hai quy tắc có độ cụ thể giống nhau, quy tắc đặt sau sẽ thắng quy tắc đặt trước.

Ví dụ, quy tắc cuối cùng color: green sẽ thắng:

<style>
  p { color: red; }
  p { color: blue; }
  p {color: green; }
</style>

Trong cùng một khối, khai báo đặt sau cũng thắng khai báo đặt trước:

<style>
	p {
    color: red;
    color: blue;
    color: green;
  }
</style>

Câu chuyện xảy ra tương tự nếu import stylesheet từ nhiều nguồn khác nhau:

external.css

h1 { color: red; }

HTML document

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    <style>
    	@import url(external.css); /* đặt thành màu đỏ trước */
      h1 { color: purple; } /* ghi đè thành màu tím */      
    </style>
  </head>
  <body>
  	<h1 style="color: blue">Heading 1</h1> /* màu xanh đặt cuối và thắng */
  </body>
</html>

Box Model

Mọi phần tử được xem như một hộp hình chữ nhật khi hiển thị trên trình duyệt, đó là mô hình Box Model.

Bạn có thể áp dụng các thuộc tính như: border, margin, padding và background cho những hộp này, thậm chí định vị lại chúng trên trang.

Nhóm các selector

Khi cần áp dụng một quy tắc cho nhiều phần tử cùng lúc, bạn có thể nhóm các selector lại với nhau, phân cách nhau bởi dấu phảy. Ví dụ:

h1, h2, p, em, img { border: 1px solid blue; }

Đơn vị đo trong CSS

Đơn vị đo tuyệt đối

px (pixel): bằng 1/96 inches (trong CSS3).
in: một inches
mm: một milimét
cm: một centimét
q: 1/4 milimét
pt: bằng 1/72 inches
pc: bằng 12 pt

Đơn vị được dùng phổ biến nhất trong CSS là px.

Đơn vị đo tương đối

em: bằng kích thước font chữ trong phần tử hiện tại.
ex: bằng chiều cao của chữ “x” trong font chữ hiện tại.
rem: bằng kích thước của font chữ trong phần tử gốc (html)
ch: bằng độ rộng của số 0 trong font chữ hiện tại.
vw: 1/100 độ rộng viewport.
vh: 1/100 chiều cao viewport.