Thiết kế và lập trình Web 1 - Bài 4: CSS - Casscading Style Sheets

 Thiếtkế và Lập trình Web 1
Bài 4
CSSCSS –– CasscadingCasscading StyleStyle SheetsSheets
 KhoaKhoa CNTTCNTT –– ĐĐHH.KHTN.KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
NNộộii dungdung
 ƒ GiớithiệuCSS
 ƒ Định nghĩaStyle
 ƒ Sử dụng và Phân loạiCSS
 ƒ Selector trong CSS và phạmvi ảnh hưởng
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
NNộộii dungdung
 ƒ GiớithiệuCSS
 ƒ Định nghĩaStyle
 ƒ Sử dụng và Phân loạiCSS
 ƒ Selector trong CSS và phạmvi ảnh hưởng
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
GiGiớớii thithiệệuu vvềề 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 1 – Bài 4: CSS – Casscading Style Sheet
NNộộii dungdung
 ƒ GiớithiệuCSS
 ƒ Định nghĩaStyle
 ƒ Sử dụng và Phân loạiCSS
 ƒ Selector trong CSS và phạmvi ảnh hưởng
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Đị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 1 – Bài 4: CSS – Casscading Style Sheet
ĐĐịịnhnh nghnghĩĩaa StyleStyle –– GhiGhi chchúú
 ƒ Giống Ghi chú trong C++
 ƒ Sử dung /*Ghi chú*/
 ƒ Ví dụ :
 ƒ SelectorName {
 property1:value1; /*Ghi chu 1*/
 property2:value2; /*Ghi chu 2*/
 ………
 propertyN:valueN;}
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
NNộộii dungdung
 ƒ GiớithiệuCSS
 ƒ Định nghĩaStyle
 ƒ Sử dụng và Phân loạiCSS
 ƒ Selector trong CSS và phạmvi ảnh hưởng
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
CCáácc loloạạii CSSCSS
 ƒ Gồm 3 loại CSS 
 1. Inline Style Sheet
 2. Embedding Style Sheet
 3. External Style Sheet
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
1. Inline Style Sheet
 ƒ Định nghĩa style trong thuộc tính style củatừng
 tag HTML
 ƒ Theo cú pháp kiểu1
 …
 ƒ Ví dụ:
 This is yellow
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
2. Embedding Style Sheet
 • Nhúng trong tag củatrangHTML 
 ƒ Định nghĩa style theo cú pháp kiểu2
 <!--
 SelectorName {
 property1:value1;
 property2:value2;
 ………
 propertyN:valueN;}
 …
 -->
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
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;}
 -->
12 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
3. External Style Sheet
 ƒ Mọistyle đềulưu trong file có phầnmở rộng là *.CSS
 ƒ Định nghĩa style theo cú pháp kiểu2
 ƒ 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 1 – Bài 4: CSS – Casscading Style Sheet
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"
 FONT-STYLE: italic; REL="stylesheet" >
 FONT-FAMILY: Arial; 
 BACKGROUND-COLOR: red; 
 font-color: white This is an H2 
 } 
14 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
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 1 – Bài 4: CSS – Casscading Style Sheet
ĐĐộộ ưư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 1 – Bài 4: CSS – Casscading Style Sheet
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
NNộộii dungdung
 ƒ GiớithiệuCSS
 ƒ Định nghĩaStyle
 ƒ Sử dụng và Phân loạiCSS
 ƒ Selector trong CSS và phạmvi ảnh hưởng
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
 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 
19 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
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à /* 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à 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 1 – Bài 4: CSS – Casscading Style Sheet
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 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS -- 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 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS –– 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 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS –– 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 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS –– KKếếtt hhợợpp ElementElement vvàà ClassClass
 ƒ Ví dụ :
 © 2007 Khoa CNTT – ĐH KHTN
 Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS -- 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 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS –– 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 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS –– 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 1 – Bài 4: CSS – Casscading Style Sheet
SelectorSelector trongtrong CSSCSS –– PseudoPseudo ElementElement
 © 2007 Khoa CNTT – ĐH KHTN