Các style sheet trong HTML

Giới thiệu DHTML

Sự ra đời của lập trình script đã thêm vào phần động cho các trang web. Người dùng có thể tương tác với trang web. Tuy nhiên, một số hạn chế vẫn còn tồn tại. Bất kỳ sự xác nhận dữ liệu nào hoặc việc lập trình script đều phải được thực hiện trên máy chủ. Để thay đổi nội dung hoặc một kiểu của trang, thì trang đó phải được viết đè lên hoàn toàn. Bất cứ tương tác nào của người dùng cũng đều thông qua máy Web server.

Với mỗi phiên bản trình duyệt mới, lại thêm vào các đặc tính tốt hơn cho HTML. Ngày nay Internet và Netscape Navigator hỗ trợ một mô hình đối tượng tài liệu “Document Object Model” mà ở đó các phần tử HTML và các thẻ được coi như một đối tượng. Những đối tượng có những phương thức, thuộc tính và sự kiện có thể lập trình để điều khiển các hoạt động của chúng. Ví dụ, cú pháp thêm vào để thay đổi màu của văn bản trong phần tử phân đoạn <p> khi người dùng kích chuột lên nó.

Các script (là một chương trình nhỏ) có thể thực thi trong trình duyệt. Điều này có nghĩa là dữ liệu có thể được thao tác, định dạng và thay đổi một cách năng động ở máy khách (client) mà không cần quá nhiều sự hỗ trợ từ máy chủ. Tương tác của người dùng giờ đây có thể được xử lý bởi chính máy khách.

Chú ý: Một ứng dụng Client/Server được tách ra hai phần một là giao diện người dùng “front-end client” và phần “back-end server”. Client là một phần của ứng dụng, nó trình bày dữ liệu đối với người dùng. Thông thường Client “giao diện người dùng” không thực thi các chức năng của cơ sơ dữ liệu, thay vào đó, client gởi các yêu cầu dữ liệu đến một máy chủ “server”, định dạng và hiển thị kết quả. Vai trò của máy chủ “server” cung cấp xử lý hoặc thông tin đến cho client. Máy chủ cung cấp dữ liệu đến client, nhưng đôi khi, Máy chủ “server” có thể cần thực hiện một số công việc xử lý đem lại một kết quả dữ liệu yêu cầu. Ví dụ nếu một client yêu cầu về dữ liệu bán hàng cho một vùng cụ thể, Server cần thực hiện chính xác một số xử lý dữ liệu từ tập tất cả các dữ liệu và định dạng nó theo yêu cầu từ phía client.

Mỗi công ty Microsoft hay Netscape đều có cách triển trai HTML động riêng của họ. Microsoft tập trung vào dùng các Cascading Style Sheet (CSS). Chúng ta có thể dùng script để tương tác những phần tử CSS.

Netscape, ngược lại, dựa vào các phương thức dùng các tầng. Thẻ LAYER được dùng để cung cấp hầu hết các thuộc tính của HTML động.

Các đặc điểm của DHTML

DHTML không dừng lại ở một số phần mở rộng của HTML. Trong phần này sẽ thảo luận về các đặc điểm của DHTML và cách thức dùng nó để thêm vào những tính năng động cho trang web.

• Kiểu động (Dynamic Style)- Trong các phiên bản của HTML trước đây, nếu chúng ta muốn thay đổi kiểu hay nội dung của một trang web sau khi nó được hiển thị trong trình duyệt thì toàn bộ trang đó phải được nạp lại ‘refresh’. Điều đó có nghĩa là yêu cầu phải được gởi đến máy chủ thành một trang mới để hiển thị. Đối với người dùng thì đây là một qui trình rõ ràng. Tuy nhiên, nếu trang đó phải được nạp lại ‘refresh’ thường xuyên sẽ tốn nhiều thời gian và làm cho máy chủ trở nên quá tải.

Trong HTML động, Cách làm này khác một chút. Bằng cách dùng các bảng kiểu ‘style sheets’, Chúng ta có thể xác định màu, kiểu hoặc kích cỡ của nội dung trang. Chúng ta có thể thay đổi kiểu của trang mà không cần gởi đến máy chủ ‘Web server’ cho mỗi lần thêm vào các thẻ và thuộc tính. Điều đó có nghĩa là chúng ta có thể thay đổi màu, font, kích cỡ hoặc nội dung văn bản khi đáp lại những tương tác của người dùng. Trong HTML động, kiểu liên quan đến cách thức, định dạng xuất hiện trên trang web hơn là nội dung. Kiểu ‘style’ bao gồm màu sắc, kiểu chữ, khoảng cách, thụt đầu dòng, định vị và xuất hiện của văn bản.

• Nội dung động (Dynamic Content)- Được hỗ trợ bởi Internet Explorer. Ở đây chúng ta có thể thay đổi chữ và hình ảnh trên trang web sau khi nó hiển thị. Chúng ta cũng có thể thay đổi nội dung của trang đó khi đáp lại dữ kiện nhập vào hay sự kiện người dùng kích chuột vào.

• Định vị (Positioning) - Các phiên bản của HTML trước đây, không kiểm soát được vị trí của một phần tử trên trang web. Theo đó vị trí chính xác của trang đó về mặt tọa độ thì không thể chỉ ra được. Việc định vị dành cho trình duyệt. HTML chỉ có thể mô tả nội dung và vị trí tương đối của các phần tử.

  Trong HTML động, Chúng ta có thể chỉ ra vị trí chính xác (tuyệt đối hay tương đối), mối quan hệ giữa tọa độ x và y. Một khi trang web được hiển thị, chúng ta có thể di chuyển các phần tử trên trang đó làm cho nó trở nên động.

  • Định vị tuyệt đối – chỉ rõ vị trí chính xác theo các điểm ‘pixels’.
  • Định vi tương đối – chỉ ra vi trí tương đối của các phần tử. Trình duyệt xử lý việc định vị hiện thời

  Đặc điểm việc định vị cũng cho phép chúng ta xác định thứ tự sắp xếp ‘z-order’của các phần tử. Có nghĩa là các đối tượng này nằm chồng lên đối tượng khác.

• Liên kết dữ liệu (Data Binding) – Trong HTML động, chúng ta có thể kết nối một cơ sở dữ liệu vào bảng của trang web. Nó được hỗ trợ bởi Internet Explorer. Khi trang được nạp lên, dữ liệu từ cơ sở dữ liệu trên máy chủ được hiển thị trong bảng. Dữ liệu có thể được sắp xếp, lọc và hiển thị cho phù hợp với yêu cầu.

• Downloadable Fonts (Có khả năng tải Font chữ)- Được Netscape hỗ trợ. Downloadable fonts là một đặt điểm cho phép ta chèn các font mà tùy chọn trên trang web. Chúng ta có thể gói font trong trang. Điều này đảm bảo rằng văn bản trong trang web đó luôn luôn hiển thị theo font mà ta chọn. Đây là đặc điểm quan trọng bởi vì thông thường nếu các font được chỉ ra không có trong máy của người dùng thì trình duyệt sẽ dùng font mặc định có sẵn. Điều này sẽ làm hủy bỏ mục đích chỉ ra kiểu font của bạn.

• Scripting – Chúng ta có thể viết các script để thay đổi kiểu và nội dung của trang web. Script này được lồng vào trong trang web.

• Cấu trúc đối tượng (Object Structure)– HTML động theo một cấu trúc đối tượng theo đó mỗi phần tử được đối xử như một đối tượng trong cấu trúc. Mỗi đối tượng có thể được truy cập và lập trình độc lập.

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

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ẻ đó.

<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>
    

Kết quả của ví dụ 2

• Lợi ích của các stylesheet – Các stylesheet có thể được dùng để:
  • Nạp chồng trình duyệt: - Mỗi trình duyệt đều có thể hiển thị các trang web theo cách riêng của nó. Trước đây các nhà phát triển không kiểm soát được các trang web hiển thị trên trình duyệt. Suy cho cùng bạn không biết trình duyệt nào mà người dùng cách nửa vòng trái đất sử dụng. Nhờ có các stylesheet bạn có thể nạp chồng các qui ước của trình duyệt và đặt theo cách riêng của chúng ta. Chẳng hạn, bạn có thể xác định kiểu mà trong đó một phần tử <H1> cần hiển thị:

    <H1><FONT SIZE=3 COLOR=AQUA>
        <B>Overriding the browser</B></FONT></H1>
        

  • Bố cục trang (Page layout) – Những stylesheet có thể dùng để hiển thị font thay đổi màu mà không làm thay đổi cấu trúc của trang web. Điều này có nghĩa là với tư cách là một nhà thiết kế bây giờ bạn có thể tách biệt những yêu cầu về thiết kế hình ảnh trực quan từ cấu trúc logic của trang web và địa chỉ là hai chuyện hoàn toàn khác nhau.

    Khi sử dụng các biện pháp liên quan trong stylesheet của bạn, bạn có thể thể hiện các tài liệu sao cho đẹp mắt trên bất kỳ màn hình nào và theo bất kỳ độ phân giải nào.

  • Sử dụng lại các stylesheet – Môt khi đã định nghĩa kiểu thông tin, chúng ta có thể nhúng stylesheet bên trong tài liệu HTML. Lần lượt thay thế, chúng ta có thể kết nối tất cả các trang trên website đến stylesheet. Điều này chắc chắn rằng các trang web của chúng ta đều có cùng diện mạo thông tin khi được hiển thị. Vì vậy, bạn có thể có được nền chung của trang ví dụ như logo của trang và một số thông tin chuẩn(cho các trang) trong một stylesheet. Điều này sẽ đảm bảo được cách nhìn và cảm nhận thông dụng về trang website. Cứ thử hình dung xem có vài trăm trang web và bạn phải xác định kiểu của mỗi trang một cách độc lập.
  • Chỉ cần làm một lần thật tốt – Chúng ta có thể tạo một stylesheet và được liên kết đến nhiều tài liệu. Tất cả những tài liệu sẽ có diện mạo giống nhau. Tuy nhiên, quan trọng nhất là khi bạn thực hiện thay đổi stylesheet thì tất cả các tài liệu được kết nối vào stylesheet sẽ bị thay đổi theo.

Qui tắc stylesheet

Stylesheet phân cấp(cascading style sheet) định nghĩa các kiểu có thể được áp dụng vào các trang hoặc các phần tử của trang.

• Qui tắc kiểu (Style Rule)- Stylesheet phân cấp là một tập hợp các qui tắc. Qui tắc định nghĩa kiểu của tài liệu. Ví dụ, chúng ta có thể tạo ra một qui tắc kiểu được xác định cho tất cả phần tiêu đề <H1> hiển thị màu vàng xanh. Qui tắc kiểu có thể ứng dụng vào các thành phần được chọn của trang web. Ví dụ, chúng ta có thể xác định một đoạn văn bản bất kỳ in đậm và in nghiêng trên trang. Điều này được gọi là khai báo kiểu có sẵnmà nhờ đó các kiểu được áp dụng vào các phần tử HTML đơn lẻ trên một trang web.

• Style Sheet – Là một danh mục các qui tắc kiểu và có thể nhúng vào bên trong tài liệu HTML. Trong trường hợp đó, nó được gọi là stylesheet nhúng. Stylesheet cũng có thể được tạo ra bằng một file bên ngoài và được liên kết với tài liệu HTML.

• Các qui tắc (Rules) – Bảng kiểu có thể có một hay nhiều qui tắc. Phần đầu của qui tắc gọi là bộ chọn (Selector). Mỗi bộ chọn có các thuộc tính và các giá trị liên quan đến nó.

RuleSelector {Declarations property: value; property: value; ... }

Phần của qui tắc được kèm theo trong phạm vi các dấu ngoặc móc được gọi là khai báo. Khai báo có hai phần, phần trước dấu hai chấm (:) là thuộc tính và phần nằm sau dấu hai chấm là giá trị của thuộc tính đó.

Các khai báo được phân cách bởi dấu chấm phẩy (;). Ta nên đặt dấu chấm phẩy sau lần khai báo cuối cùng.

H1 {color: blue}
    

 {Property: Value} 

Mỗi qui tắt có thể tách rời nhau trong phạm vi thẻ STYLE.

<HTML>
      <HEAD>
            <STYLE TYPE=”text/css”>
                 H1 {color:limegreen}
                 H1 {font-family:Arial}
                 H2 {color:limegreen}
                 H2 {font-family:Arial}
            </STYLE>
      </HEAD>
      <H1>This is the H1 element</H1>
      <H2>This is the H2 element</H2>
      <H3>This is the H3 element with its default style as displayed in the browser</H3>
</HTML>
   

text/css chỉ ra kiểu ‘style’ được dùng ở đây là stylesheet phân cấp ‘cascading style sheet’

Kết quả

Kết quả của ví dụ 4

Thay vào đó chúng ta có thể nhóm các qui tắc. Mỗi khai báo được tách ra bởi dấu chấm phẩy.

<HTML>
    <HEAD>
        <STYLE TYPE="text/css">
	       H1, H2{color:limegreen;font-family:Arial;}
         </STYLE>
     </HEAD>
     <H1>This is the H1 element</H1>
     <H2>This is the H2 element</H2>
     <H3>This is the H3 element with its default style as displayed in the browser</H3>
</HTML>
   

Kết quả của ví dụ 5

Các Selector (selector ) trong style sheet (hay các giả lớp)

Ta có thể dùng các giả lớp trong các selector nhưng không thể dùng chúng trong HTML. Về cơ bản, chúng dùng những thông tin bên ngoài để tác động đến việc định dạng.

A:link { color: red } /* unvisited link */
    A:visited { color: blue } /* visited links */
    A:active { color: lime } /* active links */
    

Selector có thể định nghĩa như là “một chuỗi kí tự xác định ra các phần tử và các quy tắc tương ứng áp dụng cho các phần tử ấy”.

Có hai kiểu selector cơ bản:

• Selector đơn

  Đây là những selector dễ sử dụng nhất. Selector đơn mô tả một phần tử bất chấp vị trí của nó ở đâu trong cấu trúc tài liệu. Bộ nhận dạng tiêu đề H1 là một điển hình. Sau đây là một số kiểu của selector đơn.

  • Selector HTML

    Những selector này sử dụng tên của phần tử HTML và bỏ đi dấu móc . Vì vậy, thẻ <P> trong HTML trở thành P và khi đó, nó được xem như là một selector. Ví dụ sau đây minh họa điều đó

    <HTML>
        <HEAD>
            <STYLE TYPE="text/css">
                   P{font-style:italic; font-weight:bold; color:limegreen}
            </STYLE>
        </HEAD>
        <Body>
             <P> These selectors use the names of HTML elements. The only difference is that you remove the brackets. </P>
        </BODY>
    </HTML>
       

    Kết quả

    Kết quả ví dụ 7
  • Selector lớp

    Những selector này sử dụng thuộc tính CLASS của các phần tử HTML. Mọi phần tử khi hiển thị có một thuộc tính CLASS được sử dụng để gán vào một định danh (identifier). Ta có thể gán một tên lớp duy nhất cho mọi phần tử khác. Ngoài ra, ta cũng có thể gán định danh lớp cho nhiều phần tử cùng loại khi ta muốn hiển thị các trạng thái khác nhau so với dạng chuẩn. Ví dụ, ta có thể muốn <H2> xuất hiện với nhiều màu khác nhau. Trong trường hợp đó, ta sử dụng định danh lớp cho <H2>.

    Selector lớp có dấu chấm (.) đứng trước gọi là ký tự cờ(flag), theo sau là tên lớp do chúng ta chọn. Tốt hơn hết nên chọn những tên lớp theo mục đích của chúng chứ không nên chọn tên mô tả màu sắc hay kiểu của chúng. Ví dụ, ta có thể muốn đoạn A hiển thị chữ nghiêng, những đoạn khác thì hiển thị theo kiểu khác. Trong trường hợp đó, đoạn A có thể có bộ nhận dạng lớp là .slant

    <HTML>
       <HEAD>
          <STYLE TYPE="text/css">
              .water { color:blue }
              .danger { color:red }
           </STYLE>
       </HEAD>
       <BODY>                 
          <P class=water>test water
          <P class=danger>test danger
          <P> no style
          <BR>
          <EM class=danger>italic</EM>
       </BODY>
    </HTML>
      

    Kết quả của ví dụ 8

    Khi xác định một lớp kiểu, ta có thể xác định được phần tử HTML nào có thể sử dụng kiểu này. Chúng ta nên sử dụng từ khóa all, để tất các các phần tử đều có thể sử dụng nó.

    <HTML>
        <HEAD>
               <STYLE type="text/css">
      			all.hotpink {color:hotpink;}
      			P.BLUE {color:blue; font-weight:bold;}
      			H5.RED {color:red; font-weight:bold;}
                </STYLE>
         </HEAD>
         <H5 CLASS=RED>This is an H5 element that uses the RED class</H5>
         <H5 CLASS=hotpink>This is an H5 element that has been allowed to use hotpink style.</H5>
         <BODY bgColor=lavender>
                <P CLASS=BLUE>This paragraph uses the class BLUE</P>
                <P>This paragraph does not use the class BLUE</P>
                <P CLASS=hotpink>This paragraph is hotpink
          </BODY>
    </HTML>
      

    Xem kết quả trong Netscape

    Kết quả của ví dụ 9
  • Selector ID

    Selector ID sử dụng thuộc tính ID của phần tử HTML. Selector ID được dùng để áp dụng một kiểu vào riêng một phần tử nào đó trên trang Web. Ví dụ, ta có thể sử dụng một selector ID để áp dụng một kiểu đặc biệt nào đó cho phần tử <H2>. Điều đó không có nghĩa là một kiểu tương tự được áp dụng cho một phần tử <H2> khác trên trang đó, nếu không được xác định. Tương tự với việc sử dụng kiểu nội tuyến mà nhờ đó có thể áp dụng riêng cho một phần tử nào đó. Selector ID được bắt đầu bằng dấu thăng (#).

     <HTML>
    <HEAD>
          <TITLE> ID Selectors</TITLE>
          <STYLE TYPE="text/css">
        			#control {color:red}
           </STYLE>
    </HEAD>
    <BODY>
            <P id="control">Fire is of this color</H2>
            <BR>
            <P>This paragraph has no style applied
    </BODY>
    </HTML>
      

    Kết quả của ví dụ 10

    <HTML>
        <HEAD>
           <TITLE> Combining ID and Class Selectors</TITLE>
           <STYLE TYPE="text/css">
      			.forest {color:green}
      			.danger {color:red}
      			#control {color:blue}
            </STYLE>
        </HEAD>
        <BODY>
            <P class=forest>green things
            <P class=danger>fire hazards
            </P>
            <EM class=forest>more green things</EM>
            <BR>
            <EM class=danger>more fire hazards</EM>   
            <UL>
                <LI class=danger>things that burn
                <LI class=forest>things that don't burn
             </UL>  
             <P id=control> water </P>
         </BODY>
    </HTML>
     

    Kết quả của ví dụ 11

• Selector ngữ cảnh

  Selector ngữ cảnh liên quan đến ngữ cảnh của phần tử. Ví dụ, thỉnh thoảng ta có hai phần tử cùng giá trị. Phần tử chính hay phần tử cha có một phần tử con bên trong nó. Để thay đổi kiểu của phần tử con, ta phải sử dụng selector theo ngữ cảnh. Điều này dựa trên khái niệm kế thừa, phần tử con kế thừa kiểu được gán cho thẻ cha.

  Một ví dụ điển hình là phần tử <BODY>. Khi thêm một phần tử vào thẻ <BODY>, thì mỗi phần tử bên trong sẽ kế thừa các kiểu của <BODY>.

  Bây giờ làm sao để kiểm soát điều đó? Suy cho cùng, ta không muốn tất cả các phần tử trên trang Web xuất hiện cùng một kiểu. Trong trường hợp đó, chúng ta phải có sự thay đổi đặc biệt đối với các phần tử con, nói một cách khác đó là sự nạp chồng kế thừa.

  <HTML>
  
      <HEAD>
              <TITLE>Contextual selectors</TITLE>
              <STYLE TYPE="text/css">
                  BODY	
                      {color:blue;
  			background:lavender;
  			font-family:Arial;}
                      UL {color:red }
              </STYLE>
      <HEAD>
      <BODY>
      <UL>
              <LI>	mangoes
              <LI>	oranges
              <LI>	apples
              </UL>
              <OL>
                   <LI>	mangoes
                   <LI>	oranges
                   <LI>	apples
              </OL>
      </BODY>
  </HTML>
     

  Kết quả của ví dụ 12

  Selector UL trong style sheet xác định các mục trong danh sách(list item) được hiển thị màu đỏ. Chúng kế thừa phông chữ Arial từ khai báo BODY, màu đỏ từ khai báo UL. Nếu ta xác định font-family trong khai báo UL, nó sẽ nạp chồng lên khai báo của selector BODY. Không có selector OL trong style sheet, vì thế các thuộc tính của OL kế thừa từ selector BODY.

Kết hợp, liên kết và chèn một style sheet vào tài liệu HTML

Có một số cách ta có thể kết hợp style sheet với HTML

1. Phần tử STYLE
2. Thuộc tính Style
3. Phần tử Link

• Phần tử STYLE

Phần tử STYLE được chèn vào phần tử <HEAD> của tài liệu, tất cả các quy tắc được định nghĩa giữa thẻ mở và thẻ đóng. Khi hiển thị các trang, thì chỉ tài liệu nào có nhúng STYLE mới được tác động.

 <Style Type	= "text/css"> 
	H1	{color:maroon;}
	P	{color:hotpink; font-family:Arial;}
</Style>
   

Ví dụ trên là cách sử dụng phần tử <STYLE>

• Thuộc tính STYLE

Thuộc tính STYLE được sử dụng để áp dụng style sheet cho từng phần tử. Một style sheet có thể nhỏ như một luật. Khi sử dụng thuộc tính Style ta có thể bỏ qua phần tử STYLE và đặt khai báo trực tiếp vào thuộc tính Style trong thẻ mở của phần tử.

<H2 style="color: green;
    font-family: Arial">
    </H2>
    

Rõ ràng là chúng ta chỉ nên dùng kiểu này khi thay đổi kiểu cho một phần tử đặc biệt nào đó. Nếu ta có dự định áp dụng cùng kiểu trên khắp tài liệu thì lúc ấy đây không phải là cách hay. Ví dụ trên là cách sử dụng thuộc tính STYLE.

• Phần tử Link

Nếu ta muốn sử dụng phần tử LINK, thì stylesheet của ta phải là một tài liệu riêng. Sau đó chúng ta phải thêm địa chỉ Web của stylesheet vào.

<LINKREL= stylesheet
    HREF= “stylesmine.css"
    Type= "text/css" >
    

Thuộc tính “rel=stylesheet” phải được khai báo nếu không thì trình duyệt sẽ không tải được stylesheet .

Sheet1.css

   
H2 {color:blue; font-style:italic;}
P {color: limegreen;}
  

Tệp .htm

<HTML>
     <HEAD>
    	<TITLE>Linking external style sheets</TITLE>
    	<LINK REL=STYLESHEET TYPE="text/css"
          HREF="sheet1.css">
     </HEAD>
     <H2>This is an H2 element</H2>
     <BR>
     <BODY>
          <P>This is a paragraph
     </BODY>
</HTML>  

Kết quả của ví dụ 16

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

Chúng ta có thể thiết lập nhiều thuộc tính trong stylesheet. Bảng sau cho thấy nhiều thuộc tính có thể được sử dụng trong stylesheet.