1. Trang chủ
  2. » Giáo án - Bài giảng

Tin 12 - Bài 17 - KNTT

24 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 24
Dung lượng 71,61 MB

Nội dung

Mua trọn bộ Tin 12 - HK2 - KNTT liên lạc qua zalo 0973 822 313 cô Tươi

Trang 1

BÀI 17.

CÁC MỨC ƯU TIÊN

CỦA BỘ CHỌN

Trang 2

Sử 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 4

1 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 5

1 KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENTa) Bộ chọn pseudo-class

Trang 6

1 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 7

1 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 10

2 MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSSThứ tự ưu tiên của CSS

Trang 11

2 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 15

Nhiệm vụ 1 Nhập tệp html

Trang 17

Nhiệm vụ 2 Thiết lập định dạng CSS cho tệp html ở Nhiệm vụ 1

Trang 18

LUYỆ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 19

LUYỆ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 20

VẬ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 21

VẬ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 22

VẬ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 23

VẬ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 24

T H A N K

YO U !

Ngày đăng: 26/12/2024, 21:20

w