Tài liệu cung cấp hướng dẫn chi tiết về các thuộc tính cơ bản của CSS, bao gồm margin, padding, background, font, và border. Nó cũng đề cập đến cách sử dụng các thuộc tính cho danh sách, màu sắc và hiệu ứng như bo góc và bóng đổ. Cuối cùng, tài liệu giải thích về các thuộc tính nâng cao như resize và clip.

1. Tài li u CSS cơ b n
NH NG L NH THƯ NG G P TRONG CSS
1. L nh Margin:
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 Padding:
- Các 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
}
- ð d dàng hơn ta có th vi t:
.ClassName {
padding:10px 20px 30px 40px;
}
Trang 1/8

2. 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:
- các thu c tính cơ b n c a l nh như bên dư i:
.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 {
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;
}
Trang 2/8

3. Tài li u CSS cơ b n
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')
}
- ñ ñơ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');
}
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
}
- ñơn gi n có th vi t
.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)
- ví d bên dư i là t o ñương vi n cho nh
img {
outline-width: 5px;
outline-style:solid;
outline-color: #000000;
}
- ñơn gi n có th vi t
Trang 3/8

4. Tài li u CSS cơ b n
img {
border: outline: 5px solid #000000;
}
8. L nh màu :
- có th s d ng 1 trong các cách dư i ñ u ñư c
.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:
ví d như bên dư i:
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
Trang 4/8

5. 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;
}
12. First-letter (kí t ñ u tiên)
p:first-letter{
color:#ff0000;
font-size:60px;
}
- ví d ta có code sau :
<p>This is an example usage of the first-letter property</p>
- k t qu :
This is an example usage of the first-letter property
13. First-line
- thi t l p thu n tính cho dòng ñ u tiên
#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.
14. ð cao t i thi u
Trang 5/8

6. 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;
}
15. Thu c tính clip (hi n th m t ph n)
- ví d ta có code bên dư i:
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:
Hình ðã S a v i Clip
Trang 6/8

7. 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;
}
17. Drop shadow (t o bóng ñ )
.your_shadow {
width:400px;
height:200px;
background-color:#000;
-webkit-box-shadow: 5px 5px 2px #ccc;
}
Trang 7/8

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