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

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

Trang 1

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

EMAIL ARTICLES

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 h 1 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 ;

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

Trang 2

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

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 ạ:

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

1 #header { height: 310px ; background: transparent url (images/head.jpg) no - repeat top

center ;}

2 #header h 1 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 h 1 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 ;

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 15 p; padding: 4px 5px ;

4 font - size: 12px ; font - family: arial , sans - serif ; color: blue ;

5 background: #456423 ;

6 }

Trang 3

4 Comments ( Comment bài này )

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

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

Trang 4

Leave a comment ( Chọn hình đại diện )

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

Trang 5

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 dạng
Số trang	5
Dung lượng	263,87 KB