Tiếng Việt

Hướng dẫn CSS

Hướng dẫn CSS3

CSS Nâng cao

Tham chiếu CSS

CSS T响应

CSS - Gốc: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các pháp sư CSS tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của CSS gốc. Là một ai đó đã dạy khoa học máy tính trong nhiều năm hơn tôi muốn thừa nhận (hãy nói là tôi nhớ khi "thiết kế响应式" có nghĩa là trang web của bạn không làm crash trình duyệt), tôi ở đây để giải thích khái niệm này một cách mà ngay cả bà của bạn cũng có thể hiểu. Vậy, hãy cầm một tách cà phê (hoặc sô cô la, nếu bạn giống học sinh của tôi nghĩ rằng cà phê là "quá trưởng thành"), và cùng tôi lặn vào!

CSS - Root

Gốc CSS là gì?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu từ cơ bản. Selector :root trong CSS giống như sếp lớn của stylesheet của bạn. Nó là cấp độ cha cao nhất trong hierachy CSS, thậm chí còn trên <html> element. Hãy tưởng tượng nó là godfather trong cây gia đình CSS của bạn.

Cú pháp

Cú pháp để sử dụng :root rất đơn giản. Dưới đây là cách nó trông như thế nào:

:root {
/* Your declarations go here */
}

Thấy chưa? Không có gì đáng sợ phải không? Nó chỉ như một quy tắc CSS bình thường, nhưng với siêu năng lực!

Gốc CSS - Khai báo Biến CSS Toàn cục

Bây giờ, hãy cùng nhau khám phá điều thực sự thú vị. Một trong những tính năng mạnh mẽ nhất của :root là khả năng khai báo biến CSS toàn cục. Những biến này giống như những bình thuốc tiên mà bạn có thể sử dụng suốt toàn bộ stylesheet của mình.

Hãy nhìn vào một ví dụ:

:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}

Trong ví dụ này, chúng ta đã khai báo ba biến CSS:

  • --main-color: Một gam màu xanh đẹp
  • --secondary-color: Một màu xanh tươi mới
  • --font-size: Kích thước chữ cơ bản

Bạn có thể tự hỏi, "Tại sao lại có hai gạch ngang (--) trước tên các biến?" Đó là cách CSS nói "Hey, này là một thuộc tính tùy chỉnh!" Nó giống như cấp một huy hiệu đặc biệt cho biến của bạn để chúng không bị nhầm lẫn với các thuộc tính CSS bình thường.

Sử dụng Biến Toàn cục

Bây giờ chúng ta đã khai báo các biến, làm thế nào để sử dụng chúng? Đó là dễ như bánh! Dưới đây là một ví dụ:

body {
background-color: var(--main-color);
font-size: var(--font-size);
}

h1 {
color: var(--secondary-color);
}

Trong đoạn mã này, chúng ta đang sử dụng các biến toàn cục để thiết kế các phần tử khác nhau. body có màu chính làm nền và kích thước chữ cơ bản. Các tiêu đề h1 có màu phụ.

Gốc CSS - Thiết kế Các Phần Tử Khác Nhau

Sự tuyệt vời của :root là nó cho phép chúng ta tạo một chủ đề nhất quán trên toàn bộ website với rất ít công sức. Hãy mở rộng ví dụ trước để xem chúng ta có thể thiết kế các phần tử khác nhau như thế nào:

:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--accent-color: #e74c3c;
--font-size: 16px;
--heading-font: 'Arial', sans-serif;
--body-font: 'Georgia', serif;
}

body {
background-color: var(--main-color);
font-family: var(--body-font);
font-size: var(--font-size);
color: #333;
}

h1, h2, h3 {
font-family: var(--heading-font);
color: var(--secondary-color);
}

.button {
background-color: var(--accent-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}

.sidebar {
background-color: var(--secondary-color);
color: white;
padding: 20px;
}

Trong ví dụ mở rộng này, chúng ta đã thêm nhiều biến và sử dụng chúng để thiết kế các phần tử khác nhau. Hãy phân tích:

  1. Chúng ta đã thêm các biến cho màu nổi bật, phông chữ cho tiêu đề và phông chữ cho nội dung.
  2. body có màu chính làm nền, sử dụng phông chữ nội dung và đặt kích thước chữ cơ bản.
  3. Tất cả các phần tử tiêu đề (h1, h2, h3) sử dụng phông chữ tiêu đề và màu phụ.
  4. Chúng ta đã tạo một class .button sử dụng màu nổi bật.
  5. Một class .sidebar sử dụng màu phụ làm nền.

Sức mạnh của Biến CSS

Bây giờ, hãy tưởng tượng bạn muốn thay đổi màu sắc của website. Thay vì phải săn lùng và thay đổi mỗi khai báo màu trong toàn bộ file CSS, bạn chỉ cần cập nhật các biến trong selector :root. Đó là như có một bảng điều khiển trung tâm cho toàn bộ thiết kế của website!

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã thảo luận:

Phương pháp Mô tả Ví dụ
Khai báo biến Sử dụng :root để khai báo biến CSS toàn cục :root { --main-color: #3498db; }
Sử dụng biến Sử dụng var() để áp dụng các biến body { background-color: var(--main-color); }
Thiết kế phần tử Sử dụng biến để duy trì thiết kế nhất quán h1 { color: var(--secondary-color); }

Kết luận

Và thế là chúng ta đã cùng nhau khám phá khu vực :root của CSS, từ cú pháp cơ bản đến khai báo và sử dụng biến toàn cục, và cuối cùng là thiết kế các phần tử khác nhau. Nhớ rằng, sức mạnh của :root nằm ở khả năng tạo ra các stylesheet nhất quán và dễ bảo trì.

Như tôi luôn nói với học sinh của mình, CSS giống như nấu ăn. Ban đầu, nó có thể trông phức tạp, nhưng một khi bạn hiểu các nguyên liệu (thuộc tính) và cách chúng cùng nhau hoạt động, bạn có thể tạo ra những trang web đẹp mắt và hấp dẫn mà người dùng sẽ muốn quay lại!

Vậy, hãy tiến lên, thử nghiệm, và mong rằng stylesheet của bạn sẽ luôn được tổ chức tốt và thiết kế của bạn sẽ luôn响应式. Chúc bạn may mắn với mã code của mình!

Credits: Image by storyset

Hướng Dẫn Trước:
CSS - Combinators
Hướng Dẫn Tiếp Theo:
CSS - Mô hình hộp