Có nhiều cách để kết hợp style sheet với HTML - Phần tử STYLE
- Thuộc tính Style - Phần tử liên kết
Phần tử STYLE (STYLE element)
Phần tử STYLE được chèn vào trong phần tử <HEAD> của một tài liệu với toàn bộ luật đặt giữa các thẻ mở và đóng. Khi các trang được hiển thị, chỉ tài liệu mà có STYLE được nhúng vào mới bị tác động. Thẻ <STYLE> có một tham số -- TYPE. Tham số này xác định kiểu Internet Media như “text/css”.
Ví dụ: <HTML> <STYLE TYPE=”text/css”> H1 {color:maroon;} P {color:hotpink; Font-family:Arial; } </STYLE> <BODY bgcolor=”lavender”> <H1>I am having fun</H1>
<P>This is al about having fun with style sheets</P> </BODY> </HTML> Hình VII.13. Sử dụng phần tử STYLE <HTML> <HEAD> <STYLE TYPE=”text/javascript”> tags.H1.color=”maroon”; with (tags.P){ color=”hotpink”; fontFamily=”Arial”; } </STYLE> </HEAD> <BODY bgcolor=”lavender”> <H1>I am having fun</H1>
<P>This is all about having fun with style sheets</P>
</BODY> </HTML>
Hình VII.14. Sử dụng phần tử STYLE
Thuộc tính STYLE
Thuộc tính STYLE được dùng để cung cấp style sheet cho các phần tử riêng lẻ. Một Style Sheet có thể nhỏ bằng một luật. Sử dụng thuộc tính Style ta có thể bỏ qua phần tử Style và đặt các khai báo trực tiếp vào trong các thẻ bắt đầu riêng lẻ.
<H2 style=”color:green; font-family: Arial”> </H2>
Thơng thường, ta có thể chỉ dùng thuộc tính này nếu ta đang thay đổi style của một phần tử đặc biệt. Nếu ta có ý định cung cấp cùng một style trên tồn bộ tài liệu, khi đó đây khơng thật sự là cách hay để đạt được điều này.
Ví dụ: <HTML>
<P STYLE=”color:blue; font-style:italic”> This line will be blue and italicized. <P>
This line will not be blue or in italics. </HTML>
Hình VII.15. Sử dụng thuộc tính STYLE
Phần tử liên kết (Link Element)
Nếu ta muốn dùng phần tử liên kết, khi đó Style Sheet phải được tách khỏi tài liệu. Khi đó địa chỉ Web với style sheet có thể được thêm vào.
<LINK REL=stylesheet HREF=”stylesmine.css” Type=”text/css”
>
Phải có cả thuộc tính “rel=stylesheet” hoặc trình duyệt sẽ khơng tải style sheet. Ví dụ: Sheet1.css H2 {color.blue; font-style:italic;} P {color:yellow;} File.htm <HTML> <HEAD>
<TITLE>Linking external style sheets</STYLE> <LINK REL=STYLESHEET TYPE=”text/css”
HREF=”sheet1.css”> </HEAD>
<BODY>
<H2>This is an H2 element</H2> <BR>
<P>This is a paragraph </BODY> </HTML> Sheet1.css tags.H2.color=”blue”; tags.H2.fontStyle=”Italic”; tags.H2.color=”yellow”; File.htm <HTML> <HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE=”text/javascript” HREF=”sheet1.css”> </HEAD> <BODY> <H2>This is an H2 element</H2> <BR> <P>This is a paragraph </BODY> </HTML>
VII.2.8. Thứ tự ưu tiên của các style (Cascading)
Khi ta đang dùng nhiều kỹ thuật để cung cấp các style (liên kết và nhúng) vào trang Web, có một cách để trình duyệt quyết định chọn style nào. Trình duyệt xếp qua tất cả các luật được xác định và chọn một luật quan trọng nhất. Style sheet cục bộ có độ ưu tiên cao nhất. Tiếp theo là style sheet toàn cục với style sheet liên kết tại phía trên.
Ví dụ, nếu một dịng trên trang Web định nghĩa <P> là màu đỏ qua một style sheet liên kết, tất cả các đoạn văn sẽ là màu đỏ trừ <P> ở trên, mà sẽ là màu xanh dương.
<HTML>
<LINK REL=stylesheet HREF=”sheet1.css” Type=”text/css”>
<P STYLE=”color:limegreen”>
This line will be limegreen. <P>
This line will not be limegreen. </HTML>
Hình VII.16. Cascading style
Thuộc tính Tên CSS Thuộc tính
Scripting
Font properties Font font
font-size fontSize
font-style fontStyle Text properties Text-align textAlign Text-indent textIndent vertical-align verticalAlign
Box properties border border
border-width borderWidth border-bottom borderBottom border-color borderColor Positioning
properties Clip clip
heiht height
Left left
Top top
Bài tập
1. Tạo ra một trang web mới dùng để đăng nhập có giao diện như ở hình dưới (sử dụng FORM).
2. Tạo một file css để đặt mặc định kiểu font và màu cho các phần giới thiệu của bạn.
CHƯƠNG VIII. CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (MICROSOFT FRONTPAGE 2003)