Giáo trình Thiết kế Website (Phần 1)

TRƯỜNG CAO ĐẲNG NGHỀ VIỆT-ĐỨC VĨNH PHÚC 
KHOA CÔNG NGHỆ THÔNG TIN 
GIÁO TRÌNH 
THIẾT KẾ WEBSITE 
(Lưu hành nội bộ) 
GV: TRẦN TRUNG KIÊN 
VĨNH PHÚC 08/2011 
 1
LỜI MỞ ĐẦU 
Ngôn ngữ Siêu văn bản HTML (Hyper Text Markup Language) là ngôn ngữ 
biểu diễn văn bản cho phép ta đưa vào một văn bản nhiều thuộc tính cần thiết để 
có thể truyền thông quảng bá trên mạng toàn cục WWW (World Wide Web). HTML 
cho phép ta đưa hình ảnh đồ họa vào văn bản, thay đổi cách bày trí của văn bản, 
và tạo những tài liệu siêu văn bản có khả năng đối thoại tương tác với người dùng. 
HTML chủ yếu xoay quanh khái niệm “thẻ” (tag) làm nền tảng. Một ví dụ về 
tag là . Hầu hết các chức năng trên HTML có thẻ mở và thẻ đóng tạo thành 
một cặp giới hạn một đoạn văn bản. Ví dụ và là thẻ “bold” nghĩa là 
chữ béo. Toàn bộ đoạn văn bản giữa và sẽ được thể hiện dưới dạng chữ 
béo (hay chữ đậm) khi văn bản đó được xem bằng một trình duyệt tương ứng. Ví dụ 
 xin chào sẽ được hiện lên là xin chào. 
Để tạo một siêu văn bản, ta có thể dùng bất cứ một chương trình soạn thảo 
nào (ví dụ: NC-Norton Commander, EDIT - của DOS, NotePad hay Write - của 
Windows 3.x, WordPad của Win95, WinWord 2.0 hay 6.0, FoxPro, Borland C++ 
IDE, Borland Pascal IDE, FrontPage, TextPad, v.v), chỉ cần nắm được các thẻ 
của HTML, và khi ghi vào đĩa thì cần lưu dưới dạng file text. Tên file có đuôi mở 
rộng là HTM (hoặc HTML). Song có một hạn chế là dạng văn bản khi ta soạn với 
khi ta xem sau này (trên WWW) không giống nhau. Chính vì lẽ đó mà nhiều hãng 
tung ra phần mềm soạn siêu văn bản What You See Is What You Get (WYSIWYG-
cái ta thấy cũng là cái ta có được). Hãng Microsoft cũng đã tung ra một tiện ích 
được sử dụng rộng rãi. Ngoài ra, còn có nhiều tiện ích chuyển đổi từ dạng RTF (có 
thể soạn bằng WinWord hay WordPad) sang HTML, hay các phiên bản sau này 
của trình duyệt Web như NetScape có sẵn luôn chức năng này. Các tiện ích đó đều 
giống nhau ở chỗ cho phép ta gõ trực tiếp các thẻ vào văn bản nhưng cũng có thể 
dùng tổ hợp của thanh công cụ (toolbar), hộp thoại (dialog), thực đơn (menu) hay 
danh sách các lựa chọn (pop-up list). Để gạch dưới đoạn văn bản trong ví dụ vừa 
rồi, ta có thể gõ vào xin chào, dùng chuột chọn, rồi bấm vào nút Underline trên 
thanh công cụ. Văn bản sẽ tự động được chuyển thành xin chào (ở đây 
thì và là cặp mở/đóng của tag có chức năng giới hạn đoạn văn bản cần 
được gạch dưới). 
 2
Ngày nay, do sự phát triển như thác lũ của mạng toàn cục, HTML cũng ngày 
càng trở nên phức tạp và hoàn thiện hơn để đáp ứng được những yêu cầu mới nảy 
sinh trong quá trình phát triển đó (như âm thanh, hình ảnh động, v.v). Người ta 
gọi đó là những phiên bản của HTML và đánh số để biểu thị. HTML 2, HTML 2+, 
HTML 3, là để chỉ những phiên bản sau này. 
Một trong những điểm mạnh của HTML là một văn bản bất kỳ nếu tuân thủ 
tiêu chuẩn HTML đều có thể hiện lên màn hình hay in ra, tóm lại là hiểu được, bởi 
bất kỳ loại phần mềm hay máy tính nào mà người đọc có, không phân biệt trình 
duyệt nào (NetScape trên Windows hay Lynx trên UNIX, thậm chí cho người khiếm 
thị bằng phần mềm đặc biệt). 
Người ta còn đang tranh cãi nhiều trên Internet về HTML “tốt”. Định hướng 
nguyên thủy của HTML là tạo ra một phương pháp vạn năng để lưu giữ và thể hiện 
thông tin. Sau này người ta coi HTML như một ngôn ngữ định hướng nội dung – 
“trong tài liệu có gì” quan trọng hơn nhiều so với “tài liệu có đẹp không”. 
Tác giả rất mong nhận được sự góp ý từ bạn đọc 
Xin chân thành cảm ơn. 
 3
- Tên môn học: THIẾT KẾ WEB 
- Mục tiêu: Cung cấp cho học viên các kiến thức cơ bản liên quan đến ngôn 
ngữ HTML và thiết kế Web. 
- Những kiến thức cần phải được trang bị trước khi học: Có kiến thức về sử 
dụng máy tính. 
- Nội dung môn học: 
Chương I: NHỮNG KHÁI NIỆM CƠ SỞ. 
Chương II: TRÌNH BÀY TRANG. 
Chương III: DANH SÁCH VÀ BẢNG TRONG HTML. 
Chương IV: ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML. 
Chương V: CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN. 
Chương VI: BÀY TRÍ NỀN VÀ KHUNG. 
Chương VII: BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET. 
Chương VIII: CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (Microsoft 
FrontPage 2003) 
- Đối tượng học: Những người cần biết các kiến thức cơ bản về HTML và 
Website để thiết kế Website tĩnh. 
- Biên soạn: Trần Trung Kiên - Bộ môn Thiết kế Web, Khoa Công nghệ thông 
tin, Trường CĐ nghề Việt-Đức Vĩnh Phúc. 
 4
MỤC LỤC 
 LỜI MỞ ĐẦU 1 
CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ ....................................................... 9 
I.1. World Wide Web là gì? ............................................................................... 9 
I.2. HTML là gì? .............................................................................................. 12 
I.3. Các đặc điểm của siêu văn bản ................................................................. 13 
I.3.1. Độc lập với phần cứng và phần mềm ..................................................... 13 
I.3.2. Độc lập với khái niệm trang và thứ tự các trang..................................... 14 
I.3.3. Website và trang chủ - homepage .......................................................... 14 
I.4. Soạn thảo văn bản - những vấn đề chung ................................................ 15 
I.4.1. Trang mã nguồn HTML và trang Web ................................................... 15 
I.4.2. Các thẻ HTML ...................................................................................... 16 
I.4.3. Các quy tắc chung ................................................................................. 17 
I.4.4. Cấu trúc của một tài liệu HTML ............................................................ 18 
I.4.5. Các phần tử HTML (HTML element) .................................................... 19 
Bài tập ............................................................................................................... 19 
CHƯƠNG II. TRÌNH BÀY TRANG ................................................................. 20 
II.1. Tạo tiêu đề ................................................................................................ 20 
II.2. Thẻ trình bày trang .................................................................................. 21 
II.2.1. Một số thẻ chính ................................................................................... 21 
II.2.2. Các thuộc tính của thẻ trình bày trang .................................................. 25 
Bài tập ............................................................................................................... 27 
CHƯƠNG III. DANH SÁCH VÀ BẢNG TRONG HTML ............................... 28 
III.1. Các kiểu danh sách ................................................................................. 28 
III.1.1. Danh sách không đánh số thứ tự ......................................................... 28 
III.1.2. Danh sách đánh số thứ tự .................................................................... 29 
III.1.3. Danh sách các định nghĩa .................................................................... 31 
III.1.4. Danh sách phối hợp, lồng nhau ........................................................... 31 
 5
III.2. Bảng biểu ................................................................................................ 32 
III.2.1. Khung cấu trúc .................................................................................... 32 
III.2.2. Một số lưu ý về bảng........................................................................... 33 
III.2.3. Các ví dụ ............................................................................................. 37 
Bài tập ............................................................................................................... 40 
CHƯƠNG IV. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML .............................. 41 
IV.1. Hình ảnh tĩnh .......................................................................................... 41 
IV.1.1. Tệp ảnh ............................................................................................... 41 
IV.1.2. Thẻ ..................................................................................... 41 
IV.2. Các thuộc tính của thẻ chèn hình ảnh.................................................... 41 
IV.2.1. Thuộc tính ALT .................................................................................. 41 
IV.2.2. Thuộc tính WIDTH và HEIGHT ........................................................ 42 
IV.2.3. Thuộc tính ALIGN ............................................................................. 43 
IV.2.4. Thuộc tính VSPACE và HSPACE ...................................................... 43 
Bài tập ............................................................................................................... 44 
CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN..................................... 45 
V.1. Thẻ neo và mối liên kết ............................................................................ 45 
V.1.1. Thuộc tính HREF ................................................................................. 45 
V.1.2. Liên kết ra ngoài – External Links ....................................................... 45 
V.1.3. Địa chỉ tuyệt đối ................................................................................... 46 
V.1.4. Địa chỉ tương đối ................................................................................. 46 
V.1.5. Liên kết nội tại – Internal Link ............................................................. 46 
V.2. Dùng hình ảnh làm đầu mối liên kết ....................................................... 47 
V.2.1. Thay chữ bằng hình.............................................................................. 47 
V.2.2. Image Map - thẻ AREA ....................................................................... 47 
V.3. Đưa âm thanh vào tài liệu ........................................................................ 48 
V.3.1. Liên kết đến tệp âm thanh .................................................................... 48 
V.3.2. Tạo âm thanh nền ................................................................................. 48 
 6
V.4. Đưa Video vào tài liệu .............................................................................. 49 
V.4.1. Chèn tệp Video .................................................................................... 49 
V.4.2. Nhúng tệp video ................................................................................... 49 
Bài tập ............................................................................................................... 50 
CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG ..................................................... 51 
VI.1. Màu nền và văn bản ............................................................................... 51 
VI.1.1. Đặt màu nền........................................................................................ 51 
VI.1.2. Màu chữ của văn bản .......................................................................... 51 
VI.1.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK ...... 51 
VI.1.4. Thuộc tính và mã màu ........................................................................ 52 
VI.2. Nạp hình ảnh làm nền cho trang văn bản ............................................. 53 
VI.2.1. Thuộc tính BACKGROUND .............................................................. 53 
VI.2.2. Water mark ......................................................................................... 53 
VI.2.3. Hãy ký tên vào tài liệu của mình ......................................................... 54 
VI.3. Khung – Frames...................................................................................... 55 
VI.3.1. Trang trí khung ................................................................................... 55 
VI.3.2. Thành phần FRAMESET .................................................................... 56 
VI.4. Thiết lập Target, thẻ NOFRAME và IFRAME .................................... 59 
VI.4.1. Thiết lập Target .................................................................................. 59 
VI.4.2. Thẻ NOFRAMES ............................................................................... 60 
VI.4.2. Nhúng frame - thẻ IFRAME ............................................................... 60 
Bài tập ............................................................................................................... 61 
CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET ....... 62 
VII.1. FORM .................................................................................................... 62 
VII.1.1. FORM là gì? ...................................................................................... 62 
VII.1.2.Các thành phần trong FORM .............................................................. 63 
VII.1.3. Thêm tính cấu trúc cho FORM .......................................................... 70 
VII.2. Cascading style sheet ............................................................................. 72 
 7
VII.2.1. Inline Style ........................................................................................ 72 
VII.2.2. Giới thiệu Style Sheet ........................................................................ 74 
VII.2.3. Javascript Style Sheet ........................................................................ 75 
VII.2.4. Thuật ngữ Style Sheet ....................................................................... 77 
VII.2.5. Các chú thích trong Style Sheet ......................................................... 92 
VII.2.6. Lợi ích của các Style Sheet ................................................................ 92 
VII.2.7. Kết hợp Style Sheet với HTML ......................................................... 93 
VII.2.8. Thứ tự ưu tiên của các style (Cascading) ........................................... 97 
CHƯƠNG VIII. CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB 
(MICROSOFT FRONTPAGE 2003) ............................................................... 100 
VIII.1. Tạo một trang Web ............................................................................ 100 
VIII.1.1. Bắt đầu sử dụng FrontPage2003 ..................................................... 100 
VIII.1.2. Tạo một trang từ một template ....................................................... 101 
VIII.1.3. Tạo và lưu một trang mới ............................................................... 102 
VIII.1.4. Tạo một đề mục ............................................................................. 103 
VIII.1.5. Chọn font và màu ........................................................................... 104 
VIII.2. Tổ chức một trang với các liên kết, danh sách và bảng ................... 107 
VIII.2.1. Thêm một hyperlink vào một trang Web ........................................ 107 
VIII.2.2. Tạo một danh sách ......................................................................... 110 
VIII.2.3. Tổ chức một trang với các bảng ..................................................... 112 
VIII.2.4. Hiển thị hình ảnh trên một trang ... or:limegreen } 
H1{ font-family: Arial } 
 { color: limegreen } 
H2{ font-family:Arial } 
This is the H1 element 
This is the H2 element 
This is the H3 element with its default style as 
displayed in the browser 
 79
Ta cũng có thể nhóm các luật. Mỗi khai báo được phân chia bởi một dấu 
chấm phẩy. 
Ví dụ: 
 H1, H2{ color: limegreen;font-family: Arial;} 
This is the H1 element 
This is the H2 element 
This is the H3 element with its default style as 
displayed in the browser 
Hình VII.4. Luật nhóm 
Các Selector 
Selector có thể được định nghĩa như, “một xâu mà quy định các luật nào hỗ 
trợ cho các phần tử nào. 
Có hai kiểu cơ bản của các selector 
- Các selector đơn giản (Simple selectors) 
- HTML Selectors 
- Class selectors 
 80
- ID Selectors 
- Các selector ngữ cảnh (Contextual selectors) 
a. Các selector đơn giản (Simple selectors) 
Sử dụng dễ nhất. Nó mô tả một phần tử không kể vị trí của nó trong cấu trúc 
tài liệu. Quy định H1 là một selector đơn giản. 
Ví dụ: H1 {color:blue} 
HTML Selector 
Seletor này sử dụng các tên của các phần tử HTML. Chỉ khác là ta loại bỏ 
các móc nhọn. Như vậy, thẻ HTML trở thành P. Trong ví dụ dưới đây, trong 
khi định nghĩa style, phần tử P không có các móc nhọn. Điều này bởi vì, phần tử 
 HTML được đối xử như một selector. 
Ví dụ: 
P{font-style:italic; font-weight:bold;color:limegreen} 
Ở đây các nội dung của được xác định. Phần tử được đối xử như 
một phần tử HTML. 
This selectors use the names of HTML elements. The 
only fifference is that you remove the brackets. 
Hình VII.5. Sử dụng một HTML selector 
 81
Class Selector 
Các selector này dùng thuộc tính CLASS của các phần tử HTML. Mọi phần 
tử, mà thấy được, có một thuộc tính CLASS mà được dùng để gán một quy định. 
Thay vì ta có thể gán một quy định lớp cho nhiều phần tử của một kiểu đơn khi ta 
muốn hiển thị nhiều màu khác nhau. Trong trường hợp đó ta sẽ dùng một quy định 
lớp cho . 
CLASS Selector được bắt đầu với một dấu chấm (.) gọi là ký tự cờ (flag), 
theo sau bởi ‘tên lớp’ của selector. Sẽ tốt hơn để chọn các tên lớp theo mục đích 
hơn là một tên mà mô tả màu hoặc style của họ. Ví dụ, ta có thể muốn đoạn A xuất 
hiện dạng chữ nghiêng, các đoạn khác xuất hiện với style khác, trong trường hợp 
đó đoạn A có thể có một quy định lớp.slant. 
Ví dụ: 
.water { color: blue } 
.danger { color: red } 
test water 
test danger 
no style 
italic 
Hình VII.6. Sử dụng CLASS selector 
 82
Ví dụ: 
 classes.water.all.color = “blue” 
 classes.danger.all.color = “red” 
test water 
test danger 
no style 
italic 
Khi dùng cú pháp JavaScript, ta không thể dùng gạch nối bên trong các tên 
lớp. Bởi vì JavaScript đọc gạch nối như một dấu trừ (-) mà là một toán tử 
JavaScript. Các tên lớp không thể gồm bất kỳ toán tử JavaScript nào. 
Khi định nghĩa một style class: 
Ta có thể xác định các phần tử HTML nào có thể dùng style này 
Ta có thể dùng từ khóa tất cả để cho tất cả các phần tử có thể dùng nó. 
Ví dụ: 
all.hotpink {color:hotpink;} 
P.BLUE {color: blue; font-weight:bold;} 
H5.red1 {color:red; font-weight:bold;} 
This paragraph is blue. 
This paragraph does not use the class BLUE. 
This is an H5 element that tried to use 
the red1 class 
This paragraph is hotpink. 
This is an H5 element that has been 
allowed to use hotpink style. 
 83
Hình VII.7. Xác định các phần tử 
Ví dụ: 
 classes.HOTPINK.all.color=”hotpink”; 
 classes.BLUE.P.color = “blue”; 
 classes.BLUE.P.fontWeight = “bold”; 
 classes.red1.H5.color = “red”; 
 classes.red1.H5.fontWeight = “bold”; 
This paragraph is blue. 
This paragraph does not use the class BLUE. 
This an H5 element that tried to use 
the red1 class 
This paragraph is hot pink. 
This is an H5 element that has been 
allowed to use hotpink style. 
 84
ID Selector 
Một ID Selector dùng thuộc tính ID của một phần tử HTML. Một ID selector 
được dùng để cung cấp một style cho một phần tử cụ thể trên trang Web. Ví dụ, ta 
có thể dùng một ID selector để cung cấp cho một tiêu đề . Không có nghĩa là 
cùng một style sẽ được cung cấp cho sự kiện khác của một phần tử trên cùng 
một trang, trừ khi chỉ rõ. Nó tương tự như việc dùng một inline style do đó một 
style được cung cấp cho một phần tử xác định. Một ID selector được bắt đầu bởi 
một dấu thăng (#). Khi dùng cú pháp JavaScript, ta phải dùng thuộc tính ID. 
Ví dụ: 
 ID Selectors 
 #control {color: red} 
Fire is this colour 
This paragraph has no style applied 
Hình VII.8. Sử dụng ID selector 
 85
Ví dụ: 
Combining ID and Class Selectors 
 .forest {color: green } 
 .danger {color: red } 
 #control {color: blue } 
green things 
fire hazards 
more green things 
more fire hazards 
things that burn 
things that don’t burn 
water 
 86
Hình VII.9. Kết hợp ID và Class selector 
Ví dụ: 
Combining ID and Class Selectors 
With (classes.forest.all) { 
Color = “green”; 
} 
With (classes.danger.all){ 
Color = “red”; 
} 
idss.control.color = “blue”; 
green things 
fire hazards 
more green things 
more fire hazards 
 87
things that burn 
things that don’t burn 
water 
b. Các selector ngữ cảnh (Contextual Selectors) 
Một contextual seclector đề cập đến ngữ cảnh của các phần tử. Để làm mọi 
thứ sáng sủa hơn, đôi khi ta có hai phần tử với cùng một giá trị. Phần tử chính hoặc 
phần tử cha có một phần tử con bên trong nó. Trong trường hợp đó, để thay đổi 
style của phần tử con ta cần dùng một contextual selector. 
Điều này dựa trên khái niệm kế thừa, nơi mà phần tử con kế thừa style được 
gán cho phần tử cha. 
Một ví dụ thông thường là phần tử . Khi ta thêm một phần tử vào 
mỗi phần tử chứa bên trong những kế thừa của . 
P là cha và B là con. 
Bây giờ thì xem nó được điều khiển ra sao? Sau khi ta không muốn tất cả các 
phần tử trên trang Web xuất hiện cùng một style. Như vậy, ta phải ghi đè sự kế 
thừa. Trong trường hợp đó ta sẽ phải thay đổi style của phần tử con. Xem đoạn 
code dưới đây: 
Ví dụ: 
Contextual selectors 
BODY { color:blue; 
Background:lavender; 
Font-family:Arial; 
} 
UL {color:red} 
Selector UL trong style sheet xác định rằng danh sách không đánh số màu đỏ, 
do đó tất cả các phần tử LI sẽ là màu đỏ trừ khi nó được ghi đè sự kế thừa này. 
 88
 mangoes 
 oranges 
 apples 
Selector UL Selector trong style sheet xác định rằng các chỉ mục danh sách 
sẽ là màu đỏ. Chúng thừa kế font Arial từ khai báo BODY, màu đỏ từ khai báo UL. 
Nếu ta xác định một font family trong khai báo UL, nó sẽ ghi đè khai báo selector 
BODY. Không có selector OL trong style sheet, do đó danh mục OL kế thừa các 
thuộc tính của nó từ selector BODY. 
 managoes 
 oranges 
 apples 
Hình VII.10. Contextual Selectors 
Các phần tử không được kế thừa trong style sheet như các selector sẽ kế thừa 
các thuộc tính của phần tử cha nó. Trong ví dụ dưới đây, các phần tử B và I đang kế 
thừa các thuộc tính của selector P. 
 89
Ví dụ: 
Contextual Selectors 
BODY { color:blue; 
 background:lavender; 
font-family:Arial; 
 } 
P {color:hotpink} 
I am having fun 
This is fun too 
Để sự trả về của các thuộc tính của selector P, đóng nó lại 
I am having fun 
This is fun too 
Hình VII.11. Contextual Selectors 
 90
Ví dụ: 
With (tags.BODY){ 
 color=”blue”; 
 backgroundColor=”lavender”; 
 fontFamily=”Arial”; 
} 
tags.P.color=”hotpink”; 
I am having fun 
This is fun too 
I am having fun 
This is fun too 
Thay đổi các luật 
Ta phải tìm hiểu để chỉnh sửa style của một phần tử cụ thể. Có thể các kế thừa 
khi ta muốn làm các thứ trên phạm vi toàn cục, cho tất cả các trang trong web site. 
Ta có thể muốn chỉnh sửa một style định nghĩa bởi một style sheet như một lớp 
hoặc style toàn cục. Khi ta làm điều này, sự sửa đổi có một hiệu ứng gợn sóng. Đó 
là, style của tất cả các phần tử trên trang mà đưa ra style sheet đặc biệt được thay 
đổi. 
Ví dụ, ta có một định nghĩa style sheet mà xác định hai style: 
Một style toàn cục mà cung cấp toàn bộ phần tử (green, arial font, 
normal size) 
Một lớp style chung gọi là cảnh báo (red, bold, italic) mà sẽ cung cấp bất kỳ 
một phần tử nào mà sử dụng lớp đó. 
Hai ví dụ sau đây miêu tả việc dùng style sheet gọi là sheet1.css mà 
được liên kết với 1.htm đầu tiên và sau đó là 2.htm 
 91
Ví dụ: 
sheet1.css: 
H2 {color:blue; font-style:italic;} 
.warning {color:red; font-weight:bold; font-
style:italic;} 
Copy đoạn code này và ghi với tên “sheet1.css” 
Sau đó trong file f1.htm ta sử dụng nó như sau: 
f1.htm 
Changing the Rules 
<LINK REL=stylesheet HREF=”sheet1.css” 
TYPE=”text/css”> 
Changing the rules is fun 
Changing the rules may not be 
such fun 
The H2 element again 
Hình VII.12. Sử dụng một style sheet thông thường 
 92
Trong file f2.htm ta cũng sử dụng: 
f2.htm 
Changing the Rules 
<LINK REL=stylesheet HREF=”sheet1.css” 
TYPE=”text/css”> 
This document uses the sheet1 style 
sheet 
Selecting this option could 
delete all your files 
The H2 element again 
VII.2.5. Các chú thích trong Style Sheet 
Các chú thích (comments) là một đặc tính mà hầu hết các ngôn ngữ phát 
triển đều hỗ trợ. Ta cũng có thể thêm các chú thích vào một style sheet để giúp lưu 
giữ vết của các style mà được hỗ trợ thông qua trang. Các chú thích được bao 
quanh bởi các dấu /*. Không được đặt lồng vào nhau. 
Với cascading style sheet, cú pháp là: 
H1 {color:blue;} /*Các phần tử H1 màu xanh*/ 
tags.H1.color=”blue”; /*Các phần tử H1 màu xanh*/ 
Với JavaScript style sheet, cú pháp là: 
tags.H1.color=”blue”; //Các phần tử H1 màu xanh 
 VII.2.6. Lợi ích của các Style Sheet 
Nếu ta muốn sử dụng điều khiển lớn hơn với các trang Web ta nên sử dụng 
style. Ta có thể sử dụng style sheet cho: 
a. Ghi đè các ngầm định trình duyệt 
Mỗi trình duyệt có cách thể hiện các trang Web riêng của nó. Ngày nay, các 
chuyên viên phát triển không có quyền với trang được thể hiện trong một trình 
duyệt. Ta không biết được trình duyệt nào trên toàn cầu được sử dụng. Với các 
style sheet ta có thể ghi đè các mặc định truyền thống của trình duyệt và gán nó 
thành của riêng ta. Ví dụ, ta có thể xác định style trong phần tử như sau: 
 93
Overriding the browser 
b. Bố trí trang 
Các style sheet có thể được dùng để hiển thị font, thay đổi màu sắc, mà 
không thay đổi cấu trúc của trang web. Nghĩa là một người thiết kế có thể tách rời 
các yêu cầu thiết kế trực quan từ cấu trúc logic của trang Web và đánh địa chỉ khác 
nhau. 
Việc dùng các độ đo tương đối trong style sheet của ta, ta có thể biểu diễn tài 
liệu để trông đẹp hơn trên màn hình tại bất kỳ độ phân giải nào. 
c. Các Style Sheet có thể được tái sử dụng 
Sau khi ta định nghĩa thông tin style, ta có thể nhúng style sheet vào trong tài 
liệu HTML. Ta cũng có thể liên kết toàn bộ các trang trên web site tới style sheet. 
Điều này đảm bảo rằng các trang web của ta có một diện mạo đồng bộ khi chúng 
được hiển thị. Như vậy ta có thể có một nền thông thường, logo công ty và một số 
thông tin chuẩn trong một style sheet. Điều này sẽ đảm bảo rằng một cái nhìn thông 
thường và cảm giác trên Web site. Hãy tưởng tượng nếu có hàng trăm trang và ta 
phải định nghĩa style của mỗi trang riêng biệt. 
d. Tạo một lần 
Ta có thể tạo một style sheet và liên kết nhiều tài liệu tới nó. Tất cả các tài 
liệu sẽ có một diện mạo. Dù sao quan trọng nhất là khi ta tạo một thay đổi tới style 
sheet tất cả các tài liệu liên kết tới style sheet sẽ mang lại sự thay đổi. 
VII.2.7. Kết hợp Style Sheet với HTML 
Có nhiều cách để kết hợp style sheet với HTML 
- Phần tử STYLE 
- Thuộc tính Style 
- Phần tử liên kết 
Phần tử STYLE (STYLE element) 
Phần tử STYLE được chèn vào trong phần tử của một tài liệu với 
toàn bộ luật đặt giữa các thẻ mở và đóng. Khi các trang được hiển thị, chỉ tài liệu 
mà có STYLE được nhúng vào mới bị tác động. Thẻ có một tham số -- 
TYPE. Tham số này xác định kiểu Internet Media như “text/css”. 
 94
Ví dụ: 
 H1 {color:maroon;} 
 P {color:hotpink; 
 Font-family:Arial; 
 } 
I am having fun 
This is al about having fun with style 
sheets 
Hình VII.13. Sử dụng phần tử STYLE 
tags.H1.color=”maroon”; 
with (tags.P){ 
 color=”hotpink”; 
 fontFamily=”Arial”; 
} 
I am having fun 
This is all about having fun with style 
sheets 
 95
Hình VII.14. Sử dụng phần tử STYLE 
Thuộc tính STYLE 
Thuộc tính STYLE được dùng để cung cấp style sheet cho các phần tử riêng lẻ. 
Một Style Sheet có thể nhỏ bằng một luật. Sử dụng thuộc tính Style ta có thể bỏ 
qua phần tử Style và đặt các khai báo trực tiếp vào trong các thẻ bắt đầu riêng lẻ. 
<H2 style=”color:green; 
font-family: Arial”> 
Thông thường, ta có thể chỉ dùng thuộc tính này nếu ta đang thay đổi style của 
một phần tử đặc biệt. Nếu ta có ý định cung cấp cùng một style trên toàn bộ tài liệu, 
khi đó đây không thật sự là cách hay để đạt được điều này. 
Ví dụ: 
This line will be blue and italicized. 
This line will not be blue or in italics. 
 96
Hình VII.15. Sử dụng thuộc tính STYLE 
Phần tử liên kết (Link Element) 
Nếu ta muốn dùng phần tử liên kết, khi đó Style Sheet phải được tách khỏi tài 
liệu. Khi đó địa chỉ Web với style sheet có thể được thêm vào. 
<LINK REL=stylesheet 
HREF=”stylesmine.css” 
Type=”text/css” 
> 
Phải có cả thuộc tính “rel=stylesheet” hoặc trình duyệt sẽ không tải 
style sheet. 
Ví dụ: 
Sheet1.css 
H2 {color.blue; font-style:italic;} 
P {color:yellow;} 
File.htm 
Linking external style sheets 
<LINK REL=STYLESHEET TYPE=”text/css” 
HREF=”sheet1.css”> 
This is an H2 element 
 97
This is a paragraph 
Sheet1.css 
tags.H2.color=”blue”; 
tags.H2.fontStyle=”Italic”; 
tags.H2.color=”yellow”; 
File.htm 
A Good Title 
<LINK REL=STYLESHEET TYPE=”text/javascript” 
HREF=”sheet1.css”> 
This is an H2 element 
This is a paragraph 
VII.2.8. Thứ tự ưu tiên của các style (Cascading) 
Khi ta đang dùng nhiều kỹ thuật để cung cấp các style (liên kết và nhúng) 
vào trang Web, có một cách để trình duyệt quyết định chọn style nào. Trình duyệt 
xếp qua tất cả các luật được xác định và chọn một luật quan trọng nhất. Style sheet 
cục bộ có độ ưu tiên cao nhất. Tiếp theo là style sheet toàn cục với style sheet liên 
kết tại phía trên. 
Ví dụ, nếu một dòng trên trang Web định nghĩa là màu đỏ qua một style 
sheet liên kết, tất cả các đoạn văn sẽ là màu đỏ trừ ở trên, mà sẽ là màu xanh 
dương. 
<LINK REL=stylesheet 
HREF=”sheet1.css” 
Type=”text/css”> 
 98
This line will be limegreen. 
This line will not be limegreen. 
Hình VII.16. Cascading style 
Thuộc tính Tên CSS 
Thuộc tính 
Scripting 
Font properties Font font 
 font-size fontSize 
 font-style fontStyle 
Text properties Text-align textAlign 
 Text-indent textIndent 
 vertical-align verticalAlign 
Box properties border border 
 border-width borderWidth 
 border-bottom borderBottom 
 border-color borderColor 
Positioning 
properties 
Clip clip 
 heiht height 
 Left left 
 Top top 
 z-index zIndex 
 99
Bài tập 
1. Tạo ra một trang web mới dùng để đăng nhập có giao diện như ở hình dưới 
(sử dụng FORM). 
2. Tạo một file css để đặt mặc định kiểu font và màu cho các phần giới thiệu 
của bạn.