Chủ đề / Chương

Bài học

Chủ đề

Bài 8. Làm quen với CSS

Nội dung lý thuyết

1. Bảng định dạng CSS

  • Bảng định dạng CSS (Cascading Style Sheets) là ngôn ngữ dùng để khai báo kiểu trình bày các phần tử HTML. Một quy tắc định dạng gồm bộ chọn (selector) và các khai báo thuộc tính CSS (properties) để xác định kiểu trình bày như màu sắc, phông chữ, kích cỡ,...
  • Sử dụng CSS giúp tách biệt nội dung và định dạng, dễ chỉnh sửa, tái sử dụng và tạo sự thống nhất cho nhiều trang web. Trình duyệt áp dụng CSS bằng cách chọn phần tử HTML khớp với bộ chọn và áp dụng các thuộc tính tương ứng.
  • CSS1 ra đời năm 1996, đến nay đã có nhiều phiên bản nâng cấp. Trong nội dung này sử dụng phiên bản CSS3 để minh họa.

Một ví dụ CSS có hai quy tắc định dạ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 để áp dụng CSS cho một hoặc nhiều phần tử HTML nhằm tạo sự thống nhất trong trình bày. Mỗi bộ chọn tương ứng với tên phần tử HTML.

Cú pháp khai báo:

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

Một quy tắc định dạng trong CSS

CSS có thể được khai báo và áp dụng theo hai cách:

  • Internal CSS: khai báo trong cặp thẻ <style> đặt trong phần <head>.
    Ví dụ: Khai báo bộ chọn p và h1 trong thẻ <style> thì các đoạn văn và tiêu đề tương ứng trong trang HTML sẽ được áp dụng định dạng.

Ví dụ khai báo internal CSS và kết quả hiển thị

  • External CSS: dùng khi muốn áp dụng định dạng chung cho nhiều trang HTML. Quy tắc định dạng được lưu trong tệp có đuôi .css và được liên kết với trang HTML bằng thẻ <link> trong phần <head>.

Ví dụ dùng external CSS với tệp "default.css"

Ngoài ra, nếu nhiều phần tử có chung định dạng, có thể gộp bộ chọn bằng cách liệt kê các tên bộ chọn, ngăn cách bằng dấu phẩy để tránh lặp lại.

Ví dụ khai báo gộp các bộ chọn p, h1, h2, h3.

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

a) Thuộc tính màu sắc

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

    • ​Trong đó giá trị Màu thường được xác định các màu phổ biến như red, green, blue,...

  • background-color: định dạng màu nền cho phần tử. Thuộc tính background-color định dạng màu nền, áp dụng được cho tất cả phần tử như khai báo sau: background-color: Màu;

  • Ví dụ đoạn 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).

Ví dụ khai báo CSS định dạng màu cho phần tử

  • Ví dụ 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).​

Ví dụ khai báo CSS định dạng màu nền

b) Thuộc tính phông chữ

  • font-family: định dạng tên phông chữ (có thể dùng nhiều tên, ngăn cách bằng dấu phẩy). Được khai báo như sau: font-family: Tên phong chữ;

    • ​Trong đó tên phòng chữ là một hoặc nhiều tên phông chữ khác nhau ngăn cách nhau bởi dấu ",".

  • font-size: định kích cỡ chữ (đơn vị pixel hoặc phần trăm). Được khai báo như sau: font-size: Kích cỡ;

    • ​Trong đó, giá trị Kích cỡ thường được tính theo đơn vị điểm anh (pixel) hoặc tỉ lệ phần trăm.

  • Ví dụ: phần tử p dùng phông Times New Roman, cỡ chữ 20px (Hình 8a–8b).

Ví dụ khai báo CSS định dạng phông chữ, cỡ chữ

c) Thuộc tính đường viền

  • border-style: quy định kiểu đường viền (solid – liền nét, dotted – chấm,...). Cú pháp khai báo border-style: Kiểu trình bày;

    • Một số kiểu trình bày thông dụng như dotted - đường viền là những dấu chấm liền nhau, solid - đường viền nét liền đậm.

  • border-color: quy định màu đường viền (chỉ áp dụng khi đã có border-style).

    • Lưu ý: Định dạng boder-color chỉ được áp dụng khi thuộc tính border-style được khai báo.

  • Ví dụ: đường viền đỏ, nét liền bao quanh thẻ p (Hình 9a–9b).

Ví dụ khai báo CSS định dạng đường viền

Bài trước
Bài tiếp theo