Nội dung tiếp thị

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.

Nén CSS Giải nén CSS Sao chép kết quả

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ảngiá 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

Giới thiệu

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:

  1. CSS nội tuyến, sử dụng style thuộc tính trên một phần tử HTML
  2. CSS nội bộ, sử dụng một <style> phần tử trong <head> tài liệu HTML của bạn
  3. 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$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.

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.