Diễn Đàn Website

Posts

Cách viết CSS đơn giản, gọn nhẹ cho website

Kết hợp các CSS

LAB CSS 1. Mở file dulich.html 2. Đặt tên cho table chứa chữ Danh làm các thắng cảnh là danhlam 3. Tuần tự tạo các style sau : #danhlam { width: 500px; border: 5px solid #C60; } #danhlam caption { color: #9F9; text-transform: capitalize; font-size: 18px; background-color: #C60; padding-top: 5px; padding-bottom: 5px;} #danhlam a { color: #036; text-decoration: none; padding-left: 25px; background-image: url(forward1.gif); background-repeat: no-repeat; } #danhlam td { border-bottom: dotted 1px #C60;} 4. Tạo class sau: #danhlam .vien { border-left: dotted 1px #C60; border-right: dotted 1px #C60; } Xong thì set class cho các td ở cột giữa Kết quả như sau: 5. Chèn...

LAB CSS 4

LAB CSS 4 1. Mở file dulich.html 2. Đặt tên cho table chứa chữ Danh làm các thắng cảnh là danhlam 3. Tuần tự tạo các style sau : #danhlam { width: 500px; border: 5px solid #C60; } #danhlam caption { color: #9F9; text-transform: capitalize; font-size: 18px; background-color: #C60; padding-top: 5px; padding-bottom: 5px;} #danhlam a { color: #036; text-decoration: none; padding-left: 25px; background-image: url(forward1.gif); background-repeat: no-repeat; } #danhlam td { border-bottom: dotted 1px #C60;} 4. Tạo class sau: #danhlam .vien { border-left: dotted 1px #C60; border-right: dotted 1px #C60; } Xong thì set class cho các td ở cột giữa Kết quả như sau: ...

LAB CSS 3

LAB CSS 1. Mở file tinmoi.html 2. Định dạng cho div có tên tinmoi #tinmoi { width: 660px; } 3. Định dạng div tin mới nhất #tinmoi .tinmoinhat { width:330px; float:left; color:#336699; } 4. Định dạng cho div tin mới tiếp theo #tinmoi .tinmoitieptheo { float:left; width:330px; } 5. Bổ sung định dạng cho .tinmoinhat height:175px; overflow:hidden 6. Bổ sung định dạng cho div .tinmoitieptheo height:175px; overflow:hidden; white-space:nowrap; 7. Định dạng cho div .theloai #tinmoi .theloai { font-size:18px; background-color:#003300; color:#FFF; padding-top:5px; padding-bottom:5px; clear:left } 8. ...

LAB CSS 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #tinnoibat{ width:460px; border:1px solid #993300; min-height: 300px;} #tinnoibat #top1{min-height:140px; border-bottom: dotted 1px #993300; margin-bottom: 5px;} #tinnoibat #top3 div{ width:33.3%; float:left; text-align:center;} #tinnoibat #top3 a{ color: #006699; text-decoration: none; } #tinnoibat #top1 a {font-size: 18px; color: #CC0033; text-decoration: none;} #tinnoibat #top1 p {margin-top: 0px;} </style> </head> <body> <div id="tinnoibat"> <div id="top1"> <img width=150 height=120 align=left src="hinh/tnb1.jpg" /> <...