THỰC HÀNH CSS 1. ĐỊNH DẠNG VĂN BẢN 1.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 HTML Ví 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 }
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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
#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;