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.ơ ặ ơ1234567891011121314151617181920#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ộ1234#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ộ ớ12345#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 67#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òng1234567891011121314151617181920212223#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:ầ đế ư123456div#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.ỏ ộ ấ ắ . 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 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