Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang.
Mục lục
1. Khái niệm Stylesheet là gì?
Stylesheet chính là một đặc tính quan trọng có thể được dùng trong HTML động. Dù trang web không cần có một Stylesheet nhưng việc sử dụng Stylesheet sẽ mang lại những lợi ích nhất định trong việc thiết kế và phát triển web.
Stylesheet được tạo nên từ những quy tắc kiểu cách, báo cho trình duyệt biết được cách trình bày một tài liệu mong muốn. Nó chính là kỹ thuật thêm vào các kiểu như font chữ, màu chữ, khoảng cách,… cho các trang web.
2. Lợi ích của Stylesheet là gì
- 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.
3. Chức năng của stylesheet
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,…
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
Đối với thay đổi kiểu nội tuyến, bạn có thể tạo ra các kiểu động mà không thêm bất kỳ một kịch bản nào vào trang. Kiểu này được gán trực tiếp cho một phần tử nào đó, nó không áp dụng vào tất cả các phần tử thuộc một loại nào hay một lớp nào. Kiểu nội tuyến được định nghĩa bằng thuộc tính Style đối với các phần tử của thẻ đó.
Khi muốn sử dụng kịch bản để thay đổi kiểu nội tuyến vào bất cứ lúc nào, lúc đó bạn phải sử dụng đến đối tượng kiểu (Style Object). Đối tượng kiểu này hỗ trợ mọi tính chất mà CSS hỗ trợ đối với các kiểu.
4. Thiết lập thuộc tính trong stylesheet
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
- Thuộc tính về vị trí: clip, height, left, top, z-index
Như vậy, stylesheet là một kỹ thuật đơn giản để thêm các kiểu vào các trang web. Nó mang lại lợi ích làm thay đổi về thiết kế trên trang. Bạn nên tìm hiểu và thực hành nhiều để có hiểu rõ kiến thức về stylesheet là gì và áp dụng nó vào trong lập trình và thiết kế.
