CSS (Cascade Styling Sheets) là ngôn ngữ thiết kế giúp định dạng và làm đẹp thêm trang web được viết bởi ngôn ngữ đánh dấu HTML hoặc XML. Ứng dụng CSS sẽ giúp quá trình tạo lập website thêm dễ dàng, hiệu quả.
Bài viết sau đây, 123job.vn cùng bạn đọc tìm hiểu những nội dung cơ bản của ngôn ngữ CSS, bao gồm: CSS là gì, tại sao CSS lại phổ biến; Mối liên hệ giữa CSS và HTML; Cú pháp CSS và 3 cách nhúng mã CSS vào trang web.
1. CSS là gì?
CSS (Cascade Styling Sheets) được phát triển vào năm 1996 bởi W3C (World Wide Web Consortium). CSS là một trong những ngôn ngữ định dạng (Style Sheet Language) phổ biến. CSS tập trung cải thiện cách trình bày các phần tử được tạo bởi ngôn ngữ đánh dấu HTML hoặc XML, qua đó nâng cấp giao diện hiển thị của website đối với người dùng
CSS sử dụng các bộ quy tắc. Các style trong CSS được áp dụng cho phần tử HTML (thẻ HTML, tên một ID, Class…) bằng vùng chọn/bộ chọn (CSS Selector). CSS hoạt động dựa trên phương thức tìm vùng chọn và áp các thuộc tính (màu sắc, kiểu, cỡ chữ, căn lề…) cần thay đổi lên vùng chọn đó.
Xem thêm: Nên học chuyên ngành nào của Công nghệ thông tin? Ngành nào khó?
2. Mối liên hệ giữa CSS và HTML
HTML và CSS là hai bộ ngôn ngữ thường được sử dụng song hành trong quá trình tạo lập website. Nếu như HTML giúp người lập trình tạo lập khung thô cho trang web, thì CSS là lớp filter giúp giao diện website hấp dẫn và thuận tiện hơn với người dùng.
CSS thường được sử dụng kết hợp với HTML. Tuy nhiên, CSS có thể được sử dụng kết hợp với bất kỳ ngôn ngữ đánh dấu dựa trên XML nào khác. Nhiều người cũng nhầm lẫn về mối quan hệ ràng buộc giữa CSS và HTML. Thực chất, hai ngôn ngữ trên là hai ngôn ngữ độc lập. Mặc dù chúng cùng được sử dụng để mã hóa và thiết kế web, nhưng chúng cũng có thể được sử dụng riêng biệt với những ứng dụng khác nhau. Dưới đây là một số điểm khác biệt chính giữa HTML và CSS:
- HTML xác định nội dung và cấu trúc của trang web. Trong khi đó, CSS được dùng để biên dịch lại cách hiển thị giao diện web và thiết kế các phần tử HTML.
- Chức năng chính của HTML là tạo lập trang web. Trong khi CSS được dùng để kiểm soát bố cục, kiểu dáng các thành phần hiển thị trong website.
- Mã CSS có thể được kết hợp trong các tệp HTML, nhưng ở chiều ngược lại thì không, CSS không thể chứa mã HTML trong cấu trúc của nó.
- HTML không được dùng để trình bày hay trực quan hóa nội dung hiển thị.
- HTML là một tập hợp “tyle/kiểu” hoặc “method”, trong khi đó, tùy thuộc vào yêu cầu mà CSS có thể là internal CSS, inline CSS hay external CSS.
Xem thêm: CV xin việc công nghệ thông tin cần lưu ý những gì?
3. Tại sao CSS lại quan trọng
CSS được sử dụng phổ biến và đóng vai trò quan trọng trong quá trình thiết kế website bởi những ưu điểm sau đây:
- Tiết kiệm thời gian: Bạn có thể viết một mã CSS và tái sử dụng chúng trên nhiều trang HTML. Đồng thời bạn cũng có thể áp dụng một kiểu/style cho từng phần tử HTML hay áp dụng chung cho nhiều trang khác.
- Thời gian tải xuống nhanh hơn: Thay vì phải lặn lội sửa lại thuộc tính trên từng thẻ riêng biệt, bạn chỉ cần viết lại một quy tắc CSS trên một thẻ và áp dụng cho toàn bộ.
- Thân thiện với công cụ tìm kiếm: Sử dụng mã nguồn sạch (Clean Code) giúp cải thiện khả năng tìm và đọc hiểu đối với các công cụ tìm kiếm.
- Tối ưu giao diện cũng như tối ưu quá trình cập nhập nội dung cho trang web mà không làm rối mã HTML. Bởi thông qua CSS , các source code của trang web được tổ chức theo trật tự, tách bạch hơn trong định dạng hiển thị.
CSS rất cần thiết cho quá trình tạo lập một trang web hấp dẫn về thị giác và dễ dàng bảo trì. CSS giúp cải thiện giao diện và trải nghiệm của người dùng trên trang web thông qua việc kiểm soát cách trình bày các phần tử.
4. Cú pháp CSS
Một đoạn CSS bao gồm: (1) Bộ chọn/ Selector và (2) Một khối khai báo như sau:
Bộ chọn/Selector
Bộ chọn là mẫu, nhắm mục tiêu vào các phần tử HTML cần định nghĩa lại phong cách. Các bộ chọn có thể áp dụng với những trường hợp phổ biến sau đây: Bộ chọn phần tử (theo dạng cụ thể như tiêu đề h1); bộ chọn lớp/class, id của các phần tử; Bộ chọn các phần tử dựa trên mối liên hệ của chúng với phần tử khác trong phân cấp tài liệu.
Khối khai báo/Declaration
Thiết lập các thuộc tính CSS thành các giá trị cụ thể là chức năng cốt lõi của ngôn ngữ CSS. Một cặp thuộc tính và giá trị được gọi là một khai báo. Mỗi cặp khai báo đều được tính toán sử dụng trên từng phần tử HTML phù hợp nhằm tạo nên giao diện hấp dẫn trên trang web. Trên khối khai báo, bạn cần chú ý những điểm sau:
Phân biệt khái niệm khai báo, khối khai báo, thuộc tính (property) và giá trị (value).
- Mỗi khai báo bao gồm: Property/Tên thuộc tính CSS và Value/Giá trị được gán. Thuộc tính và giá trị gán được phân tách với nhau bởi dấu hai chấm “:” và các khoảng trắng trước, giữa và sau thuộc tính và giá trị.
- Property/Thuộc tính CSS xác định các yếu tố cơ cấu thành giao diện web như màu sắc, kiểu chức, kích thước chữ, căn văn bản….
- Value/Giá trị thuộc tính: Nằm bên phải tên thuộc tính và sau dấu hai chấm. Value chứa thông tin cụ thể về giá trị mà bạn muốn chỉ định.
- Một khối khai báo chứa một hoặc nhiều khai báo khác nhau. Các khai báo trong cùng một khối được phân tách với nhau bởi dấu chấm chấm phẩy “ ; “.
- Khai báo CSS luôn kết thúc bởi dấu chấm phẩy và các khối khai báo được bao quanh bởi dấu ngoặc nhọn
Xem thêm: Tổng hợp những đầu sách IT mà dân công nghệ thông tin nên đọc
5. 3 cách nhúng mã CSS vào trang web
Có 3 cách nhúng mã CSS vào website để CSS có thể thực thi trên trang web hay HTML Documents, bao gồm:
- Inline CSS: Có thể sử dụng Inline CSS để áp dụng định dạng cho một phần tử HTML duy nhất và thích hợp với việc chèn một vài đoạn CSS ngắn. Với cách nhúng này, bạn cần thêm thuộc tính style vào thẻ mở của phần tử HTML có liên quan. Thẻ style có thể chứa bất kỳ thuộc tính CSS nào.
- Internal CSS: Tạo lập nơi viết mã CSS bằng cách đặt thẻ “style” nằm trong thẻ “head” của HTML. Internal CSS được sử dụng để xác định kiểu/style cho một trang HTML duy nhất.
- External CSS: Tạo tập tin “.css” riêng và khi đó bạn sẽ nhúng đoạn mã CSS đã được tạo lập riêng đó vào tài liệu HTML thông qua qua cặp thẻ "link". Tập tin CSS trên là tập tin độc lập với tài liệu HTML (tên file thường được đặt với phần mở rộng là .css). Vì vậy, External CSS có thể được dùng để xác định kiểu/style cho nhiều trang HTML khác nhau.
Xem thêm: Công nghệ thông tin là gì? Các mảng trong ngành công nghệ thông tin
6. Inset CSS là gì?
Inset là giá trị được sử dụng để tạo hiệu ứng khối 3D cho các phần tử trong trang. Inset thường được sử dụng trong các thuộc tính ‘text-shadow’ hoặc ‘box-shadow’.
Khi giá trị inset được đặt trong thuộc tính “box-shadow”, bạn sẽ tạo nên hiệu ứng bóng đổ ngay bên trong phần tử hộp.
Tương tự, khi áp giá trị inset cho thuộc tính “text-shadow”, bạn sẽ có hiệu ứng bóng đổ trong chính phần tử là đoạn văn bản được áp dụng định dạng.
Cú pháp đối với mã CSS tạo bóng đổ từ phía trong phần tử:
- inset: Chỉ định bóng đổ về phía bên trong phần tử .
- h-offset: Thiết lập độ dài - lệch ngang của hiệu ứng. Chỉ định các giá trị âm nếu bạn muốn tạo bóng đổ về bên trái.
- v-offset: Thiết lập độ lệch dọc cho hiệu ứng. Chỉ định các giá trị âm để tạo hiệu ứng bóng đổ ngược về phía trên cùng.
- blur-radius: Giá trị tùy chọn chỉ định bán kính mờ của bóng, độ mờ tăng dần khi giá trị được gán tăng cao.
- Spread-radius: Mở rộng (dùng giá trị dương) hoặc thu hẹp (dùng giá trị âm) bóng đổ.
- Màu sắc: Thiết lập màu sắc cho bóng đổ.
Ngược lại với giá trị inset, giá trị mặc định “outset” tạo bóng đổ bên ngoài phần tử. Khác với cú pháp tạo bóng đổ bên trong phần tử, khi muốn tạo bóng đổ phía ngoài, bạn chỉ cần thêm giá trị thông số chiều sâu bóng đổ sau mỗi thuộc tính ‘text-shadow’ hoặc ‘box-shadow’ mà không cần bổ sung mô tả “outset”.
Kết luận
Nhờ CSS, trang web được nâng cấp về mặt hiển thị, mang lại trải nghiệm trực quan cho người dùng mà không làm phức tạp code HTML. Mong rằng thông tin trên giúp bạn đọc hiểu hơn về ứng dụng và cách dùng CSS trong quá trình phát triển web.
