Kết hợp StyleSheet với HTML

Một phần của tài liệu HTML can ban gianh cho nguoi moi buoc chan vao viet code web (Trang 94 - 101)

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)

Một phần của tài liệu HTML can ban gianh cho nguoi moi buoc chan vao viet code web (Trang 94 - 101)

Tải bản đầy đủ (PDF)

(164 trang)