CSS là gì? Đặc điểm và ví dụ về CSS trong Website

Có rất nhiều loại ngôn ngữ được sử dụng nhằm đơn giản hóa quá trình triển khai trang web. Một trong số đó là CSS được tích hợp với ngôn ngữ đánh dấu HTML phù hợp với hầu hết các tài liệu trên web. Vậy cụ thể CSS là gì? Hãy cùng BKHOST tìm hiểu ở bài viết dưới đây.

CSS là gì?

CSS – Cascading Style Sheets là một kỹ thuật tích hợp với ngôn ngữ HTML để phát triển UI tuân thủ các các quy tắc của Separation of Concern. Cụ thể thì CSS là một ngôn ngữ được triển khai nhằm đơn giản hóa định dạng các trang HTML.

Separation of Concerns là gì?

Separation of Concern (SoC) cung cấp các phần tử HTML cho trang web như phông chữ, màu nền, bố cục, văn bản, tiêu đề hay các bảng. Ngoài ra, CSS cũng có khả năng kiểm soát các yếu tố của trang như bố cục đầu cuối, nội dung bài viết, các phần và thanh bên. Điều này mang lại nhiều lợi ích khi nội dung được định dạng hiển thị trên máy tính để bàn, máy tính bảng hay điện thoại thông minh.

Lịch sử của CSS

Trước kia, các tệp HTML ngoài ngôn ngữ và các nội dung đánh dấu thì còn bao gồm cả thông tin định dạng và JavaScript. Do đó, các trang web gặp nhiều vấn đề như khó đọc, viết, cập nhật và bảo trì.

Hiện nay, các trang web được phát triển các tính năng nâng cao hỗ trợ phân tách HTML, định dạng nội dung tập lệnh và thông tin Style thành các tệp riêng biệt. Điều này trở thành một phương pháp giúp cho việc bảo trì trở nên dễ dàng hơn. Một trang web hiện đại được cấu tạo từ ba yếu tố chính đó là CSS, tệp JavaScript và tệp HTML.

Style của CSS

Về cơ bản, CSS là một kiểu thông tin Style của trang web được xác định trong ba nơi khác nhau, còn được gọi là cấp độ Style. Thông thường, thông tin Style sẽ được thực thi trong một tệp riêng biệt so với phần mở rộng .css. Do đó, các thông tin định dạng trong CSS ngoài sẽ được thực hiện thông qua thẻ liên kết HTML. Mỗi trang web có thể liên kết với số 0, 1 hoặc các tệp External Cascading Style Sheet khác bằng cách sử dụng nhiều thẻ liên kết khác nhau.

{{EJS0}}

Có một số trường hợp thông tin Style được viết trong thẻ <style> trong trang web như trên các dự án nhỏ hay một trang web bất kỳ thực hiện thao tác ghi đè thông tin Style trong tệp External Cascading Style Sheet. Đây được gọi là cấp độ Internal Style trong trang web có khả năng ghi đè bất kỳ thông tin Style nào được cung cấp bởi External Cascading Style Sheet.

Inline Style và External Style

Hầu hết trong tất cả các thẻ HTML5 đều sở hữu thuộc tính Style cho phép người dùng có thể thực hiện một số công việc như ghi đè thông tin Style trong cấp độ Style hoặc External Style. Thẻ HTML có khả năng xác định thông tin CSS được gọi là Inline Style.

Trên thực tế, các quy tắc cho thấy rằng parent-level Style bị ghi đè bởi page-level Style, còn page-level Style bị ghi đè bởi tag-level Style.

Cú pháp của Style Sheet

Cú pháp của CSS khá đơn giản bao gồm tên phần tử Style được gọi là bộ chọn CSS nằm trong dấu ngoặc nhọn. Thành phần này bao gồm nhiều tính năng khác nhau như kích thước form chữ và màu sắc.

Tổ chức W3C đã xác định các thuộc tính của CSS mặc dù một số trình duyệt có thể cung cấp hỗ trợ bổ sung bằng cách xác định các trường tùy chỉnh riêng biệt. Điều này thường được thực hiện cho các thuộc tính được đề xuất dự kiến sẽ được đưa vào các bản phát hành CSS trong tương lai.

Cách hoạt động của CSS selectors

Bộ chọn CSS bao gồm thẻ HTML, thuộc tính của thẻ HTML hay các trạng thái của phần tử cụ thể như vô hiệu hóa trường đầu vào, di chuột của liên kết Anchor. Do đó, bộ chọn CSS này có thể dễ dàng tùy chỉnh Style của các thành phần tùy thuộc vào trạng thái của chúng. Thậm chí là xác định cách chúng được phân loại trên một trang cung cấp cho nhà thiết kế đồ họa trong việc hiển thị trang web trên trình duyệt.

Ví dụ về HTML và CSS

Một trang HTML sử dụng Internal style và Inline style để xác định thông tin của CSS:

Lưu ý: Khi trang web được hiển thị thì mọi văn bản không tồn tại trong Style sẽ hiển thị dưới dạng văn bản màu đen trên nền trắng.

Mọi văn bản nằm trong thẻ đoạn văn không có Inline Style đều lấy thông tin định dạng từ Internal Style Sheet. Sau đó, nó sẽ được hiển thị dưới dạng văn bản in nghiêng màu xanh lam trên nền bạc với kích thước là 14 pixel.

Khi sử dụng Inline Style thì Internal Style sẽ tiến hành ghi đè và khớp với các thuộc tính. Điều này tạo ra các văn bản hiển thị dưới dạng in nghiêng màu trắng trên nền bạc và có kích thước 20 pixel.

Tổng kết về CSS

Như vậy, trên đây là một số thông tin cơ bản về công nghệ CSS mà chúng tôi đã tóm lược. Đây được xem là một công cụ tích hợp với HTML để phát triển web rất hữu ích dành cho các lập trình viên.

Nếu bạn có thắc mắc về CSS hay muốn tìm hiểu thêm những công cụ tích hợp HTML khác, hãy để lại ở bên bình luận bên dưới, BKHOST sẽ trả lời bạn trong thời gian sớm nhất.

P/s: Bạn cũng có thể truy cập vào Blog của BKHOST để đọc thêm các bài viết chia sẻ kiến thức về lập trình, quản trị mạng, website, domain, hosting, vps, server, email,… Chúc bạn thành công.