Professional Documents
Culture Documents
CSS Coban
CSS Coban
1. Lệnh Margin:
.ClassName {
margin:20px;
}
.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 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
}
.ClassName {
padding:10px 20px 30px 40px;
}
Trang 1/8
Tài liệu CSS cơ bản
- Như vậy cấu trúc lênh sẽ là : padding : top right bottom left;
Ta thấy 2 lệnh trên ñều là căn lề, vậy chúng có gì khác nhau, chúng ta sẽ nói thêm về ñiều này:
+ 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. Lấy
ví dụ: khung nội dung của bạn có ñộ rộng 100px, khi dùng lệnh căn lề trái padding-left:30px; thì
khung sẽ bị dịch sang phải 30px, và khi ñó ñộ rộng của khung sẽ ñược cộng thêm vào là 30px, tức
là 130px. ðó chính là mấu chốt khiến các bạn mới làm quen thường bị xảy ra hiện tượng xô lệch
do khi dùng padding vì chúng ta padding bao nhiêu thì sẽ + thêm vào chiều rông cũ bấy nhiêu ñể
tạo thành một chiều rộng mới.
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ặp lại
background-position: top right; // vị trí nền
background-attachment: scroll; // nền trượt
}
- ví dụ như bạn 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 như bên dưới:
.ClassName {
4. Lệnh font:
.ClassName {
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.4em;
font-family:Georgia, serif;
}
Trang 2/8
Tài liệu CSS cơ bản
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')
}
- ñể ñơn giản ta gộp các thuộc tính chung lại, như bên dưới:
ul {
list-style:decimal-leading-zero inside url('image.jpg');
}
.ClassName {
border-width:2px; // ñộ rộng ñường bao
border-style: solid; // kiểu
border-color: #4096EE; // màu
}
.ClassName {
border: 2px solid #4096EE; // trị màu : #4069EE có thể thay bằng rgb(64, 150, 238)
}
img {
outline-width: 5px;
outline-style:solid;
outline-color: #000000;
}
Trang 3/8
Tài liệu CSS cơ bản
img {
border: outline: 5px solid #000000;
}
8. Lệnh màu :
.ClassName {
color: #FFFFFF;
}
.ClassName {
color: #FFF;
}
.ClassName {
color: #fff;
}
.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:
.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.
}
Trang 4/8
Tài liệu CSS cơ bản
- ví dụ bên dưới tạo màu chữ riêng cho lớp ñầu tiên của footer (nằm trong thẻ <em>)(lệnh này
mình không rành lắm)
.footer em:first-child {
color:#ccc;
}
p:first-letter{
color:#ff0000;
font-size:60px;
}
- ví dụ ta có code sau :
- kết quả :
13. First-line
#p:first-line {
color:#ff0000;
font-weight:bold;
}
- ví dụ: ta có code
<p>This is an example usage of the first-line property. This is an example usage of the first-line
property.</p>
- kết quả :
This is an example usage of the first-line property. This is an example usage of the first-line
property.
Trang 5/8
Tài liệu CSS cơ bản
.ClassName {
min-height:200px;
}
- code trên không hỗ trợ cho IE, ñể hiển thị trên IE, bạn tham khảo code bên dưới:
.ClassName{
min-height:200px;
height:auto !important;
height:200px;
}
img {
clip:rect(50px 218px 155px 82px);
}
với code này, ảnh sẽ ñược clip phía trên 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). xem ví dụ bên dưới ñể rõ:
Hình Gốc:
Trang 6/8
Tài liệu CSS cơ bản
Bên dưới là 3 lệnh code CSS3 (lưu ý. CSS3 chỉ hỗ trợ trên Firefox, safariand, và Chrome)
16. Bo góc:
.rounded_corner {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;
background-color:#000;
}
.your_shadow {
width:400px;
height:200px;
background-color:#000;
-webkit-box-shadow: 5px 5px 2px #ccc;
}
Trang 7/8
Tài liệu CSS cơ bản
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;
}
Trên ñây là những cơ bản về CSS, hy vọng sau khi làm quen các bạn sẽ cảm thấy thích thú.
Trang 8/8