Xem mẫu
- Thi t k Web
CHƯƠNG
NGÔN NG HTML
2
I. Gi i thi u:
HTML, vi t y là Hyper Text Markup Language – Ngôn ng ánh d u
siêu vă b n, là ngôn ng n n t ng c a Web.
HTML ư c thi t k b i các nhà v t lý h c t i vi n CERN. Cùng v i trình
duy t Mosaic và World Wide Web, HTML ã giúp mang n m t b m t m i cho
Internet. Internet ã tr nên d s d ng hơn và có th n v i ông o ngư i dùng
trên toàn th gi i thông qua các trang web.
HTML mô t cách th c d li u ư c hi n th trên trình duy t thông qua các t p
ký hi u ánh d u, thư ng g i là tag, ho c “th HTML”. Khi m t trang web ư c t i
v trình duy t, trình duy t s căn c trên các tag HTML nh d ng n i dung hi n
th .
Ví d :
Welcome to HTML
My first HTML document
II. Các khái ni m chung:
1. Tài li u HTML:
Tài li u HTML, hay còn g i là văn b n HTML, là m t t p tin có ph n ki u
là .htm ho c .html, ch a n i dung c n hi n th và các tag báo cho trình duy t web
bi t cách hi n th n i dung ó.
Tài li u HTML có th ư c so n th o trên nh ng trình so n th o văn b n ơn
gi n như Notepad hay TextPad.
2. C u trúc c a m t tài li u HTML:
Tài li u HTML ư c chia làm 3 ph n, c th như sau:
a.HTML section
ư c b t u b i tag và k t thúc b i tag
C p tag này nh nghĩa ph m vi c a văn b n HTML.
b. Header section
ư c b t u b i tag và k t thúc b i tag
Biên so n: Đ ng Thanh Bình Trang 1
- Thi t k Web
Ph n này ch a thông tin mô t trang web, ch ng h n như tiêu trang web,
các t khóa dùng tìm ki m và nh n di n trang web, …. Nh ng thông tin này
không ư c hi n th trên trang web.
c.Body section
ư c b t u b i tag và k t thúc b i tag
Ph n này ch a n i dung c a trang web và các tag quy nh nh d ng c a n i
dung ó.
3. Thành ph n HTML (HTML elements):
H u h t các thành ph n HTML u có tag b t u và tag k t thúc tương ng.
Dư i ây là c u trúc chung c a m t thành ph n HTML:
string of text
Trong ó là tag b t u, string of text là n i dung c a thành ph n
HTML và là tag k t thúc.
Các tag HTML có th ư c nh p li u không phân bi t ch hoa ho c ch
thư ng. Tuy nhiên, cũng c n lưu ý là t ch c W3C ngh dùng ch thư ng trong
phiên b n HTML 4, và XHTML (HTML th h k ti p) b t bu c ph i dùng ch
thư ng cho tag.
4. Thu c tính c a tag HTML
Các th HTML có th có thu c tính. Thu c tính cung c p thêm thông tin cho
m t thành ph n HTML.
Ch ng h n, tag HTML sau ây nh nghĩa m t b ng: . V i m t thu c
tính thêm vào, chúng ta có th yêu c u trình duy t hi th b ng mà không có khung :
Thu c tính luôn i theo c p tên thu c tính/giá tr như sau: name="value".
Thu c tính luôn ư c ch nh th b t u c a m t thành ph n HTML.
Thu c tính và giá tr c a thu c tính cũng không phân bi t ch hoa và ch
thư ng.
Lưu ý: Giá tr c a thu c tính nên ư c t trong c p d u nháy. Thông thư ng
ngư i ta s d ng c p d y nháy kép nhưng các d u nháy ơn cũng ư c ch p nh n.
III. Các tag HTML cơ b n:
1. Heading:
Các c p heading ư c nh nghĩa v i các th t n . nh
nghĩa heading l n nh t. nh nghĩa heading nh nh t.
HTML t ng thêm vào các dòng tr ng trên và dư i heading.
Ví d :
Introduction to HTML
Biên so n: Đ ng Thanh Bình Trang 2
- Thi t k Web
Introduction to HTML
Introduction to HTML
Introduction to HTML
Introduction to HTML
Introduction to HTML
Introduction to HTML
2. Paragraph:
o n văn b n ư c nh nghĩa b i th .
HTML t ng thêm vào các dòng tr ng trên và dư i o n.
Ví d :
Welcome to HTML
This is a paragraph
This is another paragraph
3. Ng t dòng (line break):
Th ư c s d ng khi ta mu n k t thúc m t dòng nhưng không mu n b t
u m t o n m i. Th s ng t dòng t i nơi ta t nó trong văn b n HTML.
là m t th r ng. Nó không có th óng.
Ví d :
Welcome to HTML
This is a paragraph with line breaks
4. ư ng k ngang (Horizontal Rule):
Th ư c s d ng khi ta mu n t o m t ư ng k ngang trong trang web.
Trong HTML, th không có th óng.
Dư i ây là nh ng thu c tính c a th này:
Thu c tính Giá tr Ý nghĩa
align center Ch nh tr ng thái canh l ư ng k
left ngang.
right
noshade noshade Khi ư c set, thu c tính này quy nh
ư ng k ngang s ư c v b ng 1 màu
Biên so n: Đ ng Thanh Bình Trang 3
- Thi t k Web
Thu c tính Giá tr Ý nghĩa
duy nh t. Khi không ư c set, ư ng k
ngang s ư c ph i b ng 2 màu
size pixels Chi u cao c a ư ng k ngang
%
width pixels r ng c a ư ng k ngang
%
Ví d :
Welcome to HTML
My first HTML document
This is going to be real fun
Using another heading
Another paragraph element
5. Chú thích trong HTML
Chúng ta dùng th comment thêm các o n chú thích vào HTML source
code. Trình duy t web s b qua dòng chú thích này.
Cú pháp:
6. M t s lưu ý
Khi vi t văn b n HTML, chúng ta không th oan ch c văn b n ó s ư c
hi n th th nào trong m t trình duy t khác. M t khác, văn b n s ư c nh d ng
l i m i khi ngư i dùng thay i kích thư c c a s trình duy t. ng nh d ng văn
b n b ng cách thêm vào các kho ng tr ng ho c nh ng dòng tr ng vào văn b n web.
HTML s xóa b t nh ng kho ng tr ng ư c nó coi là dư. M t dãy kho ng
tr ng liên ti p b t kỳ s ư c coi là m t kho ng tr ng duy nh t. Ngoài ra, trong
HTML, m t dòng m i s ư c coi là m t kho ng tr ng.
Vi c s d ng các th thêm vào các dòng tr ng cũng là m t thói quen
x u. Thay vào ó, hãy dùng th .
Th có th ư c s d ng mà không có th k t thúc . Tuy nhiên, phiên
b n HTML k ti p s không cho phép b qua b t kỳ th k t thúc nào.
IV. Các tag HTML nh d ng:
1. Các tag nh d ng văn b n:
Tag Ý nghĩa
Tô m văn b n
nh nghĩa văn b n có size l n hơn bình thư ng
nh nghĩa văn b n ư c nh n m nh (emphasized)
Biên so n: Đ ng Thanh Bình Trang 4
- Thi t k Web
Tag Ý nghĩa
Làm cho văn b n nghiêng
nh nghĩa văn b n có size nh hơn bình thư ng
Tô m văn b n
nh nghĩa ch s dư i
nh nghĩa ch s trên
nh nghĩa văn b n ư c “thêm vào”
nh nghĩa văn b n ã b xóa
nh nghĩa văn b n ã b xóa. Nên dùng thay cho tag này.
nh nghĩa văn b n ã b xóa. Nên dùng thay cho tag này.
G ch dư i văn b n
Ví d :
K t qu :
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text containssubscript
This text containssuperscript
This text contains inserted
text
This text contains deleted
text
This text contains deleted text
This text contains deleted
text
This text contains underlined
text
2. M t s tag khác:
Tag Ý nghĩa
nh nghĩa văn b n ư c nh d ng s n
T o vùng chú thích dài
T o vùng chú thích ng n
Ví d :
K t qu :
This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying
computer code:
for i = 1 to 10
print i
next i
Ví d :
K t qu :
Biên so n: Đ ng Thanh Bình Trang 5
- Thi t k Web
Here comes a long quotation:
This is a long quotation. This is a
long quotation. This is a long
quotation. This is a long quotation.
This is a long quotation.
Here comes a short quotation:
This is a short quotation
With the block quote element, the
browser inserts line breaks and
margins, but the q element does not
render as anything special.
V. Các ký t c bi t:
M t s ký t có ý nghĩa c bi t trong HTML, ch ng h n như d u nh hơn (
- Thi t k Web
1. Cú pháp:
Text to be displayed
Th ư c dùng t o m t i m neo (anchor) t o liên k t, thu c tính
href ư c dùng xác nh a ch c a tài li u ư c liên k t n, và o n văn b n
n m gi a th và s ư c hi n th thành m t hyperlink.
Ví d :
Welcome to HTML
Visit World Wide Web Consortium!
2. Thu c tính target:
Thu c tính target xác nh liên k t s ư c m ra âu. Ví d sau ây s m
trang Vietnamnet trong m t c a s trình duy t m i
Visit Vietnamnet!
3. Thu c tính name:
Thu c tính name ư c s d ng t o m t i m d ng trong trang web. Khi s
d ng i m d ng chúng ta có th nh y t i m t v trí c th trên trang web thay vì
ngư i dùng ph i cu n trang và tìm n i dung mình mu n xem.
Dư i ây là cú pháp t o nên m t i m d ng:
Text to be displayed
V i label là tên c a i m d ng mu n t o. i m d ng s ư c t o t i v trí t
tag .
Ch ng h n, t o m t i m d ng có tê là Chapter1, ta th c hi n như sau:
Chapter 1
liên k t n i m d ng này, ta t o o n mã HTML như sau:
- Trư ng h p i m t siêu liên k t n m trên cùng trang web ch a
i m d ng:
Go to Chapter 1
- Trư ng h p i m t siêu liên k t n m trên m t trang khác v i trang
web ch a i m d ng:
Go to Chapter 1
V i URL là a ch c a trang web ch a i m d ng.
4. Liên k t n a ch email:
Ví d :
Biên so n: Đ ng Thanh Bình Trang 7
- Thi t k Web
This is a mail link:
Send Mail
Note: Spaces between words should be replaced by %20 to
ensure that the browser will display your text properly.
Ví d :
This is another mailto link:
Send mail!
Note: Spaces between words should be replaced by %20 to
ensure that the browser will display your text properly.
VII. B ng bi u:
1. Quy nh chung:
B ng trong HTML ư c nh nghĩa b i th . M t b ng ư c chia thành
các dòng (v i th ), và m i dòng l i ư c chia thành các data cell ( ư c nh
nghĩa b i th ). Ch td thay th cho c m t "table data". M t data cell có th
ch a text, image, list, paragraph, form, horizontal rule, table, …
Ví d :
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
2. M t s thu c tính c a b ng:
- BORDER=“x” : kích thư c vi n
- BGCOLOR: màu n n
- ALIGN: canh ch nh
Biên so n: Đ ng Thanh Bình Trang 8
- Thi t k Web
- WIDTH, HEIGHT : kích thư c
- CELLPADDING: kho ng cách t vi n c a ô n n i dung trong ô
- CELLSPACING: kho ng cách gi a các ô trong b ng
- ROWSPAN, COLSPAN: tr n các dòng ho c c t
- : dòng, c t, : heading
- : tiêu mô t b ng
Hình 4: Bi u di n thu c tính c a table
VIII. T o danh sách:
Ví d :
Nh ng ki n th c căn b n v HTML
C u trúc t p tin HTML
C u trúc t p tin HTML
Các Tag HTML
Các Tag cơ b n
nh d ng văn b n
nh d ng hình nh
Biên so n: Đ ng Thanh Bình Trang 9
- Thi t k Web
nh d ng liên k t
Ví d
Code
Minh h a
Dư i ây là k t qu c a o n code trên:
IX. Chèn hình nh:
1. Quy nh chung:
Trong HTML, hình nh ư c nh nghĩa b i th .
Th là m t th r ng. i u này có nghĩa là th ch ch a các thu c
tính và không có th k t thúc.
hi n th hình nh trên trang web, chúng ta s d ng thu c tính src. Src là
vi t t t c a ch "source". Giá tr c a thu c tính src là URL c a hình nh chúng ta
mu n hi n th trên trang.
Cú pháp chung như sau:
2. Thu c tính ALT:
Thu c tính "alt" báo cho ngư i c trang web bi t n i dung c a hình nh trong
trư ng h p trình duy t không th hi n th hình nh ó. Trình duy t s hi n th
“alternate text” tha vì hi n th hình nh.
Cú pháp chung:
3. Ví d :
Biên so n: Đ ng Thanh Bình Trang 10
- Thi t k Web
Ví d 1:
K t qu :
An image from another folder:
An image from W3Schools:
Ví d 2:
K t qu :
Look: A background
image!
Both gif and jpg files can
be used as HTML
backgrounds.
If the image is smaller
than the page, the image will
repeat itself.
Ví d 3:
K t qu :
You can also use an image as a link:
Ví d 4:
Click on one of the planets to watch it closer:
Biên so n: Đ ng Thanh Bình Trang 11
- Thi t k Web
Note: The "usemap" attribute in the img element refers to the "id" or
"name" (browser dependant) attribute in
the map element, therefore we have added both the "id" and "name" attributes to
the map element.
X. Frame:
Khi s d ng frame, chúng ta có th hi n th nhi u hơn m t tài li u HTML
trong m t c a s trình duy t. M i tài li u HTML ư c g i là m t frame, và m i
frame thì c l p v i nh ng frame còn l i.
Hình 10: M t s d ng frame
1. Th Frameset:
Th nh nghĩa cách th c chia c a s trình duy t thành các frame.
- Thu c tính ROWS và COLS quy nh kích c các frame trong t p h p frame.
- M i thu c tính ch a m t danh sách các i s quy nh r ng ngăn cách
nhau b ng d u ph y. i s này có th là pixels, là %, ho c là r ng tương
i.
- r ng tương i ư c th hi n dư i d ng i* v i i là s nguyên
Ch ng h n: ROWS="3*,*" (* ư c hi u là 1*) s cho k t qu là dòng u có
cao g p 3 l n so v i dòng th hai.
- ROWS quy nh chi u cao c a dòng, tính t trên xu ng.
- COLS quy nh r ng c a c t, tính t trái qua ph i.
- N u ROWS ho c COLS b b qua (không khai báo), giá tr m c nh s là
100%
- N u c hai thu c tính u ư c ch nh, m t lư i s ư c thi t l p t trái
qua ph i - và sau ó là t trên xu ng.
2. Th Frame:
Th ch nh tài li u HTML nào s ư c t vào frame.
Biên so n: Đ ng Thanh Bình Trang 12
- Thi t k Web
Ví d :
Thu c tính c a :
- NAME=“tên_frame”: t tên cho frame
- SRC=“URL” : a ch trang web ư c hi n th
- TARGET: xác nh frame m c nh cho các hyperlink trong frame này
- BORDER=“x” : xác nh kích thư c ư ng vi n
- SCROLLING=“yes/no/auto” : xác nh thu c tính hi n th scrollbar
- NORESIZE: không cho phép hi u ch nh kích thư c frame window
3. Ví d chung:
Table of Contents
Photo 1
Photo 2
Photo 3
XI. Form:
1. Gi i thi u:
M t HTML form là m t vùng trên văn b n HTML có ch a các i tư ng c
bi t g i là control (ch ng h n như checkbox, radio button, menu, ...) và nhãn c a
các control ó. Ngư i dùng "hoàn t t" n i dung trên form b ng cách thay i giá tr
c a các control này (nh p văn b n, ch n các m c trình ơn, …). Sau ó, ngư i dùng
submit form t i m t i tư ng có ch c năng x lý nh ng d li u này (ch ng h n
như m t Web server, mail server, ...).
M i form ph i ư c b t u b ng 1 tag . Tag có th ư c t
b t kỳ âu trong ph n body c a văn b n HTML. Form ph i ư c k t thúc b ng tag
.
Biên so n: Đ ng Thanh Bình Trang 13
- Thi t k Web
Dư i ây là m t ví d ơn gi n v form. Trên form này có các nhãn (label),
radio button, và push button.
First name:
Last name:
email:
Male
Female
2. Các thu c tính c a form:
- NAME: tên form
- METHOD: phương th c truy n d li u (GET/POST)
- ACTION: chương trình/trang web x lý d li u c a form.
3. Các thành ph n nh p li u (Control):
Ngư i dùng tương tác v i form thông qua các control.
M i control có m t tên, ư c xác nh b i thu c tính name c a control ó.
Tên c a m t i tư ng trên form có ph m vi hi u l c ch trong form ó.
M i control u có “giá tr ban u” và “giá tr hi n th i”. Nh ng giá tr này
u ư c lưu dư i d ng chu i.
Ban u, giá tr hi n th i c a control ư c thi t l p b ng v i giá tr ban u.
Sau ó, giá tr hi n th i có th s b thay i do ch nh s a c a ngư i dùng ho c do
các o n script.
Khi form ư c “reset”, giá tr c a các control l i ư c set v giá tr ban u.
N u m t control không có giá tr ban u, tác ng c a vi c reset form trên control
ó là không xác nh.
yêu c u ngư i dùng nh p li u trên form, ta s d ng tag
4. Thu c tính c a các thành ph n nh p li u trên form:
- TYPE : lo i INPUT
- NAME: tên
- VALUE: giá tr c a INPUT
- SIZE: kích c
- MAXLENGTH: dài t i a c a chu i ư c nh p vào
- CHECKED: có check s n
5. Các thành ph n nh p li u trên form:
a.Text và Password:
Ví d :
Biên so n: Đ ng Thanh Bình Trang 14
- Thi t k Web
K t qu :
Username:
Password:
b. Radio Button:
Ví d :
K t qu :
Male
Female
c.Checkbox:
Ví d :
K t qu :
I have a bike:
I have a car:
I have an airplane:
d. Dropdown Listbox:
Ví d :
Occupation:
Other
Engineer
Teacher
Doctor
Worker
e.Text Area:
Ví d :
K t qu :
The cat was playing in the garden.
Biên so n: Đ ng Thanh Bình Trang 15
- Thi t k Web
f. Push Button:
Ngoài button thông thư ng, form còn h tr 2 button c bi t: Submit và Reset.
Button Submit có ch c năng chuy n d li u i còn button Reset giúp thi t l p các
i tư ng nh p li u trên form v tr ng thái m c nh.
Ví d :
K t qu :
XII. M t s thi t l p khác:
1. Background Sound:
thi t l p nh c n n cho trang web, t dòng code sau ph n head c a văn
b n HTML:
Thu c tính loop có giá tr là -1 cho bi t b n nh c s ư c l p vô h n. Ch p
nh n các nh d ng MID, WAV, RAM, RA, AIF, …
2. Chuy n hư ng trang web t ng:
cho phép t ng chuy n sang trang web khác, t dòng code sau ph n
head c a văn b n HTML:
V i x là s giây delay trư c khi chuy n sang trang m i, URL ch a a ch
trang web mu n chuy n t i.
3. Thi t l p encoding cho trang web:
thi t l p encoding d ng Unicode cho trang, t dòng code sau ph n head
c a văn b n HTML:
Biên so n: Đ ng Thanh Bình Trang 16
- Thi t k Web
CHƯƠNG
CASCADING STYLE SHEETS
3
I. Gi i thi u:
1. Gi i thi u chung
Khi Cascading Style Sheets (CSS) ư c gi i thi u l n u tiên vào cu i năm
1996, công ngh này ã em n m t v n h i m i cho nh ng ngư i phát tri n web.
CSS cho phép thi t k trang tinh x o hơn, p hơn t t c nh ng gì h ã t ng bi t,
cũng như giúp cho vi c phát tri n và b o trì nh ng site l n, ph c t p tr nên d
dàng hơn. CSS cũng ơn gi n hóa vi c làm cho trang web có th ư c truy c p b i
càng nhi u ngư i càng t t, b t k h dùng thi t b gì c trang web, b t k công
ngh gì h s d ng.
K t ó, web ã có nhi u thay i. Trình duy t web ã ư c tích h vào n
tho i di ng, và ngư i ta duy t web c t vô tuy n truy n hình cũng như máy chơi
game. HTML ã tr thành chu n ư c ch p nh n r ng rãi. CSS cũng ã tr thành
m t công ngh v ng m nh, ư c h tr t t và d s d ng t o l p giao di n cho
trang web.
Nói m t cách ng n g n, CSS cung c p m t phương cách h u hi u ngư i
thi t k web có th tách bi t giao di n c a trang web ra kh i n i dung c a trang
web ó. Chúng ta s cùng tìm hi u cách th c làm i u này như th nào, và t i sao
nên làm như th .
2. CSS là gì?
Cascading Style Sheets (CSS) là m t ngôn ng làm vi c v i các văn b n
HTML xác nh cách th c n i dung ư c hi n th . Cách th c hi n th ư c xác
nh b i các style ư c t tr c ti p trong các tag HTML, ho c trong ph n head c a
văn b n HTML, ho c lưu trên m t file có ph n ki u là .css.
Trong style sheet ch a các style rule. M i rule ch th cách th c nh d ng m t
thành ph n c th trên văn b n HTML, ch ng h n paragraph, h1, …
Nhi u file HTML có th liên k t n cùng m t file CSS.
3. Cascading có nghĩa gì?
Có ba d ng style sheet có th tác ng n vi c hi n th n i dung c a văn b n
HTML trên trình duy t. ó là:
• Browser style sheet: Trình duy t á d ng style sheet lê t t c văn b n
web. M c dù nh ng style sheet này có th có khác bi t nhau tùy theo
trình duy t, chúng v ncó nh ng i m chung, ch ng h n như quy nh
text có màu en, siêu liên k t có màu xanh, và liên k t ã ư c nh n
Biên so n: Đ ng Thanh Bình Trang 17
- Thi t k Web
vào thì có màu tía. T t c nh ng quy nh này ư c g i chung là
browser style sheet m c nh.
• User style sheet: Ngư i dùng là b t kỳ ai ó ghé thăm web site. H u
h t trình duy hi n nay u cho phép ngư i dùng thi t l p style sheet
c a riêng h trong trình duy t. Nh ng style sheet này s có m c ưu tiên
s d ng cao hơn browser style sheet m c nh.
• Author style sheet: Là style sheet do ngư i phát tri n web site t o l p.
Khi chúng ta áp d ng m t style sheet lên m t trang web, chúng ta ã s
d ng author style sheet. Nh ng style sheet này s có m c ưu tiên s
d ng cao hơn user style sheet.
Vi c phân t ng ưu tiên s d ng style sheet này chính là ý nghĩa c a cascading
(phân t ng).
browser user author Web page
style sheet style sheet style sheet
4. Ưu i m c a CSS:
S d ng CSS có m t s l i i m sau:
• D b o trì: S c m nh c a CSS n m ch m t file CSS có th ư c s
d ng i u khi n cách th c hi n th c a nhi u vă b n HTML khác
nhau. Vi c thay i gia di n c a site gi ây ch ơn gi n là s a i m t
file CSS duy nh t thay vì ph i ch nh s a nhi u file HTML như trư c kia.
• Kích c file nh hơn: CSS cho phép ngư i thi t k lo i b toàn b
ph n nh d ng kh i văn b n HTML, k c layout table, spacer image,
nhưng hình nh trang trí, font, màu s c, r ng, chi u cao, hình n n.
Vi c hi n th ư c i u khi n b i các CSS file. i u này có th làm
gi m rõ r t kích thư c c a các t p tin HTML.
• Tăng cư ng kh năng truy c p: CSS bu c ngư i phát tri n web ph i
chú ý n c u trúc, k t qu là trang web s ư c d ch d dàng hơn trên
trình duy t, i u này hi u qu nh t là i v i nh ng ngư i dùng có th
l c kém. Nh ng ngư i dùng như v y có th d dàng ch nh style sheet
c a riêng h cho c site, ch ng h n v i size ch l n hơn và màu s c có
tương ph n cao hơn. Thêm vào ó, CSS có th nh nghĩa nh ng
style sheet có th xác nh âm lư ng và ng i u c a văn b n s ư c
c cho ngư i mù b ng trình duy t text-to-speech..
• Kh năng nh d ng phong phú hơn: CSS cho phép ch nh nhi u
nh d ng văn b n phong phú hơn so v i HTML, ch ng n r ng
c a l , kho ng cách gi a các ký t , chi u cao dòng, ...
Biên so n: Đ ng Thanh Bình Trang 18
- Thi t k Web
• H tr in n t t hơn: CSS có th ư c nh nghĩa cho nhi u i tư ng
k t xu t khác nhau. Chúng ta có th t o m t b CSS rule ngư i dùng
xem trang web online, và m t b khác t o b n dùng in.
5. Style sheet làm vi c như th nào?
Style sheet là m t t p h p các ch th ngh cách th c web browser hi n th
n i dung c a trang. Lưu ý là " ngh " ch không ph i "yêu c u", vì CSS không b t
bu c trình duy t ph i hi n th trang web theo m t cách c th nào ó, nó ch ngh
trình duy t cách th c hi n th n i dung mà thôi.
Hình 11: S d ng style sheet tách bi t ph n n i dung v i ph n hi n th
II. S d ng style rule
M i Cascading Style Sheet, k c dư i d ng .css file hay ư c nhúng trong
văn b n HTML, là m t t p h p các ch th g i là style rule.
1. C u trúc c a style rule
M i style rule bao g m:
- M t selector, dùng xác nh các i tư ng ư c áp d ng style ư c
quy nh b i style rule
- M t danh sách các thu c tính (property) và giá tr c a thu c tính ó.
2. Khai báo style rule
M t khai báo style rule thư ng có d ng sau:
Hình 12: Rule set structure
Chúng ta cũng có th khai báo style rule trên cùng m t dòng, ví d như sau:
h2 { font-style: italic; text-align: center; color: navy; }
Biên so n: Đ ng Thanh Bình Trang 19
- Thi t k Web
Dư i ây là ví d v m t o n CSS có nhi u khai báo:
h1
{
text-align: center;
color: navy;
}
h2
{
font-style: italic;
text-align: center;
color: navy;
}
p
{
color: maroon;
}
Ngoài ra, cũng có th k t h p nhi u selector v i nhau trong cùng m t khai báo,
như trong trư ng h p dư i ây
h1, h2
{
text-align: center;
color: navy;
}
Lưu ý: Chúng ta có th thêm các o n chú thích vào CSS. Ph n chú thích ph i
ư c b t u b ng c p d u /* và k t thúc b ng c p d u */
3. S d ng shorthand property:
Shorthand property cho phép giá tr c a nhi u thu c tính có th ư c ch nh
trên m t thu c tính duy nh t. Shorthand property cũng d vi t và b o trì hơn. Chúng
còn làm cho t p tin CSS ng n g n và súc tích hơn.
Ví d , m t th HTML là có th ư c nh d ng b ng các thu c tính font-
style, font-variant, font-weight, font-size, line-height, and font-family. Thay vào ó,
chúng ta có th dùng m t shorthand property duy nh t là font.
Hai khai báo dư i ây là tương ương nhau:
h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 120%;
font-family: arial, helvetica, sans-serif;
}
h2
{
font: italic small-caps bold 100%/120% arial, helvetica, sans-serif;
Biên so n: Đ ng Thanh Bình Trang 20
nguon tai.lieu . vn
