KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 13. KHÁI NIỆM, VAI TRÒ CỦA CSS
1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS
Khái niệm:
CSS (Cascading Style Sheets) là ngôn ngữ dùng để thiết lập các mẫu định dạng cho các phần tử trên trang web. Nó hoạt động độc lập với ngôn ngữ HTML.
Đặc điểm:
Chỉ cần định nghĩa mẫu định dạng một lần và có thể áp dụng đồng thời cho nhiều phần tử HTML giống nhau trên trang web.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 1: Trong lĩnh vực thiết kế và phát triển giao diện web, CSS (Cascading Style Sheets) đóng một vai trò vô cùng quan trọng. Theo định nghĩa cơ bản, CSS là ngôn ngữ được sử dụng với mục đích chính là gì?
Câu 2: Mối quan hệ giữa ngôn ngữ đánh dấu HTML và ngôn ngữ định dạng CSS trong quá trình xây dựng một trang web hoàn chỉnh được mô tả chính xác nhất như thế nào?
Câu 3: Bạn đang viết mã cho một trang web có chứa 50 đoạn văn bản (thẻ <p>) và muốn tất cả chúng đều có chữ màu đỏ. Thay vì phải chèn thuộc tính style="color: red;" vào từng thẻ <p> một cách thủ công, đặc điểm nào của CSS giúp bạn giải quyết việc này nhanh chóng?
2. CẤU TRÚC CSS
Cấu trúc tổng quát:
Gồm hai phần chính là bộ chọn (selector) và vùng mô tả (declaration block). Vùng mô tả chứa một hoặc nhiều quy định có dạng {thuộc tính: giá trị;}.
Các cách thiết lập CSS:
a) Cách thiết lập CSS trong (Internal CSS):
Đưa toàn bộ các mẫu định dạng vào cặp thẻ <style> đặt trong phần <head> của tệp HTML. Cách này chỉ áp dụng cho tệp HTML hiện thời.
b) Cách thiết lập CSS ngoài (External CSS):
Các mẫu định dạng được viết trong một tệp riêng có đuôi .css. Sau đó, tệp này được liên kết với tệp HTML bằng thẻ <link> hoặc lệnh @import.
c) Cách thiết lập CSS nội tuyến (Inline CSS):
Định dạng trực tiếp bên trong thẻ HTML thông qua thuộc tính style.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 4: Cú pháp của một mẫu định dạng CSS luôn được xây dựng dựa trên những thành phần quy chuẩn. Cấu trúc tổng quát của một quy tắc CSS bao gồm hai phần chính yếu nào sau đây?
Câu 5: Trong cấu trúc của một đoạn mã CSS, vùng mô tả (declaration block) đóng vai trò chứa đựng các quy định về định dạng. Mỗi quy định bên trong vùng mô tả này bắt buộc phải tuân theo cấu trúc cú pháp cơ bản nào?
Câu 6: Dựa vào các phương pháp nhúng mã CSS vào tài liệu HTML, nếu một lập trình viên đưa toàn bộ các mẫu định dạng vào bên trong cặp thẻ <style> và đặt chúng ở phần <head> của tệp, thì đây được gọi là phương pháp gì?
Câu 7: Khi xây dựng một dự án website có quy mô lớn, người thiết kế thường viết các mẫu định dạng trong một tệp tin riêng biệt có đuôi là .css. Để áp dụng định dạng này, họ sử dụng thẻ <link> để liên kết tệp .css với tệp HTML. Phương pháp này có tên là gì?
Câu 8: Bạn chỉ muốn thay đổi màu chữ thành màu xanh cho duy nhất một đoạn văn bản (thẻ <p>) ở giữa trang web mà không làm ảnh hưởng đến bất kì đoạn văn bản nào khác. Trong trường hợp này, cách thiết lập CSS nào là phù hợp và nhanh chóng nhất?
3. VAI TRÒ, Ý NGHĨA CỦA CSS
Tách biệt nội dung và định dạng:
Giúp tách việc nhập nội dung (HTML) và việc trang trí (CSS) thành hai công việc độc lập, tăng tính chuyên nghiệp.
Tiết kiệm thời gian và công sức:
Thiết lập một lần nhưng dùng được nhiều lần cho nhiều phần tử hoặc nhiều trang web khác nhau.
Đảm bảo tính thống nhất:
Giúp toàn bộ website có chung một phong cách thiết kế (màu sắc, font chữ, bố cục), tránh tình trạng mỗi trang một kiểu.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 9: Sự ra đời của CSS mang lại một bước tiến lớn trong thiết kế web hiện đại, giúp giải quyết những hạn chế của HTML thuần túy. Một trong những vai trò cốt lõi và quan trọng nhất của ngôn ngữ CSS là gì?
Câu 10: Khi một website bao gồm hàng chục hoặc hàng trăm trang con (ví dụ như trang tin tức), việc áp dụng CSS ngoài (External CSS) mang lại ý nghĩa to lớn nào trong việc bảo trì và thiết kế giao diện?
Câu 11: Nhờ khả năng phân tách công việc rõ ràng, việc sử dụng CSS giúp tối ưu hóa quy trình làm việc nhóm trong các công ty thiết kế web. Cụ thể, lợi ích của việc "tách biệt nội dung và định dạng" được thể hiện như thế nào?
Câu 12: Bằng cách định nghĩa mẫu định dạng một lần trong một tệp .css riêng biệt và liên kết nó với tất cả các trang HTML, người lập trình có thể thay đổi màu nền của toàn bộ website chỉ bằng cách sửa một dòng mã. Việc này thể hiện ưu điểm gì của CSS?
Câu 13: Bạn đang quản lý một trang web trường học có 100 trang con khác nhau, tất cả đều đang dùng chung một tệp style.css. Nếu hiệu trưởng yêu cầu đổi toàn bộ tiêu đề chính (<h1>) từ màu xanh sang màu đỏ để đón năm học mới, bạn sẽ thực hiện điều này như thế nào để nhanh nhất?