Cascading Style Sheets (CSS) là gì?
Đọc bên dưới để biết giải thích đầy đủ về cách thức hoạt động của biểu định kiểu xếp tầng. Chúng tôi hiển thị các ứng dụng của mình ở đầu trang để dễ tìm và sử dụng. Nếu bạn đang đọc bài viết này qua email hoặc nguồn cấp dữ liệu, hãy nhấp qua để nén CSS của bạn.
Trừ khi bạn đang thực sự phát triển trang web, bạn có thể không hiểu đầy đủ biểu định kiểu xếp tầng (CSS). CSS là ngôn ngữ biểu định kiểu được sử dụng để mô tả giao diện và định dạng của tài liệu được viết bằng HTML or XML. CSS có thể được sử dụng để chỉ định kiểu cho các thành phần khác nhau như phông chữ, màu sắc, khoảng cách và bố cục. CSS cho phép bạn tách phần trình bày của tài liệu HTML khỏi nội dung của nó, giúp việc duy trì và cập nhật phong cách trực quan của trang web của bạn trở nên dễ dàng hơn.
Cấu trúc ngôn ngữ CSS
Sản phẩm bộ chọn là phần tử HTML bạn muốn tạo kiểu và tài sản và giá trị xác định các kiểu bạn muốn áp dụng cho phần tử đó:
selector {
property: value;
}
Ví dụ: CSS sau sẽ tạo tất cả <h1>
các phần tử trên trang có màu đỏ và cỡ chữ là 32px:
CSS
h1 {
color: red;
font-size: 32px;
}
Đầu ra
Nhóm
Bạn cũng có thể chỉ định CSS cho một ID duy nhất trên một phần tử:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}
Đầu ra
Hoặc áp dụng một lớp trên nhiều yếu tố:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}
Đầu ra
Tôi muốn làm nổi bật một từ trong thẻ span.
Bạn có thể đưa CSS vào tài liệu HTML của mình theo ba cách:
- CSS nội tuyến, sử dụng
style
thuộc tính trên một phần tử HTML - CSS nội bộ, sử dụng một
<style>
phần tử trong<head>
tài liệu HTML của bạn - CSS bên ngoài, sử dụng tệp .css riêng biệt được liên kết với tài liệu HTML của bạn bằng cách sử dụng
<link>
phần tử trong<head>
tài liệu HTML của bạn
CSS đáp ứng
CSS cực kỳ linh hoạt và có thể được sử dụng để điều chỉnh việc hiển thị các thành phần dựa trên độ phân giải màn hình, vì vậy bạn có thể có cùng một HTML nhưng xây dựng nó đáp ứng đến độ phân giải của thiết bị:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}
Nén CSS
Bạn có thể thấy trong ví dụ trên có một nhận xét, truy vấn phương tiện và nhiều kiểu sử dụng dấu cách và nguồn cấp dữ liệu dòng để sắp xếp chế độ xem của CSS. Đó là một phương pháp tuyệt vời để thu nhỏ hoặc nén CSS của bạn trên trang web của bạn để giảm kích thước tệp và sau đó là thời gian cần thiết để yêu cầu và hiển thị kiểu dáng của bạn. Đó không phải là một số tiền nhỏ… bạn có thể thấy khoản tiết kiệm hơn 50% đối với một số ví dụ ở trên.
Nhiều cấu hình máy chủ cung cấp các công cụ sẽ tự động nén CSS một cách nhanh chóng và lưu trữ tệp đã rút gọn vào bộ đệm để bạn không phải thực hiện thủ công.
SCSS là gì?
CSS ngổ ngáo (SCSS) là một bộ tiền xử lý CSS bổ sung chức năng và cú pháp bổ sung cho ngôn ngữ CSS. Nó mở rộng các khả năng của CSS bằng cách cho phép sử dụng các biến, mixin, hàm và các tính năng khác không có sẵn trong CSS tiêu chuẩn.
Ưu điểm của SCSS
- Khả năng bảo trì được cải thiện: Với việc sử dụng các biến, bạn có thể lưu trữ các giá trị ở một nơi và sử dụng lại chúng trong toàn bộ biểu định kiểu của mình, giúp việc bảo trì và cập nhật kiểu của bạn dễ dàng hơn.
- Tổ chức tốt hơn: Với mixin, bạn có thể nhóm và sử dụng lại các bộ kiểu, làm cho biểu định kiểu của bạn có tổ chức hơn và dễ đọc hơn.
- Tăng cường chức năng: SCSS bao gồm nhiều tính năng không có sẵn trong CSS tiêu chuẩn, chẳng hạn như chức năng, cấu trúc điều khiển (ví dụ: if/else) và các phép toán số học. Điều này cho phép phong cách năng động và biểu cảm hơn.
- Hiệu suất tốt hơn: Các tệp SCSS được biên dịch thành CSS, có thể cải thiện hiệu suất bằng cách giảm số lượng mã cần được trình duyệt phân tích cú pháp.
Nhược điểm của SCSS
- Đường cong học tập: SCSS có cú pháp khác với CSS tiêu chuẩn và bạn sẽ cần học cú pháp mới này trước khi có thể sử dụng nó một cách hiệu quả.
- Độ phức tạp bổ sung: Mặc dù SCSS có thể làm cho biểu định kiểu của bạn có tổ chức hơn và dễ bảo trì hơn, nhưng nó cũng có thể tạo thêm độ phức tạp vào cơ sở mã của bạn, đặc biệt nếu bạn chưa quen với các tính năng và cú pháp mới.
- Công cụ: Để sử dụng SCSS, bạn sẽ cần một trình biên dịch để dịch mã SCSS của bạn sang CSS. Điều này yêu cầu thiết lập và công cụ bổ sung, đây có thể là rào cản gia nhập đối với một số nhà phát triển.
Trong ví dụ dưới đây, mã SCSS sử dụng các biến để lưu trữ giá trị ($primary-color
và $font-size
) có thể được sử dụng lại trong toàn bộ biểu định kiểu. Mã CSS được tạo từ mã SCSS này là tương đương nhưng không bao gồm các biến. Thay vào đó, giá trị của các biến được sử dụng trực tiếp trong CSS.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}
Một tính năng khác của SCSS được thể hiện trong ví dụ này là các kiểu lồng nhau. Trong mã SCSS, h1
phong cách được lồng trong body
các kiểu, điều này không thể thực hiện được trong CSS tiêu chuẩn. Khi mã SCSS được biên dịch, các kiểu lồng nhau sẽ được mở rộng thành các kiểu riêng biệt trong mã CSS.
Nhìn chung, SCSS cung cấp nhiều lợi thế so với CSS tiêu chuẩn, nhưng điều quan trọng là phải cân nhắc sự đánh đổi và chọn công cụ phù hợp cho dự án của bạn dựa trên nhu cầu và hạn chế của bạn.