Xem mẫu
- 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
nguon tai.lieu . vn
