Tìm hiểu về công nghệ HTML 5 và CSS 3

Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệt Web trong việc hiển thị một trang HTML. Về cơ bản, các trang HTML như bộ xương – khuôn khổ cơ bản – của một trang web – trong khi các file CSS sẽ cụ thể hóa các thành phần của một trang nên được hiển thị như thế nào. CSS cho phép bạn kiểm soát phông chữ, màu chữ, kiểu nền…, của một trang HTML.

CSS làm cho việc thiết kế và xây dựng một trang Web trở nên dễ dàng hơn. Trước khi có CSS, bạn phải sử dụng HTML để thực hiện tất cả các tiêu đề cũng như các thành phần của một trang Web. Mặc dù đã có một số cách khác nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Web sẽ phải thay đổi từng thành phần riêng lẻ trên mỗi trang. CSS đã giúp cho việc thay đổi phong cách của một trang Web đơn giản hơn và đỡ tốn thời gian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đó apply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây.

HTML5 và CSS3

HTML5 và CSS3 là các chương trình mới nhất cho việc thiết kế Web. Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một video vào trang Web – đã được nhận được nhiều sự chú ý, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển Web.

Video và hiệu ứng Flash

HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight.

Vậy thì những gì là lợi ích lớn với tính năng video của HTML5 là gì? Thứ nhất, nó là miễn phí và không cần phần mềm Adobe Flash plugin. Thứ hai, Flash có thể làm chậm máy tính của bạn (mặc dù phần mềm tăng tốc phần cứng hardware-accelerated Flash 10.1 – đang trong phiên bản beta – có thể giúp giải quyết vấn đề này). Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng sẵn trong đó.

Tính năng video mới này chắc chắn sẽ là một sự trợ giúp tuyệt vời cho những người sử dụng Apple iPhone bởi vì Apple phải từ chối khá nhiều để bất kỳ sự điều khiển của nó trên iPhone sẽ được chuyển giao tới cho một ứng dụng khác (dạng điều khiển này thường được biết đến như là một chế độ absolute monarchy). Nhưng cũng hy vọng HTML5 sẽ có lợi cho điện thoại Blackberry, loại điện thoại mà hầu hết là không có khả năng hỗ trợ flash. Trong thực tế, tính năng HTML5 video của Apple đã được khẳng định chắc chắn đến mức họ có hẳn một trang làm nổ bật cái gọi là các Website “iPad-ready”.

 

Một điều quan trọng cần lưu ý về HTML5 video là nó vẫn còn thay đổi. Ví dụ, Safari, Chrome, và sắp tới là Internet Exporer 9 sẽ hỗ trợ HTML5 video sử dụng định dạng H.264. Firefox, mặt khác, hiện thời chỉ hỗ trợ HTML5 video sử dụng định dạng Ogg Vorbis, nhiều người sau khi dùng Firefox cho rằng mã nguồn đóng của H.264 có thể gây ra vấn đề về bản quyền trong tương lai, do đó nó có thể sẽ còn phải thay đổi.

Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Wed dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript đó là Akihabra Games và Star Wars AT-AT Walker. Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác. Mặc dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 có nhiều hứa hẹn trong lĩnh vực này.

Kho lưu trữ Offline: Ứng dụng web tiến tới bước tiếp theo

Các ứng dụng web đang trở nên ngày càng tinh vi, và một số tính năng mới trong HTML5 sẽ giúp chúng tiếp tục được cải thiện. HTML5 cho phép các ứng dụng web có khả năng lưu trữ thông tin và tiện ích Internet để sử dụng khi bạn đang offline. Tính năng này sẽ cho phép lưu trữ và truy cập dữ liệu như e-mail, lịch, và các tiện ích khác thông qua các ứng dụng Web, ngay cả khi bạn đang offline, điều này làm cho các ứng dụng Web trở nên tốt hơn và hữu dụng hơn.

Khi bạn đăng nhập online trở lại các ứng dụng này sẽ được load nhanh hơn bởi vì cấu trúc của trang đã được đã được lưu trong bộ nhớ cache của trình duyệt. Về lý thuyết, bất kỳ thay đổi nào được thực hiện cho các ứng dụng Web trong khi offline vẫn được giữ nguyên khi bạn online trở lại.

Với tính năng lưu trữ offline bạn sẽ có thể xác định trong trình duyệt các trang hoặc các loại trang muốn trình duyệt tiếp tục lưu trữ mà không cần phải save riêng từng trang, nói cách khác, trước đây bạn phải thực hiện “File-Save As” bất kỳ trang nào muốn save trong khi offline, còn bây giờ khi sử dụng hệ thống mới, bạn sẽ có thể thiết lập trình duyệt của bạn tự động save một loạt những trang nhất định (ví dụ như tất cả những gì của thuộc về một Web site).

Điều này cũng sẽ tăng tốc độ load khi online bởi vì một phần của trang đã được lưu sẵn trong bộ nhớ, do đó bạn sẽ không phải chờ đợi load toàn bộ nội dung của trang khi refresh.

Theo như Google công bố thì HTML5 sẽ bắt đầu được sử dụng cho các ứng dụng Web vào tháng 12 năm nay thay vì chỉ sử dụng cho khuôn mẫu Google Gears của riêng nó.

Công cụ thiết kế mới

HTML5 và CSS3 cũng làm cho các ứng dụng Web và các trang Web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này là một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn.

Khả năng tương thích HTML5

Mặc dù HTML5 và CSS3 vẫn chưa được hoàn tất, nhưng chúng đã làm thay đổi bộ mặt của trang Web. Một số trình duyệt – như các phiên bản hiện hành của Safari và Chrome – đã thực hiện một số tính năng từ các phiên bản dự thảo của HTML5 và CSS3. Và với việc sử dụng những trình duyệt này bạn có thể xem nhiều trang web mà trong đó cũng sử dụng HTML5 và CSS3 như CNN.com, The New York Times, YouTube (trong phiên bản beta) và Vimeo.

Phiên bản hiện tại của Internet Explorer, trình duyệt IE 8, hỗ trợ HTML5 rất hạn chế, tuy nhiên, IE 9 sẽ hỗ trợ H264 video, âm thanh nhúng, đồ họa vector tỷ lệ và CSS3.

Không kể HTML5 vẫn còn đang trong giai đoạn “thử nghiệm” mà ngay cả một số công nghệ đang được áp dụng cho các trình duyệt và các trang Wed hiện nay vẫn chưa phải là đã kết thúc về mặt kỹ thuật.

HTML5 và CSS3 – được kết hợp với các công nghệ Web khác như JavaScript – có thể rất hữu ích cho phong cách, định dạng và tốc độ hoạt động của bất kỳ trang web nếu được sử dụng đúng. Hai ngôn ngữ sẽ cách mạng hóa cách chúng ta lập trình và xem internet với các tính năng cải tiến all-in-one, có thể loại bỏ việc phải sử dụng nhiều ứng dụng của bên thứ ba (ví dụ như Flash).

Về tài liệu tham khảo thêm (tiếng anh):

HTML 5: Các bạn vào đây tham khảo thêm

http://dev.w3.org/html5/spec/Overview.html

CSS 3: Các bạn vào đây tham khảo thêm

http://www.w3.org/TR/css3-roadmap/

Bài viết được tớ đi sát theo 1 ví dụ để cụ thể hóa vấn đề 1 cách thực tế. Vì thế, để có thể theo dõi tượng tận bài viết này, các bạn phải download template demo hoàn chỉnh dưới đây để tham khảo và theo dõi.

Đây là 1 template demo được thiết kế theo công nghệ HTML 5 và CSS 3 được mình lấy trên mang về, chỉnh sửa lại để phân tích cho bài viết.
Donwload Template Demo

http://www.mediafire.com/?3myucjytnjg

1. Nhận thức tầm quan trọng của HTML 5 và CSS 3 trong tương lai

Vì mình thấy các trình duyệt đình đám đã rục rịch ra các phiên bản cập nhập để hỗ trợ dần cho HTML 5 và CSS 3. Nên nó mang tính khả thi rất cao, vả lại chúng đều được phát triển từ tổ chức W3C. Và dĩ nhiên nó sẽ là công nghệ của tương lai.

Một điều rất khả thi nữa là bằng việc sử dụng HTML 5 và CSS 3, mình cảm thấy nó giúp ích rất nhiều trong việc bố cục trang web lại theo 1 chuẩn nhất định, và hiển nhiên điều này sẽ giúp website chúng ta tối ưu hóa rất tốt trên các công cụ tìm kiếm (SEO), 1 khi mà các công cụng tìm kiếm hỗ trợ 2 chuẩn này.

Nó mới được phát triển gần đây, và còn được ít người sử dụng, tuy nhiên, hầu hết các trình duyệt lớn như: Firefox 3.5, Google Chrome 2.0, Safari 4.0, Opera 10 đều đã đón đầu công nghệ bằng cách hỗ trợ chúng. Chỉ duy mỗi IE là chưa thấy động tĩnh gì. Và 1 điều nữa là không phải trình duyệt nào cũng hỗ trợ đầy đủ hết các tính năng của HTML 5 và CSS 3, theo đánh giá thì Opera là hỗ trợ đầy đủ nhất.

2. Làm quen với khái 2 khái niệm :

HTML 5
- HTML5 là phiên bản tiếp theo của HTML. Nó được phát triển thêm 1 số nhóm phần tử mới sẽ tối ưu hóa trang web của chúng ta hơn. Điều này sẽ làm website của bạn dễ dàng được các bộ máy tìm kiếm biết đến hơn. Ngoài ra, HTML 5 cũng sẽ bao gồm các hàm API mới nhằm hỗ trợ tốt hơn cho tính truyền thông bởi các thao tác vẽ đồ họa trên màn hình, lưu trữ dữ liệu ngoại tuyến, kéo và thả ..v…v……

- HTML 5 cũng loại bỏ một vài đặc điểm khá nổi tiếng như sự vắng mặt của frames và các thành tố định dạng chuẩn của CSS như tt và u.

CSS 3
- CSS 3 được xây dựng dựa trên các nguồn gốc của các style, selectors và cascade dựa trên phiên bản cũ của CSS 2.0 trước đó. Nó cho phép thực thi thêm 1 số tính năng mới, bao gồm cả mới selectors, pseudo-class và các properties. Bằng cách sử dụng các tính năng mới này, việc thiết kế trình bày template của bạn sẽ trở nên dễ dàng hơn rất nhiều.

3. DEMO CỤ THỂ

Trọng tâm trong bài này mình sẽ demo để cho mọi người tham khảo về ứng dụng HTML 5 và CSS 3, qua đó hy vọng mọi người sẽ có cái nhìn khái quát về chúng. Còn nói chi tiết về chúng thì hy vọng mọi người vào 2 link mình đã giới thiệu ở mục Tài liệu trên để tham khảo thêm.

Trong bài tut này, chúng ta sẽ cùng nghiên cứu 1 template blog sử dụng kỹ thuật thiết kế HTML5 và CSS3, chúng đều là các version tiếp theo của HTML và CSS, vì vậy nếu ai đã biết về HTML và CSS thì sẽ chẳng khó khăn gì để chúng ta nắm bắt được chúng.

Và bây giờ chúng ta đi vào phân tích thiết kế của trang Blog.

Cấu trúc website
Trước khi đi vào phân tích cấu trúc template demo, các bạn xem hình phân tích cụ thể cấu trúc của trang:

A. Làm việc với các thành phần HTML 5

Trong HTML5, có các thẻ (tag) đăc biệt hỗ trợ cho việc thiết kế các phần như: header, figure(hình ảnh), navigation (phần định hướng, thông thường là phần đặt menu chính), sidebar (khu vực phụ, thông thường chúng ta đặt các menu phụ tại đây), và footer. Đầu tiên, các bạn nhìn qua đoạn mã dưới đây, mình sẽ giải thích sau:

<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
<h1>Page title</h1>
</header>
<nav>
<!-- Navigation -->
</nav>
<section id="intro">
<!-- Introduction -->
</section>
<section>
<!-- Main content area -->
</section>
<aside>
<!-- Sidebar -->
</aside>
<footer>
<!-- Footer -->
</footer>

</body>
</html>

Nhìn qua thì chắc các bạn cũng nhận thấy HTML5 đã hỗ trợ thêm rất nhiều thẻ để phân chia trang web thành các phần rõ rệt, điều này có nghĩa là việc trình bày bố cục 1 trang web đang dần được hình thành thành 1 chuẩn nhất định (điển hình là chuẩn web 2.0), và bây giờ chúng ta cùng tim hiểu về các thẻ này:

Trong HTML 5, việc khai báo doctype trở nên đơn giản hơn, chúng ta chỉ cần khai báo duy nhất 1 câu lệnh đơn giản như sau: <!doctype html> là đủ để trình duyệt hiểu về định dạng văn bản của trang HTML chúng ta, thay vì trước đó rất dài phải ko nào . Còn DOCTYPE là gì thì mọi người tự tìm hiểu nhé, mình không nói thêm các vấn đề phụ này.

  • Thẻ <header> là 1 thẻ mới, được sử dụng để chỉ ra thành phần header của 1 tài liệu. Thông thường trong thẻ này sẽ bao gồm các thẻ định dạng văn bản như: các thẻ từ <h1> đến <h6>.
  • Thẻ <nav> là 1 giải pháp mới được sử dụng để chỉ ra các thành phần của 1 navigational trong website, chẳng hạn như các Menu Link.
  • Thẻ <section> được sử dụng biểu diễn 1 thành phần văn bản của tài liệu (hay có thể hiểu là nó được sử dụng để bọc 1 thành phần văn bản). Và dĩ nhiên nó cũng có thể chứa các thẻ thiết kế văn bản. Ngoài ra chúng cũng có khả năng đặt lồng vào lẫn nhau.
  • Thẻ <aside> được sử dụng để chỉ ra khu vực sidebar của website. Khu vưc này thông thường chứa các liên kết liên quan đến các Chuyên mục hay các bài viết trong website.
  • Thẻ <footer> chỉ ra khu vực footer của website. Khu vực này thông thường chứa các thông tin chi tiết của 1 website như: thông tin bản quyền, thông kê các bài viết, các liên kết đến bài viết mới nhất ..v…v.. Nói chung còn tùy thuộc vào mục đích sử dụng của người dùng.

Các thẻ này được HTML 5 định nghĩa là thẻ senmantic (hiểu nôm na là các thẻ thống kê website). Thay vì trước đây, chúng ta sử dụng các thẻ div để làm việc này, thì nay, HTML5 đã hỗ trợ bằng việc thêm các thẻ senmantic này để chúng ta sử dụng. Điều này sẽ rất có ích cho việc thống kê website của bạn để tối ưu hóa chúng trên các công cụ tìm kiếm và giúp các công cụ screen-readers (1 ứng dụng để phân tích các thành phần trên màn hình) có thể đọc hiểu được những gì có trong 1 website.

Khu vực Navigation

Đây là khu vực được đặt trong thẻ <nav>. Tại khu vực này chúng ta sẽ thiết kế 1 Menu chính cho website bằng bô cặp thẻ unorderlist <ul> và <li>:

<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Lưu trữ</a></li>
<li><a href="#">Liên hệ</a></li>
<li><a href="#">Subscribe via. RSS</a></li>
</ul>
</nav>

Khu vực Introduction

Tại khu vực này chúng ta sẽ viết 1 giới thiệu đơn giản vè website của chúng ta, vì vậy chúng ta sẽ đặt nó trong thẻ <section>

<section id="intro">
<header>
<h2>Tiêu Đề Introduction!</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

Chúng ta gán cho thẻ <section> 1 id=”intro” để tùy chỉnh style của nó trong css. Vì trong khu vực introduction của chúng ta, cũng bao gồm 1 header, nên mình sẽ dùng thẻ <header> bọc nó lại coi như là miêu tả để cho người ta biết đó là header của section intro.

Khu Vực Main Content

Khu vực main content bao gồm 3 phần: nội dung các bài blog được post, các comment và comment form. Sử dụng kiến thức về cấu trúc các tag trong HTML5, chúng ta sẽ dễ dàng làm nó như sau:

Khu vực Blog Post

<section>
<article>
<header>
<h2>Tiêu đề của Blog</h2>
<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
</article>
</section>

Chúng ta bắt đầu 1 section mới và bọc lấy toàn bộ nội dung của bài blog trong 1 thẻ <atrticle>. Thẻ <article> được sử dụng để biểu diễn 1 cách tách biệt khu vực entry trong 1 blog bao gồm: tiêu đề blog, nội dung blog và nội dung comment..v…v…

Phần tử header được sử dụng để trình bày các tiêu đề và metadata(dịch nôm na là siêu dữ liệu) của 1 bài blog. Ở đây có 1 thẻ mới là thẻ <time>…</time>, được sử dụng để đánh dấu 1 khu vực thời gian cụ thể.

Thiết kế Comments

<section id="comments">
<header>
<h3>Comments</h3>
</header>
<article>
<header>
<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</article>
<article>
<header>
<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</article>
</section>

Comment Form

<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>

Có 2 giá trị mới cho thuộc tính type của thẻ <input> là email và url. Giá trị email để xác định rõ kiểu email người dùng nhập vào có hợp lệ hay ko, và url để xác định địa chỉ 1 website người dùng nhập vào có hợp lệ hay ko. Ngoài ra còn có thêm thuộc tính required, khi bạn viết thuộc tính này trong thẻ <input>, nếu người dùng bỏ rỗng box đó thì sẽ không thể submit form.

Sidebar và Footer

Tương tự, ta Sidebar và Footer được thiết kế như sau:

<aside>
<section>
<header>
<h3>Chuyên Mục</h3>
</header>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Sit amet consectetur</a></li>
<li><a href="#">Adipisicing elit sed</a></li>
<li><a href="#">Do eiusmod tempor</a></li>
<li><a href="#">Incididunt ut labore</a></li>
</ul>
</section>
<section>
<header>
<h3>Lưu Trữ</h3>
</header>
<ul>
<li><a href="#">Tháng 12 2008</a></li>
<li><a href="#">Tháng 1 2009</a></li>
<li><a href="#">Tháng 2 2009</a></li>
<li><a href="#">Tháng 3 2009</a></li>
<li><a href="#">Tháng 4 2009</a></li>
<li><a href="#">Tháng 5 2009</a></li>
<li><a href="#">Tháng 6 2009</a></li>
</ul>
</section>
</aside>

B. Làm việc với CSS 3

Ở đây ,mình không nói thêm về các style đã có, mà chỉ đề cập đến 1 số style khá mới mẻ trong CSS, hay còn gọi là style CSS3.

Các bạn xem file style.css và chú ý 1 vài chỗ sau:

Định nghĩa các thẻ HTML5 là các block.

header, footer, section, aside, nav, article {
    display: block;
}

Style của Introduction

#intro {
    position: relative;
    margin-top: 66px;
    padding: 44px;
    background: #467612 url("images/intro_background.png") repeat-x;

    /* Them thuoc tinh (TT) trinh duyet vao TT background-size */
    -webkit-background-size: 100%; /* Safari browsers */
    -o-background-size: 100%; /* Opera browsers */

    /* Them thuoc tinh (TT) trinh duyet  vao TT border-radius */
    -moz-border-radius: 22px; /* Firefox browsers */
    -webkit-border-radius: 22px; /* Safari browsers */
}

Tại id intro này, chúng ta nhận thấy có 2 thuộc tính mới là: background-size và boder-radius.

Background-size: được sử dụng để thiết lập kích cỡ của hình nền so với box (ở đây là intro), nó sẽ giãn nở theo độ rộng của box.

Boder-radius: được sử dụng để định nghĩa bán kính đường tròn của góc bo khung viền của id intro, thiết lập các thông số cho thuộc tính này, có thể làm cho góc bo đường viền của các bạn trở nên tròn trịa hơn.

Đây đều là các thuộc tính CSS3. Sở dĩ các bạn thấy trước các thuộc tính này có thêm các thuộc tính khác (-moz, -webkit) là để thông báo cho trình duyệt tương ứng với nó hiểu được. Vì các thuộc tính CSS 3 hiện nay còn rất ít trình duyệt hỗ trợ, nên hầu hết các thuộc tính CSS 3 đểu phải thêm vào các thuộc tính trình duyệt vào trước nó.

Các bạn xem hình minh họa để hiểu thêm về thuộc tính bo góc trong CSS 3

Border Radius

Style của Content và Sidebar

#content {
display: table;
}

#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}

aside {
display: table-cell;
width: 300px;
}

Khu vực mainContent và sidebar theo thiết kế là sẽ nằm cạnh nhau. Thông thường theo truyền thống chúng ta sẽ sử dụng thuộc tính float để định nghĩa nó nằm trên cùng 1 dòng, nhưng trong CSS3, chúng ta sẽ sử dụng table.

Bạn sẽ thắc mắc phải ko nào, vì có lẽ việc sử dụng bảng để thiết kế layout là quá lỗi thời. Nhưng các bạn đừng lo, table ở đây là giá trị table của thuộc tính display, chứ ko phải là sử dụng thẻ
<table> trong html. Trong CSS 3, thuộc tính display có giá trị table dùng để hỗ trợ xử lý việc chia bảng, cột, ô và dòng, nó rất hay, có thể chia dòng và cột bằng CSS và dễ định hình hơn cho những bạn không quen với float . Ở đây sử thiết lập display:table và display:table-cell có nghĩa là định nghĩa#content là 1 bảng, #mainContent và aside sẽ tương ứng là 1 ô và nằm trên cùng 1 dòng, thuộc bảng #content.

Hix, không biết nói thế nào cho các bạn dễ hiểu, nhưng thôi, các bạn cứ nhìn hình dưới đây, mình nghĩ các bạn sẽ định hình được nhanh thôi:

Table cell

Không Float và Clear, thật khỏe phải ko nào

Style của Blog Post

Với CSS 3, chúng ta có thể chia cột cho nội dung của 1 đoạn văn bản đơn giản hơn bao giờ hết, chi cần bằng cách bọc chúng lại vào trong 1 thẻ div và gán cho chúng thêm 2 giá trị css 3.0 là: column-count và column-gap.

column-count: Thuộc tính này chỉ ra số dòng cần chia.
column-gap: Thuộc tính này định nghĩa khoảng cách giữa 2 cột là bao nhiêu.

Các bạn xem demo bên dưới
HTML

<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Pellentesque ut sapien arcu...</p>
<p>Vivamus vitae nulla dolor...</p>
...
</div>

CSS

.blogPost div {
/* Them thuoc tinh (TT) trinh duyet  vao TT Column-count */
-moz-column-count: 2;
-webkit-column-count: 2;

/* Them thuoc tinh (TT) trinh duyet  vao TT Column-gap */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}
Ngoài ra còn 1 vài style nữa, nếu các bạn có thời gian thì tự tìm hiểu thêm nhé, nhưng nói chung qua đây là đủ khái quát cơ bản về HTML5 và CSS3 rồi.

HẾT
Theo TuanVA và PCWorld