Định dạng trang web bằng CSS

Thuộc tính và bộ chọn CSS

Bộ chọn (selector) xác định những phần tử HTML nào sẽ nhận một khai báo CSS. Mỗi khai báo gồm thuộc tính và giá trị, viết dạng thuộc-tính: giá-trị; và đặt trong cặp ngoặc nhọn. Bộ chọn theo tên thẻ như p áp dụng cho mọi thẻ p trong trang. Bộ chọn lớp viết với dấu chấm, ví dụ p.border, chỉ áp dụng cho thẻ p có thuộc tính class là border. Bộ chọn id viết với dấu thăng, ví dụ #tieude, chỉ áp dụng cho phần tử có thuộc tính id đúng tên đó. Có thể liệt kê nhiều bộ chọn cách nhau bằng dấu phẩy, ví dụ h1, p, để dùng chung một khai báo cho nhiều thẻ.

Thuộc tính display quyết định cách phần tử được bố trí trên trang. Giá trị block làm phần tử hiển thị theo khối, chiếm trọn một hàng và xuống dòng sau nó. Khi áp dụng display: block cho cả h1 và p, cả hai thẻ đều hiển thị theo khối. Giá trị inline hiển thị theo dòng và không chiếm trọn một hàng. Giá trị none ẩn hoàn toàn phần tử khỏi trang. Giá trị flex tạo bố cục hộp linh hoạt, không đơn thuần là hiển thị theo khối.

Đường viền được định dạng bằng hai thuộc tính: border-width đặt độ dày, ví dụ 5px, còn border-style đặt kiểu nét. Các giá trị kiểu nét thường gặp gồm solid là nét liền, dashed là nét đứt, dotted là các dấu chấm liền nhau, double là hai nét song song và groove là hiệu ứng khắc chìm. Muốn có đường viền dày 5 pixel nét liền thì phải khai báo đồng thời border-width: 5px và border-style: solid.

Đơn vị px (pixel) dùng cho kích thước hiển thị trên màn hình, còn pt (point) là đơn vị dùng cho in ấn. Khi yêu cầu cỡ chữ tính theo pixel thì phải viết font-size: 20px, không được viết 20pt. Một đoạn văn muốn có viền gồm các dấu chấm liền nhau cần dùng border-style: dotted.

Khi một phần tử chịu nhiều quy tắc cùng lúc, quy tắc theo id có độ ưu tiên cao hơn quy tắc theo class, và quy tắc theo class cao hơn quy tắc theo tên thẻ. Chỉ thuộc tính trùng nhau mới bị ghi đè; thuộc tính không trùng vẫn có hiệu lực. Vì vậy một phần tử có thể đổi màu theo id, trong khi vẫn in đậm nhờ font-weight: bold từ class và nghiêng nhờ font-style: italic từ id.

Thuộc tính font-size đặt cỡ chữ. Quanh nội dung của phần tử có ba vùng: margin là vùng lề nằm ngoài đường viền, border là đường viền, còn padding là vùng đệm nằm giữa nội dung và đường viền. Ví dụ khai báo div {font-size: 18px; margin: 10px; padding: 5px;} đặt cỡ chữ 18px, lề 10px và đệm 5px.

Thuộc tính và bộ chọn CSS

CSS dùng bộ chọn (selector) để xác định phần tử HTML nào được định dạng, còn thuộc tính (property) cùng giá trị quy định cách hiển thị. Khối khai báo được đặt trong dấu ngoặc nhọn, mỗi cặp thuộc tính: giá trị kết thúc bằng dấu chấm phẩy, ví dụ p { color: red; font-size: 14px; }. Các thuộc tính thường gặp là color (màu chữ), background-color (màu nền) và font-weight (độ đậm, ví dụ bold). color chỉ đổi màu chữ, còn background-color đổi màu nền, nên hai thuộc tính này không thay thế cho nhau.

Các loại bộ chọn cơ bản:

• Bộ chọn thẻ — p chọn mọi thẻ p trên trang, không phân biệt class. Ví dụ p { margin-top: 4px; } áp dụng cho tất cả đoạn văn.
• Bộ chọn lớp — .note (dấu chấm trước tên lớp) chỉ chọn phần tử có thuộc tính class chứa tên đó. Một tên lớp có thể gắn cho nhiều thẻ khác nhau để dùng chung một kiểu.
• Thuộc tính class chỉ là nhãn để CSS nhận diện phần tử, không đặt tiêu đề cho trang (tiêu đề trang đặt bằng thẻ title).
• Bộ chọn id — #main (dấu thăng trước tên) chọn phần tử có id đó; id phải duy nhất trong trang và không thể thay bằng class. p#muc4 và p.muc4 khác nhau: bộ chọn đầu tìm thẻ p có id muc4, còn bộ chọn sau tìm thẻ p có class muc4.
• Dấu phẩy như p, muc4 tạo hai bộ chọn độc lập, không phải một bộ chọn kết hợp. Cú pháp kết hợp đúng là tên thẻ đứng trước rồi đến class, ví dụ p.muc4; viết ngược thành muc4.p thì có nghĩa là thẻ muc4 mang class p.