Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS

Đồng bộ giáo án word và powerpoint (ppt) bài 8: Làm quen với CSS. Thuộc chương trình Tin học 12 Khoa học máy tính Cánh diều. Giáo án được biên soạn chỉnh chu, hấp dẫn. Nhằm tạo sự lôi cuốn và hứng thú học tập cho học sinh.

Click vào ảnh dưới đây để xem giáo án WORD rõ nét

Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
Giáo án và PPT Khoa học máy tính 12 cánh diều bài 8: Làm quen với CSS
....

Giáo án ppt đồng bộ với word

Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS
Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS

Còn nữa....

Các tài liệu bổ trợ khác

Xem toàn bộ: Trọn bộ giáo án và PPT Khoa học máy tính 12 cánh diều

BÀI 8: LÀM QUEN VỚI CSS

A. KHỞI ĐỘNG

HS dựa vào hiểu biết để trả lời các câu hỏi.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Hoạt động 1: Bảng định dạng CSS

+ Bảng định dạng CSS là gì?

+ Bảng định dạng CSS được khai báo như thế nào?

+ CSS có vai trò như thế nào trong việc định dạng trang web?

+ Trình duyệt web áp dụng CSS như thế nào?

Dự kiến sản phẩm:

- Khái niệm: Bảng định dạng (Cascading Style Sheets - CSS) là ngôn ngữ được sử dụng để khai báo kiểu trình bày các phần tử HTML trong trang web. 

- Cấu trúc: CSS thường gồm một số quy tắc định dạng. Mỗi quy tắc định dạng gồm bộ chọn (selector) và các khai báo thuộc tính CSS (css properties) để xác định kiểu trình bày cho phần tử như màu sắc, phông chữ, kích cỡ, đường viền,...

BÀI 8: LÀM QUEN VỚI CSSA. KHỞI ĐỘNGHS dựa vào hiểu biết để trả lời các câu hỏi.B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCHoạt động 1: Bảng định dạng CSS+ Bảng định dạng CSS là gì?+ Bảng định dạng CSS được khai báo như thế nào?+ CSS có vai trò như thế nào trong việc định dạng trang web?+ Trình duyệt web áp dụng CSS như thế nào?Dự kiến sản phẩm:- Khái niệm: Bảng định dạng (Cascading Style Sheets - CSS) là ngôn ngữ được sử dụng để khai báo kiểu trình bày các phần tử HTML trong trang web. - Cấu trúc: CSS thường gồm một số quy tắc định dạng. Mỗi quy tắc định dạng gồm bộ chọn (selector) và các khai báo thuộc tính CSS (css properties) để xác định kiểu trình bày cho phần tử như màu sắc, phông chữ, kích cỡ, đường viền,...Hình 1. Một ví dụ CSS có hai quy tắc định dạngHoạt động 2: Khai báo bộ chọn phần tử và áp dụng CSS+ Bộ chọn phần tử được dùng để làm gì?+ CSS định nghĩa bộ chọn với mỗi phần tử HTML như thế nào?+ Bộ chọn phần tử được khai báo như thế nào?..Dự kiến sản phẩm:- Bộ chọn phần tử thường được dùng để áp dụng CSS cho một hoặc nhiều phần tử cụ thể trong văn bản HTML nhằm tạo sự thống nhất trong trình bày.Ví dụ: Trình bày chữ in nghiêng cho các đoạn văn bản trên trang web. - Với mỗi phần tử HTML, CSS định nghĩa một bộ chọn tương ứng và đặt tên theo tên phần tử đó…Hoạt động 3: Một số thuộc tính định dạng CSS+ Trong CSS, thuộc tính định dạng màu chữ và màu nền được khai báo như thế nào?Dự kiến sản phẩm:- Thuộc tính color định dạng màu chữ, được khai báo như sau:Trong đó, giá trị Màu thường được xác định bởi tên màu phổ biến như red, green, blue, yellow, brown,…Ví dụ 5: Văn bản HTML trong Hình 6a trình bày các phần tử h1, h2 có màu xanh nước biển, phần tử p có màu đỏ khi hiển thị trên màn hình trình duyệt web (Hình 6b)…C. HOẠT ĐỘNG LUYỆN TẬPCâu 1. Các quy tắc định dạng internal CSS được viết trong cặp thẻ nào?A. <title></title>.B. <style></style>.C. <body></body>.D. <meta></meta>.Câu 2. Cú pháp khai báo bộ chọn phần tử làA. Tên_bộ_chọn_phần_tử {thuộc tính=giá trị;}.B. Tên_bộ_chọn_phần_tử {thuộc tính: giá trị,}.C. Tên_bộ_chọn_phần_tử {thuộc tính-giá trị,}.D. Tên_bộ_chọn_phần_tử {thuộc tính: giá trị;}.Câu 3. Khai báo áp dụng external CSS nào sau đây đúng cú pháp?A. <link rel=“stylesheet” src=“styles.css”>.B. <link rel=“stylesheet” link=“styles.css”>.C. <link rel=“stylesheet” href=“styles.css”>. D. <link rel=“stylesheet” url=“styles.css”>.Câu 4. Bảng định dạng CSS gồm hai quy định, chữ màu nâu và cỡ chữ 12 cho tất cả các thẻ p làA. p {font-color: brown; font-size: 12px;}.B. p {color: brown; text-size: 12px;}.C. p {color: brown; font-size: 12px;}.D. p {text-color: brown; font-size: 12px;}.Câu 5. Để định dạng kiểu chữ đậm, em sử dụng thuộc tính nào sau đây?A. font-style.B. font-weight.C. font-size.D. font-family.Dự kiến sản phẩm:Câu hỏi12345Đáp ánBDCCBD. HOẠT ĐỘNG VẬN DỤNG

Hình 1. Một ví dụ CSS có hai quy tắc định dạng

Hoạt động 2: Khai báo bộ chọn phần tử và áp dụng CSS

+ Bộ chọn phần tử được dùng để làm gì?

+ CSS định nghĩa bộ chọn với mỗi phần tử HTML như thế nào?

+ Bộ chọn phần tử được khai báo như thế nào?..

Dự kiến sản phẩm:

- Bộ chọn phần tử thường được dùng để áp dụng CSS cho một hoặc nhiều phần tử cụ thể trong văn bản HTML nhằm tạo sự thống nhất trong trình bày.

Ví dụ: Trình bày chữ in nghiêng cho các đoạn văn bản trên trang web. 

- Với mỗi phần tử HTML, CSS định nghĩa một bộ chọn tương ứng và đặt tên theo tên phần tử đó…

Hoạt động 3: Một số thuộc tính định dạng CSS

+ Trong CSS, thuộc tính định dạng màu chữ và màu nền được khai báo như thế nào?

Dự kiến sản phẩm:

- Thuộc tính color định dạng màu chữ, được khai báo như sau:

BÀI 8: LÀM QUEN VỚI CSSA. KHỞI ĐỘNGHS dựa vào hiểu biết để trả lời các câu hỏi.B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCHoạt động 1: Bảng định dạng CSS+ Bảng định dạng CSS là gì?+ Bảng định dạng CSS được khai báo như thế nào?+ CSS có vai trò như thế nào trong việc định dạng trang web?+ Trình duyệt web áp dụng CSS như thế nào?Dự kiến sản phẩm:- Khái niệm: Bảng định dạng (Cascading Style Sheets - CSS) là ngôn ngữ được sử dụng để khai báo kiểu trình bày các phần tử HTML trong trang web. - Cấu trúc: CSS thường gồm một số quy tắc định dạng. Mỗi quy tắc định dạng gồm bộ chọn (selector) và các khai báo thuộc tính CSS (css properties) để xác định kiểu trình bày cho phần tử như màu sắc, phông chữ, kích cỡ, đường viền,...Hình 1. Một ví dụ CSS có hai quy tắc định dạngHoạt động 2: Khai báo bộ chọn phần tử và áp dụng CSS+ Bộ chọn phần tử được dùng để làm gì?+ CSS định nghĩa bộ chọn với mỗi phần tử HTML như thế nào?+ Bộ chọn phần tử được khai báo như thế nào?..Dự kiến sản phẩm:- Bộ chọn phần tử thường được dùng để áp dụng CSS cho một hoặc nhiều phần tử cụ thể trong văn bản HTML nhằm tạo sự thống nhất trong trình bày.Ví dụ: Trình bày chữ in nghiêng cho các đoạn văn bản trên trang web. - Với mỗi phần tử HTML, CSS định nghĩa một bộ chọn tương ứng và đặt tên theo tên phần tử đó…Hoạt động 3: Một số thuộc tính định dạng CSS+ Trong CSS, thuộc tính định dạng màu chữ và màu nền được khai báo như thế nào?Dự kiến sản phẩm:- Thuộc tính color định dạng màu chữ, được khai báo như sau:Trong đó, giá trị Màu thường được xác định bởi tên màu phổ biến như red, green, blue, yellow, brown,…Ví dụ 5: Văn bản HTML trong Hình 6a trình bày các phần tử h1, h2 có màu xanh nước biển, phần tử p có màu đỏ khi hiển thị trên màn hình trình duyệt web (Hình 6b)…C. HOẠT ĐỘNG LUYỆN TẬPCâu 1. Các quy tắc định dạng internal CSS được viết trong cặp thẻ nào?A. <title></title>.B. <style></style>.C. <body></body>.D. <meta></meta>.Câu 2. Cú pháp khai báo bộ chọn phần tử làA. Tên_bộ_chọn_phần_tử {thuộc tính=giá trị;}.B. Tên_bộ_chọn_phần_tử {thuộc tính: giá trị,}.C. Tên_bộ_chọn_phần_tử {thuộc tính-giá trị,}.D. Tên_bộ_chọn_phần_tử {thuộc tính: giá trị;}.Câu 3. Khai báo áp dụng external CSS nào sau đây đúng cú pháp?A. <link rel=“stylesheet” src=“styles.css”>.B. <link rel=“stylesheet” link=“styles.css”>.C. <link rel=“stylesheet” href=“styles.css”>. D. <link rel=“stylesheet” url=“styles.css”>.Câu 4. Bảng định dạng CSS gồm hai quy định, chữ màu nâu và cỡ chữ 12 cho tất cả các thẻ p làA. p {font-color: brown; font-size: 12px;}.B. p {color: brown; text-size: 12px;}.C. p {color: brown; font-size: 12px;}.D. p {text-color: brown; font-size: 12px;}.Câu 5. Để định dạng kiểu chữ đậm, em sử dụng thuộc tính nào sau đây?A. font-style.B. font-weight.C. font-size.D. font-family.Dự kiến sản phẩm:Câu hỏi12345Đáp ánBDCCBD. HOẠT ĐỘNG VẬN DỤNG

Trong đó, giá trị Màu thường được xác định bởi tên màu phổ biến như red, green, blue, yellow, brown,…

Ví dụ 5: Văn bản HTML trong Hình 6a trình bày các phần tử h1, h2 có màu xanh nước biển, phần tử p có màu đỏ khi hiển thị trên màn hình trình duyệt web (Hình 6b)…

C. HOẠT ĐỘNG LUYỆN TẬP

Câu 1. Các quy tắc định dạng internal CSS được viết trong cặp thẻ nào?

A. <title></title>.

B. <style></style>.

C. <body></body>.

D. <meta></meta>.

Câu 2. Cú pháp khai báo bộ chọn phần tử là

A. Tên_bộ_chọn_phần_tử {thuộc tính=giá trị;}.

B. Tên_bộ_chọn_phần_tử {thuộc tính: giá trị,}.

C. Tên_bộ_chọn_phần_tử {thuộc tính-giá trị,}.

D. Tên_bộ_chọn_phần_tử {thuộc tính: giá trị;}.

Câu 3. Khai báo áp dụng external CSS nào sau đây đúng cú pháp?

A. <link rel=“stylesheet” src=“styles.css”>.

B. <link rel=“stylesheet” link=“styles.css”>.

C. <link rel=“stylesheet” href=“styles.css”>. 

D. <link rel=“stylesheet” url=“styles.css”>.

Câu 4. Bảng định dạng CSS gồm hai quy định, chữ màu nâu và cỡ chữ 12 cho tất cả các thẻ p

A. p {font-color: brown; font-size: 12px;}.

B. p {color: brown; text-size: 12px;}.

C. p {color: brown; font-size: 12px;}.

D. p {text-color: brown; font-size: 12px;}.

Câu 5. Để định dạng kiểu chữ đậm, em sử dụng thuộc tính nào sau đây?

A. font-style.

B. font-weight.

C. font-size.

D. font-family.

Dự kiến sản phẩm:

Câu hỏi

1

2

3

4

5

Đáp án

B

D

C

C

B

D. HOẠT ĐỘNG VẬN DỤNG

HS hoàn thành hoạt động Vận dụng SGK tr.73.

 

Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II

Khi đặt nhận được những gì?

  • Trắc nghiệm cấu trúc mới: 15 - 20 phiếu
  • Ít nhất 5 đề thi theo mẫu mới. Có đủ: ma trận, thang điểm, đáp án...
  • Giáo án đồng bộ word + PPT: Đủ kì I
  • Sau đó, sẽ được bổ sung liên tục để 30/01 có đủ cả năm

Phí giáo:

  • Giáo án word: 350k/học kì - 400k/cả năm
  • Giáo án powepoint: 450k/học kì - 500k/cả năm
  • Trọn bộ word + PPT: 700k/học kì - 800k/cả năm

=> Chỉ gửi 350k. Tải giáo án về dùng thực tế. Thấy hài lòng thì 15 ngày sau mới gửi số phí còn lại

Cách đặt:

  • Bước 1: Gửi phí vào tk: 10711017 - Chu Văn Trí - Ngân hàng ACB (QR)
  • Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận giáo án

Xem toàn bộ: Trọn bộ giáo án và PPT Khoa học máy tính 12 cánh diều

TÀI LIỆU GIẢNG DẠY TIN HỌC 12 KẾT NỐI TRI THỨC

*Định hướng khoa học máy tính
 
 
 

TÀI LIỆU GIẢNG DẠY TIN HỌC 12 CHÂN TRỜI SÁNG TẠO

*Định hướng khoa học máy tính
 

TÀI LIỆU GIẢNG DẠY TIN HỌC 12 CÁNH DIỀU

*Định hướng khoa học máy tính
 
 

Tài liệu giảng dạy

Xem thêm các bài khác

Chat hỗ trợ
Chat ngay