CSS – Biểu định kiểu xếp tầng (Cascading Style Sheets) là ngôn ngữ kiểu được sử dụng để thiết kế trang web. Nó cho phép bạn tách nội dung trang khỏi bản trình bày của nó, giúp làm việc với bố cục và thiết kế dễ dàng hơn.
CSS bao gồm một bộ quy tắc, mỗi quy tắc xác định cách tạo kiểu cho một thành phần nhất định trên trang web. Các quy tắc bao gồm chọn các phần tử bằng cách sử dụng bộ chọn và đặt thuộc tính trên các phần tử đó. Hãy xem xét các thành phần chính của CSS – quy tắc, bộ chọn và thuộc tính.
Quy tắc
Quy tắc CSS bao gồm bộ chọn và khối thuộc tính. Quy tắc cho trình duyệt biết các thành phần của trang web cần tạo kiểu và cách chúng nên được tạo kiểu. Mỗi quy tắc bắt đầu bằng một bộ chọn để chọn các phần tử và kết thúc bằng một khối thuộc tính áp dụng cho các phần tử đã chọn.
Đây là một ví dụ về một quy tắc đơn giản:
p{
color: blue;
font-size: 16px;
}
Đây `p` là bộ chọn chọn tất cả các đoạn trên trang. Bên trong khối thuộc tính, các kiểu cho đoạn văn được đặt: màu văn bản xanh lam và cỡ chữ 16 pixel.
Bộ chọn
Bộ chọn cho phép bạn chọn một hoặc nhiều thành phần trên trang web để áp dụng các kiểu nhất định. Bộ chọn có thể rất đơn giản hoặc phức tạp hơn và cho phép bạn chọn các thành phần dựa trên loại, lớp, ID, thuộc tính và thậm chí cả vị trí của chúng trên trang.
Ví dụ về bộ chọn đơn giản:
- `p` – chọn tất cả các đoạn.
- `.header` – chọn tất cả các thành phần có lớp “tiêu đề”.
- `#logo` – chọn phần tử có id là “logo”.
Ví dụ về các bộ chọn phức tạp hơn:
- `ul li` – chọn tất cả các phần tử của danh sách `li` là con của phần tử `ul`.
- `input` – chọn tất cả các trường văn bản trên trang.
Thuộc tính
Các thuộc tính xác định hình thức của các phần tử được chọn bằng cách sử dụng bộ chọn. Mỗi thuộc tính có một giá trị xác định giao diện của phần tử.
Ví dụ về tài sản:
- `color` – xác định màu văn bản của phần tử.
- `cỡ chữ` – đặt kích thước phông chữ.
- `background-color` – đặt màu nền cho phần tử.
- `border` – xác định kiểu, độ dày và màu của đường viền của phần tử.
Dưới đây là một ví dụ về việc sử dụng các thuộc tính:
h1 {
color: red;
font-size: 24px;
background-color: yellow;
border: 1px solid black;
}
Quy tắc này chọn tất cả các tiêu đề h1 và đặt màu văn bản của chúng thành màu đỏ, cỡ chữ 24px, nền màu vàng và viền đen dày 1px.
Bộ kết hợp
Bộ kết hợp trong CSS cho phép bạn kết hợp các bộ chọn và tạo các quy tắc cụ thể hơn. Dưới đây là một số ví dụ về tổ hợp:
- `div p` – chọn tất cả các phần tử `p` là con của các phần tử `div`.
- `.menu-item > a` – chọn tất cả các phần tử `a` là hậu duệ trực tiếp của các phần tử có lớp `.menu-item`.
- `h2 + p` – chọn tất cả các phần tử `p` đứng ngay sau các phần tử `h2`.
Sử dụng bộ kết hợp cho phép bạn tinh chỉnh cách các kiểu được áp dụng cho các phần tử trên một trang.
Lớp giả và phần tử giả
Lớp giả và phần tử giả cho phép bạn chọn các phần tử ở trạng thái nhất định hoặc có các phần cụ thể. Chúng được chỉ định sau bộ chọn chính và được biểu thị bằng dấu hai chấm.
Các ví dụ về lớp giả:
- `:hover` – Áp dụng các kiểu khi con trỏ di chuột qua một phần tử.
- `:active` – áp dụng các kiểu khi phần tử đang hoạt động (ví dụ: nhấp vào nút).
- `:focus` – áp dụng các kiểu khi phần tử có tiêu điểm (ví dụ: trường nhập liệu khi được nhấp vào).
Ví dụ về các yếu tố giả:
- `::before` – thêm nội dung vào trước nội dung của phần tử được chọn.
- `::after` – thêm nội dung sau nội dung của phần tử được chọn.
- `::first-line` – áp dụng kiểu cho dòng văn bản đầu tiên trong phần tử.
- `::first-letter` – áp dụng kiểu cho chữ cái đầu tiên của văn bản trong phần tử.
Nhập tệp CSS
Để làm cho mã của bạn có cấu trúc hơn và dễ bảo trì hơn, CSS cho phép bạn nhập các kiểu từ các tệp khác. Điều này đạt được bằng lệnh `@import`, lệnh này có thể được đặt ở đầu tệp CSS.
Bằng cách này, bạn có thể chia các kiểu thành các tệp khác nhau, điều này sẽ giúp chúng dễ dàng chỉnh sửa hơn và giảm kích thước của từng tệp.
Xếp tầng và mức độ ưu tiên
CSS dựa trên nguyên tắc xếp tầng, có nghĩa là các kiểu có thể được xác định ở các vị trí và nguồn khác nhau và trình duyệt sẽ quyết định áp dụng kiểu nào dựa trên mức độ ưu tiên. Cascading bao gồm:
- Ưu tiên bộ chọn: Trình duyệt tôn trọng tính đặc hiệu của bộ chọn. Bộ chọn càng cụ thể thì mức độ ưu tiên của nó càng cao.
- Thứ tự kiểu: Nếu hai quy tắc có cùng đặc điểm, thì quy tắc cuối cùng sẽ được áp dụng cho phần tử.
- Tầm quan trọng của kiểu: Bạn có thể đặt tầm quan trọng của kiểu bằng cách sử dụng `!important`. Điều này làm cho phong cách được ưu tiên.
p{
color: red !important;
}
Điều quan trọng là phải sử dụng `!important` cẩn thận để tránh các vấn đề về bảo trì mã trong tương lai.
Truy vấn phương tiện
CSS cho phép các kiểu thích ứng dựa trên cài đặt thiết bị, chẳng hạn như độ rộng và độ phân giải màn hình. Truy vấn phương tiện cho phép bạn tạo các thiết kế đáp ứng trông đẹp mắt trên nhiều loại thiết bị, từ điện thoại di động đến máy tính để bàn.
Ví dụ truy vấn phương tiện:
@media screen and (max-width: 768px) {
/* styles for devices with screen widths up to 768px */
body {
font-size: 14px;
}
}
Trong ví dụ này, các kiểu sẽ được áp dụng cho các phần tử trang khi chiều rộng màn hình không vượt quá 768 pixel.
CSS là một công cụ tạo kiểu trang web mạnh mẽ và những kiến thức cơ bản này sẽ giúp bạn bắt đầu sử dụng nó để tạo ra các thiết kế đẹp và có chức năng. Thực hành và kinh nghiệm sẽ giúp bạn cải thiện kỹ năng của mình và trở thành một nhà phát triển front-end có kinh nghiệm.
