bài 2 cơ chế làm việc của css

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề	Bài 2 Cơ chế làm việc của CSS
Trường học	Trường Đại Học Công Nghệ Thông Tin
Chuyên ngành	Khoa học Máy Tính
Thể loại	Bài giảng
Năm xuất bản	2024
Thành phố	Hà Nội

Định dạng
Số trang	42
Dung lượng	7,37 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

Bài 2 Cơ chế làm việc của CSS NHẮC LẠI BÀI TRƯỚC Nhắc lại về HTML Định nghĩa XHTML, CSS Cách thiết kế layout trang web Làm quen với cấu trúc một trang web Làm quen với những plugin kiểm tra mã XHTML và CSS trên những trình duyệt khác nhau Nhắc lại về HTML Định nghĩa XHTML, CSS Cách thiết kế layout trang web Làm quen với cấu trúc một trang web Làm quen với những plugin kiểm tra mã XHTML và CSS trên những trình duyệt khác nhau Bài 2 - Cơ chế làm việc của CSS 2 MỤC TIÊU BÀI HỌC Cách áp dụng CSS cho trang web Cấu trúc & Quy tắc khai báo CSS Pseudo-Class (lớp giả) Tính kế thừa trong CSS Khai báo giá trị màu sắc và số trong CSS Cách áp dụng CSS cho trang web Cấu trúc & Quy tắc khai báo CSS Pseudo-Class (lớp giả) Tính kế thừa trong CSS Khai báo giá trị màu sắc và số trong CSS Bài 2 - Cơ chế làm việc của CSS 3 CÁCH ÁP DỤNG CSS 3 cách áp dụng CSS trong XHTML: CSS Bài 2 - Cơ chế làm việc của CSS CSS Linked Inline Embedded 4 INLINE Inline: <p style="font-size: 25pt; font-weight:bold; font-style: italic; color:red;">nội dung </p> Inline Style trong Embedded bị ghi đè Định nghĩa dưới dạng thuộc tính của thẻ Bài 2 - Cơ chế làm việc của CSS Giới hạn áp dụng trong thẻ được chèn Nặng cho file HTML Không có tính linh động Lộn xộn giữa nội dung và trình bày 5 Định nghĩa dưới dạng thuộc tính của thẻ EMBEDDED <head> <style type="text/css"> h1 {font-size: 16px;} p {color:blue;} </style> </head> Embedded Định nghĩa trong thẻ <head> của trang <head> <style type="text/css"> h1 {font-size: 16px;} p {color:blue;} </style> </head> Bài 2 - Cơ chế làm việc của CSS Định nghĩa style tập trung Dùng lại được cho nhiều thẻ Giới hạn áp dụng trong trang Ghi đè style trong file CSS được Linked 6 LINKED <head> <link href="my_style_sheet.css" media="screen" rel="stylesheet" type="text/css" /> </head> <head> <link href="my_style_sheet.css" media="screen" rel="stylesheet" type="text/css" /> </head> Bài 2 - Cơ chế làm việc của CSS 7 Các style được định nghĩa trong file .css riêng và được liên kết với trang, định nghĩa liên kết đặt trong thẻ <head> /* CLASS:LIME TAG STYLES */ body.lime {background-color:#FFF;} .lime #main_wrapper {background-color:#FFF;} .lime #header {background-color:#507EA1;} .lime #nav {background-color:transparent;} .lime #content {background-color:#CFE673;} .lime #promo {background-color:transparent;} .lime #footer {background-color:#BFCCD6;} LINKED Linked Có tính kế thừa Phạm vi áp dụng: toàn bộ các trang trong website Bài 2 - Cơ chế làm việc của CSS Phạm vi áp dụng: toàn bộ các trang trong website Thiết kế, chỉnh sửa dễ dàng Áp dụng được nhiều file CSS 8 Cấu trúc & Quy tắc khai báo CSS CẤU TRÚC ĐỊNH NGHĨA STYLE Selector Câu lệnh Là thẻ, id, lớp,… Bài 2 - Cơ chế làm việc của CSS Thuộc tính : Giá trị 10 Là thẻ, id, lớp,… Các thuộc tính và kiểu được CSS quy định sẵn [...]... tuổi."} Bài 2 - Cơ chế làm việc của CSS 27 Tính kế thừa trong CSS TÍNH KẾ THỪA TRONG CSS Tính kế thừa là mối quan hệ giữa phần tử cha và phần tử con trong CSS Tối ưu hóa dung lượng của file css Sử dụng lại cho nhiều trang trong website Được áp dụng nhiều nhất với những thuộc tính văn bản Áp dụng được cho nhiều vùng trên một trang Sử dụng lại cho nhiều dự án khác Bài 2 - Cơ chế làm việc của CSS 29 TÍNH... nằm trong thẻ p nên chịu tác động của định nghĩa CSS (đổi màu chữ thành xanh) Bài 2 - Cơ chế làm việc của CSS 13 ĐỊNH NGHĨA SELECTOR THEO THẺ Làm việc với selector con Nếu muốn viết một định nghĩa để thẻ được định hướng phải là thẻ con (trực tiếp) của một thẻ cụ thể, sử dụng ký hiệu > p > em {color: green;} Bài 2 - Cơ chế làm việc của CSS 14 ĐỊNH NGHĨA SELECTOR THEO THẺ CSS: p > em {color: green;} XHTML:... trình JavaScript Bài 2 - Cơ chế làm việc của CSS 21 SELECTOR SAO (*) Selector * hay còn gọi là selector đa năng, mang nghĩa là "bất cứ thẻ nào" -> áp dụng cho mọi thẻ * {color:green;} -> áp style mọi nội dung trên trang sẽ có màu xanh Hay dùng để đại diện cho một thẻ không xác định p * em {font-weight:bold;} cho "bất cứ thẻ con nào của p" Bài 2 - Cơ chế làm việc của CSS -> dấu * đại diện 22 SELECTOR THUỘC... selector: h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;} Cùng một selector, có thể định nghĩa nhiều style h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;} h3 {font-style: italic;} Định nghĩa theo ngữ cảnh div p {color:red;} Bài 2 - Cơ chế làm việc của CSS 11 CÂY PHÂN CẤP THẺ CỦA TRANG Hệ thống phân cấp này thể hiện thẻ nào lồng trong thẻ nào Bài 2 - Cơ chế làm việc của CSS 12 ĐỊNH NGHĨA... tự khai báo: Link Visited Hover Active Bài 2 - Cơ chế làm việc của CSS 25 PSEU-DO CLASS Một số thuộc tính khác của pseu-do class :FIRST-CHILD div.weather strong:first-child {color:red;} ví dụ: Thời tiết rất nóng cực kỳ ẩm :FOCUS input:focus {border: 1px solid blue;} Bài 2 - Cơ chế làm việc của CSS 26 PSEU-DO CLASS x:first-letter p:first-letter... trọng lượng chính xác như nhau, định nghĩa ở cấp bậc thấp nhất trong phân lớp ghi đè giá trị Bài 2 - Cơ chế làm việc của CSS 34 KHAI BÁO GIÁ TRỊ MÀU SẮC VÀ SỐ TRONG CSS GIÁ TRỊ SỐ Sử dụng giá trị số để miêu tả độ dài của tất cả những yếu tố trong trang 2 giá trị: tuyệt đối và tương đối Bài 2 - Cơ chế làm việc của CSS 36 ... đó bất kể vị trí của nó trong hệ thống phân cấp. Bài 2 - Cơ chế làm việc của CSS 18 ĐỊNH NGHĨA SELECTOR THEO ID ID không mang tính sử dụng lại nhiều lần, áp dụng để định danh cho một thẻ ID không mang tính chất kế thừa Sử dụng ký tự # ở đầu định nghĩa style Bài 2 - Cơ chế làm việc của CSS 19 ĐỊNH NGHĨA SELECTOR THEO ID CSS: p#specialtext {font-weight:bold; font-family: Helvetica, sans-serif;}... thừa là khả năng mạnh mẽ của CSS, tuy nhiên cũng cần dùng cẩn thận vì nó có thể đặt những thuộc tính style không mong muốn cho các thẻ con (đặc biệt là các thuộc tính về định vị) Bài 2 - Cơ chế làm việc của CSS 31 PHÂN LỚP TRONG CSS Cách áp dụng các style từ trên xuống dưới từ một cấp bậc của hệ thống phân cấp trong trang tới cấp bậc tiếp theo Là một cơ chế mạnh mẽ Giúp viết css tiết kiệm, dễ dàng,... thể bằng hệ thống phân cấp của trang. Chỉ cần là thẻ con cháu theo thứ tự được chỉ định trong selector; các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng. Selector em là con của p nên mới chịu tác động của thuộc tính màu sắc chữ xanh Thẻ em thứ hai không phải là con trực tiếp nên không chịu tác động Bài 2 - Cơ chế làm việc của CSS 15 ID & CLASS (LỚP) Thuộc... lớp: Quy tắc 1: thuộc tính Quy tắc 2: Quy tắc 3: Quy tắc 4: tìm tất cả khai báo áp dụng cho mỗi thẻ và phân loại theo trật tự và trọng lượng sắp xếp theo tính chuyên biệt sắp xếp theo trật tự Bài 2 - Cơ chế làm việc của CSS 32 PHÂN LỚP TRONG CSS Quy tắc 1: • Khi mỗi trang được tả, trình duyệt xem xét mỗi thẻ trong trang để tìm những định nghĩa áp dụng cho nó Quy tắc 2: • Trình duyệt tuần tự kiểm tra . duyệt khác nhau Bài 2 - Cơ chế làm việc của CSS 2 MỤC TIÊU BÀI HỌC Cách áp dụng CSS cho trang web Cấu trúc & Quy tắc khai báo CSS Pseudo-Class (lớp giả) Tính kế thừa trong CSS Khai báo giá. trong CSS Cách áp dụng CSS cho trang web Cấu trúc & Quy tắc khai báo CSS Pseudo-Class (lớp giả) Tính kế thừa trong CSS Khai báo giá trị màu sắc và số trong CSS Bài 2 - Cơ chế làm việc của CSS. của CSS 3 CÁCH ÁP DỤNG CSS 3 cách áp dụng CSS trong XHTML: CSS Bài 2 - Cơ chế làm việc của CSS CSS Linked Inline Embedded 4 INLINE Inline: <p style="font-size: 25 pt; font-weight:bold; font-style:

Ngày đăng: 23/05/2014, 16:48

Xem thêm