Trường Dạy Nghề, profile picture
Uploaded byTrường Dạy Nghề
PPTX, PDF749 views

04 web course css

Tài liệu giới thiệu về CSS (Cascading Style Sheets), bao gồm định nghĩa, cách sử dụng và phân loại CSS theo ba loại: inline, embedding và external. Nó cũng đề cập đến selectors, cách tương tác với các phần tử HTML và ưu nhược điểm của từng loại style sheet. Tài liệu cung cấp ví dụ rõ ràng về cú pháp và cách áp dụng các style cho các thành phần trên trang web.

Embed presentation

Downloaded 29 times
Lập trình và Thiết kế Web i4 CSS – Casscading Style Sheets
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Giớ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)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Giới thiệu về CSS – Ví dụ Without CSS With CSS
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Định nghĩa Style Kiể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>
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;}
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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>
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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>
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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>
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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>
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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> }
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS – So sánh, Đánh giá Inline Style Sheet Embedding Style Sheet External Style Sheet Khai báo Kiểu 1 Kiểu 2 Kiểu 2 Cú 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 style Khuyế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
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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
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 Sheet Nộ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
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector  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>
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS - Element  Có hiệu ứng trên tất cả element cùng loại tag  Ví dụ :
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS – ID rules  Có hiệu ứng duy nhất trên một element có đúng id.  Ví dụ :
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector 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ụ :
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector 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 Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector 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ụ :
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
Lập trình và Thiết kế Web – Bài :CSS – Casscading Styte Sheet Selector 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.

More Related Content

PDF
Slide 2 - Thiết kế Web cơ bản
bySống Khác
 
PDF
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
byMasterCode.vn
 
DOC
Css
byTran Tien
 
PDF
Web1012 slide 2
byNhẫn Tâm Đại Ca
 
PDF
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT
byMasterCode.vn
 
PPTX
Seo onpage
bydaisynguyen1997
 
PDF
Slide3
bytuanduongcntt
 
PDF
Slide 01
bytuanduongcntt
 
Slide 2 - Thiết kế Web cơ bản
bySống Khác
 
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
byMasterCode.vn
 
Css
byTran Tien
 
Web1012 slide 2
byNhẫn Tâm Đại Ca
 
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT
byMasterCode.vn
 
Seo onpage
bydaisynguyen1997
 
Slide3
bytuanduongcntt
 
Slide 01
bytuanduongcntt
 

Viewers also liked

PPTX
Đào tạo thiết kế bao bì cho Giám đốc Marketing
byLC TECH VIETNAM
 
PDF
Bai giang photoshop
byMơ Mẹ Sóc
 
PDF
Adobe after effects
bySaiFujiwarano
 
PDF
Giao trinh photoshop
byNguyen Thi Quyet
 
PDF
Bài 5 Tô vẽ và chỉnh sửa ảnh - Giáo trình FPT
byMasterCode.vn
 
DOC
Microsoff Office Word
byhovanhiep
 
PDF
Slide1
bytuanduongcntt
 
PDF
Slide5 html5
bytuanduongcntt
 
PDF
Web2022 slide 1
bytuanduongcntt
 
PDF
Slide6
bytuanduongcntt
 
PDF
Web301 slide 2
bytuanduongcntt
 
PDF
Slide4 html5
bytuanduongcntt
 
PDF
Web301 slide 7
bytuanduongcntt
 
PDF
Web301 slide 4
bytuanduongcntt
 
PPT
Adobe Photoshop
byhovanhiep
 
PPT
Adobe Photoshop
byhovanhiep
 
PDF
Photoshop in graphic design - Fundamental
byHải Trần
 
PDF
Web301 slide 5
bytuanduongcntt
 
PDF
Slide2 html5
bytuanduongcntt
 
PDF
Slide3 html5
bytuanduongcntt
 
Đào tạo thiết kế bao bì cho Giám đốc Marketing
byLC TECH VIETNAM
 
Bai giang photoshop
byMơ Mẹ Sóc
 
Adobe after effects
bySaiFujiwarano
 
Giao trinh photoshop
byNguyen Thi Quyet
 
Bài 5 Tô vẽ và chỉnh sửa ảnh - Giáo trình FPT
byMasterCode.vn
 
Microsoff Office Word
byhovanhiep
 
Slide1
bytuanduongcntt
 
Slide5 html5
bytuanduongcntt
 
Web2022 slide 1
bytuanduongcntt
 
Slide6
bytuanduongcntt
 
Web301 slide 2
bytuanduongcntt
 
Slide4 html5
bytuanduongcntt
 
Web301 slide 7
bytuanduongcntt
 
Web301 slide 4
bytuanduongcntt
 
Adobe Photoshop
byhovanhiep
 
Adobe Photoshop
byhovanhiep
 
Photoshop in graphic design - Fundamental
byHải Trần
 
Web301 slide 5
bytuanduongcntt
 
Slide2 html5
bytuanduongcntt
 
Slide3 html5
bytuanduongcntt
 

Similar to 04 web course css

PPTX
2.TCBKSG_CSS_22-98.5 (1)-Mangmaytinh.pptx
bygiangtranthanh2
 
PDF
Giáo trình HTML CSS Nhất Nghệ - Lập trình web
byKhnhTrnh39
 
PDF
Tài liệu HTML5-CSS3
byLương Bá Hợp
 
PPTX
Môn học HTML5 Slide3 - Giới thiệu CSS.pptx
bythanhchantruong1
 
PPTX
B8 làm quen với CSS trong html thiết kế trang web
bytrongtai6
 
PDF
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầu
byThyPhanThBch
 
PPTX
bài giảng CSS – CASCADING STYLE SHEETS.pptx
byMiuMiuCat3
 
PDF
CSS Căn bản
byjvinhit
 
PDF
Nhập môn Css
byLy hai
 
DOCX
Bài 2 - Trang Web Giới Thiệu (2).docx
byTrongNguyn1
 
DOCX
Baigiang css
byhmtsystem
 
PDF
02 udpt thiet ke web voi css
byNguyen Son
 
PPT
C S S & The Modern Web Design
byHiệp Lê Tuấn
 
PDF
Slide2
bytuanduongcntt
 
DOCX
Ajax
byPhạm Tùng Lâm
 
PDF
Chuong4 css-091030202240-phpapp02
byTa Hormon
 
PDF
Chuong4 css-091030202240-phpapp02 (1)
byTa Hormon
 
PDF
Css tiengviet thitracnghiem_vn
byhoanghungpy
 
PPT
Session 05 Final
bySamQuiDaiBo
 
PDF
Can ban ve css
byhieusy
 
2.TCBKSG_CSS_22-98.5 (1)-Mangmaytinh.pptx
bygiangtranthanh2
 
Giáo trình HTML CSS Nhất Nghệ - Lập trình web
byKhnhTrnh39
 
Tài liệu HTML5-CSS3
byLương Bá Hợp
 
Môn học HTML5 Slide3 - Giới thiệu CSS.pptx
bythanhchantruong1
 
B8 làm quen với CSS trong html thiết kế trang web
bytrongtai6
 
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầu
byThyPhanThBch
 
bài giảng CSS – CASCADING STYLE SHEETS.pptx
byMiuMiuCat3
 
CSS Căn bản
byjvinhit
 
Nhập môn Css
byLy hai
 
Bài 2 - Trang Web Giới Thiệu (2).docx
byTrongNguyn1
 
Baigiang css
byhmtsystem
 
02 udpt thiet ke web voi css
byNguyen Son
 
C S S & The Modern Web Design
byHiệp Lê Tuấn
 
Slide2
bytuanduongcntt
 
Ajax
byPhạm Tùng Lâm
 
Chuong4 css-091030202240-phpapp02
byTa Hormon
 
Chuong4 css-091030202240-phpapp02 (1)
byTa Hormon
 
Css tiengviet thitracnghiem_vn
byhoanghungpy
 
Session 05 Final
bySamQuiDaiBo
 
Can ban ve css
byhieusy
 

More from Trường Dạy Nghề

PPT
Javascript and dom_html
byTrường Dạy Nghề
 
PDF
Bai tap quan_ly_chuyen_bay
byTrường Dạy Nghề
 
DOC
De access 1 (2013)
byTrường Dạy Nghề
 
PPT
09 web course_-_php_nang_cao
byTrường Dạy Nghề
 
PPT
Tong quan seo
byTrường Dạy Nghề
 
PPT
Hinh anh khoa hoc y tuong kinh doanh
byTrường Dạy Nghề
 
DOC
Do an thuc hanh(de1)
byTrường Dạy Nghề
 
DOC
Do an thuc hanh(de3)
byTrường Dạy Nghề
 
DOC
De1 ccb 05_05_2013_hung_vuong
byTrường Dạy Nghề
 
DOCX
Main categories tabs
byTrường Dạy Nghề
 
DOC
Do an thuc hanh(de2)
byTrường Dạy Nghề
 
PDF
Lich khai-giang-t10
byTrường Dạy Nghề
 
DOCX
Lesson plan
byTrường Dạy Nghề
 
DOCX
Books
byTrường Dạy Nghề
 
DOCX
Resources
byTrường Dạy Nghề
 
DOC
Do an thuc hanh(de4)
byTrường Dạy Nghề
 
DOCX
Quiz
byTrường Dạy Nghề
 
PPT
Gioi thieu he thong e learning
byTrường Dạy Nghề
 
DOCX
Level test format 08092011
byTrường Dạy Nghề
 
PPT
Hoc vien thanh dat
byTrường Dạy Nghề
 
Javascript and dom_html
byTrường Dạy Nghề
 
Bai tap quan_ly_chuyen_bay
byTrường Dạy Nghề
 
De access 1 (2013)
byTrường Dạy Nghề
 
09 web course_-_php_nang_cao
byTrường Dạy Nghề
 
Tong quan seo
byTrường Dạy Nghề
 
Hinh anh khoa hoc y tuong kinh doanh
byTrường Dạy Nghề
 
Do an thuc hanh(de1)
byTrường Dạy Nghề
 
Do an thuc hanh(de3)
byTrường Dạy Nghề
 
De1 ccb 05_05_2013_hung_vuong
byTrường Dạy Nghề
 
Main categories tabs
byTrường Dạy Nghề
 
Do an thuc hanh(de2)
byTrường Dạy Nghề
 
Lich khai-giang-t10
byTrường Dạy Nghề
 
Lesson plan
byTrường Dạy Nghề
 
Books
byTrường Dạy Nghề
 
Resources
byTrường Dạy Nghề
 
Do an thuc hanh(de4)
byTrường Dạy Nghề
 
Quiz
byTrường Dạy Nghề
 
Gioi thieu he thong e learning
byTrường Dạy Nghề
 
Level test format 08092011
byTrường Dạy Nghề
 
Hoc vien thanh dat
byTrường Dạy Nghề
 

04 web course css

  • 1.
    Lập trình vàThiết kế Web i4 CSS – Casscading Style Sheets
  • 2.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Giớ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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Giới thiệu về CSS – Ví dụ Without CSS With CSS
  • 6.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Định nghĩa Style Kiể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.
    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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS – So sánh, Đánh giá Inline Style Sheet Embedding Style Sheet External Style Sheet Khai báo Kiểu 1 Kiểu 2 Kiểu 2 Cú 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 style Khuyế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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Sử 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet
  • 19.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Nộ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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector  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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
  • 22.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS - Element  Có hiệu ứng trên tất cả element cùng loại tag  Ví dụ :
  • 23.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
  • 24.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS – ID rules  Có hiệu ứng duy nhất trên một element có đúng id.  Ví dụ :
  • 25.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
  • 26.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
  • 28.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS – Kết hợp Element và Class  Ví dụ :
  • 29.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
  • 30.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector 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.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector trong CSS Loạ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ạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML)
  • 32.
    Lập trình vàThiết kế Web – Bài :CSS – Casscading Styte Sheet Selector 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.

Editor's Notes

  • #5 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
  • #22 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.
  • #24 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.
  • #26 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.
  • #28 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.
  • #30 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.
  • #32 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.