Ví dụ

body{color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/

hay:

p {text-align: center} /*tất cả các thẻ

trong trang HTML sẽ được canh giữa.*/

hay định nghĩa nhiều thuộc tính:

p

{

text-align: center;

color: red;

font-family: arial

}

Style sheet giới thiệu một số tùy chọn để các nhà thiết kế có thêm quyền điều khiển style cho

các phần tử

a. Dùng CLASS làm phần tử chọn

Bằng việc tạo ra các lớp, có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ

HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web. Có 2 cách thức dùng

CLASS:

Các CLASS gắn với 1 thẻ cụ thể

Ví dụ: Trên trang web có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa và

đoạn văn canh lề phải. Khi đó có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này như

sau:

p.trai {text-align: left}

p.phai {text-align: right}

p.giua {text-align: center}

Tiếp theo, trong trang HTML sử dụng như sau:

Đoạn văn này được canh lề trái.

Đoạn văn này được canh lề phải.

Đoạn văn này được canh lề giữa.

Chú ý:

- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết cần phải cẩn thận

trong việc sử dụng chữ hoa, chữ thường.

- Trong trang HTML, chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này mặc

dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được.

Ví dụ về sử dụng lớp sai:

Đây là đoạn định nghĩa sai

Các ví dụ ở trên là ví dụ về việc tạo các lớp bị "gắn chặt" với một thẻ nào đó, tức là không sử

dụng được lớp này trong thẻ khác. Theo các khai báo ở trên, ví dụ dưới đây sẽ không hoạt

động:

Ví dụ này không hoạt động

Các CLASS không gắn với một thẻ cụ thể (có thể gắn với hầu như tất cả các thẻ):

37



Có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu như bất cứ thẻ nào trên trang web bằng

cách bỏ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.)

Ví dụ:

Định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào

.giua{text-align="center"}

và trong trang HTML ta sử dụng như sau:

Đoạn văn này được canh lề giữa.

Câu này cũng được canh lề giữa.

b. Dùng ID làm phần tử chọn

Tương tự như các lớp, các định danh cũng cho phép chia các thẻ thành nhiều loại khác nhau.

Tuy nhiên trên thực tế thì Định danh khác với lớp!!! Một lớp có thể áp dụng nhiều lần ở

nhiều vị trí trên trang web, tuy nhiên 1 định danh chỉ có thể áp dụng được duy nhất cho 1 thẻ

và tên của định danh phải là duy nhất trên 1 trang web. Qui tắc cho Style dùng ID làm phần tử

chọn bắt đầu bằng dấu thăng (#)

Các ví dụ:

1. Đoạn mã dưới đây có thể áp dụng cho thẻ

có ID là para1

p#para1

{

text-align: center;

color: red

}

Khi sử dụng như sau:

Đoạn văn bản

2. Đoạn mã dưới đây có thể có hiệu lực cho thẻ đầu tiên có ID là xyz:

*#xyz {color: green}

Khi sử dụng:

Đoạn văn bản

3. Đoạn mã dưới đây chỉ có thể áp dụng cho thẻ

đầu tiên:

p#wer345 {color: green}

Khi sử dụng:

Đoạn văn bản

Và đoạn dưới đây không có hiệu lực:



38





Đoạn văn bản không được áp dụng

c. Các phần tử chọn theo ngữ cảnh

Nếu chúng ta muốn tìm kiếm ví dụ về mỗi quan hệ cha-con giữa một đoạn paragraph cùng với

phần tử em bên trong paragraph, chúng ta xem các phần tử chọn con làm việc như thế nào.

Trong ví dụ này, phần tử em và nội dụng của nó thừa kế các chức năng luật từ cha nó – phần

tử p

Nếu chúng ta muốn gán luật kiểu khác cho phần tử con, chúng ta có thể sử dụng cú pháp cung

cấp bởi phần từ con. Đặt phần tử cha trước, sau đó là phần tử con, cùng với khoảng trống giữa

2 phần tử:

p em



Sau đó, có thể viết bất kì thứ gì trong khối miêu tả sẽ được áp dụng đối với các phần tử con.

d. Các phần tử chọn CLASS giả (Pseudo Class Selectors)

Được sử dụng đối với các kiểu liên kết, ngoài ra còn được sử dụng cho các mục đích khác

như bổ sung hiệu ứng cho các thẻ. Sức mạnh của loại phần tử này sẽ được phát huy đối với

các liên kết đó là sự kết hợp của các phần tử với phần tử lớp để tạo ra các kiểu đa liên kết mà

có thể áp dụng cho một trang.

Phần tử lớp giả lập liên kết bắt đầu bằng mấu neo (anchor), tiếp theo là dấu “:”, cuối cùng là

tên lớp giả lập. Một số phần tử lựa chọn lớp giả lập liên kết qui ước như sau:

a:link

a:visited

a:hover

a:active

Có thể viết các luật cho mỗi phần tử chọn lớp và chúng có thể ứng dụng đến toàn bộ các liên

kết

Chúng ta có thể kết hợp các phần tử chọn trong một lớp, lớp này cho phép tạo ra kiểu đa liên

kết. Để thực hiện điều này, chúng ta bắt đầu bằng anchor, tiếp theo là dấu “.”, sau đó là tên

lớp, dấu “:”, và lớp giả lập. Ví dụ

a.main:link

a.subnav:link

a.footer:link

Trong ví dụ này, các liên kết trong các lớp của main, subnav, và footer có thẻ có các qui tắc

luật khác nhau tạo cho chúng

e. Các phần tử chọn phần tử giả lập (Pseudo Element Selectors)

Có bốn phần tử trợ giúp nhà lập trình dành được mục tiêu in ấn được mô tả bảng dưới đây:



39



Các phần tử chọn giả lập trong CSS2

Phần tử chọn



Mục đích



:first-line



Để lựa chọn và áp dụng tới dòng đầu tiển trong phần tử đã định sẵn



:first-letter



Để lựa chọn và áp dụng kiểu đến kí tự đầu tiên trong phần tử



:before



Cho phép xác định nội dụng trong tờ kiểu dáng được chèn phía trước phần

tử định sẵn



:after



Cho phép xác định nội dung trong tờ kiểu dáng được chèn sau phần tử

định sẵn



Để áp dụng kiểu khác nhau đến dòng đầu tiên trong paragraph, sử dụng cú pháp phần tử giả

lập:

p:first-line



Nếu muốn bổ sung nội dung sau hoặc trược một phần tử, cần phải định nghĩ nội dung trong tờ

kiểu dáng.

Để sinh ra nội dung sử dụng phần lựa lựa chọn giả lập trước và sau, chúng ta định nghĩa phần

tử đến luật sẽ được áp dụng, phần tử giả lập trứoc, sau, thuộc tính nội dung, và nội dung trong

dấu nháy kép

h1:after {

content: "header note"

}



Kết quả: Câu “hearder note” xuất hiện sau h1

f. Nhóm các phần tử lựa chọn - Selector Groups

Nhóm phần tử lựa chọn cho phép người dùng nhóm các phần tử lựa chọn với nhau khi muốn

gán các phần tử lựa chọn này những thuộc tính giống nhau. . Ví dụ dưới đây sẽ nhóm tất cả

các thẻ Header lại, định nghĩa chúng sẽ có màu xanh, và sử dụng font arial hoặc sans-serif:

h1, h2, h3 {font-family: Arial, sans-serif; color: green }



2.2.2 Các phần tử lựa chọn lớp giả động

Cho phép bổ sung phần tử lựa chọn giả thông minh đối với bất kì thẻ nào hơn là các liên kết.

Bảng dưới đây sẽ chỉ ra 3 phần tử lớp giả lập động và chức năng của chúng



40



Phần tử

chọn



Mục đích



:hover



Áp dụng các qui tắc kiểu dáng khi chuột di qua một phân tử được lựa chọn



:active



Áp dụng kiểu khi một phân tử được nhấp chuột



:focus



Áp dụng kiểu khi một phần tử có focus bàn phím (khi con trỏ được đặt trong

hộp text box của form)



Các phần tử lựa chọn con

Các phần tử ngữ cảnh cho phép tạo mẫu phần tử con tách biệt với phần tử cha. Phần tử này áp

dụng khi cần lồng ghép các phần tử. Ví dụ, chúng ta có nhiều phần tử em trong phần tử

division, div và paragraph trong division này có thể có các phần tử strong.

Ví dụ: nếu viết phần lựa ngữ cảnh sau:

div strong

tất cả các phần tử strong trong div – thậm trí trong các phần tử paragraph (cháu)-sẽ bị ảnh

hưởng bởi tính thừa kế

Các phần tử con chỉ cho phép lựa chọn con. Điều này có nghĩa là, chúng ta có thể được đảm

bảo rằng chỉ có các phần tử em bên trong div,chứ không phải trong các cấu trúc khác lồng bên

trong div sẽ bị ảnh hưởng. Để làm được điều này, chúng ta bắt đầu bằng việc sử dụng phần tử,

ở bên phải dấu > và phần tử con trong vấn đề:

div>em

Chúng ta có thể nhận thấy sự phúc tạp. Nếu chúng ta muốn lựa chon phần tử em trong phần tử

paragraph bên trong phần tử div, thì viết như sau:

div>p>em

Tất cả phần tử con trong phần tử paragraph, không được nằm bên ngoài, sẽ đuwocj định dạng

trong quí tắc kế tiếp theo

Các phần tử con First

Một phần tử con first cho phép …. Kiểu phần tử lựa chọn này chỉ áp dụng đốiv ứoi con đầu

tiên của phần tử định sẵn. Để áp dụng kiểu này đến con đầu tiển, cung cấp phần tử cha cộng

với cú pháp phần tử lựa chọn con đầu tiên

p:first-child



Bất kì qui tắc nào chúng ta viết cho phần từ lựa chọn này sẽ được áp dụng đến phần tử con

đầu tiển của tất cả paragraph

Phần tử lụa chọn kề cận



41



Phần tử này trợ giúp định dạng các phần từ cùng một cha. Các phần tử cùng một cha là các

phần tử nằm trong cùng một mức của cây tà liệu và chia sẽ một cha chung. Ví dụ

I find books by Martha Grimes

to be the quintessential escapist experience. A good mystery and a

cup of tea on a rainy day is

true relaxation.

Phần tử lựa chọn thuộc tính

Kiểu phần tử lựa chọn thuốc cho phép lựa chọn các phần tự dựa vò thuộc tính mà các phần tử

có. Ví dụ, nếu chúng ta có một liên kết trong URL, có thể tạo bởi phần tử này thay vì phần tử

anchor của chính no. Mội thực thể của URL được định dạng theo qui tắc kết hợp với phần tử

lựa chọn thuộc tính

Có bốn kiểu dáng có sẵn cho phần tử như miểu tả ở bảng dưới đây

Các mức điều khiển có thể dành được bởi kiểu phần tử lựa chọn này ít gây ngạc nhiên.

Table 2.3: Attribute Matching

Cú pháp



Mục đích



[att]



Áp dụng kiểu đốiv ứoi thuộc tính đưa ra, không quan tâm tới giá trị



[att=val]



Áp dụng kểu đối với thuộc tính đưa xa trong giá trị xác định



[att~=val]



Áp dụng kiểu đến bất kì thuộc này nào trong giá trị phần cách bởi dấu cách



[att|=val]



Áp dụng kiểu đến bất kì thuộc này nào trong giá trị phần cách bởi dấu |



2.2.3 Thuộc tính, miêu tả, qui tắc

Các thuộc tính trong CSS thuộc ba danh mục:

•

•



Visual bất kì thuộc tính nào ảnh hưởng đến sự biểu diển trực quan của tài liệu như

font, nền và màu

Aural Các thuộc tính liên quan tới kiểu tai, như chức năng âm thanh.



•



Paged Các thuộc tính liên quan đến trang media như in và màn hình



Ví dụ:

font-family: Arial, sans-serif

color: blue



Các thuộc tính tốc kí

Các thuộc tính này còn có tên khác là nhóm là cách thức viết tắt các quy tắc kiểu. Cso một vài

thuộc tính tốc kí khi so sánh với các thuộc tính đầy đủ. Thuộc tính rút gọn, thuộc tính có thể

thay thế nhau và nhóm media thuộc vào được miêu tả như sau

42



Tốc kí



Các thuộc tính

background-attachment



background



Nhóm media

visual



background-color

background-image

background-position

background-repeat

border-color

border



visual

border-style

border-width

border-bottom-color



border-bottom



visual

border-bottom-style

border-bottom-width

border-left-color



border-left



visual

border-left-style

border-left-width

border-right-color



border-right



visual

border-right-style

border-right-width

border-top-color



border-top



visual

border-top-style

border-top-width

cue-before



cue



aural

cue-after

font-family



font



visual

font-size

font-style

font-weight

font-variant

line-height

43



Tốc kí



Các thuộc tính

list-style-image



list-style



Nhóm media

visual



list-style-position

list-style-type

margin-top

margin



visual

margin-right

margin-bottom

margin-left

outline-color



outline



visual, interactive

outline-style

outline-width

padding-top



padding



visual

padding-right

padding-bottom

padding-left

pause-after



pause



aural

pause-before



Chúng ta đã từng viết kiểu tốc kí khi nhóm các phần tử lựa chọn lại ví dụ:

h1 h2 h3



Ví dụ: chúng ta thương miêu tả phần tử paragraph như sau:

p



{

font-family: Arial, sans-serif;

font-size: 16px;

font-weight: bold;

font-style: normal;

line-height: 15px;

color: black;



}



Chúng ta có thể lựa chọn sử dụng thuộc tính font, thay thế bằng thuộc tính tốc kí

p

}



{

font: bold normal 16px/15px Arial, sans-serif;



44



Mối quan tâm hàng đầu khi nhóm đó là thứ tự của giá trị. Một ví dụ cho điều này đó là khi

làm việc với thuộc tính margin: chúng ta phải đưa ra giá trị theo thứ tự top,right,left, và

bottom

body



{

margin: .10in .75in. .75in. .10in;



}



Chú thích trong CSS

Bạn có thể bổ xung các chú thích cho đoạn mã của mình trong CSS. Các đoạn chú thích sẽ

được trình duyệt bỏ qua. Đoạn chú thích được tạo ra tương tự như trong C++ (đặt bắt đầu

bởi /* và kết thúc bởi */)

Ví dụ:

/* Đây là đoạn chú thích*/

p

{

text-align: center;

/* Và đây là một đoạn chú thích khác */

color: black;

font-family: arial

}



2.3 Bổ sung CSS vào tài liệu HTML

CSS phá bỏ rào cản HTML bằng cách cho phép có thêm nhiều đặc tả thuộc tính chuẩn để

phục vụ cho việc dàn trang và định dạng. Những thuộc tính này được áp dụng vào trong tài

liệu mà không pháo vỡ cấu trúc HTML đã có sẵn.

Có 2 bước để bổ sung kiểu dáng CSS vào tài liệu: Khai báo style và áp dụng style cho các

phần tử HTML

Áp dụng CSS vào trang HTML

Có 4 cách áp dụng CSS và trong tài liệu:

• Dùng inline style

• Nhúng các style sheet

• Liên kết với một style sheet

• Bao gộp một style sheet

Dùng inline style: là cách dùng style ngay trong câu lệnh, bạn thêm thuộc tính STYLE vào

một phần tử HTML nào đó theo cú pháp như sau:



Ví dụ:







Màu xanh nước biển.







Một inline style có thể áp dụng cho bất cứ thẻ nào và chỉ có tác dụng trên chính thẻ đó. Dùng

inline style làm cho tài liệu rõ ràng hơn nhưng có thể dẫn đến việc viết mã quá nhiều. Ngoài

ra nó làm cho các đoạn mã dư thừa, khó bảo trì.

Nhúng style sheet

45



Để nhúng một style sheet, cần định nghĩa một khối (phân biệt bởi các thể ) được đặt trong phần HEAD của tài liệu. Khối này là một tập các

style rule (qui tắc về kiểu dáng), trong đó mỗi qui tắc định nghĩa style cho một phần tử hay

mộ nhóm các phần tử HTML

Một style rule có 2 phần:

• Một selector (phần tử chọn) để định danh một phần tử hay một nhóm các phân từ

HTML

• Một khai báo về thuộc tính về kiểu dáng được áp dụng cho selector đó.

• Cú pháp tổng quát: selector {property:value;property:value;…}

CSS không phân biệt chữ hòa và chữ thưừong nhưng bạn phải đảm bảo luôn dùng đúng cú

pháp. Mỗi style rule phải bắt đầu bằng một selector hay một nhóm các selector, theo sau là

một dấu mở ngoặc nhọn, tiếp theo là các khai báo thuộc tính về style. Mỗi khai báo cho một

style kết thúc bằng dấu chấm phẩy và mỗi thuộc tính được phân cách với giá trị của nó bằng

dấu hai chấm, và cuối cùng là một dấu ngoặc nhọn.

Mỗi đoạn sẽ có viền

Đậm

màu bạc

Cách dùng style sheet nhúng luôn uyển chuyển và dễ bảo trì hơn cách dùng inline style.

Chẳng hạn muốn thay đổi màu của P trong tài liệu, chỉ cần thay đổi một thứ: giá trị tương ứng

với thuộc tính “background-color”

Liên kết đến style sheet

Có thể lưu style sheet trong một tập tin riêng biêt và liên kết nó đến một hay nhiều tài liệu, sử

dụng thẻ trong phần :



Style sheet được liên kết chứa những khai báo về style, hoạt động giống như style sheet

nhúng, chhỉ khác là những style rule không đóng trong cặp thẻ . Việc liên kết đến một style sheet bên ngoài cho phép nhà phát triển áp

dụng style sheet cho nhiều tài liệu khác nhau.

Bao gộp một style sheet

Một style sheet bên ngoài có thể được bao gộp (import) vào trong tài liệu bằng cách dùng

thuộc tính @import trong style sheet:

@import:url(mystyles.css);

Thẻ @import nên đặt ở đầu khối style hay đối với một sheet liên kết thì là ở trước bất cứ một

khai báo nào. Những qui tắc được bao gộp trong style sheet sẽ được áp dụng trước những qui

tắc khác định nghĩa chứa style sheet

46