Bài 28: HTML và CSS từ Zero đến Hero(Bài 05 CSS)

 

 

Độ đậm của chữ

Sau khi đã thiết lập được hai thuộc tính quan trọng của văn bản là kiểu chữ và kích thước rồi, các thuộc tính còn lại khá đơn giản. Ví dụ, để thiết lập độ đậm nhạt cho chữ, sử dụng thuộc tính font-weight với các đặc tính sau,

– Giá trị (values): normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

– Mặc định: normal

– Áp dụng: cho mọi phần tử

– Kế thừa: có

Lưu ý: trong các giá trị có thể thiết lập cho thuộc tính font-weight có “inherit”, nếu được thiết lập, giá trị này có nghĩa là thông báo một cách tường minh rằng: phần tử sẽ kế thừa giá trị từ phần tử cha, điều này vừa giúp tránh bị ghi đè bởi các CSS khác, vừa đảm bảo phần tử sẽ luôn kế thừa thuộc tính font-weight từ cha.

Mặc dù trong dãy các giá trị về độ đậm nhạt của phông gồm có bốn từ khóa mô tả (normal, bold, bolder, lighter) và chín giá trị (100,…,900), tuy nhiên, trong thực tế các phông thường chỉ có hai chế độ là normal và bold, do vậy, đây chính là hai giá trị thường được sử dụng. Các trình duyệt cũng thường không hỗ trợ đầy đủ các giá trị về độ đậm nhạt. Với các giá trị số, thông thường giá trị từ 600 trở lên sẽ là chữ đậm.

Ví dụ,

dt { font-weight: bold; }

Kiểu chữ nghiêng

Sử dụng thuộc tính font-style để thiết lập kiểu dáng (posture) của văn bản. Văn bản thường có hai kiểu dáng là kiểu đứng (normal) và kiểu nghiêng (italic hoặc oblique). Dưới đây là một số đặc tính của font-style,

– Giá trị: normal | italic | oblique | inherit

– Mặc định: normal

– Áp dụng: cho mọi phần tử

– Kế thừa: có

Cả hai giá trị italic và oblique đều hiển thị dạng chữ nghiêng, tuy nhiên, italic là một kiểu chữ được thiết kế riêng, trong khi oblique là kiểu chữ thông thường được hiển thị ở dạng nghiêng. Tuy vậy, kết quả hiển thị của văn bản, ứng với hai giá trị này, trên hầu hết các trình duyệt là như nhau.

Kiểu chữ hoa đặc biệt

Sử dụng thuộc tính font-variant với giá trị là small-caps để chuyển dạng chữ thường sang dạng chữ hoa,với kích thước ở dạng chữ hoa đúng bằng kích thước ở dạng chữ thường.

Dưới đây là một số đặc tính của font-variant,

– Giá trị: normal | small-caps | inherit

– Mặc định: normal

– Áp dụng: cho mọi phần tử

– Kế thừa: có

Để ý chữ small-caps chính là viết tắt của small capitals (chữ hoa nhỏ).

Viết rút gọn các thuộc tính phông

Ở các phần trên đã tìm hiểu một số thuộc tính liên quan đến phông chữ. Để tránh việc lặp lại và giảm số dòng mã, có thể sử dụng thuộc tính font để gom các định dạng liên quan đến phông vào một luật CSS.

Dưới đây là một số đặc tính của font,

– Giá trị: font-style font-weight font-variant font-size/line-height font-family | inherit

– Mặc định: tùy thuộc vào giá trị của mỗi thuộc tính được liệt kê ở trên

– Áp dụng: cho mọi phần tử

– Kế thừa: có

Giá trị của thuộc tính font chính là giá trị của tất cả các thuộc tính đã được liệt kê ở trên, mỗi giá trị cách nhau bằng một khoảng trắng. Lưu ý: tính thứ tự của các giá trị là quan trọng, do vậy không thể xáo trộn vị trí của chúng, thứ tự cụ thể là,

{ font: style weight variant size/line-height font-family }

Ở dạng tối giản, thuộc tính font cũng phải có hai giá trị là font-size và font-family. Nếu thiếu một trong hai hoặc đặt sai vị trí sẽ dẫn tới luật bị lỗi. Ví dụ một luật tối giản,

p { font: 1em sans-serif; }

Nếu trong luật đã có hai giá trị bắt buộc (font-size và font-family) rồi, thì các giá trị còn lại sẽ là tùy chọn, miễn là đứng trước font-size. Nếu các giá trị của style, weight và variant không xác định thì CSS sẽ sử dụng giá trị mặc định là normal. Trong thuộc tính font còn có một giá trị mới là line-height, đây là chiều cao của hàng văn bản, được sử dụng để thêm khoảng trắng giữa các hàng, giá trị này nằm ngay sau giá trị font-size, ngăn cách bằng dấu xuyệt (/). Ví dụ,

h3 { font: oblique bold small-caps 1.5em/1.8em Verdana, sans-serif; }

h2 { font: bold 1.75em/2 sans-serif; }

Lab2.2.c (exercise 12-3, p.239; exercise 12-4, p.240; exercise 12-5, p.242 [3])

2.2.2       Màu chữ

Để thiết lập màu cho văn bản, sử dụng thuộc tính color. Dưới đây là một số đặc tính của color,

– Giá trị: giá trị màu (tên màu hoặc giá trị số) | inherit

– Mặc định: tùy thuộc vào trình duyệt và thiết lập của người dùng

– Áp dụng: cho mọi phần tử

– Kế thừa: có

Giá trị của thuộc tính color có thể là tên màu, CSS2 cung cấp sẵn 17 tên màu, CSS3 cung cấp sẵn 140 tên màu. Ví dụ một số tên màu,

Black, white, purple, lime, navy, aqua, silver, maroon, fuchsia, olive, blue, orange, gray, red, green, yellow, teal.

Giá trị của thuộc tính color cũng có thể là giá trị số, bắt đầu là dấu #, hoặc rgb sau đó là bộ ba giá trị của ba màu cơ bản là Red, Green và Blue (RGB), Ví dụ, màu xám sẽ có giá trị là #666 hoặc #666666.

Ví dụ, để phần tử h1 có màu xám, có thể sử dụng một trong các luật CSS sau,

h1 { color: gray; }

h1 { color: #666666; } /* R = 66, G = 66, B = 66 */

h1 { color: #666; } /* R = 6, G = 6, B = 6 */

h1 { color: rgb(102,102,102); }

Vì thuộc tính color có tính kế thừa, nên để thiết lập màu cho toàn bộ văn bản, thay vì làm cho từng phần tử thì có thể thực hiện một lần cho phần tử body. Ví dụ,

body { color: gray; }

Để ý là thuộc tính color không phải chỉ để thiết lập màu cho chữ, mà theo mô tả của CSS thì nó được sử dụng để thay đổi “màu mặt trước” (foreground color đối lập với màu nền – background) của một phần tử. Mặt trước bao gồm văn bản và đường biên. Do vậy, khi thiết lập màu cho phần tử (bao gồm phần tử img) bằng thuộc tính color cũng đồng thời thiết lập màu cho đường biên.

2.2.3       Giới thiệu thêm một số bộ chọn

Ở các phần trước, đã biết cách sử dụng tên của phần tử để làm bộ chọn (selector). Ngoài ra, trong trường hợp nhiều bộ chọn có thuộc tính và giá trị giống nhau thì có thể nhóm lại với nhau để thu gọn mã nguồn.

Ví dụ, bộ chọn là tên phần tử,

p { color: navy; }

Ví dụ, nhóm các bộ chọn,

p, ul, td, th { color: navy; }

Dùng bộ chọn là tên của phần tử có cái bất lợi là nó sẽ áp dụng cho mọi phần tử có trong tài liệu HTML. Do vậy, trong một số trường hợp, nếu chỉ muốn áp dụng các thuộc tính cho một hoặc một số phần tử thì không thể thực hiện được.

Để định dạng các phần tử HTML một cách linh hoạt, phần này sẽ giới thiệu thêm ba loại bộ chọn nữa, đó là: chọn theo các hậu duệ (descendant selectors), chọn theo ID (ID selectors) và chọn theo class (class selectors).

Trong phần này, sử dụng đoạn mã HTML sau để tiện theo dõi và kiểm tra,

[index.html]

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Contextual selector</title>

  <style>

 

  </style>

</head>

<body>

  <h2>The Back of the New $20</h2>

  <p>Have you seen the "Series <em>2004</em> $20 Notes"? The U.S. Treasury has rolled out yet another revamp of the U.S. <a href=""><em>twenty</em></a> dollar bill in an effort to stop those pesky counterfeiters once and for all.</p>

  <h2>The first 20s</h2>

  <ul>

    <li><h3>This is <em>first</em> item</h3></li>

    <li>This is <em>second</em> item</li>

    <li><h2>This is <em>third</em> item</h2></li>

  </ul>

  <h2>Too Many <em>20s</em></h2>

  <p>The last paragraph</p>

  <h2>Another 20s</h2>

</body>

</html>

Chọn theo các hậu duệ

Như đã biết, phần tử hậu duệ là các phần tử chứa bên trong một phần tử khác (gồm: con, cháu, chắt…). Chọn theo hậu duệ là một trường hợp của phương pháp lựa chọn các phần tử theo ngữ cảnh (contextual selector).

Lựa chọn theo ngữ cảnh nghĩa là lựa chọn dựa vào mối quan hệ giữa các phần tử.

Để chọn theo hậu duệ, sử dụng một dãy các bộ chọn, mỗi bộ chọn ngăn cách nhau bằng một khoảng trắng. Khoảng trắng này có nghĩa là phần tử phía sau sẽ là hậu duệ của phần tử phía trước. Ví dụ,

li em { color: red }

Bộ chọn trên có nghĩa là: chỉ có các phần tử em là hậu duệ của phần tử li mới có chữ màu đỏ, trong khi các phần tử em còn lại sẽ không bị tác động bởi luật CSS này. Xem hình ví dụ,

Ví dụ sau sẽ kết hợp nhóm bộ chọn và chọn theo hậu duệ, mọi phần tử em nằm trong h1 hoặc h2, hoặc h3 sẽ có chữ màu đỏ.

h1 em, h2 em, h3 em { color: red; }

Bộ chọn theo hậu duệ cũng có thể lồng nhau theo nhiều cấp, ví dụ sau sẽ thiết lập chữ màu đỏ cho các phần tử em nằm trong h3 và h3 phải nằm trong li.

li h3 em { color: red; }

Các bộ chọn theo ngữ cảnh khác

Chọn theo các hậu duệ là một trong bốn loại bộ chọn theo ngữ cảnh, CSS3 gọi các bộ chọn này là bộ chọn tổ hợp (combinators), các bộ chọn theo ngữ cảnh khác gồm: chọn các phần tử con (child selectors), chọn một em liền sau (adjacent sibling selectors) và chọn nhiều em (general sibling selectors).

– Chọn các phần tử con

Cách chọn này cũng tương tự như chọn theo các hậu duệ, tuy nhiên, chỉ giới hạn cho các hậu duệ là con trực tiếp. Con trực tiếp của một phần tử được hiểu là các phần tử nằm ở cấp liền kề trong tài liệu HTML (không có cấp nào xen vào giữa). Sử dụng dấu lớn hơn (>) để thể hiện bộ chọn này.

Ví dụ, luật CSS sau sẽ làm cho chữ trong phần tử em có màu đỏ, tuy nhiên, chỉ có phần tử em là con trực tiếp của p mới chịu tác động, trong khi các phần tử em khác thì không chịu tác động.

p > em { color: red; }

Xem hình minh họa,

– Chọn một em liền kề

Các phần tử có cùng cha thì được gọi là anh em; trong tài liệu HTML, phần tử anh sẽ nằm trước, phần tử em nằm sau; trong cấu trúc cây (cây DOM), phần tử anh nằm ở phía trái, phần tử em nằm ở phía phải.

Chọn một em liền kề của một phần tử là chọn duy nhất một phần tử là em liền kề của nó. Sử dụng dấu cộng (+) để thể hiện bộ chọn này.

Ví dụ, luật CSS sau sẽ làm cho chữ trong phần tử h2 có màu đỏ, tuy nhiên, chỉ có một phần tử h2 nằm ngay sau ul mới chịu tác động, trong khi các phần tử h2 khác thì không chịu tác động.

ul + h2 { color: red; }

Xem hình minh họa,

– Chọn nhiều em

Bộ chọn theo kiểu nhiều em của một phần tử sẽ chọn tất cả các phần tử là em (có tên được chỉ định) của nó. Sử dụng dấu ngã (~) để thể hiện bộ chọn này.

Ví dụ, luật CSS sau sẽ làm cho chữ trong phần tử h2 có màu đỏ, tuy nhiên, chỉ những phần tử h2 nằm sau ul (cùng cha body) mới chịu tác động, trong khi các phần tử h2 nằm phía trước và các vị trí khác thì không chịu tác động.

ul ~ h2 { color: red; }

Xem hình minh họa,

Chọn theo ID

Như đã biết, thuộc tính id được sử dụng để gán định danh (identifier) cho một phần tử bất kì, định danh này là duy nhất trong tài liệu HTML. Trong CSS, có thể sử dụng id làm bộ chọn để thực hiện định dạng cho phần tử, trước id sẽ có thêm dấu thăng (#) (octothorpe hoặc hash symbol).

Ví dụ, có đoạn HTML sau,

<li id="catalog1234">Happy Face T-shirt</li>

Luật CSS sau sẽ định dạng cho duy nhất một phần tử li dựa vào bộ chọn id,

li#id { color: red; }

Tuy nhiên, vì id là duy nhất trong tài liệu HTML, nên có thể bỏ qua tên của phần tử, luật CSS được viết lại như sau,

#id { color: red; }

Có thể sử dụng id như là một thành phần để tạo ra bộ chọn theo ngữ cảnh (chọn theo các hậu duệ). Ví dụ, luật CSS sau sẽ tác động lên tất cả các phần tử li là hậu duệ của phần tử có id là “links”, các phần tử li khác trong trang web sẽ không bị tác động bởi luật này.

#links li { color: red; }

Chọn theo class

Ngoài id, còn có một thuộc tính khác để gán định danh cho các phần tử là class. Thuộc tính class sẽ thực hiện phân lớp các phần tử vào các nhóm một cách logic, tất cả các phần tử có class giống nhau sẽ cùng thuộc về một nhóm. Khác với id, nhiều phần tử có thể có class giống nhau, và một phần tử có thể thuộc về nhiều class.

Trong CSS, có thể sử dụng class để tạo ra bộ chọn gồm các phần tử có giá trị class giống nhau, trước class sẽ có thêm dấu chấm (.).

Ví dụ, bộ chọn sau sẽ chọn tất cả các phần tử p có thuộc tính class là special,

p.special { color: red; }

Nếu muốn áp dụng luật CSS trên cho mọi phần tử có thuộc tính class là special thì bỏ đi tên phần tử p, chỉ giữ lại tên lớp như sau (nhớ có dấu . ở phía trước),

.special { color: red; }

Bộ chọn “mọi phần tử”

Bộ chọn “mọi phần tử” (universal selector) được sử dụng để chọn mọi phần tử, sử dụng dấu * để tạo ra bộ chọn này. Ví dụ, luật CSS sau sẽ thiết lập “màu mặt trước” là màu xám cho mọi phần tử trong tài liệu HTML.

* { color: gray; }

Bộ chọn “mọi phần tử” khá hữu ích trong việc tạo một bộ chọn theo ngữ cảnh (chọn theo các hậu duệ), ví dụ để chọn tất cả các phần tử trong vùng “intro” sử dụng luật CSS sau,

#intro * { color: gray; }

Tính rõ ràng, cụ thể của một luật CSS

Như đã biết, khi có hai luật CSS bị xung đột thì luật nào càng rõ ràng, càng cụ thể thì càng có độ ưu tiên cao hơn. Thế nào là rõ ràng, cụ thể? Phương pháp xác định tính rõ ràng, cụ thể của CSS khá phức tạp, tuy nhiên, dưới đây sẽ liệt kê các loại bộ chọn có tính rõ ràng, cụ thể từ cao xuống thấp:

– ID

– Class

– Bộ chọn theo ngữ cảnh (contextual selectors)

– Bộ chọn là tên phần tử

Có thể hiểu “tính rõ ràng, cụ thể” của một bộ chọn chính là khả năng bao phủ (giới hạn) các phần tử trong tài liệu HTML của bộ chọn đó, bộ chọn nào càng bao phủ (giới hạn) được ít phần tử thì bộ chọn đó càng rõ ràng, càng cụ thể.

Ví dụ, với hai luật CSS sau, cái thứ hai sẽ có độ ưu tiên cao hơn, do nó là một bộ chọn theo ngữ cảnh (chọn dựa vào các hậu duệ), và rõ ràng độ bao phủ của nó sẽ nhỏ hơn so với cái thứ nhất,

strong { color: red;}

h1 strong { color: blue; }

Kinh nghiệm trong thực tế là nên viết luật CSS cho bộ chọn là tên một phần tử HTML trước, sau đó sẽ ghi đè luật CSS này bằng các luật CSS cụ thể hơn. Ví dụ,

p { line-height: 1.2em; }

blockquote p { line-height: 1em; }

p.intro { line-height: 2em; }

Lab2.2.d (exercise 12-6, p.248 [3])