Old school Swatch Watches
Admin nhận làm wap blog game, truyện, forum, wap upload... giá rẻ với nhiều loại mã nguồn như wordpress, johncms, wblib, phpbb, filelist xtgem... Đặc biệt có wap trắc nghiệm vui chơi xong share lên fb cực hay. Click để xem chi tiết giá và demo. Thanks...
TIPS: Truy cập nhanh wapsite với tên miền ngắn gọn Thuan9xpro.CF
CSS - THUAN9XPRO WAPMASTER
Bài 7: Những lệnh thường gặp trong CSS
Việc đầu tiên phải quan tâm đối với CSS đó chính là sự tương thích với các trình duyệt web.
Căn lề:
+ margin : khi dùng lệnh này để căn lề thì kích thước của khung nội dung của bạn sẽ được giữ nguyên.
+ padding : với việc căn lề bằng lệnh padding thì kích thước của khung nội dung sẽ bị thay đổi
1. Lệnh căn lề margins.
a. Căn lề cho cả 4 cạnh: .ClassName {margin:20px;}
b. Căn lề dùng lệnh auto: .ClassName {margin:20px auto;}
- với lệnh trên, lề trái và phải sẽ tự động được căn giữa, còn lề trên và dưới sẽ được căn lề là 20px.
c. lệnh Margins với 3 giá trị:.ClassName {margin:20px auto 50px;}
- với lệnh này lề trên căn lề 20px, lề trái & phải sẽ được tự động căn giữa, lề dưới căn lề 50px.
2. Lệnh căn lề với padding:
.ClassName {
padding-top:10px; // căn lềtrên
padding-right:20px; // căn lề phải
padding-bottom:30px; // căn lề dưới
padding-left:40px; // căn lềtrái
}
Rút gọn : .ClassName {padding:10px 20px 30px 40px;} Như vậy cấu trúc sẽ tuần tự là : padding : topright bottom left;

3. Background:
.ClassName {
background-color: transparent; // làm trong nền trong suốt
background-image: url('image.jpg'); // ảnh nền
background-repeat: no-repeat; // thuộc tính lặplại
background-position: top right; // vị trí nền
background-attachment: scroll; // nền trượt
}
Ví dụ: muốn tạo ảnh nền trong suốt, nằm trên cùng bên phải, không lặp lại, và di chuyển theo chuột, ta sẽ có lệnh sau:
.ClassName {background: transparent url('image.jpg') no-repeat top right scroll;}
4. Lệnh font:
.ClassName {
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.4em;
font-family:Georgia, serif;
}
5. Lệnh cho list (ul):
ul {
list-style-type:decimal-leading-zero;
list-style-position:inside;
list-style-image: none; // sử dụng ảnh, nếu muốn sử dụng ảnh cho list, bạn chỉ việc thay none bằng url('link ảnh')
}
Rút gọn : ul {list-style:decimal-leading-zero inside url('image.jpg');}6. lệnh Border (tạo đừơng viền - đường bao)
.ClassName {
border-width:2px; // độ rộng đường bao
border-style: solid; // kiểu
border-color: #4096EE; // màu
}
Rút gọn: .ClassName {border: 2px solid#4096EE; // trị màu :#4069EE có thể thay bằng rgb(64, 150, 238)}
7. Outline (tương tự lệnh border )
img {
outline-width: 5px;
outline-style:solid;
outline-color: #000000;
}
Rút gọn: img {border: outline: 5px solid #000000;}
8. Lệnh màu :
Cách 1: .ClassName {color:#FFFFFF;}
Cách 2: .ClassName {color:#FFF;}
Cách 3: .ClassName {color:#fff;}
Cách 4: .ClassName {color: rgb(255, 255, 255);}
9. dùng dấu "," để gộp chung các class khi có cùng thuộc tính:
h1, h2, h3, h4, h5, h6 {font-family:Helvetica, Verdana, sans-serif;}
10. Cross browser transparency: thiết lập cho từng trình duyệt
.ClassName {
filter:alpha(opacity=50); // trình duyệt IE
-moz-opacity:0.5; // trình duyệt mozilla
-khtml-opacity: 0.5; // trình duyệt Safari
opacity: 0.5; // hầu hết các trình duyệt, nhưng IE thì không.
}
11. First-child selectors
tạo màu chữ riêng cho lớp đầu tiên của footer
.footer em:first-child {color:#ccc;}
12. First-letter (kí tự đầu tiên)
p:first-letter{color:#ff0000;font-size:60px;}
ví dụ ta có code sau : <p>Hiển thị là đây</p>
sẽ cho kết quả: Hiển thị là đây
13. First-line: thiết lậpthuộn tính cho dòng đầu tiên
#p:first-line {color:#ff0000;font-weight:bold;}
14. Độ cao tối thiểu
.ClassName {min-height:200px;} code không hỗ trợ cho IE
.ClassName{min-height:200px;height:auto!important;height:200px;} code cho hiển thị trên IE
15. Thuộc tính clip (hiển thị một phần)
- ví dụ: img {clip:rect(50px 218px 155px 82px);} ảnh sẽ được clip như sau:
top 50px,
bottom là 218px (tính từ trên xuống),
right là 155px (tính từ trái qua),
left là 82px (cũng tính từ trái qua).
Sau đây là 3 lệnh code CSS3 (chỉ hỗ trợ trên Firefox, safariand, và Chrome)
16. rounded_corner
.rounded_corner {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;
background-color:#000;
}
17. Drop shadow
.your_shadow {width:400px;height:200px;background-color:#000;-webkit-box-shadow: 5px 5px 2px#ccc;}
18. Resize
.resize{
min-width:200px;
min-height:200px;
max-width:500px;
max-height:400px;
resize:both;
background-color:#ccc;
border:2px solid #666;
overflow:auto;
}