CHỦ ĐỀ F. BÀI 8. LÀM QUEN VỚI CSS
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 8. LÀM QUEN VỚI CSS
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Nêu được mục đích sử dụng CSS. Mô tả được bộ chọn phần tử và cách áp dụng CSS. Trình bày được một số thuộc tính định dạng CSS.
Khởi động
Khởi động
Khởi động
Theo em, làm thế nào để trình bày các đoạn văn, tiêu đề, nhãn trong trang web có cùng màu chữ?
Ảnh
1. Bảng định dạng CSS
Tìm hiểu
1. Bảng định dạng CSS
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. CSS thường gồm một số quy tắc định dạng. Mỗi quy tắc định dạng như minh họa ở Hình 1 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ử, ví dụ: màu sắc, phông chữ, kích cỡ, đường viền,..
Ảnh
Tiếp
Sử dụng CSS giúp tách biệt khai báo nội dung với định dạng và trang trí trang web. Với sự tách biệt như vậy, khai báo CSS dễ dàng được chỉnh sửa, tái sử dụng. Sử dụng CSS còn cho phép nhiều trang web hay toàn bộ website cùng dùng chung quy tắc định dạng nhằm tạo sự thống nhất trong trình bày. Trình duyệt web áp dụng CSS bằng cách chọn các phần tử trong văn bản HTML khớp với bộ chọn trong CSS và sử dụng các quy tắc định dạng tương ứng để trình bày phần tử. Phiên bản đầu tiên CSS1 được công bố vào năm 1996. Cho đến nay, CSS đã cập nhật và hoàn thiện thêm một số phiên bản. Trong quyển sách này, phiên bản CSS3 được sử dụng để minh hoạ khai báo CSS.
2. Khai báo bộ chọn phần tử và áp dụng CSS
Tìm hiểu
2. Khai báo bộ chọn phần tử và áp dụng CSS
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ử đó.
Ảnh
Tiếp
Ví dụ 1. Quy tắc định dạng ở Hình 2 xác định kiểu trình bày nội dung của phần tử p trong văn bản HTML có chữ màu đỏ và in đậm. Có hai cách khai báo để áp dụng CSS trong văn bản HTML được sử dụng phổ biến là: CSS trong (internal CSS), CSS ngoài (external CSS). Khai báo internal CSS thường được sử dụng khi muốn áp dụng CSS trong phạm vi một văn bản HTML. Các quy tắc định dạng internal CSS được viết trong cặp thẻ và thường được đặt trong nội dung của phần tử head.
Ảnh
Tiếp
Ví dụ 2. Trong văn bản HTML ở Hình 3a, dòng 5 và dòng 6 có khai báo CSS sử dụng bộ chọn phần tử. Khi mở văn bản bằng trình duyệt web, các tiêu đề mục hl có chữ màu đỏ, các đoạn văn p có chữ màu xanh như ở Hình 3b.
Ảnh
Khai báo external CSS thường được sử dụng khi cần áp dụng chung bảng định dạng CSS cho nhiều văn bản HTML. Các quy tắc định dạng được ghi lưu dưới dạng tệp có phần mở rộng *.css. Để áp dụng external CSS, trong nội dung phần head của văn bản HTML, cần khai báo tham chiếu đến tệp CSS có dạng Tên_tập.css, được viết dưới dạng .
Tiếp
Ví dụ 3. Văn bản HTML ở Hình 4a áp dụng các quy tắc định dạng được khai báo trong tệp external CSS có tên “default.css” (Hình 4b), kết quả hiển thị trên màn hình trình duyệt web như ở Hình 4c.
Ảnh
Ảnh
Tiếp
Ví dụ 4. Các bộ chọn p, h1 và h2, h3 cùng có chung quy tắc định dạng nên được viết gộp như hình 5.
Ảnh
3. Một số thuộc tính định dạng CSS
Hoạt động
3. Một số thuộc tính định dạng CSS
Hoạt động Em hãy nêu một số thuộc tính định dạng cho đoạn văn bản mà em đã dùng trong hệ soạn thảo văn bản Micosort Word?
a, Thuộc tính định dạng màu sắc
a, Thuộc tính định dạng màu sắc
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
Ảnh
Tiếp (a, Thuộc tính định dạng màu sắc)
Ví dụ 5. Văn bản HTML trong Hình 6a sẽ 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).
Ảnh
Thuộc tính background-color định dạng màu nền, áp dụng được cho tất cả phần tử, được khai báo như sau:
Ảnh
Tiếp (a, Thuộc tính định dạng màu sắc)
Ví dụ 6. Văn bản HTML trong Hình 7a sẽ trình bày trang web với nền màu xanh lơ khi hiển thị trên màn hình trình duyệt web (Hình 7b).
Ảnh
b, Thuộc tính định dạng phông chữ
b, Thuộc tính định dạng phông chữ
Thuộc tính font-family xác định tên phông chữ, áp dụng được cho tất cả phần tử HTML, được khai báo như sau:
Ảnh
Trong đó, Tên phông chữ là một hoặc nhiều tên phông chữ được ngăn cách nhau bởi dấu “,”. Chú ý, nếu tên phông chữ có dấu cách thì phải được đặt trong cặp dấu nháy kép (" ").
Tiếp (b, Thuộc tính định dạng phông chữ)
Thuộc tính font-size xác định kích cỡ chữ, áp dụng được cho tất cả các phần tử, được khai báo như sau:
Ảnh
Trong đó, giá trị Kích cỡ thường được tính theo đơn vị điểm ảnh (pixel) hoặc tỉ lệ phần trăm.
Tiếp (b, Thuộc tính định dạng phông chữ)
Ví dụ 7. Văn bản HTML trong Hình 8a sẽ trình bày phần tử p có phông chữ Times New Roman, cỡ chữ 20 pixel khi hiển thị trên màn hình trình duyệt web (Hình 8b).
Ảnh
c, Thuộc tính định dạng đường viền
c, Thuộc tính định dạng đường viền
Thuộc tính border-style xác định kiểu trình bày đường viền của phần tử, được khai báo như sau:
Ảnh
CSS quy định cụ thể các Kiểu trình bày. Một số kiểu trình bày thông dụng gồm: dotted đường viền là những dấu chấm liền nhau, solid - đường viền là một đường đậm liền nét.
Tiếp
Thuộc tính border-color xác định màu đường viền của phần tử, được khai báo như sau:
Ảnh
Lưu ý: Định dạng thuộc tính border-color chỉ được áp dụng khi thuộc tính border-style được khai báo.
Tiếp
Ảnh
Ví dụ 8. Văn bản HTML trong Hình 9a trình bày đường viền màu đỏ, nét liền đậm bao quanh phần tử p khi hiển thị trên màn hình trình duyệt web (Hình 9b).
Luyện tập
Luyện tập
Luyện tập
Em hãy soạn văn bản HTML có hai đoạn văn bản được tạo bởi phần tử p. Khai báo và áp dụng interal CSS để trình bày trang web có nền màu xanh lơ (cyan); đoạn văn bản có chữ màu đỏ, phông chữ Arial, cỡ chữ 15 pixel.
Vân dụng
Vận dụng
Vận dụng
Em hãy chuyển các khai báo internal CSS trong mục Luyện tập thành khai báo external CSS ghi lưu với tên tệp “styles.css”, tạo mới văn bản HTML để áp dụng bảng định dạng styles.css này.
Câu hỏi tự kiểm tra
Câu hỏi 1
Câu hỏi tự kiểm tra
Bài tập trắc nghiệm
Câu hỏi: Mỗi phát biểu sau đây về CSS là đúng hay sai?
a) Sử dụng CSS giúp tách biệt khai báo nội dung với định dạng và trang trí trang web.
b) Để áp dụng CSS, trong văn bản HTML phải khai báo tham chiếu đến tệp CSS.
c) Sử dụng external CSS giúp cho nhiều trang web trong một website có thể dùng chung kiểu định dạng và trang trí.
d) Khai báo CSS sử dụng bộ chọn phần tử: p{color-red; font-size:20px;} là đúng cú pháp.
Tổng kết
Ghi nhớ
Ghi nhớ
Hình vẽ
CSS dùng để khai báo quy tắc định dạng trình bày các phần tử HTML trên trình duyệt web. Bộ chọn phần tử thường được dùng để áp dụng CSS cho tất cả các phần tử cùng loại trong văn bản HTML nhằm tạo sự thống nhất trong trình bày. Hai cách khai báo CSS thường được sử dụng là internal CSS và external CSS. CSS định nghĩa một số thuộc tính để định dạng trình bày: màu sắc, phông chữ, cỡ chữ, đường viền.thông tin cần thu thập.
Kết thúc bài hoc
Ảnh