Bùi Viết Cường
CSS là gì? CSS (Cascading Style Sheets) là ngôn ngữ định dạng giúp trang web có màu sắc, phông chữ và bố cục, trong khi HTML chỉ lo phần nội dung. Hiểu CSS là bước đầu để làm giao diện website đẹp, nhất quán và dễ chỉnh sửa.
Bài viết này giải thích CSS là gì, các phiên bản, cấu trúc một đoạn CSS, lý do nên dùng, cách CSS hoạt động trong trình duyệt và ba cách nhúng CSS vào website. Thiết Kế Web DC trình bày theo hướng dễ hiểu, kèm ví dụ code chạy được.
CSS là gì?
CSS là viết tắt của Cascading Style Sheets, ngôn ngữ dùng để chọn các phần tử trong tài liệu HTML rồi quy định cách chúng hiển thị: màu chữ, phông chữ, khoảng cách, màu nền, kích thước và vị trí. HTML chịu trách nhiệm nội dung và cấu trúc, còn CSS chịu trách nhiệm giao diện.
Ý nghĩa của tên gọi CSS
Tên gọi gồm ba phần, mỗi phần gắn với một đặc điểm của ngôn ngữ này.
- Cascading (xếp tầng): khi nhiều quy tắc cùng áp dụng cho một phần tử, trình duyệt dựa vào độ ưu tiên và thứ tự viết để quyết định quy tắc nào được dùng. Nếu độ ưu tiên ngang nhau, quy tắc viết sau sẽ ghi đè quy tắc viết trước.
- Style (kiểu dáng): các thuộc tính như màu sắc, phông chữ, khoảng cách, nền.
- Sheets (bảng): các quy tắc thường được gom trong tệp riêng có đuôi .css, dùng chung cho nhiều trang.
Các phiên bản của CSS
CSS do Håkon Wium Lie đề xuất từ năm 1994 và hiện do nhóm làm việc CSS của W3C (tổ chức đặt chuẩn web) duy trì. Từ đó đến nay, CSS phát triển qua ba cột mốc chính dưới đây.
CSS1, CSS2 và CSS3
- CSS1 (12/1996): phiên bản chuẩn đầu tiên, quy định các thuộc tính cơ bản như màu sắc, phông chữ, viền, kích thước và khoảng cách cho các thẻ HTML.
- CSS2 (5/1998): bổ sung định vị phần tử (positioning), hỗ trợ bảng và các loại thiết bị khác ngoài màn hình như máy in.
- CSS3: không phải một khối duy nhất mà được chia thành nhiều module độc lập, mỗi module phụ trách một nhóm tính năng như bộ chọn, mô hình hộp, nền và viền, hiệu ứng chữ, biến đổi 2D/3D, hoạt ảnh (animation), Flexbox và Grid. Nhờ vậy từng module phát triển và được trình duyệt hỗ trợ theo tốc độ riêng.
Cấu trúc của một đoạn CSS
Một đoạn CSS là tập hợp các quy tắc, mỗi quy tắc gồm bộ chọn và khối khai báo. Phần này nêu cú pháp, các loại bộ chọn thường gặp và cách CSS tính kích thước một phần tử theo mô hình hộp.
Cú pháp và các thành phần
Mỗi quy tắc CSS có dạng: bộ chọn, theo sau là cặp ngoặc nhọn chứa các khai báo.
h2 {
color: blue;
font-size: 20px;
margin: 10px;
}
- Bộ chọn (selector): cho biết quy tắc áp dụng cho phần tử nào. Ở ví dụ trên, h2 chọn mọi thẻ tiêu đề cấp 2.
- Khối khai báo (declaration block): nằm trong cặp ngoặc nhọn, chứa một hoặc nhiều khai báo.
- Thuộc tính (property): thứ cần thay đổi, như color, font-size, margin.
- Giá trị (value): nằm sau dấu hai chấm, như blue, 20px, 10px.
Mỗi khai báo kết thúc bằng dấu chấm phẩy để trình duyệt biết khai báo đã hết và đọc tiếp khai báo sau.
Các loại bộ chọn thường dùng
Bộ chọn quyết định phạm vi ảnh hưởng của quy tắc, từ toàn bộ thẻ cùng loại đến một phần tử duy nhất.
- Bộ chọn thẻ: p áp dụng cho mọi đoạn văn.
- Bộ chọn class: .nut-chinh áp dụng cho mọi phần tử có class="nut-chinh", dùng lại được nhiều lần.
- Bộ chọn ID: #banner áp dụng cho phần tử có id="banner", mỗi ID chỉ nên xuất hiện một lần trong trang.
- Pseudo-class (lớp giả): chọn phần tử theo trạng thái đặc biệt, ví dụ a:hover áp dụng khi chuột di qua liên kết.
Bố cục theo mô hình hộp
Mỗi phần tử HTML được CSS xem như một chiếc hộp gồm bốn lớp: nội dung (content), khoảng đệm (padding), đường viền (border) và khoảng cách ngoài (margin). Padding là khoảng trống giữa nội dung và viền, border là đường bao quanh phần đệm, còn margin tách hộp này khỏi các hộp bên cạnh.
Mặc định, chiều rộng khai báo chỉ tính cho phần nội dung nên thêm padding hay border sẽ làm hộp rộng hơn. Khai báo box-sizing: border-box; để padding và border được tính vào chiều rộng đã đặt, giúp tính bố cục dễ hơn.
Tại sao nên sử dụng CSS?
Trước khi có CSS, màu sắc và phông chữ được khai báo trực tiếp trên từng thẻ HTML ở từng trang, nên việc sửa giao diện một website lớn rất tốn công. CSS ra đời để tách phần trình bày khỏi nội dung, và đây là lý do nó trở thành chuẩn định dạng của web.
Ưu điểm của CSS
- Tách nội dung và giao diện: mã HTML gọn hơn, dễ đọc và dễ cập nhật hơn.
- Tiết kiệm thời gian: một tệp CSS dùng chung cho cả website, sửa một chỗ thì mọi trang cùng thay đổi.
- Tải trang nhanh hơn: một quy tắc áp dụng cho nhiều thẻ nên giảm lượng mã lặp, và trình duyệt có thể lưu tệp CSS để dùng lại ở các trang sau.
- Hiển thị tốt trên nhiều thiết bị: với media query, cùng một trang có thể đổi bố cục cho điện thoại, máy tính bảng và máy tính.
- Nhiều thuộc tính hơn HTML: từ Flexbox, Grid đến animation, transform và biến CSS (variable), cho phép dựng giao diện phức tạp.
Nhược điểm của CSS
- Không đồng đều ở trình duyệt cũ: một số thuộc tính mới không chạy trên trình duyệt đời cũ nên cần kiểm tra lại.
- Không tạo được tính năng động: CSS không xử lý dữ liệu hay logic, các việc đó cần JavaScript hoặc ngôn ngữ phía máy chủ như PHP. Bạn có thể xem thêm ở bài ưu điểm và nhược điểm của JavaScript.
- Dễ rối ở website lớn: viết thiếu quy ước đặt tên và tổ chức tệp sẽ khiến các quy tắc ghi đè lẫn nhau, khó tìm lỗi.
Mối quan hệ giữa CSS và HTML
HTML và CSS đi cùng nhau nhưng làm hai việc khác nhau. HTML dùng thẻ để xác định đâu là tiêu đề, đoạn văn, danh sách, hình ảnh; CSS dùng bộ chọn để nhắm vào các thẻ đó và định dạng. Muốn hiểu thêm về nền tảng của trang web, bạn có thể đọc bài nguyên lý hoạt động của HTML.
Cùng một thẻ h1, khi chưa có CSS trình duyệt hiển thị bằng kiểu mặc định. Thêm quy tắc dưới đây, tiêu đề đổi sang màu xanh, phông Arial, cỡ 32px và canh giữa mà HTML không phải sửa.
<h1>Thiết kế website</h1>
h1 {
color: blue;
font-family: Arial, sans-serif;
font-size: 32px;
text-align: center;
}
Trang web vẫn hoạt động khi không có CSS, nhưng chỉ hiện nội dung thô, khó nhìn và khó điều hướng.
CSS hoạt động như thế nào?
Khi mở một trang, trình duyệt phải ghép nội dung HTML với kiểu dáng CSS rồi mới vẽ lên màn hình. Quá trình dưới đây là bản đơn giản hóa, mỗi trình duyệt có thể xử lý chi tiết khác nhau.
1. Tải HTML: trình duyệt nhận tệp HTML từ máy chủ.
2. Tạo DOM: HTML được phân tích thành DOM (Document Object Model, mô hình cây biểu diễn tài liệu trong bộ nhớ).
3. Tải tài nguyên liên kết: trình duyệt tải các tệp đi kèm như CSS, hình ảnh, video và JavaScript.
4. Phân tích CSS: các quy tắc CSS được đọc và tổ chức thành CSSOM (mô hình cây của các quy tắc CSS).
5. Dựng cây kết xuất và bố cục: trình duyệt ghép DOM với CSSOM thành cây kết xuất (render tree), xác định quy tắc nào áp dụng cho nút nào, rồi tính kích thước và vị trí từng phần tử.
6. Vẽ lên màn hình: giao diện được vẽ ra (painting). Khi người dùng đổi kích thước cửa sổ hoặc tương tác với trang, trình duyệt tính lại và cập nhật phần bị ảnh hưởng.
Cách nhúng CSS vào website
Muốn CSS có hiệu lực, bạn phải gắn nó vào tài liệu HTML. Có ba cách nhúng, khác nhau ở phạm vi áp dụng và khả năng tái sử dụng.
Inline CSS
Inline CSS viết trực tiếp trong thuộc tính style của thẻ HTML và chỉ tác động lên đúng phần tử đó.
<p style="color: red; font-size: 16px;">Đoạn văn này màu đỏ, cỡ chữ 16px.</p>
- Ưu điểm: nhanh, thường có độ ưu tiên cao hơn các cách còn lại, hợp để thử nhanh một thay đổi nhỏ.
- Nhược điểm: làm HTML lộn xộn, không dùng lại được và rất khó bảo trì khi trang nhiều phần tử.
Internal CSS
Internal CSS đặt trong thẻ style nằm trong phần head của trang, áp dụng cho toàn bộ trang đó.
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>
- Ưu điểm: mọi thứ nằm trong một tệp, không cần tải thêm tệp CSS.
- Nhược điểm: chỉ dùng cho một trang. Dùng cho nhiều trang phải chép lại mã, làm tăng dung lượng.
External CSS
External CSS lưu trong tệp .css riêng và liên kết vào trang bằng thẻ link trong head.
<head>
<link rel="stylesheet" href="styles.css">
</head>
/ styles.css /
p {
color: green;
font-size: 18px;
}
- Ưu điểm: một tệp dùng cho cả website, dễ bảo trì và trình duyệt lưu tạm để các trang sau tải nhanh hơn. Đây là cách được dùng phổ biến nhất.
- Nhược điểm: cần thêm một yêu cầu tải tệp, nhưng ảnh hưởng thường nhỏ.
Câu hỏi thường gặp
CSS là viết tắt của từ gì?
CSS là viết tắt của Cascading Style Sheets, nghĩa là bảng kiểu xếp tầng.
Có làm được website mà không cần CSS không?
Có. Trang vẫn hiển thị nội dung bằng HTML, nhưng giao diện thô, kém thẩm mỹ và khó điều hướng.
Nên học HTML trước hay CSS trước?
Nên học HTML trước để nắm cấu trúc trang, sau đó học CSS để định dạng. CSS cần có HTML để áp dụng lên.
Học CSS có khó không?
Cú pháp CSS đơn giản. Phần khó hơn là lên bố cục và xử lý khác biệt giữa các trình duyệt, cần luyện tập trên sản phẩm thật.
CSS là ngôn ngữ định dạng giao diện của web, tách phần trình bày khỏi nội dung HTML. Nắm cú pháp, mô hình hộp, cách trình duyệt xử lý CSS và ba cách nhúng giúp bạn viết giao diện gọn và dễ bảo trì.
Để thực hành, bạn có thể thử bài tạo menu ngang trong HTML và CSS. Nếu cần website có giao diện chuyên nghiệp, Thiết Kế Web DC có thể tư vấn qua dịch vụ thiết kế website
