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

#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;

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;

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.ỏ ộ ấ ắ