Có những có chế định nghĩa stylesheet nào
|
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ì
3. Chức năng của stylesheetTí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:
Đố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 stylesheetBạn có thể thiết lập nhiều thuộc tính trong stylesheet
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ế. Embedded Style Sheets (Định dạng kiểu dáng nhúng) Ta thấy rằng nếu ta làm việc với một trang web có nhiều thông tin như các trang web 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 xây dựng các định dạng kiểu dáng theo kiểu Inline như trên thì rất tốn thời gian và khả năng thay đổi giao diện về sau là rất khó khăn. Có một cách xây dựng định dạng kiểu dáng khác đó là ta xây dựng các định dạng thêm vào các đối tượng có sẳn. Chúng ta xem ví dụ 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> <h2> Định dạng Inline Style Sheet h2> <p> Định dạng inline style sheet, các thuộc tính được đặt bên trong thẻ p> <h2> Định dạng Embeded Style Sheet h2> <p> Embedded style sheet là 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 sử dụng lại trong toàn trang, vì vậy khi bạn muốn thay đổi giao diện bạn chỉ cần vào thay đổi thông tin của H1 trên cùng mà không cần quan tâm đến các đối tượng 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 tệp tin riêng biệt, tệp tin đó có phần mỡ rộng là .css. Tệp tin này có thể chỉ có các thẻ chứa các định dạng style được định nghĩa. Chú ý là không có thành phần HTML nào khác với cặp thẻ có thể được sử dụng trong tệp tin này. Tệp tin này liên kết với trang web bằng cách sử dụng thẻ được định nghĩa giữa cặp thẻ … . Đoạn mã dưới đây biểu thị cách 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ẽ sử dụng một style sheet, HREF="style.css" chỉ định rằng trang web của ta sẽ tham chiếu đến tệp 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 liên kết. Chúng ta hãy xem xét đoạn trích ngắn dưới đây, tệp tin đầu tiên đó là tệp tin style.css, đó là tệp tin mỡ rộng chứa các định nghĩa style sheet. Tệp tin thứ hai là tệp tin MyStylePage.html đó là tệp tin HTML tệp tin này sử dụng các định nghĩa style được lưu trong tệp tin , style.css Tệp tin: style.css (tệp tin lưu các định nghĩa style sheet) Tệp tin: MyStylePage.html (định dạng được định nghĩa trong tệp tin style.css) An External Style Sheet
Định dạng External Style Sheet
External Style Sheet là kiểu định dạng chủ được lưu trong một file biệt lập khác. |
