Học thiết kế web theo chuẩn. » CSS http://www.izwebz.com You aren't just a visitor Sat, 04 Feb 2012 12:43:17 +0000 en hourly 1 http://wordpress.org/?v=3.3 Giới thiệu 960 Grid – CSS Framework http://www.izwebz.com/css/gioi-thieu-960-grid-css-framework/ http://www.izwebz.com/css/gioi-thieu-960-grid-css-framework/#comments Fri, 11 Feb 2011 15:00:06 +0000 Demon Warlock http://www.izwebz.com/?p=2770 960 Grid là một CSS Framework, mục đích của nó là giúp những người thiết kế web có thể tiết kiệm thời gian, công sức cho những công việc phải lặp đi lặp lại. Tuy đây là một framework rất phổ biến nhưng lại thiếu trầm trọng tài liệu hướng dẫn. Nếu đây là lần đầu tiên bạn mới làm quen với 960 Grid, thì bạn không khỏi bối rối khi xem mã của nó. Trong bài này chúng ta sẽ khám phá những tính năng của 960 Grid và cách sử dụng nó.

Trước đây tôi luôn nghĩ là những CSS Framework không thực sự cần thiết bởi vì CSS rất đơn giản và trực quan. Chúng ta không cần phải nhờ đến sự hỗ trợ của framework để hoàn thành giao diện một trang web. Cho đến khi có nhiều người email về hỏi cách sử dụng 960 Grid, qua tìm hiểu sơ qua về framework này, thì tôi biết rằng …. rất có thể tôi đã sai lầm khi nghĩ về các CSS Framework.

Đã bao nhiêu lần bạn phải float một cột sang trái, một cột sang phải, float logo sang trái, navigation sang phải, tính toán kích thước của từng thành phần để khỏi bị vỡ giao diện v.v..? Tôi cũng vậy và còn nhiều designer khác cũng thế. 960 Grid ra đời để giúp bạn giản lược những bước này và cho phép bạn bắt tay ngay vào phần trình bày nội dung.

960 Grid hoạt động như thế nào

960 Grid được thiết kế dựa trên một mạng lưới tọa độ. Các thành phần của trang web sẽ được sắp xếp nằm trong những mạng lưới này và toàn bộ trang web có chiều rộng là 960 Pixel. Sở dĩ nó là 960 mà không phải là những số khác là vì kích thước này phù hợp với đa số các độ phân giải màn hình và cũng rất dễ để chia đều cho các cột. Các cột có margin là 20px, đây cũng là kích thước margin phổ biến nhất để nội dung nhìn thoáng đãng và không bị rối.

960 grid

960 Grid có 3 mạng lưới chính, giao diện 12 cột, 16 cột và 24 cột. Tuy số lượng cột khác nhau nhưng kích thước không vượt quá 960 Pixel. Trong đa số các trường hợp, bạn có thể sử dụng giao diện 12 cột để thiết kế. Nhưng nếu bạn muốn có mạng lưới nhỏ hơn để tinh chỉnh các thành phần phức tạp hơn, thì bạn có thể sử dụng giao diện 16 và 24 cột. Trong bài này chúng ta sẽ nghiên cứu về giao diện 12 cột, cách áp dụng cho 2 giao diện còn lại hoàn toàn tương tự.

Cách sử dụng 960 Grid

Trước khi bạn có thể sử dụng được 960 Grid, bạn phải download CSS Framework này về đã. Sau khi download và giải nén bạn sẽ có một số thư mục như hình dưới:

960 grid

Trong bài này bạn chỉ cần quan tâm đến thư mục code. Trong đây sẽ có những file CSS như: reset.css, text.css và 960.css. Quan trọng nhất là file 960.css. Hai file kia bạn có thể giữ hoặc xóa tùy ý, nó chỉ có tác dụng reset thôi. Đa phần thì bạn nên giữ lại vì nó chứa những kiểu reset tốt nhất cho trang web.

Bạn cũng nên lưu ý nó có hai phiên bản: một đã nén với dung lượng nhỏ hơn còn một phiên bản chưa nén để chúng ta có thể làm việc với nó. Nếu bạn muốn làm trên trang web thật, thì hãy dùng phiên bản đã nén để giảm dung lượng xuống. Còn nếu bạn đang tập làm thì dùng phiên bản chưa nén để có thể xem code bên trong như thế nào.

Để sử dụng 960 Grid, bạn cần chèn đoạn mã sau vào phần <head> của tài liệu HTML, như cách chúng ta liên kết đến các file CSS thông thường.

<head>
	<meta charset='UTF-8' />
	<title>Izwebz - 960 Grid System Intro</title>
	<link rel='stylesheet' href='css/reset.css' />
	<link rel='stylesheet' href='css/960.css' />
	<link rel='stylesheet' href='css/style.css' />
</head>

Thường thì bạn nên giữ nguyên file 960.css mà không cần thay đổi gì cả. Bạn chèn thêm một file style.css vào và bạn có thể thêm những dòng code của mình vào file này.

Làm việc với 960 Grid System

Khi bạn xem biểu đồ dưới đây, hãy tưởng tượng mỗi một hộp sẽ là một CSS Class trong hệ thống 960 Grid. Để tạo một đối tượng với kích thước bằng các cột này, bạn chỉ cần gán một class tương ứng cho nó. Những CSS Class này được đặt tên theo thứ tự từ grid_1 cho đến grid_12. Class grid_1 sẽ là cột có kích thước nhỏ nhất và grid_12 sẽ là cột có kích thước lớn nhất.

960 grid

Trong giao diện 12 cột mà chúng ta sẽ sử dụng trong bài này, mỗi cột có kích thước là 60px và sẽ tăng dần lên 80px cho mỗi cột kế tiếp. Do vậy nếu bạn muốn một đối tượng có kích thước là 380px thì bạn sẽ phải dùng 5 cột và trong mã HTML bạn sẽ khai báo như sau.

<div class="grid_5"></div>

Với sự trợ giúp của những class này, bạn có thể dựng một giao diện phức tạp chỉ trong vòng một thời gian rất ngắn. Để cho đối tượng có chiều rộng tối đa là 940 Pixel, thì bạn chỉ cần khai báo cho đối tượng đó có class là grid_12 trong tài liệu HTML.

<div id="bigBox" class="grid_12">
	<p>Big box</p>
</div>
960 grid

Để ba cột còn lại nằm song song với nhau thì bạn cần viết mã HTML như sau:

<div id="wrapper" class="container_12">
   <div id="first" class="grid_4">Cột 1</div>
   <div id="second" class="grid_4">Cột 2</div>
   <div id="third" class="grid_4">Cột 3</div>
</div>
960 grid

Ở đây bạn chú ý rằng để hệ thống này hoạt động đúng đắn, bạn phải tạo một thẻ <div class=”container_12″> bao quanh lấy các thành phần khác. Sau đó bạn sẽ đặt tên các class theo số lượng cột mà bạn muốn.

Push và Pull

Nếu bạn xem trong file 960.css khi tải về, bạn sẽ thấy có 2 class là .pull_1 đến .pull_12 và push_1 đến push_12. Hai Class này được sử dụng để thay đổi vị trí của các thành phần trên trang theo chiều ngang. Ví dụ dưới đây ta có một giao diện 3 cột, vì một lý do nào đó bạn muốn đẩy cột bên tay trái vào trong 1 cột và kéo cột bên tay phải vào trong 2 cột bạn có thể khai báo HTML như sau:

<div id="container" class="container_12">
	<div id="first" class="grid_4 push_1">Push me if you can</div>
	<div id="second" class="grid_4">I am out of this</div>
	<div  id="third" class="grid_4 pull_2">Pull me if you can</div>
</div><!--end #container -->
960 grid

Như bạn thấy trên hình cột màu xanh dương bị đẩy sang bên tay trái 1 cột tương ứng với push_1 (ô màu hồng). Còn cột màu xanh lá cây bị kéo lại 2 ô do tác động của class pull_2.

Suffix và Prefix

Để tạo ra khoảng trống lớn giữa hai thành phần bạn có thể sử dụng hai class là Suffix và Prefix. Để tạo ra khoảng trống bằng 2 cột đằng sau một thành phần dùng Class suffix_2, hoặc tạo ra một khoảng trống bằng 4 cột ở trước một thành phần dùng prefix_4.

Ví dụ ta có 2 thẻ div như sau:

<div id="bigBox" class="grid_12">
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>
960 grid

Bây giờ bạn muốn đẩy thẻ div thứ hai sang bên tay phải, bạn có thể làm như sau:

<div id="bigBox" class="grid_12">
	<div class="grid_3 alpha suffix_5">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>
960 grid

Khi bạn thêm Class suffix_5 vào thẻ div đầu tiên, nó sẽ đẩy thẻ div thứ 2 lùi sang phải 5 ô. Bạn có thể thử với prefix sẽ cho kết quả ngược lại.

Alpha và Omega

Đây là 2 Class đặc biệt của 960 Grid dùng để loại bỏ đường biên margin của đối tượng đầu và cuối. Ví dụ bạn có mã HTML như sau:

<div id="bigBox" class="grid_12">
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>

Khi xem trên trình duyệt bạn sẽ bị như hình dưới. Vấn đề ở đây là do chúng ta lồng 4 thẻ div vào trong một thẻ <div>id=”bigBog” class=”grid_12″</div> và tất nhiên giá trị Margin của nó vẫn còn và làm tăng kích thước của 4 thẻ này lên làm 20px (margin trái + margin phải 10+10 = 20). Đây chính là lý do mà bạn thấy ở hình dưới.

<div id="bigBox" class="grid_12">
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>
960 grid

Để khắc phục bạn có thể sử dụng hai Class đặc biệt là Alpha và Omega.

<div id="bigBox" class="grid_12">
	<div class="grid_3 alpha">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3 omega">grid_3</div>
</div>
960 grid

Với hai Class là alpha và omega được thêm vào, bạn sẽ thấy đường biên của hai phần tử đầu và cuối bị mất đi và giao diện của chúng ta hoạt động bình thường.

Tóm tắt

Bài này không quá dài nhưng lại chứa rất nhiều thông tin cho một lần đọc, do vậy cho những ai ngại đọc, đây là những ý chính của bài này

1. Sử dụng Class container_12 hoặc container_16 cho thẻ div bao quanh với những giao diện 12 hoặc 16 cột.
2. Sử dụng Class grid_1 cho đến grid_12 để xác lập độ rộng của từng cột. Nếu bạn muốn cột đó có độ rộng tối đa là 960 Pixel thì cho nó class là grid_12
3. Sử dụng Class Push và Pull để định vị từng phần tử riêng lẻ trên trang mà không cần quan tâm đến vị trí của nó trong tài liệu HTML.
4. Sử dụng Prefix và Suffix để tạo khoảng trắng trước và sau phần tử.
5. Sử dụng Alpha và Omega để loại bỏ đường biên của phần tử đầu và phần tử cuối.

Điểm mạnh và mặt hạn chế của 960 Grid

Như bất cứ cái gì cũng có 2 mặt, 960 Grid cũng có những điểm mạnh và mặt hạn chế như sau. Bạn có thể tham khảo và quyết định xem mình có nên sử dụng CSS framework không.

Điểm mạnh

  • Tiết kiệm thời gian
  • Tương thích nhiều trình duyệt phổ biến
  • Thiết kế theo chuẩn tọa độ

Mặt han chế

  • Phải có kiến thức trên mức cơ bản về CSS.
  • Phụ thuộc vào Framework khiến bạn mất tự do.
  • Thêm nhiều class “vớ vỉn” vào mã HTML.
  • Mất thời gian để học về hệ thống framework đó.
  • Kích thước trang web không thể vượt quá 960 Pixel.

Đây là đoạn mã HTML để tạo ra một trang web 2 cột đơn giản sử dụng 960 Grid

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8' />
	<title>Izwebz - 960 Grid System Intro</title>
	<link rel='stylesheet' href='css/reset.css' />
	<link rel='stylesheet' href='css/960.css' />
	<link rel='stylesheet' href='css/style.css' />
</head>

<body>

<div id="container" class="container_12">
	<div id="header" class="grid_12">This is a header</div>
	<div id="sidebar" class="grid_3"><h1>This is the sidebar</h1></div>
	<div id="mainContent" class="grid_9 omega"><p>This is the content</p></div>
	<div id="footer" class="grid_12">
		<p>Copyright &copy; izwebz. All rights reserved</p>
	</div>
</div><!--end #container -->

</body>

</html>
Bạn có sử dụng 960 Grid chưa?

Bạn có sử dụng CSS framework nào không? theo bạn CSS framework có cần thiết không? với tôi, sau một thời gian làm quen với 960 Grid, tôi thấy được những tính năng vượt trội của nó và có thể sẽ sử dụng nó ở những Project sắp tới.

]]> http://www.izwebz.com/css/gioi-thieu-960-grid-css-framework/feed/ 40 Thành phần Block và Inline http://www.izwebz.com/css/thanh-phan-block-va-inline/ http://www.izwebz.com/css/thanh-phan-block-va-inline/#comments Fri, 15 Jan 2010 03:21:20 +0000 Demon Warlock http://www.izwebz.com/?p=1827 Khái niệm về Inline và Block là một khái niệm hết sức cơ bản nhưng cũng cực kỳ quan trọng trong CSS. Hiểu được từng đặc điểm của mỗi thành phần là chìa khóa quan trọng để bạn có thể vận hành CSS theo ý muốn. Trong bài này tôi sẽ nói về chức năng của từng thành phần. Tuy nhiên tôi sẽ vẫn giữ nguyên từ chuyên ngành là Block và Inline mà không dịch ra tiếng Việt là “khối” và “trong dòng” nghe cùi quá.

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:

Bạn sẽ thấy dòng chữ này chiếm hết độ rộng của thành phần mẹ chứa nó và tự động xuống hàng mới

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

&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;FAQs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

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

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

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.

]]> http://www.izwebz.com/css/thanh-phan-block-va-inline/feed/ 21 Vertical-align trong CSS http://www.izwebz.com/css/vertical-align-trong-css/ http://www.izwebz.com/css/vertical-align-trong-css/#comments Sun, 10 Jan 2010 16:05:18 +0000 Demon Warlock http://www.izwebz.com/?p=1803 Tính năng Vertical-align trong CSS được kế thừa từ “thời đại” sử dụng bảng để thiết kế giao diện. Hiện tại tính năng valign trong table đã bị “đào thải” và không còn được sử dụng đúng chuẩn web nữa. Nhưng thay vào đó CSS lại giới thiệu một tính năng khác nghe tên hoàn toàn giống với valign là Vertical-align. Chính vì điều này nên đã gây ra một số hiểu lầm về nó. Trong bài này chúng ta sẽ xem xét cách sử dụng vertical-align trong CSS.

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.

]]> http://www.izwebz.com/css/vertical-align-trong-css/feed/ 17 Absolute Position trong thiết kế giao diện http://www.izwebz.com/css/absolute-position-trong-thiet-ke-giao-dien/ http://www.izwebz.com/css/absolute-position-trong-thiet-ke-giao-dien/#comments Mon, 16 Nov 2009 21:18:55 +0000 Demon Warlock http://www.izwebz.com/?p=1582 Có một thực tế rằng Absolute Position tuy rất hay và mạnh nhưng lại chưa được sử dụng đúng với “thực lực” của nó. Đa phần người ta thường sử dụng Float và dùng Padding hoặc Margin để căn chỉnh các thành phần trong giao diện với nhau. Nhưng như bạn cũng đã biết, giao diện với Float rất mong manh. Chỉ cần sai chút xíu là cả giao diện có thể bị vỡ.

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

Absolute Position

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

Absolute Position

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

]]> http://www.izwebz.com/css/absolute-position-trong-thiet-ke-giao-dien/feed/ 68 Pseudo Class http://www.izwebz.com/css/pseudo-class/ http://www.izwebz.com/css/pseudo-class/#comments Tue, 14 Oct 2008 02:08:52 +0000 Demon Warlock http://www.izwebz.com/?p=759 Pseudo (phát âm là: sju:dou) tiếng Việt có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường bạn đã biết ở bài trước. Pseudo Class sẽ tạo ra thay đổi tới thành phần của XHTML khi một sự kiện nào đó sẽ xảy ra. Pseudo Class được sử dụng thông dụng nhất với các đường liên kết khi người dùng di chuột qua hoặc nhấp vào nó. Với những trình duyệt mới hơn (trừ Internet Explorer 6) bạn có thể dễ dàng tạo ra hiệu ứng Rollover với bất cứ thành phần nào trên trang chứ không chỉ thẻ <a>.

Pseudo Class cho đường liên kết

Pseudo Class được sử dụng nhiều nhất với các đường liên kết (thẻ <a>) để tạo ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó ví dụ như những đường liên kết trên izwebz, khi bạn di chuột qua sẽ có màu nền là màu xanh nhạt.

Có tất cả 4 trạng thái của đường liên kết

  • Link: đơn thuần là đường liên kết để báo cho người đọc biết nó là đường liên kết.
  • Visited: Người đọc đã từng nhấp chuột vào link này rồi.
  • Hover: Người đọc di chuột qua đường liên kết
  • Active: Đường liên kết đang được người đọc nhấp chuột.

Tương đương với 4 Pseudo Class.

  • a:link {color:blue;}
  • a:visited {color:gray;}
  • a:hover {color:red; text-decoration:none;}
  • a:active {color:navy;}

Bây giờ hãy tạm gác chuyện màu nào hay hiệu ứng nào thì thích hợp cho đường liên kết lại, chúng ta hãy xem đoạn code trên ảnh hưởng tới đường liên kết như thế nào. Đoạn code trên định nghĩa đường liên kết lúc:

  • Bình thường sẽ có màu xanh và gạch chân là giá trị mặc định.
  • Đường liên kết đã được người dùng nhấp vào, nó sẽ có màu xám.
  • Người dùng di chuột lên (chưa nhấp) nó sẽ có màu đỏ và không có gạch chân
  • Người dùng chỉ nhấp và giữ chuột nó sẽ có màu xanh đậm (ít khi xảy ra)

Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết. Sau này bạn có thể sử dụng Pseudo Class như là 1 dạng Contextual Selector để hướng tới những đối tượng cụ thể và tạo ra những hiệu ứng khác nhau cho các đường link ở những phần khác nhau như thanh di chuyển, footer, liên kết bạn bè …

Trong 4 trạng thái trên thì bạn không nhất thiết phải khai báo cả 4 trạng thái. Thường thì người ta chỉ khai báo 2 trạng thái chủ yếu là :link và :hover. Còn :visited và :active thì cũng không thực sự cần thiết lắm. Trình duyệt sẽ bỏ qua những trạng thái không được khai báo.

Lưu ý: Tuy nhiên để có hiệu ứng Rollover, bạn phải khai báo :hover sau :link hoặc :visited. Hoặc bạn có thể nhớ theo kiểu LoVe Hate

Pseudo Class còn có thể được áp dụng cho bất cứ thành phần nào để tạo hiệu ứng Rollover chứ không chỉ với các đường liên kết. Ví dụ

h1:hover {background-color:green;}

Lưu ý: IE6 không hỗ trợ Pseudo Class ở những thành phần khác ngoại trừ đường liên kết. IE7 có hỗ trợ Pseudo Class nhưng bạn phải khai báo là Strict DOCTYPE thì nó mới hoạt động.

First Child
x:first-child

Tính năng này dùng để hướng đối tượng là con “trưởng” của một thành phần “đông con”, nơi x là con đầu

Ví dụ:

.vi_du em:first-child {color:red;}

với code xhtml như sau

&lt;p style=&quot;em:first-child: color: red;&quot; class=&quot;vi_du&quot;&gt;Tính năng này &lt;em&gt;chủ yếu&lt;/em&gt; dùng để hướng &lt;em&gt;đối tượng&lt;/em&gt;&lt;/p&gt;

Ở đoạn code trên thì hai thẻ <em> đều là con của thẻ <p> nhưng thẻ <em> đứng trước là con đầu, cho nên nó bị ảnh hưởng bới luật trên và kết quả bạn sẽ có

Tính năng này chủ yếu dùng để hướng đối tượng

Pseudo Elements

Pseudo Elements cho phép bạn tạo ra những hiệu ứng đặc biệt mà bạn không cần phải thêm markup vào code.

x:first-letter ở đó x là tên thẻ bị ảnh hưởng

p:first-letter {font-size:300%;}

Với markup tương ứng

&lt;p&gt;Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết.&lt;/p&gt;

x:first-line <– nơi x là tên thẻ bị ảnh hưởng

p:first-line {font-variation:small-caps;}

Cái hay của dòng code này là nếu cửa sổ trình duyệt lơn thì bất cứ chữ nào nằm vừa dòng đầu tiên sẽ bị IN HOA như hình trên. Nếu cửa sổ bé hơn, nó sẽ đẩy chữ xuống dưới và những chữ còn lại vẫn sẽ được IN HOA.

]]> http://www.izwebz.com/css/pseudo-class/feed/ 6 Contextual Position http://www.izwebz.com/css/contextual-position/ http://www.izwebz.com/css/contextual-position/#comments Mon, 13 Oct 2008 17:52:03 +0000 Demon Warlock http://www.izwebz.com/?p=745 Contextual Positioning là một khái niệm hết sức quan trọng mà bạn cần nắm vững nếu bạn muốn sử dụng CSS để thiết kế giao diện thay cho dùng bảng HTML. Nói nôm na thì Contextual Positioning có nghĩa là khi bạn định vị một thành phần bất kỳ sử dụng 4 giá trị top, right, bottom và left. Bạn thực chất định vị thành phần đó dựa vào vị trí của một thành phần khác. Thành phần khác đó được gọi là Contextual Positioning.

Nói một ví dụ trong thực tế để bạn dễ hiểu. Giả sử ai đó nói bạn kê chiếc bàn vào giữa. Bạn lập tức sẽ hỏi “vào giữa cái gì?” Bởi vì bạn cần một cái gì đó để xác định đâu là giữa để còn định vị chiếc bàn. Nếu họ nói “vào giữa căn phòng” thì bạn chỉ việc đặt nó vào giữa căn phòng thôi. Nói chung, khi định vị một thành phần, bạn cần một thành phần khác để xác định vị trí của thành phần bạn đang cần sẵp xếp lại vị trí. Và thành phần khác đó trong CSS gọi là Contextual Postioning.

Khi bạn định vị một thành phần với Absolute Position, thì ở giá trị mặc định thẻ <body> là contextual position của nó. Bạn cũng có thể thay đổi giá trị mặc định này bằng bất cứ thành phần “mẹ” nào của nó. Miễn là bạn đổi giá trị position của thành phần mẹ thành Relative.

Trong ví dụ này tôi sẽ có 2 đoạn văn bản và 1 tấm hình. Tôi muốn tấm hình được hiển thị nằm đè lên giữa đoạn văn trên và dưới. Rõ ràng bạn không thể sử dụng float để có được vị trí này. Thay vào đó chúng ta phải sử dụng Position.

contextual Position

Code HTML của hình trên chỉ đơn giản như sau

<body>
    <div id="wrap">
       <h3>Contextual Position</h3>
       <p>Nội dung thêm vào đây</p>
       <p class="second">Nội dung thêm vào đây
         <img class="date" src="images/date.png" alt="date" />
        </p>
    </div><!--End #wrap-->
</body>

Khi bạn xem trang này bằng trình duyệt, bạn sẽ thấy hình tương tự như sau. Ở hình chụp này, tôi đã đặt giá trị width của #wrap là 300px và cho hiển thị đường viền và màu nền cho dễ quan sát.

contextual Position

Bây giờ nếu chúng ta ra lệnh cho trình duyệt “đặt tấm hình kia vào giữa!”. Tất nhiên, vì nó muốn làm hài lòng bạn nên nó phải tuân theo mà không dám hỏi lại là “đặt vào giữa cái gì hả anh?”. Do vậy nó mặc định cách đặt như sau

contextual Position 
img.date {position: absolute; top: 20px; left: 20px;}

Bởi vì chúng ta chỉ nói trình duyệt định vị tuyệt đối tấm hình mà không nói rõ cho nó phải đặt nó tuyệt đối so với cái gì. Trong trường hợp này vào lúc cấp bách nó lấy ngay thẻ body để làm thành phần tương đối. Nhưng tất nhiên đó không phải là điều mình muốn, do vậy mình sẽ nói với trình duyệt rõ ràng hơn bằng cách cho nó biết chính xác mình muốn đặt ở đâu.

Như bạn thấy ở trên, thẻ p của đoạn văn thứ nhất chính là thẻ mẹ của tấm hình. Chúng ta sẽ lấy thẻ đó làm căn bản và điều chỉnh tấm hình theo nó. Vậy nên trong code CSS, bạn khai báo position cho thẻ p với class=”second” là relative

p.second {position: relative;}
contextual Position

Ngay khi bạn đổi position của thẻ p thành relative, lập tức trình duyệt sẽ hiểu bạn muốn nó định vị tương ứng với thẻ nào và bây giờ bạn có thể điều chỉnh vị trí của tấm hình theo ý mình. Với position bạn có thể sử dụng cả giá trị âm như là -30px hoặc -nPx.

Đây là một trong những tính năng khá hay của CSS nhưng cũng hơi khó diễn đạt bằng lời. Do vậy tôi có làm một Video Tutorial về vấn đề này, hy vọng bạn sẽ dễ hiểu hơn =).

]]> http://www.izwebz.com/css/contextual-position/feed/ 8 Hướng đối tượng dựa vào cấp bậc XHTML http://www.izwebz.com/css/contextual-selector-css/ http://www.izwebz.com/css/contextual-selector-css/#comments Sun, 12 Oct 2008 16:32:21 +0000 Demon Warlock http://www.izwebz.com/?p=741 Trong bài trước bạn đã học về cấp bậc của XHTML, trong bài này tôi sẽ hướng dẫn bạn cách hướng đối tượng cụ thể nằm sâu hơn trong cấp bậc của HTML. Có 2 cách bạn có thể hướng đối tượng cụ thể là Contextual Selector và Child Selector

Contextual Selector

Nếu bạn viết code CSS như sau

p {color: blue;}

thì tất cả các thẻ <p> trong trang web sẽ có màu xanh. Nhưng nếu bạn chỉ muốn một đoạn nào đó có mầu xanh thôi chứ không phải toàn bộ trang. Lúc đó bạn sẽ dùng Contextual Selector có quy luật như sau:

div p {color: blue;}

Cách viết rất đơn giản, bạn chỉ cần liệt kê những thẻ “dẫn” đến thẻ bạn muốn hướng tới và cách nhau bằng một dấu cách. Thẻ nào gần nhất với dấu { … } là thẻ đó bị ảnh hưởng bởi CSS.


Chúng ta sẽ lấy một ví dụ nơi mà cấp bậc của XHTML phức tạp hơn để minh hoạ cho cách hướng đối tượng này.

<body>
  <h1>Cách hướng đối tượng <em>trong CSS</em> rất quan trọng</h1>
  <p>Ví dụ này sẽ chỉ cho bạn cách sử dụng<em> cấp bậc XHTML </em>
để hướng đối tượng </p>
  <p>Cách viết rất đơn giản, bạn chỉ cần <span>liệt kê <em>”đường dẫn”
</em>đến thẻ</span> cần hướng tới, thẻ nào nằm ở cuối cùng sẽ là đối
tượng bị ảnh hưởng </p>
</body>

Nếu bây giờ bạn bắt đâu viết code CSS

em {color: red;}

Thì tất cả chữ nằm trong thẻ <em> sẽ bị biến thành màu đỏ.

Nhưng nếu bây giờ bạn không muốn có chữ màu đỏ ở thẻ <h1> mà bạn chỉ muốn nó ở các thẻ <p> thôi. Bạn sẽ viết như sau

p em {color:red;}

Ở luật trên bạn đã thêm “đường dẫn” p vào trước em để chỉ ra rằng chỉ có thẻ <em> nào nằm trong <p> mới bị ảnh hưởng và cụ thể là sẽ có màu đỏ.

Ở ví dụ trên bạn thấy thẻ <em> nằm trong thẻ <span> cũng bị ảnh hưởng mặc dù nó không phải là “con đẻ” của thẻ <p> nhưng nó lại là “cháu nội” của thẻ <p> do vậy nó vẫn bị ảnh hưởng.

Bạn có thể gộp nhiều thẻ vào một Selector như sau

p span em {color:red;}

Ở luật này bạn đã chỉ ra rất chi tiết chỉ có thẻ <em> nằm trong thẻ <span> và nằm trong thẻ <p> mới bị ảnh hưởng. Trong cách dùng Contextual Selector này bạn có thể gộp bao nhiêu thẻ tùy thích miễn là thẻ bạn muốn hướng tới nằm ở cuối cùng sát cạnh dấu { … }

.

Nhưng bây giờ nếu bạn chỉ muốn từ “cấp bậc XHTML” ở đoạn văn thứ 2 có màu đỏ thì bạn sẽ không làm được với Contextual Selector. Bởi vì 2 đoạn văn đều có cấu trúc giống nhau. Cho nên bạn cần phải sử dụng đến Child Selector

Child Selector

Child Selector dùng để hướng tới đối tượng là “con cái” trực tiếp cúa chúng trong cấp bậc XHTML. Khi đó bạn có thể dùng dấu lớn hơn “&gt;” ở giữa hai thẻ

p > em {color:red;}

Với luật này bạn chỉ ra rằng chỉ có thẻ <em> là con trực tiếp của thẻ <p> mới bị ảnh hưởng. Còn chữ “đường dẫn” ở đoạn văn thứ 2 không phải là con trực tiếp do đó nó không bị ảnh hưởng bởi luật này.

Kết luận

Sử dụng thành thạo Contextual Selector sẽ giúp bạn rất nhiều trong quá trình thiết kế giao diện. Có người do không nắm vững khái niệm này đã lạm dụng ID và Class chỉ để hướng tới những đôi tượng cụ thể trong cấp bậc, làm cho code XHTML và CSS của họ trở nên phức tạp và không gọn gàng. Tất nhiên nếu đôi khi bạn không thể hướng tới một đối tượng cụ thể, bạn có thể sử dụng vài ID và Class. Nhưng đừng tuỳ tiện sử dụng chúng chỉ vì bạn không nắm rõ cấp bậc XHTML.

]]> http://www.izwebz.com/css/contextual-selector-css/feed/ 8 Thứ bậc trong XHTML http://www.izwebz.com/css/xhtml-hierarchy/ http://www.izwebz.com/css/xhtml-hierarchy/#comments Sun, 12 Oct 2008 15:42:08 +0000 Demon Warlock http://www.izwebz.com/?p=737 Thứ bậc trong XHTML là một khái niệm rất quan trọng mà bạn cần nắm rõ để sử dụng CSS sau này. Thứ bậc của XHTML giống như phả hệ của một gia đình vậy. Ở trên cùng là cụ tổ, xuống dưới là cụ, ông, cha, chú, anh chị em …



HTML tree

Ở hình ví dụ trên bạn sẽ thấy rõ ràng mối liên hện giữa các thẻ với nhau và chúng ta có thể hiểu bằng những cách sau (suy diễn theo kiểu phả hệ):

  • Thẻ <body> đóng vai trò là thẻ gốc và chứa các thẻ con nằm trong nó.
  • Các thẻ p, h1 và img là con của body
  • Hay nói cách khác body chính là cha của p,h1 và img.
  • ul là cha của li hay nói cách khác li là con của ul
  • <body> là “ông nội” của <ul> và là ông cố của <li>

Đến đây bạn có thể hỏi “tại sao tôi cần phải biết phả hệ này?”, tại vì sau này khi sử dụng CSS để thiết kế giao diện. Đôi khi bạn cần hướng tới một đối tượng cụ thể nào đó trong đoạn code XHTML, nếu bạn không nắm rõ mối liên quan giữa các thẻ với nhau. Có thể bạn sẽ bị nhầm lẫn và hướng tới sai đối tượng.

Ví dụ sau này trong đoạn code của bạn có nhiều thẻ <h1> nhưng bạn chỉ muốn thẻ <h1> nằm trong phần “content” là có màu đỏ. Lúc đó bạn có thể hướng tới nó nhờ cấp bậc của XHTML. Nếu cho đoạn code sau

#content h1 {color:red;}

Như thế chỉ có thẻ <h1> thuộc thẻ <div id=”content”> sẽ bị ảnh hưởng, còn các thẻ khác trong trang web sẽ không bị ảnh hưởng vì nó không phải là một thành phần của <div id=”content”>

Có nhiều người chưa hiểu rõ cấp bậc của XHTML nên họ gặp nhiều khó khăn trong việc hướng đối tượng khi viết code. Vì thế họ đã tuỳ tiện dùng ID và Class chỉ để hướng tới một đối tượng cụ thể, mà nếu nắm rõ khái niệm cấp bậc này, bạn chỉ cần viết một đoạn code nhỏ thay vì có hàng tá ID và Class không cần thiết.

]]> http://www.izwebz.com/css/xhtml-hierarchy/feed/ 7 Position Property http://www.izwebz.com/css/css-position-properties/ http://www.izwebz.com/css/css-position-properties/#comments Fri, 10 Oct 2008 06:23:28 +0000 Demon Warlock http://www.izwebz.com/?p=720 Khi đã sử dụng CSS để thiết kế giao diện thì Position Property là một trong những phần quan trọng nhất mà bạn cần hiểu rõ. Position Property chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4 giá trị cho Position property là: Static, Absolute, Fixed và Relative. Trong đó Static là giá trị mặc định khi không có giá trị nào được gán. Trong ví dụ dưới đây bạn sẽ thấy có 4 đoạn văn ngắn. Đoạn văn thứ 1, 2 và 4 tôi để giá trị mặc định là Static và đoạn văn thứ 3 được gán id để chúng ta có thể thay đổi nó mà không ảnh hưởng đến các đoạn khác.

Static Position

Trước hết là chế độ Static mặc định khi không có giá trị nào được gán, bạn sẽ thấy 4 đoạn văn xếp chồng lên nhau

Position Static CSS

Với giá trị Static (giá trị mặc định) các thành phần chỉ đơn thuần được sắp xếp theo thứ tự xuất hiện và được phân cách bởi các giá trị margin mặc định. Để thay đổi cách sắp xếp này, bạn cần sử dụng một trong những cách sau đây.

Relative Position

Bây giờ chúng ta sẽ thử di chuyển đoạn văn thứ 2 bằng cách gán cho nó giá trị là relative. Ở mỗi giá trị này sẽ có 4 tuỳ biến lần lượt là top, right, bottom và left cho bạn sử dụng. Tuy nhiên trong hầu hết các trường hợp, bạn chỉ cần sử dụng hai giá trị là top và left là đủ đạt được mục đích.

p#second {position: relative; top: 10px;left: 20px;
border: 1px solid #a4a4a4;background: #faf3c7;}

Ở code HTML bạn phải có

<p>Đoạn văn bản thứ nhất …</p>
<p id="second">Đoạn văn bản thứ 2 …</p>
<p>Đoạn văn bản thứ 3 ..</p>
<p>Đoạn văn bản thứ 4 …</p>
Position Relative CSS

Ở trình duyệt bạn sẽ thấy đoạn văn bản thứ 2 bị dịch chuyển xuống dưới 10px và lệch sang phải 20px. Như đã nói ở trên các thành phần có mối liên quan đến nhau, do vậy khi bạn đặt giá trị {top: 10px; left: 20px;} thì đoạn văn này sẽ bị di chuyển tương ứng với đoạn văn nằm trên nó. Cụ thể cạnh trên của nó cách cạnh đáy của đoạn thứ 1 là 30px.

Ở trong trường hợp Relative này, khi đoạn văn bị di chuyển nó cũng để lại một khoảng trống bằng với kích thước cũ của nó và dù nó di chuyển sang vị trí mới. Khoảng không nó chiếm vẫn không bị mất đi. Cho nên nếu bạn sử dụng phương pháp này vào giao diện, bạn cũng cần di chuyển đoạn văn thứ 4 sao cho nó không bị đè lên nhau.

Absolute Position

Trong phần này ta sẽ thử với giá trị là absolute

Position absolute CSS

Bạn sẽ thấy đoạn văn thứ2 bị di chuyển lên trên và cách biên trình duyệt là 10px và 20px tương ứng với trên và trái. Bởi vì khi định vị với giá trị là absolute cho một thành phần nào đó, nó sẽ bị tách ra khỏi vị trí thông thường của nó. Khoảng không cũ nó bỏ lại đã bị đoạn văn thứ 3 di chuyển lên lấp lại. Đoạn văn thứ 2 này trở nên hoàn toàn độc lập với các thành phần xung quanh.

Fixed Position

Fixed Position cho hiệu ứng giống y như absolute chỉ có điều khi bạn kéo thanh cuộn dọc, đoạn văn thứ 3 sẽ giữ nguyên vị trí và không bị cuốn theo trình duyệt. Đặc tính này hiện nay ít được sử dụng hơn. Nhưng nếu bạn muốn một thành phần nào đó như là nút bấm hoặc hình quảng cáo luôn kè kè theo sát người đọc mỗi khi họ kéo thanh cuộn dọc, thì bạn có thể sử dụng tính năng này.

]]> http://www.izwebz.com/css/css-position-properties/feed/ 18 Clear và Float http://www.izwebz.com/css/clear-va-float/ http://www.izwebz.com/css/clear-va-float/#comments Fri, 10 Oct 2008 03:52:33 +0000 Demon Warlock http://www.izwebz.com/?p=716 Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ đầy chỗ trống nếu có. Clear dùng để ngăn không cho thành phần ở dưới di chuyển lên trên đề lấp vào chỗ trống.

Ví dụ bạn có 2 đoạn văn bản, bạn chỉ muốn đoạn văn thứ nhất bao quanh hình ảnh và đoạn văn thứ hai thì vẫn nằm ở dưới. Theo luật trên thì cữ có chỗ là đoạn văn thứ 2 cũng sẽ tràn lên để lấp chỗ trống. Nếu bạn không muốn điều này xảy ra bạn có thể sử dụng Clear để nó không tràn lên được.

1. Float

Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình ảnh. Nhưng nó cũng được áp dụng nhiều trong việc thiết kế giao diện sử dụng CSS. Ở ví dụ dưới đây sẽ bao gồm một hình logo của izwebz và một đoạn văn bản. Tôi sẽ cho hình được float: left và đoạn văn bản được giữ nguyên.

img {float: left;}

Để tạo được hiệu ứng này bạn cần có một thẻ <img> và <p>

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Box Model</h3>
  <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực
sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào
mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại,
nó sẽ bị đầy lùi vào biên là 5px .</p>
</div><!--End #bao_quanh-->
clear and float CSS

Tóm lại khi bạn cho tấm hình float: left bạn khiến nó bị dịch chuyển sang phía tận cùng bên trái (hoặc phải nếu float: right) so với thẻ mẹ của nó là div id=”bao_quanh”. Đoạn văn bản cũng sẽ di chuyển tương tự so với thẻ mẹ của nó, do đó tạo ra hiệu ứng bao quanh lấy hình ảnh. Cho nên nếu bây giờ bạn không muốn chữ bao quanh hình nữa mà muốn nó tạo ra 2 cột song song với nhau, bạn chỉ cần tăng giá trị margin-left cho đoặn văn thành 150px.

p {margin-left: 150px;background: #faf3c7;}
img {float: left;}
Clear and Float CSS

Khi bạn cho tấm hình float sang bên trái và đoạn văn bản có lề trái bằng với độ lớn của tấm hình, thì hiệu ứng bao xung quanh hình sẽ mất đi mà thay vào đó bạn được 2 cột song song với nhau. Đây là nguyên lý cơ bản nhất để tạo ra giao diện có nhiều cột sử dụng float. Miễn là mỗi thành phần khi được float đều có một giá trị độ rộng nhất định thì nó sẽ xếp song song với nhau và tạo ra cột (nếu diện tích đủ rộng). Nếu bạn làm như vậy với 3 thẻ <div> float: left và có độ rộng nhất định, bạn sẽ được 3 cột song song. Sau đó bạn có thể thêm các thành phần vào từng cột để tạo nên giao diện.

2. Clear

Luôn đi chung với Float là Clear. Clear thực chất chỉ là một tính năng chống không cho đoạn văn ở dưới tràn lên trên để lấp vào chỗ trống. Như đã nói ở trên, khi bạn dùng float bạn có thể tạo ra hiệu ứng chữ bao xung quanh hình. Nhưng đôi khi vì dư chỗ, cho nên đoạn văn ở dưới di chuyển lên trên và lấp vào chỗ trống. Tất nhiên đó không phải là điều bạn muốn, do vậy bạn cần sử dụng Clear để “dọn sạch” nó đi.

Ở ví dụ dưới đây tôi có 2 đoạn văn và 2 tấm hình. Nếu bạn cho tất cả các thành phần đều float: left bạn sẽ thấy nó bị như hình dưới đây.

Clear and Float CSS

Lý do là vì tất cả các thành phần đều được float: left do vậy hình và đoạn văn ở dưới nó sẽ cố phủ đầy chỗ trống mà tấm hình và đoạn văn thứ nhất để lại khi bị float: left. Và cũng chính vì lẽ đó mà tạo ra hiệu ứng ta không mong đợi. Có nhiều cách xử lý vấn đề này, tôi sẽ hướng dẫn bạn cụ thể hơn trong video tutorial về Clear và Float. Còn bây giờ đây là cách phổ biến nhất và cũng gây ra nhiều tranh cãi nhất.

Để đạt được mục đích sao cho tấm hình và đoạn văn thứ 2 “ngoan ngoãn” chịu chui xuống dưới, chúng ta sẽ thêm một thẻ div trống vào dưới đoạn văn thứ nhất.

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Clear và Float</h3>
  <p><!--Nội dung bị cắt ngắn --></p>

<div class="clear"></div><!-- Thẻ div trống với class="clear"-->

<img src="images/ball.png" alt="ball" />
   <p><!--Nội dung bị cắt ngắn --></p>
</div><!--End #bao_quanh-->

Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau:

.clear {clear: both;}

Với một thẻ <div> và một class dùng để clear, bây giờ thì nó sẽ xuất hiện như ý rồi

Clear and Float CSS

Sở dĩ biện pháp này gây tranh cãi là vì chúng ta thêm một thành phần không phải là nội dung vào phần nội dung cốt để đạt được mục đích. Điều này đi ngược lại với nguyên lý của CSS là tách rời nội dung khỏi cách trình bày. Cho nên nếu bạn không muốn có một thẻ div trống trong code HTML của mình bạn cũng có thể làm theo cách dưới đây.

Sử dụng clearfix

Bạn copy đoạn code sau và cho vào stylesheet

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Bây giờ nếu bạn muốn clear nó thì bạn không phải tạo một thẻ div trống nữa mà chỉ việc khai báo class=”clearfix” vào thẻ mẹ chưa các thành phần float. Trong ví dụ ở trên bạn thêm vào phần sau

<div id="bao_quanh" class="clearfix">

Với cách này bạn không cần phải thêm một thẻ div nữa mà vẫn hiện ngon lành. Cho đến bây giờ cách này cũng rất phổ biến vì nó hiển thị tốt trên mọi trình duyệt.

Tôi cũng có làm một Video tutorial về chủ đề này, bạn có thể tham khảo thêm.

Cá nhân tôi vẫn luôn sử dụng phương pháp này bởi vì nó đơn giản, gọn nhẹ và không cầu kỳ. Chỉ có một thẻ div trống thêm vào phần nội dung cũng chẳng chết ai >”<. Chắc có lẽ phải chờ đến khi CSS3 ra đời và có cách khắc phục tốt hơn và dễ dàng hơn.

]]> http://www.izwebz.com/css/clear-va-float/feed/ 13