Nội dung bài viết
#

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

Nội dung bài viết

    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 la gi

    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.


    • css viết tắt của từ gì
    • cascading style sheets
    • css code style
    • css là gì
    • style css

    Mua tên miền .VN tại BKHOST

    Giá chỉ từ 750k/năm. Kiểm tra tên miền .VN đẹp và đăng ký ngay hôm nay!

    mua tên miền vn

    Tôi là Trịnh Duy Thanh, CEO & Founder Công ty Cổ Phần Giải Pháp Mạng Trực Tuyến Việt Nam - BKHOST. Với sứ mệnh mang tới các dịch vụ trên Internet tốt nhất cho các cá nhân và doanh nghiệp trong nước và quốc tế, tôi luôn nỗ lực hết mình nâng cấp đầu tư hệ thống phần cứng, nâng cao chất lượng dịch vụ chăm sóc khách hàng để đem đến những sản phẩm hoàn hảo nhất cho người tiêu dùng. Vì vậy, tôi tin tưởng sẽ đem đến các giải pháp CNTT mới nhất, tối ưu nhất, hiệu quả nhất và chi phí hợp lý nhất cho tất cả các doanh nghiệp.
    Bình luận
    Trượt lên đầu trang
    Miễn phí cước gọi
    Chat ngay qua Zalo
    Chat ngay qua Messenger
    Bạn đã hài lòng với trải nghiệm trên Bkhost.vn?
    Cảm ơn lượt bình chọn của bạn, Chúc bạn 1 ngày tốt lành !