Ti li u CSS c b n

NH NG L NH TH NG G P TRONG CSS
1. L nh Margin: a. Cn l cho c 4 c nh: .ClassName { margin:20px; } b. Cn l dng l nh auto: .ClassName { margin:20px auto; } - v i l nh trn, l tri v ph i s t ng c cn gi a, cn l trn v d i s c cn l l 20px. c. l nh Margins v i 3 gi tr : .ClassName { margin:20px auto 50px; } - v i l nh ny l trn cn l 20px, l tri & ph i s c t ng cn gi a, l d i cn l 50px. 2. L nh Padding: - Cc l nh cn l v i padding: .ClassName { padding-top:10px; // cn l trn padding-right:20px; // cn l ph i padding-bottom:30px; // cn l d i padding-left:40px; // cn l tri } - d dng hn ta c th vi t: .ClassName { padding:10px 20px 30px 40px; }

Trang 1/8

Ti li u CSS c b n

- Nh v y c u trc lnh s l : padding : top right bottom left; Ta th y 2 l nh trn u l cn l , v y chng c g khc nhau, chng ta s ni thm v i u ny: + margin : khi dng l nh ny cn l th kch th c c a khung n i dung c a b n s c gi nguyn. + padding: v i vi c cn l b ng l nh padding th kch 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 dng l nh cn l tri padding-left:30px; th khung s b d ch sang ph i 30px, v khi r ng c a khung s c c ng thm vo l 30px, t c l 130px. chnh l m u ch t khi n cc b n m i lm quen th ng b x y ra hi n t ng x l ch do khi dng padding v chng ta padding bao nhiu th s + thm vo chi u rng c b y nhiu t o thnh m t chi u r ng m i. 3. Background: - cc thu c tnh c b n c a l nh nh bn d i: .ClassName { background-color: transparent; // lm trong n n trong su t background-image: url('image.jpg'); // nh n n background-repeat: no-repeat; // thu c tnh 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 trn cng bn ph i, khng l p l i, v di chuy n theo chu t, ta s c l nh nh bn 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

Ti 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 cc thu c tnh chung l i, nh bn 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; // mu } - n gi n c th vi t .ClassName { border: 2px solid #4096EE; // tr mu : #4069EE c th thay b ng rgb(64, 150, 238) } 7. Outline (tng t l nh border) - v d bn 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

Ti li u CSS c b n

img { border: outline: 5px solid #000000; } 8. L nh mu : - c th s d ng 1 trong cc cch d i u c .ClassName { color: #FFFFFF; } .ClassName { color: #FFF; } .ClassName { color: #fff; } .ClassName { color: rgb(255, 255, 255); } 9. dng d u "," g p chung cc class khi c cng thu c tnh: v d nh bn 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 trnh duy t .ClassName { filter:alpha(opacity=50); // trnh duy t IE -moz-opacity:0.5; // trnh duy t mozilla -khtml-opacity: 0.5; // trnh duy t Safari opacity: 0.5; // h u h t cc trnh duy t, nhng IE th khng. } 11. First-child selectors

Trang 4/8

Ti li u CSS c b n

- v d bn d i t o mu ch ring cho l p u tin c a footer (n m trong th <em>)(l nh ny mnh khng rnh l m) .footer em:first-child { color:#ccc; } 12. First-letter (k t 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 tnh cho dng u tin #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 u tin)

Trang 5/8

Ti li u CSS c b n

.ClassName { min-height:200px; } - code trn khng h tr cho IE, hi n th trn IE, b n tham kh o code bn d i: .ClassName{ min-height:200px; height:auto !important; height:200px; } 15. Thu c tnh clip (hi n th m t ph n) - v d ta c code bn d i: img { clip:rect(50px 218px 155px 82px); } v i code ny, nh s c clip pha trn 50px, bottom l 218px (tnh t trn xu ng), right l 155px (tnh t tri qua), left l 82px (cng tnh t tri qua). xem v d bn d i r: Hnh G c:

Hnh S a v i Clip

Trang 6/8

Ti li u CSS c b n

Bn d i l 3 l nh code CSS3 (lu . CSS3 ch h tr trn Firefox, safariand, v Chrome) 16. Bo gc: .rounded_corner { -moz-border-radius:10px; -webkit-border-radius:10px; width:400px; height:100px; background-color:#000; }

17. Drop shadow (t o bng ) .your_shadow { width:400px; height:200px; background-color:#000; -webkit-box-shadow: 5px 5px 2px #ccc; }

Trang 7/8

Ti 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; } Trn y l nh ng c b n v CSS, hy v ng sau khi lm quen cc b n s c m th y thch th.

Trang 8/8