Giới thiệu về style sheets trong html

Stylesheet được tạo nên từ các qui tắc kiểu cách, mà nó báo cho trình duyệt biết được cách trình bày một tài liệu. Stylesheet là một kỹ thuật thêm vào các kiểu (font, màu, khoảng cách) cho những trang web.

Khái niệm, chức năng và các thuận lợi của style sheet

Khái niệm, chức năng và các thuận lợi của style sheet
Khái niệm, chức năng và các thuận lợi của style sheet

Một tính năng quan trọng của HTML động 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 ấy. Sự thay đổi này có thể đáp ứng đối với sự tương tác người dùng hoặc thậm chí đối với sự thay đổi tình trạng như sự kiện thay đổi kích thước.

Có hai cách để thay đổi kiểu trên trang web của chúng ta:

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

Khi sử dụng kiểu nội tuyến, chúng ta có thể tạo ra các kiểu động mà không thêm bất cứ một kịch bản nào vào trang của chúng ta.

Một kiểu nội tuyến là kiểu được gán trực tiếp cho một phần tử nào đó. Kiểu này 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 phần tử của thẻ đó.

Nếu muốn đặt màu cho phần tử <H1> màu đỏ, chúng ta phải đặt thuộc tính STYLE bên trong thẻ H1 như sau:

<H1 STYLE=color:red>
    

Nếu chúng ta 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, thì lúc ấy bạn phải sử dụng đến đối tượng kiểu (Style Object). Đối tượng kiểu hỗ trợ mọi tính chất mà CSS hỗ trợ đối với các kiểu. Để dùng thuộc tính trong kịch bản:

  • Bỏ dấu gạch nối ra khỏi tên của kiểu CSS
  • Thay đổi chữ cái đầu tiên của từ sau dấu gạch nối thành từ viết hoa.
font-weight của CSS trở thành fontWeight trong DHTML hoặc text-align thành textAlign

<HTML>
     <HEAD>
	<TITLE>Setting Properties</TITLE>
     </HEAD>
     <BODY>
         <P style = color:aqua;font-Style:italic;text-Align:center;> This paragraph has an inline style applied to it
         <BR>
         <P> This paragraph is displayed in the default style.
         <BR>
         <P>Can you see the <SPAN style = color:red>difference </SPAN> in this line ? 
      </BODY>
</HTML>
Content Protection by DMCA.com