CHUYÊN ĐỀ CSDL VÀ LẬP TRÌNH ỨNG DỤNG WEB 1- P46 potx

Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Selector
Selector
trong
trong
CSS
CSS
Loại Mô tả phạmvi ảnh hưởng Ví dụ
element Định dạng áp dụng cho ND tấtcả các tag
Element trong tài liệuWeb
h1 {color: red;}
/* ND củathẻ <h1> bịđịnh dạng màu chữ=đỏ */
#id Định dạng áp dụng cho ND tấtcả các
tab có thuộctínhid trong tà liệuWeb
#test {color: green;}
/* ND củabấtkỳ tag có thuộc tính id=test đềubị
định dạng màu chữ=xanh lá */
.class Định dạng áp dụng cho ND tấtcả các
tab có thuộctínhclass trong tà liệuWeb
.note {color: yellow;}
/* ND củabấtkỳ tag có thuộc tính class=note đều
bịđịnh dạng màu chữ=vàng*/
element . class Định dạng áp dụng cho ND các tag
Element có thuộctínhclass tương ứng
h1.note {text-decoration: underline;}
/* ND củacácthẻ <h1> có thuộc tính class=note
đềubịđịnh dạng gạch chân */
Grouping Định dạng áp dụng cho ND một nhóm
các tag trong tài liệu.
h1,h2,h3 {background-color: orange;}

/* ND củacácthẻ <h1> <h2> <h3> đềubịđịnh
dạng màu nền= màucam */
Contextual Định dạng áp dụng cho ND các thẻđược
lồng trong mộtthẻ cha nào đó
p strong {color: purple;}
/* ND củacácthẻ <strong> nằmtrongthẻ <p> đều
bịđịnh dạng màu chữ=màu tía */
Pseudo Class
Pseudo element
Định dạng đượcápdụng dựavàotrạng
thái của các Element. (Không xuấthiện
trong mã lệnh HTML)
Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Selector
Selector
trong
trong
CSS
CSS
-
-
Element
Element
 Có hiệu ứng trên tấtcả element cùng loạitag
 Ví dụ :
Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Selector
Selector

trong
trong
CSS
CSS
Loại Mô tả phạmvi ảnh hưởng Ví dụ
element Định dạng áp dụng cho ND tấtcả các tag
Element trong tài liệuWeb
h1 {color: red;}
/* ND củathẻ <h1> bịđịnh dạng màu chữ=đỏ */
#id Định dạng áp dụng cho ND tấtcả các
tab có thuộctínhid trong tà liệuWeb
#test {color: green;}
/* ND củabấtkỳ tag có thuộc tính id=test đềubị
định dạng màu chữ=xanh lá */
.class Định dạng áp dụng cho ND tấtcả các
tab có thuộctínhclass trong tà liệuWeb
.note {color: yellow;}
/* ND củabấtkỳ tag có thuộc tính class=note đều
bịđịnh dạng màu chữ=vàng*/
element . class Định dạng áp dụng cho ND các tag
Element có thuộctínhclass tương ứng
h1.note {text-decoration: underline;}
/* ND củacácthẻ <h1> có thuộc tính class=note
đềubịđịnh dạng gạch chân */
Grouping Định dạng áp dụng cho ND một nhóm
các tag trong tài liệu.
h1,h2,h3 {background-color: orange;}
/* ND củacácthẻ <h1> <h2> <h3> đềubịđịnh
dạng màu nền= màucam */
Contextual Định dạng áp dụng cho ND các thẻđược

lồng trong mộtthẻ cha nào đó
p strong {color: purple;}
/* ND củacácthẻ <strong> nằmtrongthẻ <p> đều
bịđịnh dạng màu chữ=màu tía */
Pseudo Class
Pseudo element
Định dạng đượcápdụng dựavàotrạng
thái của các Element. (Không xuấthiện
trong mã lệnh HTML)
Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Selector
Selector
trong
trong
CSS
CSS
–
–
ID rules
ID rules
 Có hiệu ứng duy nhấttrênmộtelement cóđúng id.
 Ví dụ :
Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Selector
Selector
trong
trong
CSS

CSS
Loại Mô tả phạmvi ảnh hưởng Ví dụ
element Định dạng áp dụng cho ND tấtcả các tag
Element trong tài liệuWeb
h1 {color: red;}
/* ND củathẻ <h1> bịđịnh dạng màu chữ=đỏ */
#id Định dạng áp dụng cho ND tấtcả các
tab có thuộctínhid trong tà liệuWeb
#test {color: green;}
/* ND củabấtkỳ tag có thuộc tính id=test đềubị
định dạng màu chữ=xanh lá */
.class Định dạng áp dụng cho ND tấtcả các
tab có thuộctínhclass trong tà liệuWeb
.note {color: yellow;}
/* ND củabấtkỳ tag có thuộc tính class=note đều
bịđịnh dạng màu chữ=vàng*/
element . class Định dạng áp dụng cho ND các tag
Element có thuộctínhclass tương ứng
h1.note {text-decoration: underline;}
/* ND củacácthẻ <h1> có thuộc tính class=note
đềubịđịnh dạng gạch chân */
Grouping Định dạng áp dụng cho ND một nhóm
các tag trong tài liệu.
h1,h2,h3 {background-color: orange;}
/* ND củacácthẻ <h1> <h2> <h3> đềubịđịnh
dạng màu nền= màucam */
Contextual Định dạng áp dụng cho ND các thẻđược
lồng trong mộtthẻ cha nào đó
p strong {color: purple;}
/* ND củacácthẻ <strong> nằmtrongthẻ <p> đều

bịđịnh dạng màu chữ=màu tía */
Pseudo Class
Pseudo element
Định dạng đượcápdụng dựavàotrạng
thái của các Element. (Không xuấthiện
trong mã lệnh HTML)