Mua trọn bộ Tin 12 - HK2 - KNTT liên lạc qua zalo 0973 822 313 cô Tươi
Trang 1BÀI 17.
CÁC MỨC ƯU TIÊN
CỦA BỘ CHỌN
Trang 2Sử dụng CSS cho các kiểu bộ chọn khác nhau
Sử dụng CSS thực hiện các mẫu định dạng theo thứ tự ưu tiên
Trang 41 KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENTa) Bộ chọn pseudo-class
Pseudo-class (lớp giả): mô tả các trạng
thái được định nghĩa trước của phần tử
Ví dụ:
Các trạng thái của siêu liên kết:
• Chưa kích hoạt (link)
• Lướt qua (hover)
• Nháy chuột (active)
• Đã truy cập (visited)
Cú pháp:
:pseudo-class {thuộc tính: giá trị;}
:hover {color: red;}
Trang 51 KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENTa) Bộ chọn pseudo-class
Trang 61 KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT
b) Bộ chọn kiểu pseudo-element
Pseudo-element (phần tử giả): mô tả
các thành phần nhỏ hơn của phần tử
Ví dụ:
• Dòng đầu tiên của đối tượng
• Kí tự đầu tiên của đối tượng
• Vùng được chọn của đối tượng
• …
Cú pháp:
::pseudo-element {thuộc tính: giá trị;}
::first-line {color: green;}
<p id="p1">Ý tưởng của CSS do kỹ sư
Hakon Wium Lie, người Na Uy thiết lập năm 1994 trong khi làm việc với Tim Berners-Lee tại viện hạt nhân CERN.</p>
<p id="p2">Các ý tưởng ban đầu được đưa ra năm 1994 nhưng phiên bản CSS1 chính thức ra đời năm 1996.</p>
Trang 71 KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENTb) Bộ chọn kiểu pseudo-element
Trang 8• Sử dụng định dạng pseudo-class cho trang thái nháy chuột vào vùng màn hình (active):
:active {color: red;}
1 Muốn áp dụng đổi màu chữ một vùng trên màn hình khi nháy chuột tại vùng đó thì cần phải dùng định dạng CSS nào?
Trang 9• Sử dụng định dạng pseudo-class cho trạng thái di chuyển chuột qua đoạn văn bản (hover):
:hover {font-size: 150%;}
2 Muốn tăng kích thước một đoạn văn bản khi di chuyển chuột qua
đoạn văn bản đó thì cần dùng định dạng CSS nào?
Trang 102 MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSSThứ tự ưu tiên của CSS
Trang 112 MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSSCách tính trọng số CSS
Trang 13• Nguyên tắc cascading (thứ tự cuối cùng) được áp dụng cho một dãy các định dạng CSS khi dãy các định dạng CSS có trọng số bằng nhau.
2 Khi nào nguyên tắc cascading (thứ tự cuối cùng) được áp dụng cho một dãy các định dạng CSS?
Trang 15Nhiệm vụ 1 Nhập tệp html
Trang 17Nhiệm vụ 2 Thiết lập định dạng CSS cho tệp html ở Nhiệm vụ 1
Trang 18LUYỆN TẬP
• #p123 + p {color: red;} : áp dụng cho phần tử p với điều kiện phần
tử p nằm ngay sau phần tử bất kì có mã định danh #p123
• h2#p123 + p {color: red;}: áp dụng cho phần tử p với điều kiện phần tử p nằm ngay sau phần tử h2 có mã định danh #p123
1 Giải thích sự khác nhau giữa hai định dạng sau:
Trang 19LUYỆN TẬP
• Đưa các tên riêng vào thẻ <em> … </em>
• Tạo mẫu định dạng CSS cho phần tử <em>:
em {font-style: italic; border: 1px solid blue;}
2 Trong phần Thực hành, các tên riêng (tên người, tên tổ chức) cần được bổ sung định dạng đóng khung và in nghiêng Em sẽ thực hiện các yêu cầu này như thế nào?
Trang 20VẬN DỤNG
1 Tìm hiểu thêm các dạng pseudo-class khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này
Các trạng thái của phần tử input:
• checked: được chọn (type=checkbox)
• focus: được chọn (type=text)
Trang 21VẬN DỤNG
1 Tìm hiểu thêm các dạng pseudo-class khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này
Trang 22VẬN DỤNG
2 Tìm hiểu thêm các dạng pseuso-element khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này
Các phần tử giả:
• before: thành phần phía trước
• after: thành phần phía sau
• marker: thành phần đánh dấu
Trang 23VẬN DỤNG
2 Tìm hiểu thêm các dạng pseuso-element khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này
Trang 24T H A N K
YO U !