Thiết kế và lập trình Web 1 - Bài 4: CSS - Casscading Style Sheets
Nội dung
GiớithiệuCSS
Định nghĩaStyle
Sửdụng và Phân loạiCSS
Selector trong CSS và phạmvi ảnh hưởng
Tóm tắt nội dung Thiết kế và lập trình Web 1 - Bài 4: CSS - Casscading Style Sheets, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
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 KHTNFile đính kèm:
Thiết kế và lập trình Web 1 - Bài 4_CSS - Casscading Style Sheets.pdf
