Download doc - Thuc Hanh Css

THỰC HÀNH CSS

1. ĐỊNH DẠNG VĂN BẢN1.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>

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

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

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

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

1.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ẢNG2.1. Mẫu 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>

2.2. Mẫu 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>

2.3. Mẫu 3:

2.4. Mẫu 4:

2.5. Mẫu 5

2.6. Mẫu 6:

(xem hướng dẫn tại: http://veerle.duoh.com/blog/comments/a_css_styled_table/)

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

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

Ví dụ:<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

3.2. Thuộc tính list-style-positionCác giá trị của thuộc tính list-style-position: inside | outside

Ví dụ:<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

http://veerle.duoh.com/blog/comments/a_css_styled_table/

3.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])Ví dụ:

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

4. TẠO THANH NAVIGATOR1. 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>

2. Tạo Drop-Down Menu (Horizontal Style)(Xem các mẫu khác tại http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php)

http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

- Định nghĩa CSSbody {

font: normal 11px verdana;}

ul {margin: 0;padding: 0;list-style: none;width: 150px; /* Width of Menu Items */border-bottom: 1px solid #ccc;}

ul li {position: relative;}

li ul {position: absolute;left: 149px; /* Set 1px less than menu width */top: 0;display: none;}

/* Styles for Menu Items */ul li a {

display: block;text-decoration: none;color: #777;background: #fff; /* IE6 Bug */padding: 5px;border: 1px solid #ccc; /* IE6 Bug */border-bottom: 0;}

/* Holly Hack. IE Requirement \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

- Đoạn mã JavaScriptstartList = function() {

if (document.all&&document.getElementById)

{navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];if (node.nodeName=="LI") {

node.onmouseover=function() {this.className+=" over";

}node.onmouseout=function() {

this.className=this.className.replace(" over", ""); } } } }}window.onload=startList;

- Áp dụng vào trang HTML<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul>

5. BỐ CỤC TRANG WEB

5.1. Mẫu 1:

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

5.2. Mẫu 2:

5.3. Mẫu 3:

5.4. Mẫu 4: