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

I - MỤC TIÊU BÀI HỌC

• 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.

II - KIẾN THỨC CẦN GHI NHỚ

1. BẢNG ĐỊNH DẠNG CSS

- 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,...

- Vai trò: 

+ CSS giúp tách biệt khai báo nội dung với định dạng và trang trí trang web. 

Khai báo CSS dễ dàng được chỉnh sửa, tái sử dụng. 

+ CSS 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ử.

- Lịch sử phát triển: 

+ 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

- 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ử đó.

- Cú pháp khai báo bộ chọn phần tử:

- Có hai cách khai báo được sử dụng phổ biến để áp dụng CSS trong văn bản HTML: 

+ 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 vì một văn bản HTML. 

+ Các quy tắc định dạng được viết trong cặp thẻ <style></style> và thường được đặt trong nội dung của phần tử head.

- 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, thêm khai báo <link rel=“stylesheet” href=“Tên_tệp.css”> vào trong nội dung phần head của văn bản HTML.

3. MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS

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, brown,…

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

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:

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 (“ ”).

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

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.

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:

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.

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

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.