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;
}
