những cách trình bày css _ học thiết kế web theo chuẩn.

Những cách trình bày CSS | Học thiết kế web theo chuẩn.
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.
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.

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.
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.
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.