Upload
tran-quang-tien
View
20
Download
1
Embed Size (px)
DESCRIPTION
Thuc Hanh Css
Citation preview
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><tr class="mytable_row2">
<td class="mytable">column 1</td><td class="mytable">column 2</td><td class="mytable">column 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><tr class="mytable_row2">
<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>
<td class="mytable_column1">column 1</td><td>column 2</td><td>column 3</td>
</tr><tr class="mytable">
<td class="mytable_column1">column 1</td><td>column 2</td><td>column 3</td>
</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
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)
- Đị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: