I. Mục tiêu:

• Biết được khái niệm về CSS, cấu trúc cũng như nguyên lý hoạt động của CSS.
• Sử dụng được các bộ selector để quy định style cho các thành phần(element) trong một tài liệu html.
• Sử dụng được các bộ selector để có thể chọn các thành phần(element) và quy định style cho thành phần đó.

II. Giới thiệu:

CSS (CascadingStyle Sheets) là một ngôn ngữ stylesheet mô tả cách hiển thị của một tài liệu HTML (hoặc XML).

CSS mô tả cách các thành phần trong tài liệu HTML hiển thị lên web như thế nào. Bằng cách chọn các thành phần(element) trong html lên và quy định cái hiển thị của thành phần đó như là màu sắc, kích thước… nhiều thuộc tính lắm và một số thuộc tính quan trọng sẽ được đề cập trong phần nội dung.

Một sự khác biệt đáng kể khi không có css và các resource.

Qua các khái niệm trên, ít nhiều chúng ta cũng đã có được khái niệm và mục đích CSS đến với Web là gì rồi đúng không? Tiếp theo vào phần nội dung sẽ cụ thể hơn về cú pháp cũng như các thuộc tính định kiểu hiển thị của thành phần html.

III. Nội dung chính:

1. Cú pháp CSS:

Dựa vào cú pháp chèn style css vào html file (sẽ được trình bày bên dưới), có hai kiểu khai báo css-style:

2.CSS Selector:

Dùng để xác định các phần tử nào trong html sẽ được hiển thị theo style mà nó định nghĩa bên trong. Luật so khớp mẫu trong CSS được sử dụng để xác định thành phần nào trong html file được áp dụng style định nghĩa. Nếu một element thỏa mãn tất cả các điều kiện trong CSS-Selector thì selector matching với element đó.

Các mẫu selector và ý nghĩa chọn phần tử của mẫu selector tương ứng:

Mẫu	Ý nghĩa	Phiên bản CSS đầu tiên có syntax
*	Bất cứ phần tử nào	2
E	Phần tử có thẻ E	1
E[foo]	Phần tử có thẻ E – có thuộc tính foo	2
E[foo=”bar”]	Phần tử có thẻ E – có thuộc tính foo – có giá trị “bar”	2
E[foo~=”bar”]	Phần tử có thẻ E – có thuộc tính foo – có giá trị là một list các giá trị được chia tách bởi khoảng trắng, một trong các giá trị là “bar”	2
E[foo^=”bar”]	Phần tử có thẻ E – có thuộc tính foo – có giá trị bắt đầu bằng chuỗi “bar”	3
E[foo$=”bar”]	Phần tử có thẻ E – có thuộc tính foo – có giá trị kết thúc bởi chuỗi “bar”	3
E[foo*=”bar”]	Phần tử có thẻ E – có thuộc tính foo – có giá trị chứa chuỗi con là “bar”	3
E[foo|=”en”]	Phần tử thuộc thẻ E – có thuộc tính foo – có giá trị là một list các giá trị được chia tách bởi dấu gạch nối, giá trị đầu tiên là “en”.	2
E:root	Phần tử thuộc thẻ E là node gốc.	3
E:nth-child(n)	Phần tử có thẻ E là node con thứ n của node cha.	3
E:nth-last-child(n)	Phần tử thuộc thẻ E là node con thứ n của node cha, tính từ dưới lên.	3
E:nth-of-type(n)	Phần tử thuộc thẻ E là node thứ n cùng loại thẻ.	3
E:nth-last-of-type(n)	Phần tử thuộc thẻ E là node thứ n cùng loại thẻ, tính từ cuối.	3
E:first-child	Phần tử thuộc thẻ E là node con đầu tiên của cha nó.	2
E:last-child	Phần tử thuộc thẻ E là node con cuối cùng của cha nó	3
E:first-of-type	Phần tử thuộc thẻ E là node cùng loại đầu tiên.	3
E:last-of-type	Phần tử thuộc thẻ E là node cùng loại cuối cùng.	3
E:only-child	Phần tử thuộc thẻ E là con duy nhất.	3
E:only-of-type	Phần tử thuộc thẻ E là thẻ duy nhất trong số các con của cha nó.	3
E:empty	Phần tử có thẻ E trống, kể cả text.	3
E:link E:visited	Phần tử thẻ E với đường dẫn sẽ được thiết lập style, đã thăm hay chưa.	1
E:active E:hover E:focus	Style sẽ được xác định dựa vào tương tác của người dung.	1 và 2
E:lang(fr)	Phần tử có thẻ E có language là fr được xác định.	2
E:checked	Định style checked cho radio button hay là check box.	3
E::first-line	Định style cho dòng đầu tiên của phần tử có thẻ E.	1
E::first-letter	Định style cho kí tự đầu tiên của phần tử có thẻ E.	1
E::before	Tạo nội dung trước phần tử có thẻ E.	2

Bảng 3.2.1 Các mẫu CSS-selector.

Một CSS-Selector là chuỗi liên tiếp 1 hay nhiều simple-selector (selector đơn) được nối tiếp với nhau bởi dấu tổ hợp.

Dấu tổ hợp có thể là khoảng trắng, dấu lớn hơn (>), dấu cộng (+), dấu ngã (~).

2.1. Các loại Selector đơn:

2.1.1. Type selector:

Chọn các thẻ (tag) trong tài liệu html.

Không như html, trong bộ css-selector không chứa dấu đóng mở tag.

Chú ý: Các css-style được định nghĩa trước nên có mức ảnh hưởng rộng hơn, các style định nghĩa sau cho các đối tượng xác định sẽ kế thừa từ các style trước đó và chỉ định nghĩa lại các thuộc tính cần thiết, tránh tình trạng phải modified lại quá nhiều.

Cú pháp và ví dụ:

2.1.2. Class Selector:

Bộ class selector này sẽ chọn(select) các thành phần(element) có class tương ứng với điều kiện select. (class của một thành phần(element) trong tài liệu html được đề cập ở bài 1.1 HTML/CSS).

Selector chọn ra phần tử-E của tài liệu html, có thuộc tính class có giá trị-value tương ứng trong selector.

Cú pháp: E.value (tương đương với cú pháp E[class~=value].

Ví dụ:

2.1.3. ID Selector:

Tương tự với class selector, id selector sẽ select các thành phần (element) trong tài liệu html có id tương ứng với điều kiện.

Selector chọn ra phần tử-E trong html có thuộc tính id với giá trị-value xác định.

Cú pháp: E#value.

Ví dụ:

2.1.4. Universal Selector:

Được kí hiệu bởi dấu sao (*), biểu hiện cho bất kỳ element nào trong document html.

Mục đích chính là để chỉnh sửa(modify) lại các thuộc tính mặc định của các thành phần(element) trong html. (Thuộc tính mặc địch được bản thân trình duyệt có sẵn).

 

2.1.5. Attribute Selector:

Kiểu selector này sẽ dựa vào (thuộc tính) attribute của các thành phần (element) trong tài liệu html để select element có thuộc tính(attribute) hoặc tùy thuộc vào giá trị các thuộc tính.

Xem thêm ví dụ ở Bảng 3.2.1.

Lưu ý:

Css-selector có thể áp dụng các selector với 1 quy định hiển thị. Tức là mình có thể tạo một bộ các quy định hiển thị (các thuộc tính và giá trị tương ứng) trong cặp dấu ngoặc nhọn và áp dụng cho một số các element tương ứng với danh sách các điều kiện selector. Cụ thể hơn ở dưới đây:

Một element cũng có thể được select bởi một bộ selector 2 trở lên các loại trên gom lại. Cụ thể hơn là khi một thành phần có nhiều điều kiện có thể select, ví dụ như vừa có tag là h1, class là well, id là content, thì khi dùng selector để chọn thành phần này thì ta kết hợp các bộ selector đơn lại với nhau và cú pháp như sau.

2.2. Kết hợp selector (CSS Combinators):

CSS-Selector có thể chứa 1 hoặc nhiều simple selector, các simple selector được kết hợp với nhau thông qua dấu tổ hợp để chọn ra thành phần HTML dựa trên mối quan hệ giữa các thành phần này. Có 4 loại dấu tổ hợp trong CSS3:

• Lựa chọn con cháu (descendant selector): dấu khoảng trắng (space).
• Lựa chọn con trực tiếp (child selector): dấu >
• Lựa chọn thành phần cùng mức liền kề (adjacent sibling selector): dấu +
• Lựa chọn thành phần cùng mức (general sibling selector): dấu ~

2.2.1. Descendant Selector(space):

Các simple selector được phân tách bởi khoảng trắng.

E1 E2 {}: tức là, CSS-Selector chọn ra các thành phần E2 là con cháu (con trực tiếp và con gián tiếp) của thành phần E1 trong tài liệu HTML.

2.2.2. Child Selector(>):

Các simple selector được phân tách bởi dấu lớn hơn (>).

E1 > E2 {}: CSS-Selector chọn các thành phần E2 là con trực tiếp của thành phần E1 trong tài liệu HTML.

2.2.3. Adjacent sibling selector (+):

Các simple selector được phân tách bởi dấu cộng (+).

E1 + E2 {}: CSS-Selector chọn phần tử có thẻ E2 có cùng mức và liền kề với thành phần thẻ E1.

2.2.4. General sibling selector(~):

Các simple selector được phân tách bởi dấu ngã (~).

E1 ~ E2 {}: CSS-Selector chọn phần tử có thẻ E2 cùng mức với thành phần E1, không nhất thiết phải liền kề.

Ví dụ:

html
Descendant selector
Child selector
Adjacent sibling selector
General sibling

3.Thuộc tính(Properties) và Giá trị của thuộc tính(Values):

3.1. Các nhóm thuộc tính(property) trong CSS:

Color Background and Borders Basic Box Flexible Box Text Text Decoration Fonts Writing Modes Table Lists and Counters Animation Transform

Transition Basic User Interface Multi-column Paged Media Generated Content Filter Effects Image/Replaced Content Masking Speech Marquee

Các property này sẽ được đề cập cụ thể hơn trong quá trình học và thực hành ở các bài tiếp theo. Hoặc bạn có thể tham khảo ở đây.

3.2. Một số thuộc tính(property) phổ biến:

• Color: thiết lập màu cho text.
• Opacity: thiết lập độ trong suốt của phần tử trong html.
• Font-size: thiết lập kích thước của text.
• Font-family: xác định những font được sử dụng trong web.
•  Font-style: thiết lập style cho text.

Với những properties thuộc về một nhóm, ta có thể định nghĩa các giá trị cho các thuộc tính đó chỉ trong một dòng khai báo, nhưng phải theo thứ tự syntax mà css quy định. Đối với các giá trị có giá trị do html mặc định, nếu không định nghĩa, thì sẽ sử dụng giá trị mặc định.

Xét ví dụ: Quan sát thuộc tính font bao gồm các thuộc tính con là: size, style, weight, variant, ….Syntax để định nghĩa các giá trị của font trong một dòng theo thứ tự thuộc tính: “font-style font-variant font-weight font-size/line-height font-family”. Thiết lập css-style với nhiều dòng và một dòng trong ví dụ bên dưới:

2.3. Giá trị thuộc tính(values):

Các giá trị của thuộc tính tùy vào syntax quy định của css, một số thuộc tính có thể lấy giá trị là xác định hoặc phần trăm.

Xét ví dụ: những phần tử nằm trong <ul> <li> …. </li> </ul> sẽ có text màu vàng và kích thước chữ là 12 pixel.

4. Gộp nhóm selector:

Với những selector có cùng khai báo style, ta có thể gộp chung thay vì viết riêng lẽ.

Ví dụ:

5. Chèn CSS vào HTML:

Các nội dung trên đã cho chúng ta khái niệm và cú pháp sử dụng về CSS, tiếp theo đây chúng ta sẽ tìm hiểu về cách khai báo CSS và sử dụng chúng trong tài liệu HTML.

5.1. Inline styling:

Theo cách này, thì CSS được đưa vào HTML nhờ vào thuộc tính style của HTML. Có vẻ như inline style đang chống lại mục đích mà CSS được tạo ra, là làm giảm bớt công việc tạo style cồng kềnh dựa vào các thuộc tính của HTML. Tuy nhiên, inline style vẫn được sử dụng trong một số trường hợp khi mà một thành phần trong HTML cần được tạo style đặc biệt, khác biệt với style thông thường được định nghĩa sẵn theo external.

Cú pháp khai báo và minh họa:

5.2. Internal Styling:

• CSS style được đưa đặt trong thẻ <style> của HTML và lồng vào trong thẻ <head>.
• Việc đặt style lồng vào các thẻ của HTML, làm cho cấu trúc chương trình không gọn gàng, cồng kềnh. Internal Style gom và đặt vào một vùng trong <head> tag khiến chương trình dễ đọc và dễ dàng sửa đổi style cho các thành phần.

Cú pháp khai báo và minh họa:

Internal Styling được sử dụng trong trường hợp một trang con trong hệ thống trang web sử dụng một style riêng biệt và duy nhất. Việc sử dụng Internal Style cho tất cả các trang trong một trang web sẽ làm mất thời gian cho việc định nghĩa lại style nhiều lần. Thay vào đó External Style CSS ra đời để làm giảm độ phức tạp và thời gian của công việc.

5.3. External Styling:

Style CSS sẽ được gom lại và đặt vào trong một file style với định dạng file_name.css. Lúc này, những file html nào muốn định dạng theo style định nghĩa sẵn theo file trên, sẽ khai báo liên kết đến thư mục chứa style file để sử dụng, cách khai báo như sau:

Sử dụng external styling cho các file html chung style, khi đó, việc đổi style đơn giản và nhanh chóng, hoặc nếu bạn chỉ muốn đổi style trong một hai file html nào đó, thì đây là lúc sử dụng internal styling và inline styling.

5.4. Độ ưu tiên(Priority):

Các định nghĩa style cho tài liệu HTML có thứ tự ưu tiên giảm dần như sau:

CSS cũng giống như một số ngôn ngữ lập trình khác, tương tự như biên dịch từ trên xuống, từ trái sang phải. Như hình độ ưu tiên trên, hãy tưởng tượng với một file html một trình biên dịch nó sẽ dịch từ style mặc định của trình duyệt Web(Browser Default style) -> tiếp đến là các file css được liên kết bằng thẻ link(External Styling) -> các khai báo nằm ở phần head của tài liệu html(thực ra là có thể nằm ở một vị trí bất kỳ trong css nhưng mà đa số ở head) nằm trong thẻ <style></style> -> cuối cùng là ở từng các khai báo inline ở các element(nếu có).

Ngoài ra, ta có thể khai báo !important tại property của thành phần nào ta muốn sử dụng bất chấp độ ưu tiên của kiểu định nghĩa style, tức là không quan tâm kiểu khai báo là gì, có !important thì kiểu định dạng đó sẽ đè lên tất cả các định nghĩa khác và quy định hiển thị cho thành phần(element) tương ứng.

Khi trình duyệt hiển thị tài liệu HTML thì property của thành phần có khai báo !important sẽ được ưu tiên ở mức cao nhất, bỏ qua tất cả các quy định khác về property này của thành phần đó.

Nguyễn Thị Kim Uyên

IV. Tài liệu tham khảo:

[1] codeschool.com

[2] w3school.com

[3] developer.mozilla.org