II.1. Sử dụng CSS trong tư liệu HTML
Một kiểu dáng (style) là một quy tắc, hoặc một lệnh, chỉ thị cho trình duyệt làm sao để trình bày một phần tử HTML riêng biệt. Những kiểu có thểđứng một mình hoặc có thểđược tổ chức trong những bảng kiểu (stylesheets).
Một kiểu dáng được tạo nên bởi một tên thẻ và một hoặc nhiều định nghĩa kiểu (hay khai báo
kiểu) xác định phương thức mà các phần tử HTML sẽđược hiển thị. Một định nghĩa gồm một thuộc
tính, một dấu hai chấm và một hoặc nhiều giá trị. Thuộc tính và giá trị này được quy định bởi W3C trong các đặc tả về CSS.
II.1.1. Kiểu tại chỗ (Inline Styles)
Kiểu tại chỗ (hay cục bộ) được áp dụng cho một thẻ riêng biệt trên trang web, ta có thể áp dụng kiểu tại chỗ cho bất kỳ thẻ nào trên trang web bằng cách dùng thuộc tính STYLE, thuộc tính này chỉảnh hưởng đến thẻ chứa đựng nó mà thôi. Cú pháp:
<Tên thẻ HTML STYLE = "định nghĩa kiểu1; định nghĩa kiểu2;...">
Ví dụ :
<HTML><HEAD><TITLE> CSS, thuộc tính STYLE</TITLE></HEAD> <BASEFONT ="Arial">
<BODY text="navy"> <H2
style = "font-family:'Times New Roman'; size:'20pt'; color:"red"> Tiêu đề 1</H2> <H2> Tiêu đề 2 </H2>
</BODY></HTML>
Nhận xét :
- Dùng kiểu tại chỗđể mở rộng khả năng định dạng của một thẻ HTML. Trong ví dụ trên, thẻ <H2> có "thêm khả năng" định dạng về font, cở chữ và màu sắc.
- Tên thuộc tính và giá trị của thuộc tính trong định nghĩa kiểu có thể khác với tên thuộc tính và giá trị
của một thẻ HTML.
- Tiêu đề 1 và Tiêu đề 2 cùng được định dạng bởi thẻ <H2>, nhưng hiển thị khác nhau trên trình duyệt, do sự quy định bởi kiểu đã khai báo.
- Ta có thể gộp các giá trị của thuộc tính font trong định nghĩa kiểu như sau: <H2 style = "font: 'Arial' '20'; color: 'blue'> Tiêu đề 1</H2>
- Cấu trúc của kiểu tại chỗđược phân tích như sau:
Thẻ HTML Thuộc tính Định nghĩa thứ nhất Định nghĩa thứ 2 <H2 style = "font: 'Arial' '20'; color: 'blue'> Tiêu đề 1</H2> Thuộc tính : Các giá trị của thuộc tính.
II.1.2. Bảng kiểu (StyleSheets)
Một bảng kiểu bao gồm một hoặc nhiều định nghĩa kiểu. Bảng kiểu có thểđược chứa trong tệp tin tư liệu HTML hay được lưu giữ trong một tệp tin bên ngoài tệp tin tư liệu HTML . Một định nghĩa cho một kiểu bao gồm một selector (bộ chọn), tiếp theo sau là khối khai báo kiểu theo cú pháp sau:
SELECTOR { khai báo kiểu1; khai báo kiểu2;... }
Ví dụ : BODY{font-family:"Arial"; font-size:"12pt"; color:"navy"}
Selector là một chuổi ký tự xác định khai báo kiểu áp dụng trên một phần tử HTML, selector là một đề mục mà kiểu sẽ được áp dụng. Các selector có thể là : Tên một thẻ HTML, đây là trường hợp được sử dụng nhiều nhất, Lớp (class), Id, Giả lớp (pseudo-class). Để kích họat những định nghĩa kiểu, ta phải kèm theo chúng như là một phần của bảng kiểu toàn cục hoặc bảng kiểu liên kết.
Bảng kiểu toàn cục (hay bảng kiểu được nhúng vào, bảng kiểu bên trong) được kèm theo như là một phần của tệp tin tư liệu HTML. Loại bảng kiểu này được xác định biên giới của nó trong tệp tin tư liệu HTML bằng cặp thẻ <STYLE> và </STYLE>, được đặt trong phần đầu của tệp tin tư
liệu HTML.
Cú pháp một định nghĩa kiểu trong bảng kiểu :SELECTOR{ khai báo kiểu }
Ví dụ :
<HTML>
<HEAD><TITLE> Bảng kiểu toàn cục </TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE>
body{background-color:"#F3F3F3"; color:"navy";
font:"12pt 'Times New Roman'"; margin-top:10pt; margin-left:10pt} div{font:"italic 12pt"}
p{ text-align:"justify"; text-indent:"8pt"; font:"11pt" "Arial", "Verdana"} H3,H4{font-family:"Verdana"; color:"blue"; background:"silver"}
</STYLE> </HEAD> <BODY> <H2 style="align="center"; color:"red"> NGỤ NGÔN VỀ SERVER-CLIENT<H2> <H3> SERVER</H3> <P>
Cái máy ấy, ở mọi nơi nó được gọi là máy phục vụ, là <B>"đầy tớ"</B> (server). Là đầy tớ, nó phục vụ mọi người, cung cấp cho họ account, mật khẩu truy nhập và nhiều dịch vụ khác. Nhưng lạ thay, nó vẫn làm những việc ấy, từ chỗ là "đầy tớ" ta biến nó trở thành ông chủ-<B>máy chủ </B>.
</P>
<DIV style="text-align=right">Theo báo Tia Sáng, số 4-2005, trang 22 </DIV> </BODY>
</HTML>
Để thêm một ghi chú giữa hai thẻ <STYLE > và </STYLE> ta sử dụng cú pháp : /* nội dung ghi chú */
Nhận xét:
- Các định dạng toàn thể do thẻ <BODY> bị các định dạng do các thẻ <H2>, <H3> và <DIV> chồng lên. (font, color)
- Kiểu tại chỗ của thẻ <H2> áp dụng lên phần tử NGỤ NGÔN.. được bổ sung thêm thuộc tính align, và thuộc tính colorđược thay là red, chồng lên giá trị blue đã khai báo ở bảng kiểu toàn cục.
Như vậy: các giá trị của các thuộc tính trong kiểu cục bộ sẽ chồng lên kiểu toàn cục. Bảng kiểu liên kết
Bảng kiểu toàn cục chỉđược áp dụng cho một trang web, để mở rộng việc áp dụng một bảng kiểu cho nhiều trang web, thậm chí cho toàn thể các trang web trong một website ta sử dụng bảng
kiểu liên kết hay bảng kiểu bên ngoài.
Bảng kiểu liên kết là một tệp tin văn bản mã ASCII, có phần mở rộng CSS, chứa các khai báo kiểu. Tệp tin này có thểđược tham chiếu, hay được liên kết bởi tệp tin tư liệu HTML bằng cách sử
dụng thẻ <LINK>.
Các thuộc tính của thẻ <LINK>:
href:địa chỉ của tệp css
rel : mối quan hệ của tài liệu liên kết tới tài liệu hiện thời (tệp HTML), trong trường hợp này thì tài liệu liên kết chính là tệp css.
type:kiểu tư liệu MIME (Multipart Internet Mail Extension) của tư liệu được liên kết, trong trường hợp này là tệp css.
Giả sử ta có tệp tin CSS có tên styles.css, được chứa trong cùng thư mục với tệp tin tư liệu HTML sau đây, và ta sử dụng bảng kiểu liên kết cho trang web này với khai báo như sau:
<HTML><HEAD><TITLE> Bảng kiểu liên kết</TITLE>
<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">
</HEAD> <BODY>
<!- Nội dung trang web -->
</BODY></HTML>
Chú ý rằng, nếu ta tổ chức website bởi nhiều thư mục thì giá trị của thuộc tính HREF của thẻ
<LINK> nên là một địa chỉ tương đối.
Riêng đối với trình duyệt IE, ta có thể sử dụng lệnh @importđể tạo một liên kết đến một bảng kiểu. Cú pháp: @import:url(pathname) Ví dụ 1: <STYLE> <!- @import:url(styles/general.css); @import:url(styles/special1.css); @import:url(styles/special2.css); --> </STYLE> Ví dụ 2: <STYLE> <!- @import:url(styles/general.css); H1{font-size:14pt; color:red} P{text-align:"justify"} --> </STYLE>
Nhận xét : Ta có thể áp dụng nhiều bảng kiểu cho một tư liệu HTML, do đặc tính đó nên gọi là bảng kiểu xếp chồng. Tuy nhiên, để giải quyết xung đột giữa các bảng kiểu, trình duyệt sẽ quyết
định quyền ưu tiên cho các bảng kiểu đó mà ta sẽ nghiên cứu ở phần sau.
II.2.Xếp chồng và Kế thừa
II.2.1. Xếp chồng (Cascading)
Cascading Style Sheets có tên như vậy do cách nó thiết lập quyền ưu tiên cho những định nghĩa kiểu áp dụng trên những phần tử của trang web. Để hiểu về quyền ưu tiên này, ta xem xét mối quan hệ giữa các thẻ HTML qua sơđồ bên cạnh. Có những phần tử HTML chứa phần tử khác (đối tượng con), ví dụ phần tử <BODY> là phần tử lớn nhất, phần tử <H1>, <P> được chứa trong phần tử
- Thứ tựưu tiên lần lượt cho các kiểu : tại chỗ, toàn cục, liên kết
- Những kiểu dáng được áp dụng lần cuối ưu tiên hơn những kiểu áp dụng trước đó. Nếu muốn tăng độ ưu tiên cho một định nghĩa kiểu đặt biệt, cần thêm khai báo important sau giá trị của thuộc tính cần ưu tiên, như sau:
H3{color : red!important; font-family:arial}
II.2.2. Kế thừa (Inheritance)
Căn cứ mối quan hệ phân cấp giữa các thẻ HTML được xét trong bối cảnh sử dụng trong một tư liệu HTML, các phần tử con sẽ thừa hưởng tất cả các thuộc tính của phần tử con, còn những thuộc tính riêng của phần tử con vẫn được giữ nguyên hoặc phủ chồng lên thuộc tính cùng tên của phần tử
cha.
Ví dụ :
<HTML>
<HEAD><TITLE> Kế thừa</TITLE> <STYLE>
body{ color:blue; margin-left:20pt} p{ font: normal 12pt 'Times New Roman'; text-align:justify; color:navy}
b{ font: bold 14pt Arial} </STYLE>
</HEAD> <BODY> <P>
Trong các kiểu động hỗ trợ cơ chế <B>kế thừa </B>, các phần tử con <I>trong một tư liệu HTML </I>kế thừa tất cả các thuộc tính của phần tử cha
</P>
</BODY></HTML>
Trong ngữ cảnh sử dụng trên, ta có mối quan hệ cha con giữa các phần tử HTML như
sau:
<BODY> ⊃ <P> ⊃ <B>
Các kiểu động được cài đặt trong IE, được hưởng cơ chế kế thừa, theo đó định dạng cho phần tử bên ngoài (phần tử cha) được dùng làm cơ sở cho việc định dạng phần tử bên trong (phần tử con)
Trong IE, những kiểu thực sự có khả năng động nên ta có thể dùng kịch bản (script) để thay
đổi kiểu bất kỳ khi nào. Hiện nay, từ phiên bản NN 7.2 đã hỗ trợ nhiều kiểu động, tuy không hỗ trợ định vịđộng. Đọan mã sau minh họa kiểu tại chỗ có thể thay đổi và chạy tốt trong cả hai trình duyệt IE và NN. <HTML> <HEAD><TITLE> Kiểu động </TITLE></HEAD> <BODY> <SPAN style="color:'blue'" onMouseOver="this.style.color='red'" onMouseOut="this.style.color='blue'"> Click me! </SPAN> </BODY></HTML>
Khi người sử dụng di chuyển con trỏ đến (sự kiện onMouseOver) đối tượng Click me! Thì
dòng văn bản này đổi màu đỏ, khi con trỏ di chuyển rời khỏi (sự kiện onMouseOut) đối tượng thì dòng văn bản này đổi trở lại màu xanh. Ta sẽ nghiên cứu các sự kiện này trong chương 6, "Mô hình
đối tượng trình duyệt".
II.4. Lớp (Class)
Lớp là một dạng selector đặt biệt, là tập hợp nhiều định nghĩa CSS và không gán cho bất kỳ
thẻ nào, khi dùng mới tác dụng lên thẻ HTML nào gọi đến nó. Có các kiểu lớp :
Lớp phổ dụng (regular class) là một bộ chọn lớp chỉ làm việc với lớp và phần tử HTML
được xác định rõ. Lớp phổ dụng có dạng: TênSelector.TênLớp{ khai báo kiểu}
Ví dụ : <HTML> <HEAD><TIILE>Lớp phổ dụng</TITLE> <STYLE> B.large{font-size: 22pt} B.small{font-size: 14 pt} </STYLE> <BODY> <B><This is a standard B> </B><BR>
<B class="small"> This uses the small class </B> <BR> <B class="large"> This uses the large class </B> </BODY>
</HTML>
Nhận xét:
Dòng thứ nhất, chỉ chịu tác dụng của thẻ <B>, không có khai báo kiểu.
Dòng thứ hai, chịu tác dụng của khai báo kiểu trong lớp "small" với font-size: 14pt; tương tự
dòng thứ ba, chịu tác dụng khai báo kiểu trong lớp "large" với font-size 18pt.
Lớp phổ dụng chỉ áp dụng cho một phần tử HTML xác định, trong ví dụ trên các lớp small, large chỉ áp dụng cho phần tử <B> mà thôi.
Lớp chung (generic class)
Ta có thể tạo một lớp chung mà mọi phần tử HTML có thể sử dụng trong trường hợp ta không xác định thẻ cụ thể cho selector. Lớp chung có dạng:
.TênLớp{Khai báo kiểu}
Ví dụ:
<HTML>
<STYLE>
.large{font-size: 22pt} .small{font-size: 14 pt} </STYLE>
<BODY>
<H2 class="small"> The small class on an H2 element</H2> <BR> <DIV class="large"> The large class on a DIV element</DIV> <BR> <P class="small"> The small class on a P element</P> <BR> <B class="large"> The large class on a B element</B> </BODY>
</HTML>
Nhận xét : lớp small được áp dụng cho các phần tử khác nhau: <H2>, <P>; tương tự cho lớp
large, nhưng hai lớp này không thể áp dụng cho phần tử <IMG> vì phần tử này không có thuộc tính font-size.
Lớp giả (pseudo class)
W3C đã xây dựng nhiều kiểu lớp giả, tuy nhiên hiện nay các trình duyệt (IE 6.0, NN 7.2, FireFox 1.0.4) chỉ mới hỗ trợ lớp giả cho thẻ <A>. Các lớp giả này có dạng:
A:TênLớpGiả hoặc A.TênLớp:TênLớpGiả
Có 4 lớp giả của liên kết: link, hover, visited và active tương ứng với 4 trạng thái khi người sử
dụng tác động chuột lên liên kết.
Ví dụ 1: <HTML><HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>Lớp giả</TITLE> <STYLE>
body{font:11pt normal arial} A:link{font: 11pt normal arial; color:navy; text-decoration:none}
A:visited{color:magenta;text-decoration:none}
A:hover{font: bold 11pt arial;color:green;text-decoration:underline} A:active{color:blue;text-decoration:none}
/* Chú ý phải khai báo đúng trật tự trên */ </STYLE> </HEAD> <BODY> <A href="http://msdn.microsoft.com">msdn.microsoft.com</A> <BR> <A href="http://www.w3.org/style/">www.w3.org/style</A> <BR> <A href="http://www.w3school.org/">www.w3school.org</A> </BODY> </HTML>
Ví dụ 2: Trong ví dụ trên ta xây dựng bốn lớp giả cho thẻ <A>, áp dụng cho toàn bộ các liên kết, tuy nhiên để có những định dạng khác nhau cho các nhóm liên kết khác nhau, ta phải sử dụng lớp giả
của lớp với khuôn dạng: A.TênLớp:TênLớpGiả
<HTML> <HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>Multi Pseudo-Class</TITLE>
<STYLE>
body{font:11pt normal arial; margin-left=22pt} /* Nhung website nuoc ngoai*/
A.ext:link{font: normal 11pt arial; color:navy; text-decoration:none} A.ext:visited{color:red;text-decoration:none}
A.ext:hover{font: bold 11pt arial;color:green;text-decoration:underline} A.ext:active{color:blue;text-decoration:none}
/* Nhung website trong nuoc */
A.int:link{font: normal 12pt 'Times New Roman'; color:blue; text-decoration:none}
text-decoration:none}
A.int:hover{font: bold 12pt 'Times New Roman';color:green; text-decoration:underline}
A.int:active{font: normal 12pt 'Times New Roman';color:navy; text-decoration:none}
</STYLE> </HEAD> <BODY>
<A class="ext" href="msdn.microsoft.com"> msdn.microsoft.com</A> <BR> <A class="ext" href="www.w3.org/style/">
www.w3.org/style/</A> <BR> <A class="ext" href="www.w3school.org">
www.w3school.org</A><BR> <HR width=25% align="left">
<A class="int" href="www.tuoitre.com.vn"> Báo Tuổi trẻ tp Hồ Chí Minh</A> <BR>
<A class="int" href=" www.thanhnien.com.vn ">Báo Thanh Niên</A> <BR> <A class="int" href=" www.nld.com.vn ">Báo Người lao động</A> <BR> </BODY>
</HTML>
II.5. ID (ID Selector)
Thay vì tạo một lớp chung cho các thẻ HTML, ta có thể chỉđịnh từng thẻ riêng biệt và sau đó áp dụng bảng kiểu hoặc các chức năng của ngôn ngữ kịch bản JavaScript cho chúng. Mỗi thuộc tính ID trong tư liệu HTML phải là duy nhất. Sự khác biệt giữa ID và Class bản chất ở chỗ class có thể áp dụng cho nhiều phần tử HTML, còn ID chỉ có thể áp dụng cho một phần tử duy nhất trong tư liệu HTML mà thôi. Thuộc tính ID được dùng rộng rãi trong việc định vị một đối tượng trong trang web hoặc dùng mã kịch bản để thay đổi vị trí một đối tượng trong trang web.
Cú pháp :
ID selector đơn : #tênID{khai báo kiểu}
ID selector này sẽ áp dụng chỉ cho 1 phần tử HTML nào đó trong tư liệu HTML ID selector : tênThẻ# tênID{khai báo kiểu}
ID selector này sẽ áp dụng chỉ cho 1 thẻ xác định trong tư liệu HTML
Ví dụ 1:
<HTML> <HEAD>
<TITLE> ID Selector</TITLE> <STYLE>
H1{font: normal 20pt Verdana; color: yellow;
background: green; text-align:center; letter-spacing:.5em}
P{text-align:justify; text-indent: 10pt; font: 10pt/15pt Arial}
P.intro EM{font-style: normal}
P#intro{ text-indent:0; font: italic bold} #note{ text-align: right; font-style: italic} </STYLE>
</HEAD>
<BASEFONT face="Times New Roman"> <BODY>
<P id="intro">Cái vô hạn trong lòng bàn tay, là cuốn sách của nhà khoa học Trịnh Xuân Thuận và thiền sư
Matthieu Ricard</P>
<H1> CÁI VÔ HẠN TRONG LÒNG BÀN TAY</H1>
<P>Không có trí thức được nuôi dưỡng bằng <EM>lòng vị tha</EM> thì khoa học và chính trị sẽ trở thành những con dao hai lưỡi, đạo đức trở nên mù quáng, nghệ thuật phù phiếm, xúc cảm hoang dã và tâm linh viễn vông </P>
<DIV id="note"> Tạp chí của Bộ Khoa học và Công nghệ</DIV> </BODY>
</HTML>
Nhận xét:
Về mặt chức năng định dạng, thì ID và class không có gì khác nhau. Ở ví dụ trên ID note
được sử dụng cho hai thẻ <P> và
<DIV> ở cuối tư liệu HTML, tuy nhiên để truy cập đến một đối tượng trên trang web thì cách sử dụng trên là hoàn toàn không đúng. Chúng ta sẽ nghiên cứu cách dùng ID đểđịnh vị các đối tượng trên trang web trong các chương sau.
II.6. Tạo thẻ HTML tùy biến
HTML 4 có hai loại thẻ đồng nhất có thể kết hợp với class và ID để tạo các thẻ HTML tùy biến
Các phần tử cấp độ khối thường bắt đầu trên một dòng mới và có thể chứa các phần tử cấp độ
khối khác, các phần tử nội tuyến và văn bản. Thẻ <P> là một phần tử cấp độ khối.
Ngược lại, các phần tử nội tuyến (inline) thường không bắt đầu ở dòng mới và chỉ có thể chứa các phần tử nội tuyến khác hoặc văn bản. Các thẻ <B>, <FONT> hay <IMG> là những phần tử nội tuyến.
Trong HTML, các thẻ <DIV> và <SPAN> nếu sử dụng mà không kết hợp với class và ID thì