Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/nhung-cach-trinh-bay-css/[8/10/2010 3:04:40 PM] NAVIGATION Giới thiệu về CSS Position Property Hướng dẫn cách đăng ký domain Pseudo Class Mục tiêu hành động Giải pháp hosting free cho Amateur Luôn đọc lại bài viết của mình Từ PSD sang HTML (phần 3/5) Chương 2 – jQuery Selectors Tránh xa những nơi “không giới hạn” PHP CO BẢN – NÂNG CAO tìm hiểu cú pháp và phương thức PHP Phép toán và phát biểu có điều kiện trong php $_POST và $_GET Làm quen đối tượng Session Khai báo hàm, chèn tập tin và tập tin dùng chun Cách xử lý chuỗi, mảng, kiểu DataTime Thao tác trên cơ sở dữ liệu MySQL PHP và Database Phân trang với PHP Xóa, Cập nhật dữ liệu dạng mảng Tạo Mailing List: PHP & Mysql RECENT COMMENTS Random News Popular EMAIL ARTICLES Những cách trình bày CSS November 10, 2009 4 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: Thì cũng tương đương như khi bạn viết: 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 #nav { list-style: none; } 1 #nav {list-style: none;} 01 #header { 02 height: 310px; 03 background: transparent url(images/head.jpg) no-repeat top center; 04 } 05 #header h1 a{ 06 display: block; 07 width: 376px; height: 47px; 08 text-indent: -99999px; 09 float: left; 10 margin: 210px 0px 0px 10px; 11 background: url(images/logo.png) no-repeat left top; 12 } 13 #header #mainNav { 14 height: 35px; line-height: 35px; 15 position: relative; 16 border-top: 1px solid #89cce1; 17 border-bottom: 1px solid #89cce1; 18 margin: 17px 0px 20px 0px; 19 background: #cde9f2; 20 } CSS CSS Cơ bản jQuery jQuery Cơ bản Phát triển Web Bài viết, kinh nghiệm Videos Các thể loại WordPress Tutorials, Hacks HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/nhung-cach-trinh-bay-css/[8/10/2010 3:04:40 PM] QUẢNG CÁO Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free Tạo WordPress Theme – Dựng xHTML (16) chicken_roll: hahaha hay quá hết chổ trê (thanks you very much much…) nghe anh nói đây ko Tạo WordPress Theme – Slice hình (22) chicken_roll: ui ui hay quá cảm ỏn nhiều học rất nhiều từ anh và Anh CS thanks phát cho có Tạo WordPress Theme – Search form và Random Posts (15) DiVIVu: @ajimoto & tuyen: Làm thế này là được bạn ạ: <script type="text/javascript& PHP Căn Bản – Bài 9 (40) pham duy: Vang ban angelthao_0984884679 da noi dung do chung t con chan chu gi nua ma khong giup doan: ai muốn xem bằng file swf thì down KMP về mà dùng cái này còn hay hơn media của win nhiều Lập trình web và sự Lười nhác (23) kien: Không còn gì để nói :-s Tạo trang web đầu tiên (41) ho nga: ? ho nga: huhu sao làm web mệt dzữ vậy a hai ui…? Cách 2: Selector và Attribute chung một hàng 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 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 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: 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: 1 #header { height: 310px; background: transparent url(images/head.jpg) no-repeat top center;} 2 #header h1 a {display: block; width: 376px; height: 47px; text-indent: -99999px; float: left;margin: 210px 0px 0px 10px; 3 background: url(images/logo.png) no-repeat left top;} 4 #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;} 1 #header { height: 310px; background: transparent url(images/head.jpg) no-repeat top center;} 2 #header h1 a {display: block; width: 376px; height: 47px; text-indent: - 99999px; 3 float: left;margin: 210px 0px 0px 10px; 4 background: url(images/logo.png) no-repeat left top;} 5 #header #mainNav {height: 35px; line-height: 35px; position: relative; 6 border-top: 1px solid #89cce1;border-bottom: 1px solid #89cce1;margin: 7 17px 0px 20px 0px;background: #cde9f2;} 01 #header #mainNav { 02 height: 35px; line-height: 35px; 03 position: relative; 04 border-top: 1px solid #89cce1; 05 border-bottom: 1px solid #89cce1; 06 margin: 17px 0px 20px 0px; 07 background: #cde9f2; 08 } 09 #mainNav ul li { 10 display: inline; 11 } 12 #mainNav ul li a { 13 color: #7dc4db; 14 font-weight: bold; 15 padding: 0px 5px 0px 10px; 16 } 17 #mainNav ul li a:hover { 18 text-decoration: underline; 19 } 20 #mainNav img.support { 21 position: absolute; 22 top: -6px; right: 0; 23 } 1 div#containter { 2 width: 300px; height: 400px; 3 margin: 0px 0px 10px 15p; padding: 4px 5px; 4 font-size: 12px; font-family: arial, sans-serif; color: blue; 5 background: #456423; 6 } Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/nhung-cach-trinh-bay-css/[8/10/2010 3:04:40 PM] 4 Comments ( Comment bài này ) « Giới thiệu WordPress Phần mềm FTP miễn phí – FileZilla » Những bài viết có liên quan Cách thiết lập “301 Permanent Redirect” Những cách bo tròn góc Top 10 trình soạn thảo code Lập trình web và sự Lười nhác Quá trình tạo một trang web $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here! BIDVERTISER ADS 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. Compatible Implant Trilobe Compatible Implant The $145.00 Alternative www.BlueSkyBio.com Aboutme says: February 17, 2010 at 9:47 pm Mình thường làm thế này, khi code mình sử dụng nhiều hàng, sau mỗi 1 Selector, Attribute thì xuống dòng và comment cẩn thận. Nhưng khi hoàn thành, và để pub thì … chuyển về 1 hàng hết , hơi mất thời gian nhưng 1 phần giúp website load nhanh hơn ^_^ Reply hoangloi says: April 9, 2010 at 3:02 am ôi cám ơn anh quá… em đang không biết làm thế nào. cứ viết dài kinh hoàng. nhìn loại hoa cả mắt. nhưng sau khi tìm hiểu thì nên thế này. save 1 file viết nhiều dòng. rồi save 1 file khác 1 dòng. khi cần sửa chữa thì copy và replace luôn cả đoạn đã sửa ở file nhiều dòng vào file 1 dòng. có lẽ như thế tối ưu nhất đối với em Reply Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/nhung-cach-trinh-bay-css/[8/10/2010 3:04:40 PM] Leave a comment ( Chọn hình đại diện ) Chọn kiểu gõ: Tự động TELEX VNI Tắt truongho says: April 28, 2010 at 9:38 am Cảm ơn anh đã có bài viết rất hay Reply quan says: May 18, 2010 at 11:30 am anh chị nào có thể giúp em câu này ko ! xin bày em cách gọi từng đến từng thẻ để định dạng css cho nó ( vd : thì khi gọi ta sẽ gọi: #wrapper {định dạng css cho nó} , thì khi ta gọi thì ta sẽ gọi : ul#topnav -> vì sao ta ko gọi giống trên là: #topnav mà phải là ul#topnav !!! dưới thẻ còn có các thẻ .nên khi gọi ta sẽ gọi: ul#topnav li mà sao ko thể gọi đơn giản hơn là : #topnav li !!! Em rối vì cách gọi này lắm ! anh chị nào có cách bày em phân biệt rõ những cái này ko ạ ! em xin cám ơn anh chị nhiều Reply Tên bạn Email Website Comment Luu ý khi post comment: Không "bóc tem" topic Dùng lời lẽ có văn hoá và lịch sự Xem trang FAQs trước khi hỏi Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a> Wrap code trong dấu `backtick` (dấu trên phím Tab) Submit Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/nhung-cach-trinh-bay-css/[8/10/2010 3:04:40 PM] © 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock Izwebz is solemnly hand coded and designed from scratch by Demon Warlock. It is also very proud of being powered by WordPress, which is an exceptionally well written and beautiful CMS Rules are not made to be broken at Izwebz Bạn không được tự ý copy và phát hành lại nội dung của izwebz nếu chưa được sự đồng ý của tôi. Biết tôn trọng và cư xử hòa nhã với mọi người Không "bóc tem" bài viết. Izwebz được quyền xóa những comment nào không phù hợp với nội dung của trang web Câu hỏi thường gặp Liên hệ Tác giả Bản quyền Trang web vẫn đang trong quá trình phát triển về nội dung. Do vậy nếu bạn có khả năng hãy đóng góp bài viết hoặc bạn có thể quảng cáo trang web đến những người mà bạn biết. Được vậy tôi sẽ rất biết ơn bạn. . Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com /css/ nhung-cach-trinh-bay -css/ [8/10/2010 3:04:40 PM] NAVIGATION Giới thiệu về CSS Position Property Hướng dẫn cách. (dấu trên phím Tab) Submit Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com /css/ nhung-cach-trinh-bay -css/ [8/10/2010 3:04:40 PM] © 2008-2010 izwebz, All Rights Reserved có lẽ như thế tối ưu nhất đối với em Reply Những cách trình bày CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com /css/ nhung-cach-trinh-bay -css/ [8/10/2010 3:04:40 PM] Leave a comment (