StyleSheet trong HTML

Tổng quan

CSS miêu tả cách mà tài liệu được hiển thị trên màn hình, trong khi in. W3C đã tích cực đẩy mạnh sự sử dụng của Style Sheet trên Web từ khi hiệp hội được thành lập năm 1994.

CSS cung cấp các cách dễ dàng và hiệu quả để xác định các thuộc tính khác nhau cho các thẻ HTML. Sử dụng CSS, bạn có thể xác định số lượng các thuộc tính kiểu cho một phần tử HTML đã cho. Mỗi thuộc tính có một tên và một giá trị, ngăn cách nhau bởi dấu hai chấm (:). Mỗi thuộc tính ngăn cách bởi dấu chấm phẩy.

Khái niệm StyleSheet trong HTML

Stylesheet là một hình thức phân tách nội dung trình bày và nội dung cho thiết kế web trong đó phần đánh dấu của trang web chứa nội dung và cấu trúc ngữ nghĩa của trang, nhưng không xác định bố cục trực quan của nó.

Lợi ích của StyleSheet trong HTML

• Nạp chồng các quy ước của trình duyệt
• Hiển thị font thay đổi màu mà không làm thay đổi cấu trúc trang
• Sử dụng lại các Stylesheet, nhúng stylesheet bên trong tài liệu HTML, kết nối tất cả các trang trên website đến stylesheet, đảm bảo được cách nhìn và cảm nhận thông dụng về trang website.
• Nhìn chung, trải nghiệm của người dùng về một trang web sử dụng StyleSheet sẽ nhanh hơn so với các trang web không sử dụng công nghệ này. Nhìn chung thì trang đầu tiên có thể sẽ tải chậm hơn – bởi vì StyleSheet và nội dung sẽ cần được chuyển. Các trang tiếp theo sẽ tải nhanh hơn vì không cần tải xuống thông tin kiểu – tệp CSS đã nằm trong bộ nhớ cache của trình duyệt.

Chức năng của StyleSheet trong HTML

Tính năng quan trọng của HTML động chính là những kiểu style động, nghĩa là bạn có thể thay đổi kiểu của những phần tử HTML trên trang sau khi chúng được hiển thị trên trang đó. Sự thay đổi này có thể đáp ứng đối với sự tương tác của người dùng hoặc đối với sự thay đổi tình trạng như sự thay đổi kích thước, màu sắc,…Stylesheet tạo ra các thay đổi về kích thước, màu sắc,… trên trang, Stylesheet tạo ra các thay đổi về kích thước, màu sắc,… trên trang.

Có 2 cách để thay đổi kiểu trên trang web:

• Thay đổi kiểu nội tuyến.
• Viết kịch bản để thay đổi kiểu.

Thiết lập thuộc tính trong StyleSheet trong HTML

• Bạn có thể thiết lập nhiều thuộc tính trong stylesheet

• Thuộc tính font: font, font-size, font-style

• Thuộc tính văn bản: text-align, text-indent, vertical-align

• Thuộc tính hộp: border, border-width, border-bottom, border-color

Tham khảo các bài viết về thiết kế website: 

Xem thêm: Bảng giá thiết kế website