CSS: Cascading Style Sheets
Cascading Style Sheets (CSS) là ngôn ngữ stylesheet dùng để mô tả cách trình bày của một tài liệu được viết bằng HTML hoặc XML (bao gồm các phương ngữ XML như SVG, MathML hoặc XHTML). CSS mô tả cách các phần tử được hiển thị trên màn hình, trên giấy, trong giọng nói, hoặc trên các phương tiện khác.
CSS là một trong những ngôn ngữ cốt lõi của web mở và được chuẩn hóa trên các trình duyệt web theo đặc tả W3C. Trước đây, việc phát triển các phần khác nhau của đặc tả CSS được thực hiện đồng bộ, cho phép tạo phiên bản cho các khuyến nghị mới nhất. Bạn có thể đã nghe về CSS1, CSS2.1, hoặc thậm chí CSS3. Sẽ không bao giờ có CSS3 hay CSS4; thay vào đó, mọi thứ hiện nay chỉ đơn giản là "CSS" với các mô-đun CSS riêng lẻ có số phiên bản.
Sau CSS 2.1, phạm vi của đặc tả đã mở rộng đáng kể và tiến trình trên các mô-đun CSS khác nhau bắt đầu khác biệt đến mức việc phát triển và phát hành các khuyến nghị riêng lẻ theo từng mô-đun trở nên hiệu quả hơn. Thay vì tạo phiên bản cho đặc tả CSS, W3C hiện định kỳ chụp ảnh trạng thái ổn định mới nhất của đặc tả CSS và các mô-đun riêng lẻ tiến triển độc lập. Các mô-đun CSS hiện có số phiên bản hoặc cấp độ, chẳng hạn như CSS Color Module Level 5.
Hướng dẫn cho người mới bắt đầu
Các mô-đun cốt lõi về học phát triển web của chúng tôi chứa các hướng dẫn hiện đại, cập nhật về các kiến thức CSS cơ bản.
- Trang web đầu tiên của bạn: Tạo kiểu cho nội dung
-
Bài viết này cung cấp một chuyến tham quan ngắn gọn về CSS là gì và cách sử dụng nó, dành cho những người hoàn toàn mới với phát triển web.
- Kiến thức cơ bản về tạo kiểu CSS
-
Mô-đun này cung cấp tất cả các kiến thức CSS cơ bản bạn cần để bắt đầu học công nghệ một cách hiệu quả, bao gồm cú pháp, tính năng và kỹ thuật.
- Tạo kiểu văn bản CSS
-
Ở đây chúng ta xem xét các kiến thức cơ bản về văn bản trong CSS, bao gồm cài đặt font chữ, độ đậm, chữ nghiêng, khoảng cách dòng và chữ, cũng như đổ bóng. Chúng ta kết thúc mô-đun bằng cách xem xét việc áp dụng font chữ tùy chỉnh cho trang của bạn, cũng như tạo kiểu cho danh sách và liên kết.
- Bố cục CSS
-
Mô-đun này xem xét các float, định vị, các công cụ bố cục hiện đại khác, và xây dựng các thiết kế responsive sẽ thích ứng với các thiết bị, kích thước màn hình và độ phân giải khác nhau.
Hướng dẫn
Các hướng dẫn CSS được tổ chức theo mô-đun và giúp bạn tìm hiểu những gì có thể đạt được khi sử dụng CSS. Xem danh sách đầy đủ tại CSS guides, bao gồm các chủ đề như:
- Cú pháp CSS bao gồm khai báo và bộ quy tắc.
- Độ ưu tiên (specificity), kế thừa, và tầng (cascade)
- Lồng nhau (nesting), phạm vi (scoping) và shadow parts
- Truy vấn media và container
- Kiểu dữ liệu số (numeric) và văn bản (textual)
- Mô hình hộp (box model) và thu gọn lề (margin collapse)
- Khối chứa (containing block)
- Ngữ cảnh xếp chồng (stacking) và định dạng khối (block-formatting)
- Xử lý giá trị thuộc tính
- Thuộc tính viết tắt (shorthand properties)
- Bố cục hộp linh hoạt (flexible box), đa cột (multi-column) và lưới (grid)
- Hoạt ảnh (animations), chuyển tiếp (transitions), và biến đổi (transforms)
Hướng dẫn thực hành
- Sách nấu ăn bố cục CSS
-
Các công thức cho các mẫu bố cục phổ biến mà bạn có thể cần triển khai trên các trang web của mình. Các công thức này cung cấp mã bạn có thể sử dụng làm điểm khởi đầu trong các dự án. Chúng cũng làm nổi bật các cách khác nhau mà các đặc tả bố cục có thể được sử dụng và các lựa chọn bạn có thể thực hiện với tư cách là nhà phát triển.
Công cụ
- Trình tạo border-image
-
Tạo giá trị CSS
border-image. - Trình tạo border-radius
-
Tạo hiệu ứng CSS
border-radius. - Trình tạo box-shadow
-
Thêm hiệu ứng
box-shadowvào các đối tượng CSS của bạn. - Trình chuyển đổi định dạng màu
-
Nhập hoặc chọn màu và sao chép giá trị tương ứng của nó trong bất kỳ định dạng màu CSS nào.
- Trình trộn màu
-
Trộn hai màu trong bất kỳ không gian màu nào bằng hàm
color-mix()và sao chép màu kết quả trong bất kỳ định dạng màu CSS nào. - Trình tạo hình dạng
-
Xác định tọa độ và cú pháp cho các tính năng
<basic-shape>.
Bạn cũng có thể sử dụng các tài nguyên sau:
- Dịch vụ xác thực CSS W3C: Để kiểm tra xem CSS của bạn có hợp lệ không. Đây là công cụ gỡ lỗi vô giá.
- Firefox Developer Tools: Để xem và chỉnh sửa CSS trực tiếp của trang qua các công cụ Inspector và Style Editor.
- Tiện ích mở rộng Web Developer: Để theo dõi và chỉnh sửa CSS trực tiếp trên các trang web trong Firefox.
Tài liệu tham khảo
Xem tài liệu tham khảo CSS đầy đủ.
- Thuộc tính CSS
-
Tài liệu tham khảo cho tất cả các thuộc tính CSS.
- Bộ chọn CSS
-
Tài liệu tham khảo cho các bộ chọn CSS, tổ hợp (combinators), pseudo-classes, và pseudo-elements.
- At-rules CSS
-
Tài liệu tham khảo cho các at-rules CSS bao gồm media queries.
- Giá trị CSS
-
Tài liệu tham khảo cho các từ khóa CSS, kiểu dữ liệu, và hàm.