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

} Trang 2/8 . Background: . ta s có l nh như bên dư i: .Tài li u CSS cơ b n .ClassName { background: transparent url('image. và di chuy n theo chu t.ví d như b n mu n t o nh n n trong su t.jpg') no-repeat top right scroll. // nh n n background-repeat: no-repeat. font-weight:bold.4em.Như v y c u trúc lênh s là : padding : top right bottom left. // làm trong n n trong su t background-image: url('image. ðó 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. line-height:1. font-size:1em. L nh font: . // v trí n n background-attachment: scroll. và khi ñó ñ r ng c a khung s ñư c c ng thêm vào là 30px.ClassName { font-variant:small-caps. 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. // thu c tính l p l i background-position: top right. + 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. Ta th y 2 l nh trên ñ u là căn l . thì khung s b d ch sang ph i 30px. font-family:Georgia. serif.các thu c tính cơ b n c a l nh như bên dư i: . n m trên cùng bên ph i. L y ví d : khung n i dung c a b n có ñ r ng 100px. v y chúng có gì khác nhau. khi dùng l nh căn l trái padding-left:30px. 3.jpg').ClassName { background-color: transparent. không l p l i. t c là 130px. // n n trư t } . } 4.

// s d ng nh.ví d bên dư i là t o ñương vi n cho nh img { outline-width: 5px. } 6.jpg'). Outline (tương t l nh border) .ClassName { border: 2px solid #4096EE.ñư ng bao) . } . // ñ r ng ñư ng bao border-style: solid. n u mu n s d ng nh cho list. // ki u border-color: #4096EE.ñơn gi n có th vi t Trang 3/8 . 238) } 7. l nh Border (t o ñ ơng vi n . L nh cho list (ul): ul { list-style-type:decimal-leading-zero. b n ch vi c thay none b ng url('link nh') } .ClassName { border-width:2px. 150.ñơn gi n có th vi t . // tr màu : #4069EE có th thay b ng rgb(64. // màu } .ñ ñơn gi n ta g p các thu c tính chung l i. outline-color: #000000.Tài li u CSS cơ b n 5. outline-style:solid. như bên dư i: ul { list-style:decimal-leading-zero inside url('image. list-style-image: none. list-style-position:inside.

h4. h5. h6 { font-family:Helvetica. // h u h t các trình duy t.Tài li u CSS cơ b n img { border: outline: 5px solid #000000. h2. } . First-child selectors Trang 4/8 . } . L nh màu : . sans-serif.có th s d ng 1 trong các cách dư i ñ u ñư c . nhưng IE thì không. 255). h3. // trình duy t IE -moz-opacity:0. } 10.ClassName { color: #FFF.5. Cross browser transparency: .ClassName { filter:alpha(opacity=50). // trình duy t mozilla -khtml-opacity: 0. 255.ClassName { color: #fff. // trình duy t Safari opacity: 0. } 8. } .5. } 11.thi t l p cho t ng trình duy t ." ñ g p chung các class khi có cùng thu c tính: ví d như bên dư i: h1. Verdana.ClassName { color: rgb(255. dùng d u ".5. } 9.ClassName { color: #FFFFFF.

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

code trên không h tr cho IE.ClassName{ min-height:200px. } . height:auto !important. bottom là 218px (tính t trên xu ng).ví d ta có code bên dư i: img { clip:rect(50px 218px 155px 82px). } 15.ClassName { min-height:200px. b n tham kh o code bên dư i: . right là 155px (tính t trái qua). left là 82px (cũng tính t trái qua). } v i code này. Thu c tính clip (hi n th m t ph n) . height:200px. xem ví d bên dư i ñ rõ: Hình G c: Hình ðã S a v i Clip Trang 6/8 .Tài li u CSS cơ b n . nh s ñư c clip phía trên 50px. ñ hi n th trên IE.

CSS3 ch h tr trên Firefox. } Trang 7/8 . Bo góc: .your_shadow { width:400px. } 17. background-color:#000. height:200px. Drop shadow (t o bóng ñ ) . và Chrome) 16. height:100px.Tài li u CSS cơ b n Bên dư i là 3 l nh code CSS3 (lưu ý. -webkit-box-shadow: 5px 5px 2px #ccc. -webkit-border-radius:10px. width:400px. background-color:#000.rounded_corner { -moz-border-radius:10px. safariand.

max-height:400px. } Trên ñây là nh ng cơ b n v CSS.Tài li u CSS cơ b n 18. background-color:#ccc.resize{ min-width:200px. border:2px solid #666. Resize . max-width:500px. overflow:auto. Trang 8/8 . min-height:200px. hy v ng sau khi làm quen các b n s c m th y thích thú. resize:both.

Sign up to vote on this title
UsefulNot useful