Bài giảng Thiết kế và lập trình Web 2 - Ôn tập về Style Sheets

 Bài giảng môn học
ÔNÔN TTẬẬPP VVỀỀ STYLESTYLE SHEETSSHEETS
 Khoa Công nghệ thông tin
 Trường ĐạihọcKhoahọcTự nhiên
 ThiThiếếtt kkếế && LLậậpp trtrììnhnh WEBWEB 22
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
CSSCSS
 ƒ CSS = Casscading Style Sheets
 ƒ Dùng để mô tả cách hiểnthị các thành phầntrên
 trang WEB
 ƒ Sử dụng tương tự như dạng TEMPLATE
 ƒ Có thể sử dụng lại cho các trang web khác
 ƒ Có thể thay đổithuộctínhtừng trang hoặccả site 
 nhanh chóng (cascading)
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
CCáácc loloạạii CSSCSS
 ƒ Gồm 3 loạiCSS 
 – Inline Style Sheet (Nhúng CSS vào tag HTML)
 – Embedding Style Sheet (Nhúng CSS vào trang web)
 – External Style Sheet (Liên kếtCSS với trang web)
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
1. Inline Style Sheet
 ƒ Định nghĩa style trong thuộc tính style củatừng
 tag HTML
 ƒ Cú pháp
 …
 ƒ Ví dụ:
 This is yellow
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
2. Embedding Style Sheet
 • Nhúng trong tag củatrangHTML 
 ƒ Định nghĩa style theo cú pháp
 <!--
 SelectorName {
 property1:value1;
 property2:value2;
 ………
 propertyN:valueN;}
 …
 -->
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
Embedding Style Sheet – Ví dụ
 This is green
 This is red, 12 pt. and 
 Garamond.
 Embedded Style Sheet
 <!--
 P { color: red;
 font-size: 12pt;
 font-family: Arial;}
 H2 { color: green;}
 -->
 6 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
3. External Style Sheet
 ƒ Mọistyle đềulưu trong file có phầnmở rộng là *.CSS
 ƒ Tạo liên kết đếnfile CSS
 1. Trong trang HTML: liên kếtbằng tag link. Cú pháp:
 2. Trong trang HTML: Liên kếtbằng tag style với @import url. 
 Cú pháp
 @import url(URL);
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
External Style Sheet – Ví dụ
 Trong tập tin MyStyle.CSS Trong trang Web có sử dụng
 MyStyle.CSS
 H2 {
 FONT-WEIGHT: bold; FrontPage 98 -
 FONT-SIZE: 16pt; Cascading Style Sheets
 COLOR: white; <link HREF="MyStyle.css"
 REL="stylesheet" >
 FONT-STYLE: italic; 
 FONT-FAMILY: Arial; 
 BACKGROUND-COLOR: red; This is an H2 
 } 
 8 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SoSo ssáánhnh,, ĐĐáánhnh gigiáá
 Inline Style Sheet Embedding Style Sheet External Style Sheet
 Khai báo Kiểu1 Kiểu2 Kiểu2
 Cú pháp <link rel=“stylesheet “
 Test .TieuDe1{color: red;} href=“main.css”/>
 Test Test
 Ưu điểm • Dễ dàng quảnlýStyle • Dễ dàng quảnlýStyle • Có thể thiếtlập Style cho
 theo từng tag của tài liệu theo từng tài liệuweb. nhiềutàiliệuweb.
 web. • Không cầntảithêmcác • Thông tin các Style được
 • Có độ ưutiêncaonhất trang thông tin khác cho trình duyệt cache lại
 style
 Khuyết điểm • CầnphảiKhaibáolại • Cầnphảikhaibáolại • Tốnthời gian download 
 thông tin style trong từng thông tin style cho các tài file *.css và làm chậmquá
 tài liệu Web và các tài liệu liệukháctrongmỗilầnsử trình biên dịch web ở trình
 khác một cách thủ công. dụng duyệt trong lần đầusử
 • Khó cậpnhậtstyle dụng
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
ĐĐộộ ưưuu tiêntiên
 ƒ Thứ tựưutiênápdụng định dạng khi sử dụng các
 loại CSS (độ ưutiêngiảmdần) :
 1. Inline Style Sheet
 2. Embedding Style Sheet
 3. External Style Sheet
 4. Browser Default
 © 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
Định nghĩaStyle
Kiểu1 Kiểu2
<tag style = SelectorName {
 “property1:value1; property1:value1;
 property2:value2; property2:value2;
 ……… ………
 propertyN:valueN;”>… propertyN:valueN;}
 ………
Ví dụ: Ví dụ:
<h1 style=“ .TieuDe1 {
 color : blue; color: red;
 font-family : Arial;” > DHKHTN font-family: Verdana, sans-serif; }
 DHKHTN 
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
 Selector
 ƒ Là tên 1 style tương ứng vớimộtthành phần được
 áp định dạng
 ƒ Ví dụ:
 .TieuDe1 {
 color: red;
 font-family: Verdana, sans-serif; }
 DHKHTN 
13 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
CCáácc loloạạii SelectorSelector
Loại Mô tả phạmvi ảnh hưởng Ví dụ
element Định dạng áp dụng cho ND tấtcả h1 {color: red;}
 các tag Element trong tài liệuWeb /* ND củathẻ bị định dạng màu
 chữ=đỏ */
#id Định dạng áp dụng cho ND tấtcả #test {color: green;} 
 các tab có thuộctínhid trong tài /* ND củabấtkỳ tag có thuộc tính id=test 
 liệuWeb đềubị định dạng màu chữ=xanh lá */
.class Định dạng áp dụng cho ND tấtcả .note {color: yellow;}
 các tab có thuộctínhclass trong /* ND củabấtkỳ tag có thuộctính
 tài liệuWeb class=note đềubị định dạng màu
 chữ=vàng*/
element . class Định dạng áp dụng cho ND các h1.note {text-decoration: 
 tag Element có thuộctínhclass underline;}
 tương ứng /* ND của các thẻ có thuộctính
 class=note đềubị định dạng gạch chân */
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
CCáácc loloạạii SelectorSelector ((tttt))
Loại Mô tả phạmvi ảnh hưởng Ví dụ
Grouping Định dạng áp dụng cho ND một h1,h2,h3 {background-color: 
 nhóm các tag trong tài liệu. orange;}
 /* ND của các thẻ đềubị
 định dạng màu nền= màucam */
Contextual Định dạng áp dụng cho ND các p strong {color: purple;}
 thẻ đượclồng trong mộtthẻ cha /* ND của các thẻ nằm trong thẻ
 nào đó đềubị định dạng màu chữ=màu tía */
Pseudo Class Định dạng đượcápdụng dựa vào
Pseudo trạng thái của các Element. 
 element (Không xuấthiện trong mã lệnh
 HTML)
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector -- ElementElement
 ƒ Có hiệu ứng trên tấtcả element cùng loạitag
 ƒ Ví dụ :
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector –– IDID rulesrules
 ƒ Có hiệu ứng duy nhấttrênmột element có đúng id.
 ƒ Ví dụ :
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector –– ClassClass rulesrules
 ƒ Có hiệu ứng trên tấtcả các loại tag có cùng giá trị
 thuộctínhclass.
 ƒ Ví dụ :
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector –– KKếếtt hhợợpp ElementElement vvàà ClassClass
 ƒ Ví dụ :
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector -- ContextualContextual SelectionSelection
 ƒ Định dạng đượcápdụng cho nội dung trong
 chuổi tag theo đúng thứ tự
 ƒ Ví dụ :
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector –– PseudoPseudo ClassClass
 ƒ Định dạng dựavàotrạng thái củaliênkết, sự kiện
 chuột.
 ƒ Có thể kếthợpvới Selector khác.
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector –– PseudoPseudo ElementElement
ƒ Định dạng dựavàovị trí đầutiên
 củakýtự, của dòng vănbản
ƒ :first-letter, :first-line
ƒ Có thể kếthợpvới Selector 
 khác.
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
SelectorSelector –– PseudoPseudo ElementElement
 © 2007 Khoa CNTT – ĐH KHTN