nhung cach trinh bay css

Nh ng cách trình bày CSSữ
• November 10, 2009

• 14 comments
Trong bài này chúng ta s không bàn n nh ng tính n ng thôngẽ đế ữ ă
th ng c a CSS mà trong bài này chúng ta s xem xét n nh ngườ ủ ẽ đế ữ
cách trình bày code CSS. Có r t nhi u cách b n có th ch n ấ ề ạ ể ọ để
trình bày trong CSS, nh ng ch n ra cách nào phù h p v i mình vàư ọ ợ ớ
luôn s d ng nó là t t nh t.ử ụ ố ấ
Nh b n bi t code CSS không k kho ng tr ng cho nên b n có thư ạ ế ể ả ắ ạ ể
trình bày nó nh th nào tùy thích, ví d khi b n vi t:ư ế ụ ạ ế
1
#nav { list-style: none; }
Thì c ng t ng ng nh khi b n vi t:ũ ươ đươ ư ạ ế
1
#nav {list-style: none;}
Chính vì th ng i ta m i có nhi u cách trình bày code CSS saoế ườ ớ ề để
cho d nhìn và d c h n. Tôi ph i nói tr c r ng không có cáchễ ễ đọ ơ ả ướ ằ
nào là cách t t nh t mà ch có cách phù h p v i b n nh t. Nh ngố ấ ỉ ợ ớ ạ ấ ữ
cách trình bày sau ây c cho là ph bi n nh ng n u b n th yđ đượ ổ ế ư ế ạ ấ
cách nào phù h p v i mình nh t thì b n có th ch n và luôn sợ ớ ấ ạ ể ọ ử
d ng nóụ
Cách 1: Nhi u hàngề
Cách này là cách tôi hay s d ng trong các tutorial mà b n th yử ụ ạ ấ
trong video. Theo tôi th y thì cách này là phù h p v i tôi nh t b i vìấ ợ ớ ấ ở
n u c n ch nh s a code CSS sau này, b n ch vi c tìm nế ầ ỉ ử ạ ỉ ệ đế
Selector và các Attribute c a nó ngay bên d i và riêng ra t ngủ ở ướ ừ
dòng. Nh ng m t h n ch c a nó là làm cho code CSS c a b n dàiư ặ ạ ế ủ ủ ạ
h n và “n ng” h n.ơ ặ ơ
1
2

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#header {
height: 310px;
background: transparent url(images/head.jpg) no-repeat top center;
}
#header h1 a{
display: block;
width: 376px; height: 47px;
text-indent: -99999px;
float: left;
margin: 210px 0px 0px 10px;
background: url(images/logo.png) no-repeat left top;
}

#header #mainNav {
height: 35px; line-height: 35px;
position: relative;
border-top: 1px solid #89cce1;
border-bottom: 1px solid #89cce1;
margin: 17px 0px 20px 0px;
background: #cde9f2;
}
Cách 2: Selector và Attribute
chung m t hàngộ
1
2
3
4
#header { height: 310px; background: transparent url(images/head.jpg) no-repeat top center;}
#header h1 a {display: block; width: 376px; height: 47px; text-indent: -99999px; float: left;margin: 210px
background: url(images/logo.png) no-repeat left top;}
#header #mainNav {height: 35px; line-height: 35px; position: relative; border-top:
0px;background: #cde9f2;}
Thì nh b n th y, cách th 2 ti t ki m c chi u d c, nh ng cóư ạ ấ ứ ế ệ đượ ề ọ ư
v khó c h n và nhìn nh ma tr n.ẻ đọ ơ ư ậ
Cách 3: M t hàng v i Tabộ ớ
1
2
3
4
5
#header { height: 310px; background: transparent url(images/head.jpg) no-repeat
top center;}
#header h1 a {display: block; width: 376px; height: 47px; text-indent: -99999px;

float: left;margin: 210px 0px 0px 10px;
background: url(images/logo.png) no-repeat left top;}
#header #mainNav {height: 35px; line-height: 35px; position: relative;
border-top: 1px solid #89cce1;border-bottom: 1px solid
6
7
#89cce1;margin:
17px 0px 20px 0px;background: #cde9f2;}
Cách trình bày th này thì c ng d c h n và khi ch nh s a b nế ũ ễ đọ ơ ỉ ử ạ
c ng tìm th y Selector d h n vì b n không ph i kéo chu t miênũ ấ ễ ơ ạ ả ộ
man m t m i (sao nhi u “m ” th nh )ệ ỏ ề ờ ế ỉ
Cách 4: Nhi u hàng v i th t uề ớ ụ đầ
dòng
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

18
19
20
21
22
23
#header #mainNav {
height: 35px; line-height: 35px;
position: relative;
border-top: 1px solid #89cce1;
border-bottom: 1px solid #89cce1;
margin: 17px 0px 20px 0px;
background: #cde9f2;
}
#mainNav ul li {
display: inline;
}
#mainNav ul li a {
color: #7dc4db;
font-weight: bold;
padding: 0px 5px 0px 10px;
}
#mainNav ul li a:hover
{
text-decoration:
underline;
}
#mainNav img.support {
position: absolute;
top: -6px; right: 0;

}
Cách trình bày th này c ng t n chi u d c, nh ng giúp b n bi tế ũ ố ề ọ ư ạ ế
c thành ph n nào là con thành ph n nào b ng tr c giác. Tuyđượ ầ ầ ằ ự
b n có th c code bi t c, nh ng ôi khi tr c giác c ng r tạ ể đọ để ế đượ ư đ ự ũ ấ
t t bao quát v n ố để ấ đề
Cách 5: S d ng k t h pử ụ ế ợ
ây c ng là bi n pháp tôi s d ng cho nh ng trang có quá nhi uĐ ũ ệ ử ụ ữ ề
code CSS. Nh nói trên tôi thích nh t cách nhi u hàng, nh ngư ở ấ ề ư
n u nó dài quá thì nên k t h p l i. Tôi th ng k t h p các thànhế ế ợ ạ ườ ế ợ
ph n liên quan n nhau nh sau:ầ đế ư
1
2
3
4
5
6
div#containter {
width: 300px; height: 400px;
margin: 0px 0px 10px 15p; padding: 4px 5px;
font-size: 12px; font-family: arial, sans-serif; color: blue;
background: #456423;
}
Nh b n th y tôi k t h p r ng v i chi u cao, Margin v iư ạ ấ ế ợ độ ộ ớ ề ớ
Padding và các giá tr liên quan n font vào m t hàng. Nh thị đế ộ ư ế
c ng ti t ki m c chi u dài c a codeũ ế ệ đượ ề ủ
K t Lu n:ế ậ
Nh ã nói, không có cách nào là cách t t nh t mà ch có cách phùư đ ố ấ ỉ
h p nh t. Do v y, b n c ch n cho mình m t cách và sau ó sợ ấ ậ ạ ứ ọ ộ đ ử
d ng nó toàn b trong quá trình code c a mình. Nh ng dù gì iụ ộ ủ ư đ
ch ng n a, có code CSS d c, d hi u và d ch nh s a sauă ữ để ễ đọ ễ ể ễ ỉ ử

này ho c làm vi c theo nhóm. B n r t c n trình bày sao cho ng nặ ệ ạ ấ ầ ă
n p, g n gàng và m ch l c. ây chính là i m khác bi t gi a m tắ ọ ạ ạ Đ đ ể ệ ữ ộ
coder gi i và m t coder xu t s c.ỏ ộ ấ ắ