Khi các thành phần HTML được hiển thị trên trình duyệt nó thường có 2 cách hiển thị là theo Block và Inline. Nói hình tượng để bạn dễ hiểu thì các thành phần Block giống như một bàn cờ và các thành phần Inline là quân cờ. Các quân cờ nằm trong bàn cờ và bàn cờ thì không bao giờ nằm trong quân cờ. Đây cũng là một nguyên tắc cơ bản nhất của Inline và Block. Thành phần inline có thể nằm trong thành phần Block, nhưng Block không thể nằm trong thành phần Inline.

Lý thuyết thì là vậy nhưng hơi mơ hồ khó hiểu, cách tốt nhất là chúng ta học từ ví dụ ở dưới.

Ví dụ về Block

Thẻ <p> và <div> là hai thành phần mặc định Block phổ biến nhất. Chỉ khi bạn khai báo trong CSS và muốn biến nó thành inline với Property là Display: inline thì nó mới thành inline. Ví dụ tôi có một thẻ <div> như sau:

Nếu tôi viết tiếp thì dòng mới sẽ bị đẩy xuống dưới dù cho nó được viết cùng hàng với dòng ở trên nằm trong thẻ <div>

Các thành phần Block bao gồm

<div>: Là thành phần trắng dùng để làm “hộp” chứa.
<h1> ….<h6>: Các headings
<p>: Thẻ này dùng để mở đầu và kết thúc một đoạn văn bản.
<li>, <dt>, <dd>: hiển thị danh sách.
<table>, <blockquote>, <pre> và <form>

Ví dụ về thành phần Inline

Ví dụ tôi có một đoạn văn như sau, và trong đó tôi có một cặp thẻ <strong>, nó không bắt thành phần nằm trong nó phải xuống hàng mà nó chỉ “nhẹ nhàng” chui vào giữa và sống hạnh phúc trong đó. Cũng giống như quân cờ nằm trong bàn cờ vậy.

Các thành phần inline bao gồm

<span>, <a>, <em>, <br />
<img>

Ví dụ hình mặt cười này sẽ xuất hiện ở trong dòng mà không ép chữ xuống hàng mới. Nó chỉ chiếm khoảng không gian tối thiểu mà nó cần. Giống như quân cờ chỉ chiếm một khoảng không gian nhất định của nó mà thôi. Chứ nó không ảnh hưởng đến bàn cờ.

<input>

Display Property

Cái hay của CSS là bạn không chỉ bị ép buộc sử dụng giá trị mặc định của từng thành phần. Mà bạn có thể thay đổi cách hiển thị của nó theo ý mình. Ví dụ một thành phần <li> theo mặc định là dạng Inline nhưng bạn có thể biến nó thành block với CSS tương ứng là Display: block. Đây chính là một phần rất quan trọng trong thiết kế giao diện. Nó mở ra một chân trời mới với các cách sắp xếp thành phần mà chỉ bị giới hạn bằng khả năng thiết kế của bạn.

Được áp dụng nhiều nhất là khi bạn sử dụng <li> làm menu như rất nhiều trang web. Ở mặc định nếu bạn có một list như sau:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>

Nó sẽ xuất hiện như sau ở trình duyệt

• Home
• About
• Services
• FAQs
• Contact

Nếu bạn muốn nó xuất hiện trong cùng một hàng thì bạn có thể khai bao CSS như sau:

.menuNav li {
display:inline;
background-color:#eee;
border:1px solid red;
margin:0; padding:0px 10px;
}

Bạn cũng có thể tham khảo thêm video tutorial tôi đã làm về Display Property trong CSS để hiểu thêm chi tiết.

Trên thực tế rất ít khi bạn phải sử dụng tính năng vertical-align trong CSS trừ khi bạn đang thiết kế bảng với dữ liệu cần căn chỉnh vào giữa dòng. Nhưng theo kinh nghiệm cá nhân tôi, khi làm giao diện tôi rất ít khi sử dụng vertical-align bởi vì nó thực sự không cần thiết. Do chúng ta có thể sử dụng padding và margin để điều khiển nó tới vị trí mà mình muốn. Nhưng với những người mới học CSS và vừa thoát ra khỏi cách thiết kế bằng bảng thì cái “lối mòn” cũ vẫn chưa hoàn toàn bỏ được. Chính vì vậy nhiều người mới hỏi tại sao khi sử dụng vertical-align: middle trong thẻ div nó lại không cho kết quả như mong muốn.

Nói chung cách sử dụng vertical-align trong CSS để căn chỉnh một thành phần không phải là table cell cũng không hề đơn giản mà cũng lắm nhiêu khê. Có nhiều cách hoàn toàn không tương thích với các trình duyệt đặc biệt là IE (kể cả IE 8). Vậy nên khi quyết định sử dụng vertical-align để căn chỉnh thành phần trong block element như <div> bạn nên suy nghĩ cho kỹ. Tuy nhiên vì bạn vẫn muốn làm hoặc bắt buộc phải làm thì dưới đây là một số cách bạn có thể áp dụng được.

Cách 1: Biến <div> thành table cell

Trong cách này chúng ta sẽ biến một thẻ <div> thành một table cell và do đó có thể áp dụng vertical-align bình thường. Cái hay của cách này là ngắn gọn và lẹ nhưng nó không tương thích với trình duyệt IE (kể cả IE 8 beta). Cho nên bạn cũng cần suy nghĩ ở đây.

<div id="container">
   <div id="content">
     <p>Lorem ipsum dolor sit amet.</p>
   </div>
</div>

#container {display: table;}
#content {display: table-cell; vertical-align: middle;}

Cách 2: Sử dụng margin và absolute position

Trong cách này chúng ta sẽ sử dụng absolute position để định vị thành phần và dùng margin giá trị âm để bù lại khoảng mình đẩy xuống. Cái hay trong cách này là tương thích với mọi trình duyệt, không cần thêm một thẻ div nữa. Nhưng mỗi khi trình duyệt bị thu nhỏ quá, nội dung sẽ biến mất.

<div id="container">
   <div id="content">
    <p> Lorem ipsum dolor sit amet.</p>
   </div>
</div>

#container {position: relative;}
#content {
position:absolute;
top:50%; height:200px;
margin-top:-100px; /* giá trị âm bằng một nửa chiều cao */
}

Cách 3: sử dụng line-height

Đây là cách có khi được sử dụng nhiều nhất bởi vì nó đơn giản nhất và tương thích với mọi trình duyệt. Nhưng nó chỉ có thể áp dụng với những thành phần chỉ có một dòng chữ và thành phần chứa nó có độ cao cụ thể.

<div id="content">
     Lorem ipsum dolor sit amet.
   </div>

#content {
 height:200px;
#content p {
line-height: 200px;
}

Kết luận

Ở bài này tôi giới thiệu với bạn 3 cách để căn chỉnh theo chiều dọc một thành phần. Cách nào cũng có điểm mạnh và điểm yếu và bạn hãy tùy từng trường hợp mà áp dụng sao cho hợp lý. Nhưng trên thực tế một đoạn văn không nhất thiết phải nằm giữa một thẻ div mới đẹp. Chính vì thế trừ trường hợp bắt buộc, tránh sử dụng vertical-align cho nó đỡ rắc rối.

Đó là chưa kể đến những bất cập của Float như phải clear float và đôi khi nó thực sự rất khó quản lý. Nhưng không hiểu vì lý do tại sao Float được sử dụng rất rộng rãi và vượt ra ngoài dự định ban đầu của những người phát triển CSS. Đầu tiên Float chỉ được thiết kế để đưa hình ảnh vào những vị trí thích hợp. Nhưng dần dà nó được sử dụng khá phổ biến trong thiết kế giao diện.

Nói vậy không phải là tôi không thích Float hoặc sử dụng Float là không tốt, mà sự thực thì tôi cũng sử dụng Float khá nhiều trong thiết kế giao diện. Nhưng nếu dùng nó kết hợp với Absolute Position trong CSS thì giúp giao diện của bạn có thể tương thích với nhiều trình duyệt mà không cần phải áp dụng hack cho IE.

Trong bài này chúng ta sẽ tìm hiểu sơ qua về Absolute Position trong Relative Position. Tôi đã có một video về Contextual Positioning nói rất rõ về mối liên hệ giữa Relative Position và Absolute Position. Nhưng vì đây là khái niệm hết sức quan trọng do vậy trong bài này tôi cũng nói lại một chút.

Ở ví dụ dưới đây tôi sử dùng Absolute Position để định vị 3 thẻ div nằm trong thẻ div lớn là #wrapper.

<div id="wrapper">
        <div id="left">&nbsp;</div>

        <div id="middle">&nbsp;</div>

        <div id="right">&nbsp;</div>
    </div>

Với Absolute Position bạn có thể sử dụng các giá trị: px, em và % và với các vị trí: top, right, bottom và left. Tuy nhiên trong thực tế bạn chỉ cần 2 giá trị là top và left (hoặc right) thì cũng đủ để định vị một thành phần rồi.

Mẹo nhỏ: Nếu trong quá trình định vị tọa độ với Absolute bạn phải làm đi làm lại nhiều lần. Thì nay bạn có thể sử dụng addon Firebug để định vị chính xác đến từng Pixel. Tôi có làm một video hướng dẫn cách sử dụng Firebug.

Ở ví dụ trên thẻ div#wrapper có position: relative, nó sẽ đóng vai trò làm thành phần bao quanh cho 3 thẻ div có position: absolute nằm bên trong nó. Nếu ta bỏ giá trị position: relative ở thẻ div#wrapper đi thì 3 thẻ div ở trong sẽ như “hươu lạc mẹ” và chạy toán loạn hết. Uhm! thực ra cũng không toán loạn mà nó sẽ nhận body làm mẹ nuôi và định vị theo “bà mẹ” mới này.

Chính vì thế điều quan trọng nhất trong khi sử dụng Absolute Position là xác định thành phần bao quanh và đặt position của nó thành relative

Nghe cũng hay mà bạn có ví dụ trong thực tế không?

Tôi biết là bạn sẽ hỏi do vậy tôi đã chuẩn bị trước một giao diện được sử dụng Absolute Position cho bạn tham khảo. Bạn sẽ dễ dàng nhận thấy ở giao diện này có một tấm hình lớn choán hết phần Header và nó nằm “chông chênh” ở giữa. Đây là ví dụ hoàn hảo về sử dụng Absolute Position để định vị các thành phần.

Ngoài ra các thành phần còn lại như thanh di chuyển ở trên và dưới, logo và phần Featured đều được sử dụng Absolute Position. Tôi đã thử trong IE 6, 7 và 8 và hầu như không phải hack bất cứ phần nào ngoại trừ phần PNG hack cho IE 6. Nếu giao diện này làm bằng Float thì sẽ ít nhất là cũng phải hack cái Double Margin của IE.

Bạn có thể download ví dụ này về để xem phần code HTML và CSS

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:

#nav       {       list-style:          none;            }

Thì cũng tương đương như khi bạn viết:

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

#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

#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;}

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

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

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

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

Trong Video tutorial này tôi sẽ chỉ ra những khái niệm cơ bản nhất của CSS Selectors. Tuy video chưa thể bao quát hết tất cả các CSS Selectors, nhưng tôi cũng đã cố gắng chọn ra những Selectors quan trọng nhất và hay được sử dụng nhất.

Trong bài này tôi sẽ hướng dẫn đến những Selector như sau:

• Khái niệm về quan hệ “gia đình” trong CSS
• Universal selector
• Type selectors
• Class selectors
• ID selectors
• Giống và khác nhau giữa Class và ID
• Descendant selectors
• Child selectors
• Adjacent sibling selectors
• Attribute selectors
• Pseudo-classes

Thời lượng:16.25
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 34.1MB
Các phần khác: Phần 1

Trong Video tutorial này tôi sẽ chỉ ra những khái niệm cơ bản nhất của CSS Selectors. Tuy video chưa thể bao quát hết tất cả các CSS Selectors, nhưng tôi cũng đã cố gắng chọn ra những Selectors quan trọng nhất và hay được sử dụng nhất.

Trong bài này tôi sẽ hướng dẫn đến những Selector như sau:

• Khái niệm về quan hệ “gia đình” trong CSS
• Universal selector
• Type selectors
• Class selectors
• ID selectors
• Giống và khác nhau giữa Class và ID
• Descendant selectors
• Child selectors
• Universal selectors
• Adjacent sibling selectors
• Attribute selectors
• Pseudo-classes

Thời lượng:22:23
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 46.44MB
Các phần khác: Phần 2

Thời lượng:12:19
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 22.55MB

Thời lượng:19:44
Link Download file định dạng .avi chất lượng cao: MegaUpload, MediFire
File Size:63.13MB
Tut chữ về clear và float

Xem Demo: Display Property
Link Download với định dạng .mp4 chất lượng cao hơn: Megaupload, Mediafire

Sự khác biệt giữa thành phần Inline và Block như sau

• Block Elements như là: đoạn văn bản, heading, danh sách được xếp chồng lên nhau khi hiển thị trên trình duyệt.
• Inline Elements là những thành phần như <a>, <span> và <img> được xếp cạnh nhau khi hiển thị trên trình duyệt. Và nó chỉ xuống dòng khi không còn đủ chỗ trống.


Nhưng cái hay của CSS là chúng ta có thể biến Block Element thành Inline Element và ngược lại, ví dụ:

p {display:inline;}
a {display:block}

Đây là một tính năng rất mạnh cho phép bạn bắt một thành phần Inline phải lấp đầy hộp chứa nó, và rất hữu dụng khi bạn tạo menu drop với CSS.

Một giá trị nữa của Display cũng được sử dụng phổ biến là none. Khi một thành phần nào đó được gán giá trị none, thì thành phần đó và bất cứ cái gì nằm trong nó sẽ bị biến mất khỏi trình duyệt, kể cả khoảng không mà nó lẽ ra phải chiếm nếu được hiển thị cũng bị biến mất như chưa bao giờ từng tồn tại. Tính năng này có điểm khác với Visibility Property với hai giá trị là visible và hidden. Khi một thành phần được gán giá trị là hidden, nó chỉ bị ẩn đi và không hiện ra trên trình duyệt. Nhưng khoảng không nó chiếm vẫn còn đó và không bị mất.

]]> http://www.izwebz.com/css/display-property-2/feed/ 12 http://www.izwebz.com/css/contextual-position-2/ http://www.izwebz.com/css/contextual-position-2/#comments Wed, 19 Aug 2009 06:20:08 +0000 Demon Warlock http://www.izwebz.com/?p=972 Contextual Position là một khái niệm rất cơ bản nhưng cũng rất quan trọng trong thiết kế giao diện bằng CSS. Absolute position là một tính năng rất hay của CSS nhưng dường như nó lại rất ít khi được sử dụng và có một số người lại ngại sử dụng Absolute Position. Trong bài này tôi sẽ hướng dẫn bạn cách sử dụng Absolute và chỉ cho bạn thấy khái niệm Contextual Position.

Thời lượng: 15m9s
Link Download: phiên bản chất lượng hình cao hơn

]]> http://www.izwebz.com/css/contextual-position-2/feed/ 18