CASCADING STYLE SHEETS

I have an airplane:

CASCADING STYLE SHEETS

I. Giới thiệu: 1. Giới thiệu chung

Khi Cascading Style Sheets (CSS) được giới thiệu lần đầu tiên vào cuối năm 1996, công nghệ này đã đem đến một vận hội mới cho những người phát triển web. CSS cho phép thiết kế trang tinh xảo hơn, đẹp hơn tất cả những gì họ đã từng biết, cũng như giúp cho việc phát triển và bảo trì những site lớn, phức tạp trở nên dễ dàng hơn. CSS cũng đơn giản hóa việc làm cho trang web có thể được truy cập bởi càng nhiều người càng tốt, bất kể họ dùng thiết bị gì để đọc trang web, bất kể công nghệ gì họ sử dụng.

Kể từ đó, web đã có nhiều thay đổi. Trình duyệt web đã được tích hợ vào đện thoại di động, và người ta duyệt web cả từ vô tuyến truyền hình cũng như máy chơi game. HTML đã trở thành chuẩn được chấp nhận rộng rãi. CSS cũng đã trở thành một công nghệ vững mạnh, được hỗ trợ tốt và dễ sử dụng để tạo lập giao diện cho trang web.

Nói một cách ngắn gọn, CSS cung cấp một phương cách hữu hiệu để người thiết kế web có thể tách biệt giao diện của trang web ra khỏi nội dung của trang web đó. Chúng ta sẽ cùng tìm hiểu cách thức làm điều này như thế nào, và tại sao nên làm như thế.

2. CSS là gì?

Cascading Style Sheets (CSS) là một ngôn ngữ làm việc với các văn bản HTML để xác định cách thức nội dung được hiển thị. Cách thức hiển thị được xác định bởi các style được đặt trực tiếp trong các tag HTML, hoặc trong phần head của văn bản HTML, hoặc lưu trên một file có phần kiểu là .css.

Trong style sheet chứa các style rule. Mỗi rule chỉ thị cách thức định dạng một thành phần cụ thể trên văn bản HTML, chẳng hạn paragraph, h1, …

Nhiều file HTML có thể liên kết đến cùng một file CSS. 3. Cascading có nghĩa gì?

Có ba dạng style sheet có thể tác động đến việc hiển thị nội dung của văn bản HTML trên trình duyệt. Đó là:

• Browser style sheet: Trình duyệt á dụng style sheet lê tất cả văn bản web. Mặc dù những style sheet này có thể có khác biệt nhau tùy theo trình duyệt, chúng vẫncó những điểm chung, chẳng hạn như quy định

CHƯƠNG3 3

text có màu đen, siêu liên kết có màu xanh, và liên kết đã được nhấn vào thì có màu tía. Tất cả những quy định này được gọi chung là browser style sheet mặc định.

• User style sheet: Người dùng là bất ky ai đó ghé thăm web site. Hầu hết trình duyệt hiện nay đều cho phép người dùng thiết lập style sheet của riêng họ trong trình duyệt. Những style sheet này sẽ có mức ưu tiên sử dụng cao hơn browser style sheet mặc định.

• Author style sheet: Là style sheet do người phát triển web site tạo lập. Khi chúng ta áp dụng một style sheet lên một trang web, chúng ta đã sử dụng author style sheet. Những style sheet này sẽ có mức ưu tiên sử dụng cao hơn user style sheet.

Việc phân tầng ưu tiên sử dụng style sheet này chính là ý nghĩa của cascading (phân tầng).

4. Ưu điểm của CSS:

Sử dụng CSS có một số lợi điểm sau:

• Dễ bảo trì: Sức mạnh của CSS nằm ở chỗ một file CSS có thể được sử dụng để điều khiển cách thức hiển thị của nhiều vă bản HTML khác nhau. Việc thay đổi gia diện của site giờ đây chỉ đơn giản là sửa đổi một file CSS duy nhất thay vì phải chỉnh sửa nhiều file HTML như trước kia.

• Kích cỡ file nhỏ hơn: CSS cho phép người thiết kế loại bỏ toàn bộ phần định dạng khỏi văn bản HTML, kể cả layout table, spacer image, nhưng hình ảnh trang trí, font, màu sắc, độ rộng, chiều cao, hình nền. Việc hiển thị được điều khiển bới các CSS file. Điều này có thể làm giảm rõ rệt kích thước của các tập tin HTML.

• Tăng cường khả năng truy cập: CSS buộc người phát triển web phải chú ý đến cấu trúc, kết quả là trang web sẽ được dịch dễ dàng hơn trên trình duyệt, điều này hiệu quả nhất là đối với những người dùng có thị lực kém. Những người dùng như vậy có thể dễ dàng chỉ định style sheet của riêng họ cho cả site, chẳng hạn với size chữ lớn hơn và màu sắc có độ tương phản cao hơn. Thêm vào đó, CSS có thể định nghĩa những style sheet có thể xác định âm lượng và ngữ điệu của văn bản sẽ được đọc cho người mù bằng trình duyệt text-to-speech..

browser style sheet user style sheet author style sheet Web page

• Khả năng định dạng phong phú hơn: CSS cho phép chỉ định nhiều định dạng văn bản phong phú hơn so với HTML, chẳng ạn độ rộng của lề , khoảng cách giữa các ký tự, chiều cao dòng, ...

• Hỗ trợ in ấn tốt hơn: CSS có thể được định nghĩa cho nhiều đối tượng kết xuất khác nhau. Chúng ta có thể tạo một bộ CSS rule để người dùng xem trang web online, và một bộ khác để tạo bản dùng để in.

5. Style sheet làm việc như thế nào?

Style sheet là một tập hợp các chỉ thị đề nghị cách thức web browser hiển thị nội dung của trang. Lưu ý là "đề nghị" chứ không phải "yêu cầu", vì CSS không bắt buộc trình duyệt phải hiển thị trang web theo một cách cụ thể nào đó, nó chỉ đề nghị trình duyệt cách thức hiển thị nội dung mà thôi.

Hình 11: Sử dụng style sheet để tách biệt phần nội dung với phần hiển thị

II. Sử dụng style rule

Mỗi Cascading Style Sheet, kể cả dưới dạng .css file hay được nhúng trong văn bản HTML, là một tập hợp các chỉ thị gọi là style rule.

1. Cấu trúc của style rule Mỗi style rule bao gồm:

- Một selector, dùng để xác định các đối tượng được áp dụng style được quy định bởi style rule

- Một danh sách các thuộc tính (property) và giá trị của thuộc tính đó. 2. Khai báo style rule

Hình 12: Rule set structure

Chúng ta cũng có thể khai báo style rule trên cùng một dòng, ví dụ như sau:

h2 { font-style: italic; text-align: center; color: navy; }

Dưới đây là ví dụ về một đoạn CSS có nhiều khai báo:

h1 { text-align: center; color: navy; } h2 { font-style: italic; text-align: center; color: navy; } p { color: maroon; }

Ngoài ra, cũng có thể kết hợp nhiều selector với nhau trong cùng một khai báo, như trong trường hợp dưới đây

h1, h2 {

text-align: center; color: navy;

}

Lưu ý: Chúng ta có thể thêm các đoạn chú thích vào CSS. Phần chú thích phải được bắt đầu bằng cặp dấu /* và kết thúc bằng cặp dấu */

3. Sử dụng shorthand property:

Shorthand property cho phép giá trị của nhiều thuộc tính có thể được chỉ định trên một thuộc tính duy nhất. Shorthand property cũng dễ viết và bảo trì hơn. Chúng còn làm cho tập tin CSS ngắn gọn và súc tích hơn.

Ví dụ, một thẻ HTML là <h2> có thể được định dạng bằng các thuộc tính font- style, font-variant, font-weight, font-size, line-height, and font-family. Thay vào đó, chúng ta có thể dùng một shorthand property duy nhất là font.

Hai khai báo dưới đây là tương đương nhau:

h2 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 100%;

line-height: 120%;

font-family: arial, helvetica, sans-serif; }

h2 {

font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; }

Giá trị của shorthand property font bao gồm font-style, font-variant, font- weight, font-size, line-height, và font-family. Tuy nhiên, chúng ta không nhất thiết phải chỉ định tất cả các giá trị này khi khai báo style rule.

Giả sử, với thẻ <p>, có thể người thiết kế web chỉ muốn chỉ định giá trị font- size và font-family. Trong trường hợp đó, font-style, font-variant, font-weight, và line-height không được chỉ định khi khai báo rule. Kết quả là những thuộc tính đó sẽ được gán giá trị mặc định.

p {

color: maroon;

font: 80% arial, helvetica, sans-serif; }

Dưới đây là một số ví dụ khác

Ví dụ: h1 { border-width: 1px; border-style: solid; border-color: gray; } Ví dụ: p { color: maroon;

font: 80% arial, helvetica, sans-serif; padding-top: 1em;

padding-right: 2em; padding-bottom: 3em; padding-left: 4em; }

Tương đương với

p {

color: maroon;

font: 80% arial, helvetica, sans-serif; padding: 1em 2em 3em 4em;

}

Ví dụ:

h1 {

border: 1px solid gray;

background: yellow url(tint.jpg) repeat-y 100% 0; h1

{

border: 1px solid gray; }

}ul ul {

list-style: square inside; }

Thuộc tính background kết hợp các thuộc tính background-color, background- image, background-repeat, background-attachment, và background-position.

Thuộc tính list-style kết hợp các thuộc tính list-style-type, list-style-position, và

list-style-image.

III. Sử dụng selector

Selector là một trong những thành phần quan trọng nhất của CSS vì nó được dùng để "select" các tag HTML trên trang, từ đó tiến hành định dạng trang.

Chúng ta cùng tìm hiểu về selector qua đoạn mã HTML sau:

<body> <div id="content"> <h1> Heading here </h1> <p class="intro">

Lorem ipsum dolor sit amet. </p>

<p>

Lorem ipsum dolor <a href="#">sit</a> amet. </p>

</div>

<div id="nav"> <ul>

<li><a href="#" class="intro">item 1</a></li> <li><a href="#">item 2</a></li>

<li><a href="#">item 3</a></li> </ul>

</div>

<div id="footer">

Lorem ipsum dolor <a href="#">sit</a> amet. </div>

</body>

Có một lưu ý về thẻ <div>. Thẻ <div> thường được dùng để thêm cấu trúc vào văn bản HTML. Cho dù thẻ <div> là một block level element, nó không thêm gì vào định dạng của đối tượng nằm trong nó.

Trong ví dụ ở trên, thẻ <div> được dùng để phân chia các vùng nội dung. Sau đó, các vùng này có thể được định dạng bởi CSS.

1. Type Selectors:

Type selector còn được gọi là HTML element selector. Type selector sẽ chọn bất ky thành phần HTML nào trên trang có tag giống với selector.

Trong đoạn mã ở trên, có bảy thành phần HTML có thể được sử dụng làm type selector, bao gồm <body>, <div>, <h1>, <p>, <ul>, <li>, and <a>.

Chẳng hạn, để chọn tất cả tag <li> trên trang, chúng ta sử dụng selector <li> trong CSS như trong đoạn mã CSS dưới đây:

li { color: blue;}

2. Class Selectors:

Class selector có thể được sử dụng để chọn bất ky HTML element nào có thuộc tính class và thuộc tính này đã được gán giá trị.

Trong đoạn mã HTML ở trên, có hai HTML element có thuộc tính class: <p class="intro"> và <a href="#" class="intro">.

Để thiết lập định dạng cho tất cả đối tượng thuộc về class intro, chúng ta sử dụng selector .intro trong mã CSS theo phương cách như sau:

.intro {

font-weight: bold; }

Chúng ta cũng có thể chỉ định những trường hợp cụ thể của một class bằng cách kết hợp type selector và class selector. Chẳng hạn, chúng ta muốn định dạng

<p class="intro"> và <a href="#" class="intro"> riêng rẽ. Điều này có thể thưc hiện được theo cách sau:

p.intro { color: red; } a.intro { color: green; } 3. ID Selectors

ID selector khá giống với class selector. có thể được sử dụng để chọn bất ky HTML element nào có thuộc tính id và thuộc tính này đã được gán giá trị. Tuy nhiên, mỗi ID chỉ có thể được sử dụng duy nhất 1 lần trên cùng một văn bản HTML, trong khi có thể có nhiều thành phần thuộc về cùng một class.

Trong đoạn mã HTML ở trên, ID được dùng để xác định các phần nội dung, đó là content, nav (navigation), và footer. Có ba ID: <div id="content">, <div id="nav">, và <div id="footer">. Để chỉ định định dạng cho <div id="nav">, chúng ta dùng selector #nav như sau:

#nav {

color: blue; }

4. Descendant Selectors

Descendant selector được dùng để chọn những thành phần ở mức con của một thành phần khác.

Chẳng hạn, trong đoạn mã HTML ở trên, có ba thẻ <a> ở mức con của thẻ <li>. Để định dạng chỉ ba thẻ <a> này mà không ảnh hưởng đến tất cả các thẻ <a> còn lại, một descendant selector có thể được sử dụng. Selector này nhắm đến tất cả thẻ <a> nằm bê trong thẻ <li>:

li a{ {

color: green; }

Descendant selector không bắt buộc các đối tượng phải có mối quan hệ cha- con trực tiếp . Ví dụ, thẻ <a> cũng nằm ở mức con của thẻ <div id="nav"> như đối với thẻ <li>. Điều này có nghĩa là #nav a cũng có thể được sử dụng làm selector.

#nav a {

color: red; }

Descendant selector cũng có thể chỉ định nhiều cấp để xác định cụ thể đối tượng sẽ được áp định dạng:

#nav ul li a {

color: green; }

5. Universal Selectors

Universal selector được sử dụng để xác định những thành phần bất ky. Chẳng hạn, để thiết lập lề và độ dời của mọi thành phần về giá trị 0, selector * có thể được sử dụng, như dưới đây:

*{ {

margin: 0; padding: 0; }

Universal selector cũng có thể được dùng để chọn tất cả thành phần nằm bên trong một thành phần khác. Đoạn mã dưới đây sẽ chọn tất cả các thành phần nằm bên trong thẻ <p>:

p *{ {

color: red; }

6. Một số dạng selector nâng cao: a. Child selector

Child selector được dùng để chọn những thành phần là con trực tiếp của một thành phần khác(thành phần cha). Child selector không chọn tất cả thành phần ở các mức con khác nhau mà chỉ chọn những thành phần ở mức con trực tiếp. Lấy ví dụ, chúng ta muốn chọn thẻ <em> ở mức con trực tiếp của thẻ <div>, nhưng không chọn những thẻ <em> tuy vẫn là con của <div> nhưng đã phải qua ít nhất một mức trung gian.

div > em {

color: blue; }

Child selector không được hỗ trợ bởi Windows Internet Explorer 5, 5.5, và 6, nhưng được hỗ trợ bởi hầu hết trình duyệt khác.

b. Adjacent sibling selector

Adjacent sibling selector sẽ chọn một thành phần ở ngay bên dưới một thành phần khác trong văn bản HTML. Ví dụ, chúng ta muốn định dạng tag <h3>, nhưng chỉ là những tag <h3> nằm ngay dưới một tag <h2>. Đây là một ví dụ thường được sử dụng vì nó có ứng dụng thực tế. Thường thì có quá nhiều khoảng cách giữa văn bản dùng tag <h2> với văn bản dùng tag <h3> khi chúng xuất hiện ngay cạnh nhau. Selector được khai báo như sau:

h2 + h3 {

margin: -1em; }

Adjacent sibling selector không được hỗ trợ bởi Windows Internet Explorer 5, 5.5, và 6, nhưng được hỗ trợ bởi hầu hết trình duyệt khác.

IV. Sử dụng style trong thiết kế trang web

Có ba cách để sử dụng style sheet trên một trang HTML:

• Inline styles

• Header styles

• External style sheets 1. Inline styles

Inline styles có thể được áp dụng trực tiếp vào các tag HTML bằng cách dùng thuộc tính style. Tuy nhiên, nên tránh sử dụng inline styles vì những quy định về style được thêm vào từng thẻ HTML. Điều này đi ngược lại mục đích chính của CSS là áp dụng cùng một style cho càng nhiều trang web càng tốt bằng cách sử dụng external style sheets.

Dưới đây là một ví dụ về inline styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Lesson 4</title>

</head> <body>

<p style="font-family: arial, helvetica, sans-serif; margin:

1em;padding: 1em; background-color: gray; width: 10em;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

</p> </body> </html>

2. Header styles

Các CSS rule có thể được đặt ở phần <head> của văn bản web bằng cách dùng thẻ <style>. Giống như inline styles, header styles cũng nên được tránh vì quy định về style được đưa trực tiếp vào văn bản HTML thay vì dùng các tập tin CSS.

Tuy vậy, có những trường hợp ngoại lệ với cách áp dụng style này. Chẳng hạn một CSS rule chí tác động đến một trang duy nhất trong cả web site. Thay vì thêm rule này vào file CSS chung, ta có thể sử dụng header style.

Dưới đây là ví dụ về header styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Lesson 4 - listing 2</title>