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

Chia sẻ: Le Van Vu | Ngày: | Loại File: DOC | Số trang:25

Thêm vào BST

Báo xấu

197
lượt xem 35
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Chương 4: BẢNG KIỂU XẾP CHỒNG

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: Ví dụ : CSS, thuộc tính STYLE
- 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ẻ 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ẻ , 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: Tiêu đề 1 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ẻ và , đượ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ụ : Bảng kiểu toàn cục 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"} 44
 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: Bảng kiểu liên kết 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ẻ 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: Ví dụ 2: --> 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ử là phần tử lớn 46
nhất, phần tử , được chứa trong phần tử 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 - 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ụ : Kế thừa body{ color:blue; margin-left:20pt} p{ font: normal 12pt 'Times New Roman'; text-align:justify; color:navy} b{ font: bold 14pt Arial} Trong các kiểu động hỗ trợ cơ chế kế thừa , các phần tử con trong một tư liệu HTML kế thừa tất cả các thuộc tính của phần tử cha 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: ⊃ ⊃ 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) 47
II.3. Kiểu động 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. Kiểu động Click me! 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ụ : Lớp phổ dụng B.large{font-size: 22pt} B.small{font-size: 14 pt} This uses the small class This uses the large class Nhận xét: 48
Dòng thứ nhất, chỉ chịu tác dụng của thẻ , 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ử 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ụ: Lớp chung .large{font-size: 22pt} .small{font-size: 14 pt} The small class on an H2 element The large class on a DIV element The small class on a P element The large class on a B element Nhận xét : lớp small được áp dụng cho các phần tử khác nhau: , ; tương tự cho lớp large, nhưng hai lớp này không thể áp dụng cho phần tử 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ẻ . 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: Lớp giả body{font:11pt normal arial} A:link{font: 11pt normal arial; color:navy; text-decoration:none} 49
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 */ msdn.microsoft.com www.w3.org/style www.w3school.org Ví dụ 2: Trong ví dụ trên ta xây dựng bốn lớp giả cho thẻ , á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ả Multi Pseudo-Class 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} msdn.microsoft.com www.w3.org/style/ www.w3school.org 50
Báo Tuổi trẻ tp Hồ Chí Minh Báo Thanh Niên Báo Người lao động 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: ID Selector 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} 51
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 CÁI VÔ HẠN TRONG LÒNG BÀN TAY Không có trí thức được nuôi dưỡng bằng lòng vị tha 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 Tia sáng, 4-2005 Tạp chí của Bộ Khoa học và Công nghệ 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ẻ và ở 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ẻ 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ẻ , hay là những phần tử nội tuyến. Trong HTML, các thẻ và nếu sử dụng mà không kết hợp với class và ID thì tính chất giống như thẻ , ngược lại kết hợp với class và ID tạo ra thẻ tùy biến đầy hiệu quả. Thẻ dùng cho các phần tử cấp độ khối, thẻ dùng cho các phần tử nội tuyến. Thẻ và cho phép tạo ra 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. 52
II.6.1. Tạo thẻ cấp độ khối tùy biến 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} Ví dụ : The HTML tuy bien body{font: normal 12pt 'Times New Roman'} DIV.intro{font-style: italic; text-align:justify; width:220; height:120; float:left;} DIV.content{font-style: normal; text-align: justify; width:240; height:120;position:relative;right:-20} P{text-align:justify; text-indent: 10pt; font: 10pt arial} P.intro{font-style: italic; text-indent:0pt} P.content{font: normal 10pt; text-align: justify; text-indent:12pt;margin-right:20pt} H3{background:maroon; color: white; font: bold 10pt verdana; text-align: center} Văn tế nghĩa sĩ Cần Giuộc, ngôi đền thiêng trong văn học Cụ Đồ Chiểu chỉ là một nhà thơ mù, một người hát rong của nhân dân, một số tác phẩm cụ để lại mà tiêu biểu nhất là Văn tế nghĩa sĩ Cần Giuộc đã làm giàu cho văn học Việt Nam ở vào thời điểm thử thách khắc nghiệt nhất cho văn học và cho lịch sử đất nước Chớ động vào ngôi đền thiêng do chính nhân dân dựng lên! Cụ Đồ Chiểu "thảo dân" và Văn tế nghĩa sĩ Cần Giuộc là ngôi đên thật, ngôi đền thiêng của văn học chúng ta. Hãy cẩn trọng khi chạm đến nó Thanh Niên, 137, 2005 53
Nhận xét : Thẻ tạo ra một khối tương tự như một textbox trong Winword, bên trong có thể chứa các khối khác, văn bản ... Thuộc tính CSS quan trọng là : - width, height : chỉ kích thước của khối, tính bằng pixel hay pt. - position : xác định vị trí của khối là tương đối (relative) hay tuyệt đối (absolute) - float : xác định các đối tượng ngoài khối được trình bày bao quanh (wrapping) như thế nào. - left | right : xác định khoảng trống được thêm vào bên trái / bên phải của khối. Ta có thể sử dụng ID để có hiệu quả tương tự, tuy nhiên cần phải chú ý là thuộc tính ID phải duy nhất ! II.6.2. Tạo thẻ cấp độ nội tuyến tùy biến Có thể bổ sung class hoặc ID cho thẻ để tạo thẻ 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: small-caps} N 54
ếu học hành mà không phải sự khát khao, mà chỉ là sự bắt buộc để thi, thì sau khi thi xong, tất cả lại quên hết 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, có thể xem trong phụ lục số 2. IV.1. Đơn vị đo trong CSS Tên đơn Chữ viết Diễn giải vị tắ t Em em Chiều cao của một font chữ (*) Ex ex Chiều cao của ký tự x trong font chữ (*) Pica pc 1 pica = 12points Point pt 1/72 inch (1inch =2,54 cm) Pixel px Một điểm (dot) trên màn hình millimeter mm Đơn vị in ấn centimeter cm -nt- Inch in -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 chữ, nếu những tên font chữ có khoảng trống phải đặt vào trong cặp dấu nháy. Trình duyệt sẽ ưu tiên thể hiện bằng font chữ tìm thấy lần đầu tiên trong danh sách sự hiện diện font này trong máy tính của người sử dụng. Nếu không tìm thấy font chữ 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, medium, large, x-large, xx- 55
large) hay so sánh tương đối với phần tử cha (larger, smaller) , tỷ lệ % so với cở hiện hành.  font-variant: nhận một trong hai giá trị normal | small-caps, tức giữ nguyên như đã gõ vào hay tự động chuyển tất cả thành dạng small-cap.  font: thuộc tính gộp các thuộc tính về font chữ, nhất thiết phải khai báo các giá trị đúng trật tự sau (có thể vắng một thuộc tính) : style | weight | variant | size / line-height | font-family hoặc font-style | font-variant | font-weight | font-size | font-family Ví dụ : Thôn Vĩ Dạ .poem{font-variant:small-caps} .single{font: italic normal 11pt/16pt 'Times'} .multiple {font: italic normal 11pt/12pt 'Times'} đây thôn vĩ dạ Sao anh không về chơi thôn VĩNhìn nắng hàng cau nắng mới lên Vườn ai mát quá xanh như ngọc Lá trúc che ngang mặt chữ điền IV.2.2. Các thuộc tính về văn bản  text-decoration : nhận các giá trị none, underline, overline, line-through và blink (thuộc tính này chỉ tác dụng trong NN). text-align : xác định việc căn lề trong một paraph, thuộc tính này có các giá trị left, center, right và justify.  text-indent : xác định khoảng thụt đầu dòng của một paragraph, tính bằng pt (point) hay px (pixel)  line-hight : xác định kích thước tổng thể của dòng văn bản, bao gồm khoảng trống phía trên và phía dưới, do vậy thuộc tính này ảnh hưởng tới khoảng cách giữa các dòng.  letter-spacing : xác định khoảng cách giữa các ký tự.  text-transform : kiểm soát việc viết hoa của văn bản, (phân biệt thuộc tính này với thuộc tính font-variant), các giá trị của thuộc tính này: none, capitalize, uppercase và lowercase. 56
IV.2.3. Thuộc tính về màu chữ 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, 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 một vùng định dạng (tương tự như TextBox trong Winword), hay còn được gọi là một hộp vô hình. Vùng định dạng này có các thuộc tính : Nền (background) nằm phía sau phần tử Lề (margin) nằm xung quanh đường biên của đối tượng để phân cách với các đối tượng khác. Vùng đệm (padding) phân cách phần tử với đường biên (border) của nó Các thuộc tính margin, padding và border áp dụng để định dạng table cho hiệu quả tốt. Sơ đồ bên cạnh mô ta cấu trúc của vùng định dạng . IV.3.1. Các thuộc tính chung về Box Có bốn thuộc tính chung về vùng định dạng : height, width, float và clear  height, width : xác định kích thước của vùng định dạng  float : xác định cách dàn văn bản, các phần tử khác xung quanh phần tử xác định, có hai giá trị left | right , nếu muốn phần tử nằm bên trái /phải trang web và văn bản dàn bên phải / trái phần tử đó.  clear: xác định cách dừng việc dàn văn bản xung quanh phần tử, có các giá trị : - left | right: dừng dàn văn bản cho đến khi cạnh trái/phải không còn phần tử nào. - both : dừng dàn văn bản cho đến khi cả hai cạnh không còn phần tử nào. - none : tiếp tục dàn văn bản IV.3.2. Các thuộc tính nền background: là một thuộc tính gộp xác định thuộc tính nền của trang web, khối hay một ký tự. Các thuộc tính riêng và giá trị của chúng (khi khai báo gộp cần đúng theo thứ thự : color, image, repeat, attachment và position) * background-color: Chọn một trong 16 tên màu như white, black, blue,... hay giá trị RGB 57
* background-image: có 2 giá trị none, nếu muốn loại bỏ bất kỳ hình ảnh nào đã thiết lập trước đó; URL(image.gif) để dùng một hình ảnh làm nền, khi sử dụng giá trị này cần khai báo thuộc tính background-repeat * background-repeat : gồm các giá trị repeat: lặp lại hình ảnh theo cả chiều dọc lẫn chiều ngang repeat-x / repeat-y: lặp lại hình ảnh theo chiều ngang / dọc no-repeat : không lặp lại hình ảnh * background-attachment: chỉ sử dụng trên phần tử BODY, có hai giá trị là scroll / fixed : để định nền có cuộn theo ảnh hay không * background-position : để xác định tọa độ ảnh làm nền, có thể chọn x, y (tính bằng pixel, point hay tỷ lệ %) hay top, center, bottom thay cho x và left, center, right thay cho y Lưu ý : thuộc tính background có thể áp dụng cho thẻ , các thẻ cấp độ khối. IV.3.3. Các thuộc tính lề và phần đệm  Các thuộc tính về việc xác định lề của một phần tử : margin là thuộc tính gộp của bốn thuộc tính, margin-top, margin-right, margin-bottom, margin-left . Lưu ý : thuộc tính margin có tính tương đối, phụ thuộc vào thuộc tính position mà ta sẽ nghiên cứu ở dưới. Cách sử dụng: Xác định lề trên, phải, dưới, trái của một phần tử cùng bằng một giá trị margin : npt hoặc giá trị khác nhau : margin : n1pt n2pt n3pt n4pt.  Các thuộc tính về việc xác định khoảng trắng giữa đường biên và phần tử: padding là thuộc tính gộp của 4 thuộc tính padding-top, padding-right, padding-bottom, padding-left. Cách sử dụng như thuộc tính margin IV.3.4. Các thuộc tính về đường biên  border-width : xác định độ rộng của đường viên, có thể nhận các giá trị thin, medium, thick hay những đơn vị do chuẩn như px, em và pc  border-style : xác định kiểu đường biên, có thể nhận các giá trị none, solid, double, groove, ridge, inset và outset.  border-color : xác định màu cho 4 cạnh của đường biên Ta có gộp nhóm các thuộc tính đường biên bằng thuộc tính border, nhưng khi khai báo giá trị cần phải theo thứ tự trên.Các thuộc tính cho từng đường biên border-top, border-bottom, border-left và border-right chỉ được IE hỗ trợ. Ví dụ : Hình bên cạnh là một phần trang web của VnExpress.net. Để trình bày như vậy ta có đọan mã như sau: 58
Ô tô, xem máy body{font: normal 11pt 'Times New Roman'; color: black} .box {background-color: #F7F7F7; border: 3px solid blue; font: bold 10pt arial; color: #008080 ; padding: 10px; float: left; align: justify} .note{ font: normal 10pt arial; color: silver} .emph{font-style:underline; color: black} a.link{color: #008080} 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 | relative, xác định các giá trị của các thuộc tính top | left là tuyệt đối hay tương đối.  top | left: xác định khoảng cách từ đỉnh / cạnh trái của phần tử đến một điểm gốc. Điểm gốc này phụ thuộc vào giá trị của thuộc tính position. Giá trị của thuộc tính này tính bằng các độ đo chuẩn. Nếu position:absolute thì điểm gốc là lề trên và lề trái của trang web Ngược lại, điểm gốc có thể là các lề của trang web hay phần tử khác đứng bên trên / bên trái của phần tử được xác định vị trí. Ví dụ : Dinh vi 2 chieu 59
body{font: normal 11pt arial} .sp1{background-color:silver; position:absolute; top: 2px; left:10px} .sp2{background-color:lightgrey; position:absolute; top:15%; left: 5%; width: 50%} .sp3{background-color:red; position:relative; top:3px} .sp4{background-color:cyan; position:absolute; top:75px; left: 25px; width:50%} SPAN 1 has position set to absolute SPAN 2 has position set to absolute. The following word relativeis in Span 3,which has position set to relative Span 4 is contained by Span 2 and has position set to absolute This is the lasted in Span 2 IV.4.2. Định vị theo chiều thứ 3 Để có thể định vị hai phần tử trên cùng một điểm trên trang web, ta dùng thuộc tính z-index. Giá trị của thuộc tính này là một số nguyên, phần tử nào có giá trị nhỏ hơn sẽ nằm phía sau (behind), phần tử có giá trị lớn hơn sẽ nằm phía trước (in front). Ví dụ : Z-INDEX .body{background-color:lightgrey; color: blue} .img1{position:absolute; top:20px; left:150px; z-index:1;width:120; height:90} .img2{position:absolute; top:20px; left:330px; z-index:-1;width:120; height:90;border:1px solid navy} 60
.sp{position:absolute; top:40px; left:60px; z-index:0;font: normal bold 11pt} This SPAN has a z-index value between those of the two images IV.5. Định dạng những phần tử khác của trình duyệt IV.5.1. Thuộc tính display và visibility Trong các phần trên ta đã nghiên cứu cách kiểm soát vị trí một phần tử trên trang web cũng như vị trí giữa các phần tử. Các thuộc tính display và visibility cho phép ta kiểm soát phần tử có xuất hiện trên trang web không. Tuy nhiên có sự khác biệt giữa hai thuộc tính này.  display : xác định phần tử xuất hiện như thế nào hay không xuất hiện. Các giá trị của thuộc tính này :none (không xuất hiện); các giá trị sau là tương đương và làm xuất hiện phần tử: inline, block, list-item.  visibility : xác định phần tử có được nhìn thấy trên trang web không. Các giá trị của thuộc tính này: visible, hidden và collapse. Nếu display:none thì đối tượng không xuất hiện trên trang web và vùng không gian của nó chiếm chỗ được giải phóng; khác với visibility:hidden thì đối tượng không nhìn thấy trên trang web nhưng vùng không gian của nó vẫn còn nguyên. Nhiều website sử dụng tính chất này để xây dựng các menu có khả năng bung ra / thu gọn. IV.5.2. Hiển thị từng phần Để kiểm soát nội dung bên trong vùng định vị có vừa vẹn với kích thước của vùng định vị , ta dùng các thuộc tính overflow, thuộc tính này có các giá trị:  hidden : nếu muốn khung của vùng định vị cắt bỏ phần ngoài khung, không thể xem được.  visible : nếu muốn tất cả nội dung của phần tử được thể hiện tất cả. 61