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 ột tài liệu với
toàn bộ luật đặt giữa các thẻ ở và đóng. hi các trang được hiển thị, chỉ tài liệu mà có STYLE được nh ng vào ới bị tác động. Thẻ <STYLE> có ột tha số -- TYPE. Tha số này xác định kiểu Internet Media như “text/css”.
Ví dụ: <HTML> <S P =”text/css”> H1 {color:maroon;} P {color:hotpink; Font-family:Arial; } </STYLE> <BOD 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> <S P =”text/javascript”> tags. .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 tyle heet có thể nhỏ bằng ột luật. ử dụng thuộc tính tyle ta có thể bỏ qua phần tử tyle và đặt các khai báo trực tiếp vào trong các thẻ bắt đầu riêng lẻ.
< 2 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 ột phần tử đặc biệt. Nếu ta có ý định cung cấp cùng ột style trên toà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 S =”color:bl e; 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 uốn dùng phần tử liên kết, khi đó tyle heet phải được tách khỏi tài liệu. hi đó địa chỉ Web với style sheet có thể được thê vào.
<LINK REL=stylesheet R F=”stylesmine.css” ype=”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> < INK R =S S P =”text/css” R F=”sheet .css”> </HEAD> <BODY> <H2>This is an H2 element</H2> <BR>
<P>This is a paragraph </BODY>
</HTML> Sheet1.css
tags. 2.color=”bl e”;
tags. 2.fontStyle=”Italic”; tags. 2.color=”yellow”; File.htm
<HTML> <HEAD>
<TITLE>A Good Title</TITLE>
< INK R =S S P =”text/javascript” R F=”sheet .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ó ộ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 ộ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 ột d ng trên trang Web định nghĩa <P> là àu đỏ qua ột style
sheet liên kết, tất cả các đoạn văn sẽ là àu đỏ trừ <P> ở trên, à sẽ là àu xanh
dương.
<HTML>
<LINK REL=stylesheet R F=”sheet .css” ype=”text/css”>
<P S =”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 ột trang eb ới dùng để đăng nhập có giao diện như ở hình dưới (sử dụng M).
2. Tạo ột ile css để đặt ặc định kiểu ont và à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)