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) . <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 –. */ 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. 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 -