Hoc CSS

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:

view plainprint?

<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
<h1>Page title</h1>
</header>
<nav>
</nav>
<section id="intro">
</section>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

1. 
2. 
3. 
4. 
5.

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

view plainprint?

<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 class="subscribe"><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>.

view plainprint?

<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

view plainprint?

<section>
<article class="blogPost">
<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

view plainprint?

<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

view plainprint?

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

view plainprint?

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

view plainprint?

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

Style của Introduction

view plainprint?

#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

Style của Content và Sidebar

view plainprint?

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

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

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

view plainprint?

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

CSS

view plainprint?

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

Page updated

Google Sites

Report abuse