Khái niệm Stylesheet là gì? đây chính là một trong những thuật ngữ mà nhiều lập trình viên đã gặp phải. Vậy Stylesheet là gì? Qua nội dung sau đây sẽ bổ sung thêm nhiều thông tin đến độc giả, cùng tham khảo nhé.
Mục Lục
Khái niệm Stylesheet là gì?
Stylesheet chính là một đặc tính đặc biệt sẽ đượ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ẽ đem đến những ích lợi chắc chắn trong việc thiết kế và phát triển website.
Stylesheet được tạo có thể từ những quy tắc kiểu cách, báo cho trình duyệt web hiểu được cách giải thích 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 website.
Lợi ích của Stylesheet là gì?
- Nạp chồng các quy ước của trình duyệt web
- Hiển thị font điều chỉnh màu mà không làm thay đổi cấu trúc trang
- Dùng lại các Stylesheet, nhúng stylesheet bên trong tài liệu HTML, liên kết chặt chẽ tất cả các trang trên site đến stylesheet, đảm bảo được cách nhìn và cảm nhận thông dụng về trang website.
Chức năng của stylesheet
Công dụng quan trọng của HTML động chính là những kiểu style động, nghĩa là bạn có thể khác biệt 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ự điều chỉnh kích thước, sắc màu,…
Có 2 cách để điều chỉnh kiểu trên trang web:
- Thay đổi kiểu nội tuyến
- Viết kịch bản để điều chỉnh kiểu
Đối với điều chỉnh kiểu nội tuyến, bạn có khả năng sản sinh 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 thực hành 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 khái niệm bằng thuộc tính Style đối với các phần tử của thẻ đó.
Khi mong muốn dùng kịch bản để điều chỉnh kiểu nội tuyến vào bất cứ lúc nào, lúc đó bạn phải dùng đến đối tượng mục tiêu 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 loại.
Thuật ngữ liên quan
- Style Sheet
- Cascading Style Sheet (CSS)
- Cascading Style Sheets Level 1 (CSS1)
- Cascading Style Sheets Level 2 (CSS2)
- Cascading Style Sheets Level 3 (CSS3)
- Commit
- Access Modifiers
- Acyclic
- Appending Virus
- Armored Virus
Cài đặt thuộc tính trong stylesheet
Bạn có thể cài đặt nhiều tính chất trong stylesheet
- Thuộc tính font: font, font-size, font-style
- Tính chất văn bản: text-align, text-indent, vertical-align
- Tính chất hộp: border, border-width, border-bottom, border-color
- Tính chất về vị trí: clip, height, left, top, z-index
Các loại Style Sheet
Embedded Style Sheets (Định dạng kiểu dáng nhúng)
Khái niệm Stylesheet là gì? Ta thấy rằng nếu như ta thực hiện công việc với một trang website có nhiều thông tin như các trang website về tin tức, giới thiệu sản phẩm…thì số lần lặp lại của các tiêu đề, nội dung là rất lớn. Nếu ta tạo ra các định dạng kiểu dáng theo kiểu Inline như trên thì cực kì mất nhiều thời gian và khả năng thay đổi giao diện về sau là rất khó khăn.
Xem thêm Công nghệ blockchain 4.0 và những điều bạn cần biết về công nghệ này
Chúng ta xem chẳng hạn như sau đây:
<html>
<head>
<title>Định dạng Embedded Style Sheettitle>
<style type=”text/css”>
H1 font-style:italic;background:yellow;color:red
style>
head>
<body>
<h1>
Định dạng Inline Style Sheet
h1>
<p>
Định dạng inline style sheet, các tính chất được đặt bên trong thẻ
p>
<h1>
Định dạng Embeded Style Sheet
h1>
<p>
Embedded style sheet thuộc một phần của trang HTML.
p>
body>
html>
Ta thấy rằng việc xây dựng đối tượng H1 với các tham số kiểu dáng màu nền…được dùng lại trong toàn trang, vì thế khi mà bạn muốn điều chỉnh bố cụ và giao diện bạn chỉ cần vào thay đổi nội dung của H1 trên cùng mà không cần quan tâm đến các đối tượng mục tiêu sử dụng nó.
External (Linked) Style Sheets (Định dạng kiểu dáng mở rộng)
Định dạng kiểu external được xây dựng và lưu trên một file tin riêng biệt, tệp tin đó có phần mỡ rộng là .css. File tin này có khả năng chỉ có các thẻ chứa các định dạng style được định nghĩa. Lưu ý là không hề có thành phần HTML nào khác với cặp thẻ có khả năng được sử dụng trong file tin này.
Tệp tin này liên kết với trang website bằng việc dùng thẻ được định nghĩa giữa cặp thẻ … . Đoạn mã dưới đây biểu thị bí quyết liên kết style sheet sử dụng thuộc tính link.
Ở phần phía trước của mã lệnh, REL=stylesheet chỉ định trang này sẽ dùng một style sheet, HREF=”style.css” chỉ định rằng trang web của ta sẽ tham chiếu đến file tin style.css còn TYPE=”text/css” xác nhận rằng nó tham chiếu đến file .css nhằm xác định cụ thể đối tượng mục tiêu liên kết.
file tin: style.css (tệp tin lưu các định nghĩa style sheet)
file tin: MyStylePage.html (định dạng được định nghĩa trong file tin style.css)
Định dạng External Style Sheet
Khái niệm Stylesheet là gì? External Style Sheet là kiểu định dạng chủ được lưu trong một tệp biệt lập khác.
Một trang HTML có thể chứa cả hai định dạng kiểu dáng external và embedded có sự kết hợp với nhau. Trong nhiều trường hợp việc khai báo định dạng cho một đối tượng mục tiêu chi tiết nào đó bằng định dạng kiểu dáng embedded sẽ ghi đè lên định dạng external trên cùng trang.
Xem thêm :Công nghệ thông tin ICT là gì? Tầm quan trọng của ICT
Qua bài viết trên của Coder.com.vn đã cung cấp các thông tin về khái niệm Stylesheet là gì? Lợi ích của Stylesheet là gì?. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc, cùng tham khảo nhé.
Mỹ Phượng – Tổng hợp & chỉnh sửa
Tham khảo ( kdtqt.duytan.edu.vn, pokimobile.vn, … )
Bình luận về chủ đề post