Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 42 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
42
Dung lượng
7,37 MB
Nội dung
Bài2CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS2 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 CSSBài2 - CơchếlàmviệccủaCSS 3 CÁCH ÁP DỤNG CSS 3 cách áp dụng CSS trong XHTML: CSSBài2 - CơchếlàmviệccủaCSSCSS 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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS Đị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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 13 ĐỊNH NGHĨA SELECTOR THEO THẺ Làmviệ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ài2 - CơchếlàmviệccủaCSS 14 ĐỊNH NGHĨA SELECTOR THEO THẺ CSS: p > em {color: green;} XHTML:... trình JavaScript Bài2 - CơchếlàmviệccủaCSS 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ài2 - Cơ chếlàmviệccủ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ài2 - Cơ chếlàmviệccủ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ài2 - Cơ chếlàmviệccủa CSS 12 ĐỊNH NGHĨA... tự khai báo: Link Visited Hover Active Bài2 - Cơ chếlàmviệccủ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ài2 - Cơ chếlàmviệccủ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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 36 ... đó bất kể vị trí của nó trong hệ thống phân cấp. Bài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 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àmviệ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ài2 - CơchếlàmviệccủaCSS 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ài2 - CơchếlàmviệccủaCSS 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: