CSS (Cascading Style Sheets) là một thành phần cơ bản trong phát triển web, đóng vai trò quan trọng trong việc điều khiển diện mạo trực quan của các phần tử HTML trên trang web của bạn. Nó cung cấp một tập hợp mạnh mẽ các quy tắc và thuộc tính để xác định cách các phần tử được hiển thị, định dạng và vị trí, cho phép bạn tùy chỉnh giao diện của trang web.
Hãy bắt đầu bằng việc hiểu khái niệm của bộ chọn (selector)
Bộ chọn được sử dụng để chọn ra các phần tử HTML cụ thể để tạo kiểu. Một bộ chọn cơ bản nhất là bộ chọn phần tử, nó chọn tất cả các thể hiện của một phần tử HTML cụ thể.
Ví dụ, quy tắc CSS sau đây chọn tất cả các đoạn văn trong tài liệu:
p {
color: blue;
}
Trong ví dụ này, bộ chọn p chọn tất cả các phần tử <p> và đặt màu chữ của chúng thành màu xanh.
Bộ chọn lớp (class selector) là một bộ chọn phổ biến khác
Lớp được sử dụng để nhóm các phần tử có đặc điểm tương tự. Bằng cách gán một lớp cho các phần tử HTML, bạn có thể chọn và tạo kiểu cho chúng cùng nhóm.
Dưới đây là một ví dụ:
.blue-text {
color: blue;
}
Trong trường hợp này, bộ chọn .blue-text chọn tất cả các phần tử có lớp "blue-text" và áp dụng màu xanh vào chữ của chúng.
Ngoài ra, bộ chọn ID cho phép bạn chọn một phần tử cụ thể bằng cách sử dụng định danh duy nhất của nó. Thông thường, các ID được gán cho các phần tử riêng lẻ trên một trang.
Đây là một ví dụ:
#header {
background-color: gray;
}
Trong ví dụ này, bộ chọn #header chọn phần tử có ID "header" và áp dụng màu nền xám cho nó.
Tiếp theo là cú pháp của CSS, mỗi quy tắc CSS bao gồm một bộ chọn và một khối khai báo
Khối khai báo được bao quanh bởi cặp dấu ngoặc nhọn {} và chứa một hoặc nhiều khai báo. Khai báo bao gồm một thuộc tính và giá trị tương ứng.
Dưới đây là một ví dụ:
h1 {
font-size: 24px;
color: #333;
}
Trong đoạn mã này, bộ chọn h1 chọn tất cả các phần tử <h1> và đặt kích thước font chữ là 24 pixel và màu chữ là màu xám đậm (#333).
Trong suốt loạt bài viết này, chúng ta sẽ khám phá và giải thích các thuộc tính và bộ chọn CSS khác nhau, giúp bạn tạo ra giao diện trực quan và có cấu trúc tốt trên trang web của mình. Hiểu CSS và cú pháp cơ bản sẽ giúp bạn có nền tảng để kiểm soát việc tạo kiểu cho các trang web của mình, đảm bảo trải nghiệm người dùng độc đáo và cá nhân hóa. Hãy cùng khám phá và khai thác tiềm năng vô hạn của CSS!