thuchanh css

THỰC HÀNH CSS (CASCADING STYLE SHEETS)Các ví dụ và bài tập

1. ĐỊNH DẠNG VĂN BẢNVí dụ 1 : Highligh văn bản* Định nghĩa CSS

.hl_yellow { background-color:yellow}

.hl_aqua { background-color: Aqua}

* Áp dụng vào trang HTMLVí dụ: Đây là đoạn văn bản được highligh

<p>Đây là đoạn <span class="hl_yellow">văn bản</span> được <span class="hl_aqua">highligh</span></p>

Ví dụ 2 : Định dạng cho link* Định nghĩa CSS

/* link chưa viến thăm có màu đỏ, không gạch dưới */a.mystyle:link {color: #ff0000; text-decoration: none} /* link đã viến thăm có màu xanh, không gạch dưới */a.mystyle:visited {color: #0000ff; text-decoration: none} /* link khi hơ chuột lên trên có màu vàng và nền màu xanh lá cây, có gạch dưới*/a.mystyle:hover {color: #ffff00; background: #66ff66; text-decoration: underline}

* Áp dụng vào trang HTML<a class="mystyle" href="#">test my link style</a>

Ví dụ 3 : Định dạng văn bản bị gạch ngang - Định nghĩa CSS

.linethrough { text-decoration: line-through}

- Áp dụng vào trang HTML<p>Đây là đoạn văn bản bị <span class="linethrough">gạch ngang</span> chữ</p>

Ví dụ 4 : Định dạng khoảng thụt vào đầu dòng cho văn bản- Định nghĩa CSS

p {text-indent: 2.5em; margin-top: 0 } /* mọi paragraph đều thụt vào đầu dòng */p.noindent {text-indent: 0; margin-top: 0 }

- Áp dụng vào trang HTML<p>Đoạn văn bản này có dòng đầu thụt vào một khoảng 2.5 kích thước font chữ

hiện tại</p><p class="noindent">Đoạn văn bản này không bị thụt vào ở dòng đầu tiên</p>

Ví dụ 5 : Tạo tooltip cho các từ viết tắt trong văn bản- Định nghĩa CSS

.define { cursor:help;border-style:dotted;border-width:1px;background-color: #FFE4C4;

}- Áp dụng vào trang HTML

<span class="define" title="Cascading Style Sheet">CSS</span>

Ví dụ 6 : Drop Cap- Định nghĩa CSS

.dropcap {float:left;color:#4E544A;font-size:5em;line-height:70px;padding-top:2px;font-family: times;

}

- Áp dụng vào trang HTML<p><span class="dropcap">Đ</span>ây là đoạn văn bản có ký tự đầu tiên được drop cap</p>

2. ĐỊNH DẠNG BẢNG Ví dụ 1 :

- Định nghĩa CSStable.mytable {border-collapse: collapse; border:3px solid black}th.mytable {border:1px solid black; background:DodgerBlue; font:bold; color:white;}td.mytable {border:1px solid black; text-align:center}tr.mytable_row1 {background-color:LightBlue}tr.mytable_row2 {background-color:LightCyan}

- Áp dụng vào trang HTML<table class="mytable">

<tr><th class="mytable" width="150">header 1</td><th class="mytable" width="150">header 2</td><th class="mytable" width="150">header 3</td>

</tr><tr class="mytable_row1">

<td class="mytable">column 1</td><td class="mytable">column 2</td><td class="mytable">column 3</td>







</tr></table>

Ví dụ 2 :

- Định nghĩa CSStable.mytable {border-collapse: collapse}

/*collapse: không có khoảng cách giữa các cell của bảng */th.mytable {border-top:3px solid black; border-bottom:2px solid black;

background:violet; font:bold; color:white; text-align:left}td.mytable_column1 {background-color:gainsboro } /* gainsboro: màu xám nhạt */tr.mytable {border-bottom:3px solid black; border-top:2px solid black; }

- Áp dụng vào trang HTML<table class="mytable">

<tr><th class="mytable" width="150">header 1</td><th class="mytable" width="150">header 2</td><th class="mytable" width="150">header 3</td>

</tr><tr>

<td class="mytable_column1">column 1</td><td>column 2</td><td>column 3</td>

</tr><tr>


</tr><tr class="mytable">


</tr></table>

Bài tập : Tạo các mẫu TableBài 1

Bài 2

Bài 3

Bài 4

3. ĐỊNH DẠNG DANH SÁCH

Các thuộc tính để định dạng danh sách: list-style-type list-style-position list-style-image list-style

Ví dụ 1 : Thuộc tính list-style-typeCác giá trị của thuộc tính list-style-type:- none | disc | circle | square |- upper-latin | lower-latin | upper-roman | lower-roman | upper-alpha | lower-alpha

<ul style="list-style-type:upper-roman;"> <li>item 1</li> <li>item 2</li> </ul>

I. item 1 II. item 2

<ul style='list-style-type:square;'> <li>square item 1</li> <li>square item 2</li> </ul>

square item 1

square item 2

Ví dụ 2 : Thuộc tính list-style-positionCác giá trị của thuộc tính list-style-position: inside | outside

<ul style='list-style-position:inside;'> <li>First one<br>second line <li>Second one </ul>

First onesecond line

Second one <ul style='list-style-position:outside;'> <li>First one<br>second line <li>Second one </ul>

First onesecond line

Second one

Ví dụ 3 : Thuộc tính list-style-imageSử dụng hình ảnh để làm bullet cho danh sách. Cú pháp: list-style-image:url([image_url])

<ul> <li>First list for custom marker. <li>Second list for custom marker. </ul>

4. TẠO THANH NAVIGATOR Ví dụ 1 : Tạo thanh Navigator đơn giản- Định nghĩa CSS

#menu a, #menu a:visited {

position:relative;text-decoration:none; text-align:center; background-color:#9ab; color:#fff; display:block; width:10em; border:2px solid #fff;border-color:#def #678 #345 #cde;padding:0.25em;margin:0.5em auto;

}

#menu a:hover {

top:2px; left:2px; color:#fff; border-color:#345 #cde #def #678;

}

- Áp dụng vào trang HTML<div id="menu">

<a href="#">Home</a> <a href="#">About</a> <a href="#">History</a> <a href="#">Team</a> <a href="#">Offices</a>

</div>

5. BỐ CỤC TRANG WEB

Ví dụ 1 : Trình bày mẫu

- Định nghĩa CSS<style type="text/css">

body {background-color:#CCCCCC;font-family:Arial, Helvetica, sans-serif;

}

#container{border:2px solid #000000;width:760px;background-color:#CCCCCC; /*Màu nền cho Container SideBar*/margin:0px auto; /*Canh giữa trang web*/

}

#banner{background-color:#EFEFEF;height:100px;

}

#navigator {background-color:#999999;padding:5px 0px;border-top:2px solid black;border-bottom:2px solid black;

}

#sidebar {width:160px;float:left; /*phần SideBar bám (dock) vào bên trái */

}

#content {margin-left:160px; /*phần lề trái của Content, bỏ đi chiều rộng của Sidebar*/

min-height:400px; /*chiều cao tối thiểu là 400px*/border-left:2px solid black;background-color:#FFFFFF;

}

#footer {background-color:#999999;border-top:2px solid black;text-align:center;padding:5px 0px;

}</style>

- Áp dụng vào trang HTML<div id="container">

<div id="banner">BANNER

</div><div id="navigator">

NAVIGATOR</div><div id="sidebar">

SIDEBAR</div><div id="content">

CONTENT</div><div id="footer">

FOOTER</div>

</div>

Bài tập : Trình bày các mẫuBài 1 :

Bài 2 :

Bài 3 :

thuchanh css

Documents