ây c ng là bi n pháp tôi s d ng cho nh ng trang có quá nhi ucode CSS.
Trang 1Nh 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 ừ
Trang 2dò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: transparenturl(images/head.jpg) no-repeattopcenter;
}
#header h1a{
display: block;
width: 376px; height: 47px;
text-indent: -99999px;
float: left;
margin: 210px0px0px10px;
background: url(images/logo.png) no-repeatlefttop;
}
#header #mainNav {
height: 35px; line-height: 35px;
position: relative;
border-top: 1pxsolid#89cce1;
border-bottom: 1pxsolid#89cce1;
margin: 17px0px20px0px;
background: #cde9f2;
}
Cách 2: Selector và Attribute
chung m t hàng ộ
1
2
3
4
#header { height: 310px; background: transparenturl(images/head.jpg) no-repeattopcenter;}
#header h1a {display: block; width: 376px; height: 47px; text-indent: -99999px; float: left;margin: 210px background: url(images/logo.png) no-repeatlefttop;}
#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: transparenturl(images/head.jpg) no-repeat
topcenter;}
#header h1a {display: block; width: 376px; height: 47px; text-indent: -99999px;
float: left;margin: 210px0px0px10px;
background: url(images/logo.png) no-repeatlefttop;}
#header #mainNav {height: 35px; line-height: 35px; position: relative;
border-top: 1pxsolid#89cce1;border-bottom: 1pxsolid
Trang 37 #89cce1;margin: 17px0px20px0px;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: 1pxsolid#89cce1;
border-bottom: 1pxsolid#89cce1;
margin: 17px0px20px0px;
background: #cde9f2;
}
#mainNav ul li {
display: inline;
}
#mainNav ul li a {
color: #7dc4db;
font-weight: bold;
padding: 0px5px0px10px; }
#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 ử ụ ế ợ
Trang 4â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: 0px0px10px15p; padding: 4px5px;
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 ỏ ộ ấ ắ