Chương 4: BẢNG KIỂU XẾP CHỒNG pps

Chương 4 BẢNG KIỂU XẾP CHỒNG I. GIỚI THIỆU VỀ CSS I.1 Lịch sử: Ngôn ngữ HTML hay các ngôn ngữ đánh dấu khác (markup language) dùng để trình bày, định dạng trang web đều có những hạn chế nhất định, bên cạnh đó các nhà sản xuất trình duyệt có những thẻ độc quyền, một trang web có thể có những thể hiện khác nhau trên các trình duyệt khác nhau, do vậy HTML đã phát triển đến phiên bản 4.01 và không bổ sung thêm; thay vào đó, với mục đích bảo vệ sự tính phổ cập của HTML, đồng thời vẫn cho phép các nhà thiết kế nhiều quyền điều chỉnh hơn đối với hình thức trang web, từ năm 1994 W3C (theo http://www.w3.org/Style/) đã nghiên cứu thêm một số ngôn ngữ bổ trợ khác kết hợp với ngôn ngữ đánh dấu cho mục đích thể hiện trên trang web được thuận lợi, sinh động hơn. Các ngôn ngữ bổ trợ này là CSS (Cascading Style Sheets), XSL (eXtensible StyleSheets Language) v.v Thuật ngữ style sheet, có nghĩa là một khuôn mẫu (template) áp dụng cho một tư liệu HTML để quy định sự hiển thị tư liệu này như thế nào trong trình duyệt bằng cách ấn định giá trị cho vài thuộc tính tới tất cả các phần tử trong trang web cùng một lúc. Do vậy, sử dụng CSS cho phép người thiết kế tách biệt nội dung trang web và định dạng của nó. Các mức của CSS: - CSS level 1 (CSS1), xây dựng năm 1996, xác định các thuộc tính về định dạng văn bản trong trang web. - CSS level 2 (CSS2), xây dựng năm 1999, bao hàm CSS1 và các thuộc tính về định vị các đối tượng trong trang web. - CSS level 3 (CSS3), đang được xây dựng từ năm 2003 bao hàm CSS2 và các thuộc tính về multimedia. I.2. Những thuận lợi và trở ngại khi sử dụng CSS:  Thuận lợi: - Tiết kiệm thời gian trong việc định dạng hoặc hiệu chỉnh định dạng trang web do đặc tính ấn định giá trị cho vài thuộc tính tới tất cả các phần tử trong trang web cùng một lúc và tính chất tách biệt nội dung và định dạng. - Kiểu dáng dễ dàng thay đổi, thay vì thay đổi các thuộc tính các thẻ một cách thủ công tại nhiều nơi trong tư liệu HTML thì chúng ta chỉ thay đổi ở một nơi duy nhất là phần định dạng bằng CSS (bằng cách nhúng hay liên kết, sẽ trình bày ở các phần sau) 42 - Cho phép tạo một số hiệu ứng mà HTML không làm được, ta có thể sử dụng CSS với JavaScript để tạo nên những hiệu ứng động trên trang web (mà IE gọi là DHTML). - Sử dụng CSS cho phép người sử dụng tải trang web nhanh hơn trong trường hợp dùng bảng kiểu liên kết, do tệp tin CSS đã được tải nên trong các trang web tải lần sau trong cùng một website trình duyệt chỉ cần tải phần nội dung.  Trở ngại: - Không phải tất cả trình duyệt nào cũng hỗ trợ đầy đủ CSS, theo W3C thì trình duyệt Opera hỗ trợ CSS tốt nhất. - CSS luôn luôn được cập nhật, do vậy người thiết kế Web phải dành nhiều thời gian để cập nhật, nghiên cứu mới có thể sử dụng tốt. II. CÚ PHÁP CSS 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. 43 - 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> 44 <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. 45  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ử <BODY> v.v Các quyền ưu tiên dựa trên các nguyên tắc: - 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 46 - 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} (chú ý dấu ! nằm giữa giá trị của thuộc tính và từ important) 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) II.3. Kiểu động 47 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. 48 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> <HEAD><TIILE>Lớp chung</TITLE> <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} 49 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} A.int:visited{font: normal 12pt 'Times New Roman';color:maron; 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"> 50 <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> 51 [...]... cho hai hoặc nhiều phần tử trên cùng một trang web được không? Giải thích 3 Nếu một phần tử HTML không bao gồm trong một bảng kiểu dưới dạng một selector thì nó sẽ được kế thừa (inherit) các thuộc tính của phần tử cha? 4 Một bảng kiểu dạng nhúng hoặc liên kết sẽ chồng (override) lên kiểu tại chỗ (inline style) được áp dụng cho một phần tử HTML? 5 Xây dựng một Class selector áp dụng cho thẻ để có... DOM (nghiên cứu ở chương 6), để đảm bảo áp dụng CSS trên các trang web cần nghiên cứu sự khác biệt giữa hai mô hình đối tượng tư liệu của trình duyệt Internet Explore và Netscape Navigator Với CSS cần phải phân biệt hai vấn đề : - Sử dụng cú pháp của CSS để xây dựng bảng kiểu (liên kết, nhúng, tại chỗ) - Sử dụng thuộc tính style để áp dụng trong các script khác với cú pháp của bảng kiểu, ví dụ CSS viết... color :xác định màu chữ, có các kiểu giá trị : tên màu (red, blue, ), giá trị hexa (ví dụ #FF0000 tương ứng màu đỏ), bộ ba giá trị RGB ( ví dụ RGB(192, 192,  56 192) xác định màu xám) hay bộ ba giá trị HSL (viết tắt của Hue Saturation Lightness, ví dụ HSL(0deg, 100%, 50%) xác định màu đỏ) IV.3 Định dạng phần tử theo kiểu dáng Một đối tượng do người sử dụng tạo ra với bảng kiểu được đóng khung trong trong... xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn Mạc Tử) Ngày mai trong đám xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn Mạc Tử) Ngày mai trong đám xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn Mạc Tử) Ngày mai trong đám xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn... các kiểu dáng tùy biến mà không chịu ảnh hưởng bởi bất kỳ thẻ hiện hành nào, cũng như các kiểu dáng tương ứng chúng II.6.1 Tạo thẻ cấp độ khối tùy biến 52 Có thể bổ sung class hoặc ID cho thẻ để tạo thẻ HTML tùy biến cấp độ khối Cú pháp như đã trình bày trong các phần class và ID đã nêu trên, ở đây ta nhấn mạnh đến cách sử dụng thẻ  DIV.tênLớp{khai báo kiểu}  hoặc DIV#tênID{khai báo kiểu} ... in ấn -nt-nt(*) đơn vị đo tương đối so với font chữ hiện thời IV.2 Định dạng văn bản với bảng kiểu Trong chương 2, 3 chúng ta đã nghiên cứu việc định dạng văn bản bằng các thẻ HTML, chúng có hạn chế là cần phải sử dụng nhiều mã định dạng W3C đưa ra một giải pháp để giản lược các tag định dạng văn bản, danh sách, bảng bằng CSS IV.2.1 Các thuộc tính về font chữ font-family: xác định danh sách cách font... HTML nội tuyến tùy biến, thẻ này tương tự như một mẫu ký tự trong các trình sọan thảo văn bản hay dàn trang Cú pháp:  SPAN.tênLớp{khai báo kiểu}  hoặc SPAN#tênID{khai báo kiểu} Ví dụ : Thẻ HTMM nội tuyến tùy biến /* Khai báo cáo kiểu dáng */ body{ font: normal 12pt 'Times New Roman'} span.initialCap{font:150% normal brussels ; color:blue; text-indent:12pt} span.allCap{font-variant:... nào, trình duyệt sẽ chọn một trong các font sau: Times, Arial, Script, Ransom và Courier  font-style: kiểu dáng font chữ, có 3 giá trị : normal | italic | oblique  font-weight: độ đậm, nhạt của font chữ : có 14 giá trị : normal | bold |  bolder | lighter | 100 | 200 | | 900 font-size: cở chữ, có các kiểu giá trị : cở tuyệt đối (đơn vị đo pt), cở tương đối so với cở hiện tại (xx-small, x-small,, small,... thì sau khi thi xong, tất cả lại quên hết 54 VNEXPRESS.NET, 2003 IV SỬ DỤNG CSS Trong các phần trên ta đã nghiên cứu về cú pháp của bảng kiểu (CSS syntax), các cách cài đặt, trong phần này ta sẽ nghiên cứu các thuộc tính của CSS để áp dụng cho việc kiểm soát, định dạng các đối tượng trên trang web Để nghiên cứu các thuộc tính của CSS2,... class="box"> Theo dòng sự kiện Lịch sử các nhãn hiệu xe 01/03 IV.4 Trình bày trang theo bảng kiểu IV.4.1 Định vị hai chiều Định vị hai chiều là một phần trong đặc tả CSS2, các thuộc tính xác định vị trí một phần tử trong trang web : position, top và left  position : nhận hai giá trị absolute . 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. 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. 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