Lập trình và Thiết kế Web  i4CSS – Casscading Style Sheets
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung   Giới thiệu CSS   Định nghĩa Style   Sử dụng và ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung   Giới thiệu CSS   Định nghĩa Style   Sử dụng và ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetGiới thiệu về CSS    CSS = Casscading Style Sheets    Dùng ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetGiới thiệu về CSS – Ví dụ                                    ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung   Giới thiệu CSS   Định nghĩa Style   Sử dụng và ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetĐịnh nghĩa StyleKiểu 1                                       ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetĐịnh nghĩa Style – Ghi chú    Giống Ghi chú trong C++    Sử...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung   Giới thiệu CSS   Định nghĩa Style   Sử dụng và ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS – Phân loại    Gồm 3 loại CSS    – ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - Inline Style Sheet    Định nghĩa ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - Embedding Style Sheet    Còn gọi ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - Embedding Style Sheet   <HTML>   <...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - External Style Sheet    Mọi style...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - External Style Sheet   Trong tập t...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS – So sánh, Đánh giá                 ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS – Độ ưu tiên    Thứ tự ưu tiên áp d...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung   Giới thiệu CSS   Định nghĩa Style   Sử dụng và ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector    Là tên 1 style tương ứng với một thành phần được...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại               Mô tả phạm vi ảnh hưởng ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS - Element    Có hiệu ứng trên tất cả elem...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại               Mô tả phạm vi ảnh hưởng ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – ID rules    Có hiệu ứng duy nhất trên m...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại               Mô tả phạm vi ảnh hưởng ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – Class rules    Có hiệu ứng trên tất cả ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại               Mô tả phạm vi ảnh hưởng ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – Kết hợp Element và Class    Ví dụ :
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại               Mô tả phạm vi ảnh hưởng ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS - Contextual Selection    Định dạng được ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại               Mô tả phạm vi ảnh hưởng ...
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – Pseudo Class  Định dạng dựa vào trạng t...
Upcoming SlideShare
Loading in …5
×

04 web course css

694 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
694
On SlideShare
0
From Embeds
0
Number of Embeds
272
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Styles define how to display HTML elements Styles are normally stored in Style SheetsStyles were added to HTML 4.0 to solve a problemExternal Style Sheets can save you a lot of work External Style Sheets are stored in CSS filesMultiple style definitions will cascade into one
  • In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • 04 web course css

    1. 1. Lập trình và Thiết kế Web i4CSS – Casscading Style Sheets
    2. 2. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng và Phân loại CSS  Selector trong CSS và phạm vi ảnh hưởng
    3. 3. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng và Phân loại CSS  Selector trong CSS và phạm vi ảnh hưởng
    4. 4. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetGiới thiệu về CSS  CSS = Casscading Style Sheets  Dùng để mô tả cách hiển thị các thành phần trê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 đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading)
    5. 5. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetGiới thiệu về CSS – Ví dụ Without CSS With CSS
    6. 6. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng và Phân loại CSS  Selector trong CSS và phạm vi ảnh hưởng
    7. 7. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetĐịnh nghĩa StyleKiểu 1 Kiểu 2<tag style = SelectorName { “property1:value1; property1:value1; property2:value2; property2:value2; ……… ……… propertyN:valueN;”>…</tag> propertyN:valueN;} <tag class = “SelectorName”> ……… </tag>Ví dụ: Ví dụ:<h1 style=“ .TieuDe1 { color : blue; color: red; font-family : Arial;” > DHKHTN </h1> font-family: Verdana, sans-serif; } <h1 class=“TieuDe1”> DHKHTN </h1>
    8. 8. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetĐịnh nghĩa Style – Ghi chú  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;}
    9. 9. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng và Phân loại CSS  Selector trong CSS và phạm vi ảnh hưởng
    10. 10. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS – Phân loại  Gồm 3 loại CSS – 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ết CSS với trang web)
    11. 11. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - Inline Style Sheet  Định nghĩa style trong thuộc tính style của từng tag HTML.  Theo cú pháp kiểu 1. <tag style = “property1:value1;…propertyN:valueN;”> …. </tag>  Không sử dụng lại được.  Ví dụ: <H1 STYLE="color: yellow">This is yellow</H1>
    12. 12. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - Embedding Style Sheet  Còn gọi là Internal Style Sheet hoặc Document-Wide Style Sheet  Mọi định nghĩa style được đặt trong tag <style> của trang HTML.  Định nghĩa style theo cú pháp kiểu 2.  Trang HTML có nội dung như sau: <head> <style type=“text/css” > <!-- SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} --> </style> </head>
    13. 13. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - Embedding Style Sheet <HTML> <HEAD> <TITLE> Embedded Style Sheet </TITLE> <STYLE TYPE="text/css"> <!-- P {color: red; font-size: 12pt; font-family: Arial;} H2 {color: green;} --> </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H2>This is green</H2> <P>This is red, 12 pt. and Garamond.</P> </BODY> </HTML>
    14. 14. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - External Style Sheet  Mọi style đều lưu trong file có phần mở rộng là *.CSS.  File CSS: lưu trữ nhiều style theo cú pháp kiểu 2.  Trong file HTML: liên kết bằng tag link. Cú pháp: <head> <link rel=“stylesheet” href=“URL” type="text/css"> </head>  Trang HTML : Liên kết bằng tag style với @import url. Cú pháp <head> <style type=“text/css” media="all | print | screen" > @import url(URL); </style> </head>
    15. 15. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS - External Style Sheet Trong tập tin MyStyle.CSS Trong trang Web : demo.htm H2 <html> { <head> FONT-WEIGHT: bold; <title>Cass………</title> FONT-SIZE: 16pt; <link HREF="MyStyle.css" REL="stylesheet" > COLOR: white; </head> FONT-STYLE: italic; <body> FONT-FAMILY: Arial; <h2>This is an H2 </h2> BACKGROUND-COLOR: red; </body> font-color: white </html> }
    16. 16. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS – So sánh, Đánh giá Inline Style Sheet Embedding Style Sheet External Style SheetKhai báo Kiểu 1 Kiểu 2 Kiểu 2Cú pháp <p style=“color:red;”> <style type=“text/css”> <link rel=“stylesheet “ Test .TieuDe1{color: red;} href=“main.css” /> </p> </style> <p class=“TieuDe1”> <p class=“TieuDe1”> Test Test </p> </p>Ưu điểm • Dễ dàng quản lý Style theo • Dễ dàng quản lý Style theo • Có thể thiết lập Style cho từng tag của tài liệu web. từng tài liệu web. nhiều tài liệu web. • Có độ ưu tiên cao nhất • Không cần tải thêm các • Thông tin các Style được trang thông tin khác cho trình duyệt cache lại styleKhuyết điểm • Cần phải Khai báo lại • Cần phải khai báo lại • Tốn thời gian download file thông tin style trong từng tài thông tin style cho các tài *.css và làm chậm quá trình liệu Web và các tài liệu khác liệu khác trong mỗi lần sử biên dịch web ở trình duyệt một cách thủ công. dụng trong lần đầu sử dụng • Khó cập nhật style
    17. 17. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSử dụng và Phân loại CSS – Độ ưu tiên  Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS (độ ưu tiên giảm dần) : 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet 4. Browser Default
    18. 18. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet
    19. 19. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetNội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng và Phân loại CSS  Selector trong CSS và phạm vi ảnh hưởng
    20. 20. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector  Là tên 1 style tương ứng với một thành phần được áp dụng định dạng  Các dạng selectors  HTML element selectors  Class selectors Ví dụ: .TieuDe1 { color: red;  ID selectors font-family: Verdana, sans-serif; }  .... <h1 class=“TieuDe1”> DHKHTN </h1>
    21. 21. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại Mô tả phạm vi ảnh hưởng Ví dụelement Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ <h1> bị định dạng màu chữ=đỏ */#id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */.class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ 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 h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ <h1> có thuộc tính class=note đều bị định dạng gạch chân */Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ <h1> <h2> <h3> đều bị định dạng màu nền = màu cam */Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ <strong> nằm trong thẻ <p> đều bị định dạng màu chữ=màu tía */Pseudo Class Định dạng được áp dụng dựa vào trạngPseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
    22. 22. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS - Element  Có hiệu ứng trên tất cả element cùng loại tag  Ví dụ :
    23. 23. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại Mô tả phạm vi ảnh hưởng Ví dụelement Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ <h1> bị định dạng màu chữ=đỏ */#id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */.class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ 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 h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ <h1> có thuộc tính class=note đều bị định dạng gạch chân */Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ <h1> <h2> <h3> đều bị định dạng màu nền = màu cam */Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ <strong> nằm trong thẻ <p> đều bị định dạng màu chữ=màu tía */Pseudo Class Định dạng được áp dụng dựa vào trạngPseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
    24. 24. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – ID rules  Có hiệu ứng duy nhất trên một element có đúng id.  Ví dụ :
    25. 25. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại Mô tả phạm vi ảnh hưởng Ví dụelement Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ <h1> bị định dạng màu chữ=đỏ */#id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */.class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ 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 h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ <h1> có thuộc tính class=note đều bị định dạng gạch chân */Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ <h1> <h2> <h3> đều bị định dạng màu nền = màu cam */Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ <strong> nằm trong thẻ <p> đều bị định dạng màu chữ=màu tía */Pseudo Class Định dạng được áp dụng dựa vào trạngPseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
    26. 26. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – Class rules  Có hiệu ứng trên tất cả các loại tag có cùng giá trị thuộc tính class.  Ví dụ :
    27. 27. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại Mô tả phạm vi ảnh hưởng Ví dụelement Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ <h1> bị định dạng màu chữ=đỏ */#id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */.class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ 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 h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ <h1> có thuộc tính class=note đều bị định dạng gạch chân */Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ <h1> <h2> <h3> đều bị định dạng màu nền = màu cam */Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ <strong> nằm trong thẻ <p> đều bị định dạng màu chữ=màu tía */Pseudo Class Định dạng được áp dụng dựa vào trạngPseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
    28. 28. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – Kết hợp Element và Class  Ví dụ :
    29. 29. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại Mô tả phạm vi ảnh hưởng Ví dụelement Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ <h1> bị định dạng màu chữ=đỏ */#id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */.class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ 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 h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ <h1> có thuộc tính class=note đều bị định dạng gạch chân */Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ <h1> <h2> <h3> đều bị định dạng màu nền = màu cam */Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ <strong> nằm trong thẻ <p> đều bị định dạng màu chữ=màu tía */Pseudo Class Định dạng được áp dụng dựa vào trạngPseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
    30. 30. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS - Contextual Selection  Định dạng được áp dụng cho nội dung trong chuỗi tag theo đúng thứ tự  Ví dụ :
    31. 31. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSSLoại Mô tả phạm vi ảnh hưởng Ví dụelement Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ <h1> bị định dạng màu chữ=đỏ */#id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */.class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ 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 h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ <h1> có thuộc tính class=note đều bị định dạng gạch chân */Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ <h1> <h2> <h3> đều bị định dạng màu nền = màu cam */Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ <strong> nằm trong thẻ <p> đều bị định dạng màu chữ=màu tía */Pseudo Class Định dạng được áp dụng dựa vào trạngPseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
    32. 32. Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte SheetSelector trong CSS – Pseudo Class  Định dạng dựa vào trạng thái của liên kết, sự kiện chuột.  Có thể kết hợp với Selector khác.

    ×