Bài 2 Cơ chế làm việc của CSS

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 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 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 Linked Inline Embedded 4 INLINE Inline: <p style="font-size: 25pt; font-weight:bold; font-style: italic; color:red;">nội dung ... 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 EMBEDDED h1 {font-size: 16px;} p {color:blue;} Embedded Định nghĩa trong thẻ của trang 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 <link href="my_style_sheet.css" media="screen" rel="stylesheet" type="text/css" /> 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ẻ /* 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 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 Các thuộc tính và kiểu được CSS quy định sẵn ĐỊNH NGHĨA SELECTOR THEO THẺ Định nghĩa style cho một selector: h1 {color:blue; font-weight:bold;} Định nghĩa cùng style cho nhiều 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 SELECTOR THEO THẺ CSS: p span em {color:green;} XHTML: Selector ngữ cảnh rất chọn lọc. Ví dụ này hướng dẫn cách nhắm đến một thẻ cụ 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. Bài 2 - Cơ chế làm việc của CSS 13 Selector em nằm trong thẻ span, và tất cả 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) ĐỊ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: Selector ngữ cảnh rất chọn lọc. Ví dụ này hướng dẫn cách nhắm đến một thẻ cụ 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. Bài 2 - Cơ chế làm việc của CSS 15 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 ID & CLASS (LỚP) Thuộc tính id: dùng để định danh (identifier) một thẻ trên trang web Ví dụ: nội dung Thuộc tính class: dùng để định nghĩa một kiểu định dạng Ví dụ: nội dung Slide 1 – XHTML: Cấu trúc nội dung web 16 CLASS Định dạng cụ thể vùng/thẻ tài liệu Mang tính chất kế thừa, sử dụng lại nhiều lần với nhiều vùng/thẻ trên trang Được gắn với thẻ XHTML Có thể áp dụng nhiều class trên một thẻ XHTML Sử dụng ký tự . ở đầu định nghĩa style Bài 2 - Cơ chế làm việc của CSS 17 ĐỊNH NGHĨA SELECTOR THEO CLASS CSS: p {font-family: Helvetica, sans-serif;} .specialtext {font-weight:bold;} XHTML: Đây là tiêu đề có cùng lớp với đoạn thứ hai Thẻ này không thuộc lớp nào. Khi một thẻ được xác định bởi một lớp, ta có thể định hướng tới thẻ đó 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;} XHTML: Đây là văn bản đặc biệt Bài 2 - Cơ chế làm việc của CSS 20 SỰ KHÁC BIỆT GIỮA CLASS & ID ID có sức mạnh hơn Class: ID chỉ được gắn với một thẻ (thường là div) trên XHTML (không xuất hiện nhiều lần) Class có thể được gán với nhiều thẻ (xuất hiện nhiều lần) Có thể sử dụng nhiều thuộc tính id trong một trang, nhưng mỗi thuộc tính có một giá trị (tên) riêng để định nghĩa. Dùng ID để định danh các thẻ, phục vụ cho việc lập 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;} -> dấu * đại diện cho "bất cứ thẻ con nào của p" Bài 2 - Cơ chế làm việc của CSS 22 SELECTOR THUỘC TÍNH Selector cho một thẻ với thuộc tính xác định img[title] {border: 2px solid blue;} -> áp dụng cho mọi thẻ img có định nghĩa thuộc tính title img[alt="Dartmoor-view of countryside"] {border:3px green solid;} -> áp dụng cho thẻ img có thuộc tính alt mang giá trị cụ thể Bài 2 - Cơ chế làm việc của CSS 23 Pseudo-Class (lớp giả) PSEU-DO CLASS Pseudo-class là class phổ biến nhất được sử dụng với các thẻ XHTML Có tác dụng khi có sự kiện di chuột qua Sử dụng tất cả những thành phần với Pseudo-class để tạo hiệu ứng rollover Một số trình duyệt sẽ không chấp nhận Pseudo-class nếu như không tuân thủ thứ 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 {font-size:300%; float:left;} x:first-line p:first-line{font-variant:small-caps;} x:before h1.age:before {content:"Tuổi: "} x:after h1.age:after {content:" 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 KẾ THỪA TRONG CSS CSS: body,td,th {font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color: #000; margin: 0px; background-color:#ffffcc;} Bài 2 - Cơ chế làm việc của CSS 30 Khi định nghĩa thuộc tính cho thẻ body thì nhiều thẻ nằm trong body sẽ kế thừa giá trị các thuộc tính này TÍNH KẾ THỪA TRONG CSS Các thẻ con có thể định nghĩa lại giá trị các thuộc tính kế thừa Các thẻ con không định nghĩa lại giá trị các thuộc tính kế thừa sẽ mặc nhiên nhận các giá trị kế thừa Kế 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, tạo ra web với giao diện tối ưu Quy tắc phân lớp: Quy tắc 1: tìm tất cả khai báo áp dụng cho mỗi thẻ và thuộc tính Quy tắc 2: phân loại theo trật tự và trọng lượng Quy tắc 3: sắp xếp theo tính chuyên biệt Quy tắc 4: 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 năm nguồn, thiết lập mọi thuộc tính phù hợp trong quá trình đó • Giá trị của thuộc tính được thiết lập cuối cùng trong quá trình này quyết định hình thức • Từ khoá !important: – Đứng sau một khoagnr trống, sau style muốn trở nên quan trọng, đứng trước dấu ; Bài 2 - Cơ chế làm việc của CSS 33 PHÂN LỚP TRONG CSS Quy tắc 3: • Tính chuyên biệt xác định độ cụ thể của định nghĩa Quy tắc 4: • Nếu hai định nghĩa có 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 GIÁ TRỊ TUYỆT ĐỐI Mô tả độ dài trong thế giới thực Các thành phần của trang thường sử dụng đơn vị pixel Bài 2 - Cơ chế làm việc của CSS 37 GIÁ TRỊ TƯƠNG ĐỐI Em được lấy từ độ rộng của ký tự trong font, vì vậy kích thước của nó thay đổi tùy thuộc vào font mà bạn sử dụng. Bài 2 - Cơ chế làm việc của CSS 38 GIÁ TRỊ TƯƠNG ĐỐI Có hai lợi ích quan trọng cho việc sử dụng kích thước tương đối như em cho font chữ: Tận dụng khả năng kế thừa Nếu bạn không định nghĩa kích thước font với đơn vị tương đối, bạn đã vô hiệu hóa khả năng đặt kích thước font trong menu View của Internet Explorer Bài 2 - Cơ chế làm việc của CSS 39 GIÁ TRỊ MÀU SẮC Hệ nhị phân (#RRGGBB and #RGB). Phần trăm RGB (R%, G% B%). Tên màu (red, green, blue…). Bài 2 - Cơ chế làm việc của CSS 40 PHỤ LỤC B: THUỘC TÍNH CỦA CSS Hãy xem Phụ lục B để biết các thuộc tính của CSS Xuyên suốt quá trình học tập, làm việc Tự thực hành với những thuộc tính đơn giản Tự nghiên cứu Bài 2 - Cơ chế làm việc của CSS 41 TỔNG KẾT Có ba cách định nghĩa style cho trang là inline, embbed và linked Trong định nghĩa CSS, thuộc tính bắt buộc phải có giá trị Có các loại định nghĩa selector cho thẻ, lớp, id, *, thuộc tính, lớp giả… Áp dụng tính kế thừa trong CSS vào những thành phần con khác nhau trên trang web Giá trị gán cho các thuộc tính có thể ở dạng tương đối hoặc tuyệt đối Phụ lục B của sách mô tả đầy đủ các thuộc tính CSS Bài 2 - Cơ chế làm việc của CSS 42