[CSS 01] Giới thiệu về CSS

 Giới thiệu về CSS

• CSS làm gì
• Cách hoạt động của CSS
• Quy tắc, thuộc tính và giá trị

Trong phần này, chúng ta sẽ xem xét cách làm cho các trang web của bạn hấp dẫn hơn, kiểm soát thiết kế của chúng bằng cách sử dụng CSS.

CSS cho phép bạn tạo các quy tắc chỉ định cách nội dung của một phần tử sẽ xuất hiện. Ví dụ: bạn có thể chỉ định rằng nền của trang là màu kem, tất cả các đoạn văn sẽ xuất hiện với màu xám khi sử dụng kiểu chữ Arial hoặc tất cả các tiêu đề cấp một phải có kiểu chữ Times màu xanh lam, nghiêng.

Khi bạn đã học cách viết quy tắc CSS, việc học CSS chủ yếu liên quan đến việc học các thuộc tính khác nhau mà bạn có thể sử dụng. Vì vậy, chương này sẽ:

● Giới thiệu cho bạn cách hoạt động của CSS

● Hướng dẫn bạn cách viết quy tắc CSS

● Chỉ cho bạn cách các quy tắc CSS áp dụng cho các trang HTML

Các chương còn lại trong phần này sẽ xem xét tất cả các thuộc tính CSS khác nhau mà bạn có thể sử dụng.

CSS hoạt động bằng cách liên kết các quy tắc với các phần tử HTML. Các quy tắc này chi phối cách hiển thị nội dung của các phần tử được chỉ định. Quy tắc CSS bao gồm hai phần: bộ chọn và phần khai báo.

Quy tắc này chỉ ra rằng tất cả các phần tử <p> phải được hiển thị trong kiểu chữ Arial.

SELECTOR - Bộ chọn cho biết quy tắc áp dụng cho phần tử nào. Quy tắc tương tự có thể áp dụng cho nhiều phần tử nếu bạn tách tên phần tử bằng dấu phẩy.

DECLARATION - Tuyên bố chỉ ra cách thức các phần tử được tham chiếu trong bộ chọn phải được tạo kiểu. Các khai báo được chia thành hai phần (thuộc tính và giá trị) và được phân tách bằng dấu hai chấm.

Các khai báo CSS nằm bên trong các dấu ngoặc nhọn và mỗi khai báo được tạo thành từ hai phần: một thuộc tính và một giá trị, được phân tách bằng dấu hai chấm. Bạn có thể chỉ định một số thuộc tính trong một khai báo, mỗi thuộc tính được phân tách bằng dấu chấm phẩy.

Quy tắc này chỉ ra rằng tất cả các phần tử <h1>, <h2> và <h3> phải được hiển thị trong kiểu chữ Arial, bằng màu vàng.

PROPERTY: Thuộc tính cho biết các khía cạnh của phần tử bạn muốn thay đổi. Ví dụ: màu sắc, phông chữ, chiều rộng, chiều cao và đường viền.

VALUE: Giá trị chỉ định cài đặt bạn muốn sử dụng cho các thuộc tính đã chọn. Ví dụ: nếu bạn muốn chỉ định một thuộc tính màu thì giá trị là màu mà bạn muốn văn bản trong các phần tử này trở thành.