HTML ban đầu được phát triển bởi Tim Berners-Lee vào năm 1991. Phiên bản đầu tiên của HTML rất đơn giản, nhưng nó cho phép người dung tạo ra trang web có thể hiển thị trên bất kì trình duyệt web nào.

Theo thời gian, HTML đã phát triển thành một ngôn ngữ mạnh mẽ và phức tạp hơn. Các tính năng mới đã được thêm vào HTML để cho phép tạo ra những trang web phức tạp và tương tác hơn.

HOẠT ĐỘNG THEO NHÓM

Đối với nội dung là văn bản trong trang web, em có thể thực hiện những định kiểu như thế nào?

Hãy nêu những đặc điểm có thể định kiểu của văn bản.

Đối với nội dung là văn bản trong trang web, có thể thực hiện những định kiểu

Tech12h

BÀI F8:
MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS

NỘI DUNG BÀI HỌC

01 NHỮNG THUỘC TÍNH ĐỊNH KIỂU CHO MÀU SẮC VÀ PHÔNG CHỮ

Theo em, màu chữ và phông chữ có ảnh hưởng đến trải nghiệm của người dùng web không?

CSS hỗ trợ định kiểu cho phông chữ bằng những thuộc tính nào?

Trong Ví dụ 1, cụm từ “Vô địch” được định kiểu khác với phần nội dung còn lại trong cặp thẻ <li></li>. Em hãy nêu cách thực hiện.

CSS hỗ trợ định kiểu cho màu sắc của chữ bằng thuộc tính nào?

Màu sắc của chữ và các thành phần của trang web có thể được chỉ định bởi những giá trị như thế nào?

Màu chữ

Phông chữ

> Những yếu tố góp phần tạo nên hình thức của trang web.

> Chọn phông chữ phù hợp sẽ làm nổi bật nội dung cần truyền tải, giúp người đọc nhanh chóng nhận biết nội dung chính và có được trải nghiệm tích cực.

Một số thuộc tính định kiểu cho phông chữ

Bảng 1. Một số thuộc tính và giá trị dùng để định kiểu phông chữ

Thuộc tính	Mô tả	Giá trị
font-family	Tên phông chữ	Arial, Times New Roman, Georgia, Impact,…
font-size	Cỡ chữ	1. Theo từ khoá: medium, large, x-large,... 2. Theo tỉ lệ phần trăm: 150%,... 3. Theo đơn vị: pixel, point, em,.. Ví dụ: 16px, 2em.
font-style	Kiểu in nghiêng	normal, italic hoặc oblique.
font-weight	Độ đậm nhạt	1. Theo từ khoá: normal, lighter, bold, bolder. 2. Theo số cụ thể: 100, 200,..., 800, 900.

Ví dụ

Hình 1 là kết quả thay đổi phông chữ từ Vô địch của mục Các hoạt động đã tham gia trong tệp portfolio.html.

Em thực hiện chèn thẻ HTML <span> với thuộc tính style

Tech12h

> Tech12h

Hình 1. Một phần nội dung của mục sau khi định kiểu cho phông chữ

Định kiểu cho màu sắc của chữ

Sử dụng thuộc tính color.

Màu sắc của chữ nói riêng và các thành phần khác của trang web nói chung có thể được chỉ định bởi những giá trị.

Từ khoá là tên màu (red)

Mã màu: (#ff0000)

Hàm mô tả màu (rgba(255,0,0,0.3) gồm ba tham số đầu ứng với các thành phần RGB, tham số thứ tư là độ trong suốt).

Ví dụ

Mã lệnh CSS định kiểu cho thẻ <h1> sau tô màu xanh cho đề mục Các hoạt động đã tham gia.

Em thực hiện định kiểu cho thẻ <h1>

Tech12h

Hình 2. Nội dung đề mục sau khi định kiểu cho màu sắc

CÂU HỎI CỦNG CỐ

Viết mã lệnh CSS để định kiểu cho những thành tích đạt được còn lại trong mục Các hoạt động đã tham gia với những giá trị khác cho các thuộc tính.

Gợi ý thực hiện

Tech12h

02 NHỮNG THUỘC TÍNH ĐỊNH KIỂU CHO VĂN BẢN

------------------------- Còn tiếp -------------------------

CHÀO MỪNG CÁC BẠN ĐẾN VỚI BÀI HỌC MỚI!

KHỞI ĐỘNG

Nối tên một số thuộc tính định dạng bảng với ý nghĩa của nó.

Tech12h

BÀI F11:
ĐỊNH KIỂU CHO BẢNG VÀ PHẦN TỬ <DIV>

NỘI DUNG BÀI HỌC

Tech12h

01 ĐỊNH KIỂU CHO BẢNG

Theo em, những yếu tố nào cần được quan tâm khi định kiểu CSS cho bảng?

Trong trường hợp bảng có nhiều hàng hoặc nhiều cột, làm thế nào để giúp người dùng nhanh chóng và dễ dàng nhận biết nội dung của bảng?

Khi định kiểu cho bảng cần quan tâm đến

Đường viền

Việc tô màu nền cho hàng theo hình thức xen kẽ nhau

> Giúp người dùng nhanh chóng và dễ dàng nhận biết nội dung của bảng.

Màu nền

Định kiểu màu sắc riêng cho hàng tiêu đề hoặc xen kẽ cho các hàng chẵn và lẻ của bảng.

> Để thêm phần đẹp mắt và nổi bật.

a. Đường viền

Bên cạnh tính thẩm mĩ, trong trường hợp bảng có nhiều hàng hoặc nhiều cột, việc tô màu nền cho hàng theo hình thức xen kẽ nhau giúp người dùng nhanh chóng và dễ dàng nhận biết nội dung của bảng.

Ví dụ

Bảng 1 dưới đây gồm 5 hàng và 3 cột chưa được định kiểu CSS cho bảng.

Tech12h

Hình 1. Bảng 1 được tạo từ mã lệnh HTML và chưa được định kiểu CSS

Ví dụ

Bảng 1 dưới đây sau khi được định kiểu cho bảng.

Tech12h

Hình 2. Bảng 1 sau khi được định kiểu CSS

Theo mặc định, mỗi ô trong bảng có đường viền riêng biệt, dẫn đến việc khi hiển thị giữa hai ô kề nhau có đường viền đôi.

Tech12h

Để hiển thị đường viền đơn cho các ô trong bảng, em cần sử dụng thuộc tính CSS với giá trị như thế nào?

Để hiển thị đường viền đơn, em chỉ định giá trị collapse cho thuộc tính border-collapse.

Ví dụ

Đoạn mã CSS dùng để định kiểu đường viền đơn cho bảng.

Tech12h

Hình 3. Bảng 1 sau khi định kiểu đường viền đơn

Để thêm phần đẹp mắt và nổi bật cho bảng, em nên định kiểu màu nền như thế nào?

b. Màu nền

Để thêm phần đẹp mắt và nổi bật, em định kiểu màu sắc riêng cho hàng tiêu đề của bảng.
Trường hợp bảng có nhiều hàng, em có thể tăng tính trực quan bằng cách định kiểu màu nền khác nhau xen kẽ cho các hàng chẵn và lẻ.

Ví dụ

Đoạn mã CSS dùng để định kiểu màu nền cho các hàng chẵn và hàng tiêu đề.

Tech12h

Lớp giả nth-child(even) dùng để định kiểu cho các hàng chẵn của bảng

Một cách khác làm tăng tính trực quan cho bảng là tạo hiệu ứng thay đổi màu nền của một hàng bất kì khi người dùng di chuyển con trỏ chuột đến hàng đó.
Để thực hiện điều này, em khai báo vùng chọn với trạng thái hover và chỉ định một giá trị màu sắc khác cho thuộc tính background-color.

------------------------- Còn tiếp -------------------------

II. TÀI LIỆU TẶNG KÈM KHI MUA GIÁO ÁN

1. TRẮC NGHIỆM CÂU TRẢ LỜI NGẮN

Cùng nhiều tài liệu khác

Giáo án ppt kì 2 Tin học 12 Khoa học máy tính Chân trời sáng tạo

Hệ thống có đầy đủ các tài liệu:

Giáo án word (350k)
Giáo án Powerpoint (400k)
Trắc nghiệm theo cấu trúc mới (200k)
Đề thi cấu trúc mới: ma trận, đáp án, thang điểm..(200k)
Phiếu trắc nghiệm câu trả lời ngắn (200k)
Trắc nghiệm đúng sai (200k)
Lý thuyết bài học và kiến thức trọng tâm (200k)
File word giải bài tập sgk (150k)
Phiếu bài tập để học sinh luyện kiến thức (200k)
.....

Nâng cấp lên VIP đê tải tất cả ở tài liệu trên

Phí nâng cấp VIP: 900k

=> Chỉ gửi 500k. Tải về dùng thực tế. Nếu hài lòng, 1 ngày sau mới gửi phí còn lại

Cách tải hoặc nâng cấp:

Bước 1: Chuyển phí vào STK: 1214136868686 - cty Fidutech - MB(QR)
Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận tài liệu

=> Nội dung chuyển phí: Nang cap tai khoan

Chat hỗ trợ - 0386 168 725

=> Giáo án Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo

Xem thêm tài liệu:

Trắc nghiệm Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo

Trắc nghiệm chuyên đề Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo

Từ khóa: giáo án điện tử kì 2 Tin học 12 Khoa học máy tính Chân trời, giáo án Khoa học máy tính 12 Chân trời, ppt Tin học 12 Khoa học máy tính Chân trời sáng tạo

Giáo án ppt kì 2 Tin học 12 Khoa học máy tính Chân trời sáng tạo

Một số tài liệu quan tâm khác

Phần trình bày nội dung giáo án

Hệ thống có đầy đủ các tài liệu:

Nâng cấp lên VIP đê tải tất cả ở tài liệu trên

Cách tải hoặc nâng cấp:

Tài liệu quan tâm

Cùng chủ đề

Tài liệu quan tâm