phongjalvn
04-04-2008, 09:11
Bài viết chi tiết các bạn có thể xem tại đây http://www.jt-vn.com/blog/index.php/cssxhtml/25/ (sorry mấy sếp, không phải em quảng cáo đâu, em lười viết lại bbcode quá :P )
Mình rất thường gặp các câu hỏi trên các diễn đàn đại loại như: “Em muốn học CSS, cho em xin tài liệu”. “Em muốn học CSS nhưng không biết bắt đầu từ đâu”. “CSS phức tạp quá”. Vậy cũng xin chia sẻ với các bạn rằng: CSS không phức tạp như bạn nghĩ, và tài liệu về CSS không hề khó kiếm, hãy bắt đầu tất cả từ google.
Tuy nhiên nếu bạn vừa mới bắt đầu, tôi khuyên bạn nên bắt đầu từ w3school. Trên đây hướng dẫn rất đầy đủ, với ví dụ cụ thể và những bài thực hành “Try it yourself” rất thú vị ( Đừng nghĩ chỉ những người mới đầu với ghé thăm trang này, ngay cả những người làm việc lâu năm với CSS vẫn phải ghé thăm thường xuyên để ôn lại kiến thức)
Sau khi bạn đã nắm rõ những điều căn bản, bạn có thể tự test qua CSS Quiz
Và tiếp theo, đây là giai đoạn thật sự quan trọng và khó khăn nhất : Ứng dụng
Bạn hãy bắt đầu với những trang đơn giản. Hãy chú ý: suy nghĩ đơn giản, làm đơn giản, tự làm, tự suy nghĩ trước khi tham khảo người khác, chỉ tham khảo khi thật sự quá “bí“. Thật vậy, không ít bạn khi mới bắt đầu đã suy nghĩ đến những việc quá cao siêu, sau đó làm không nổi và hỏi hết người này đến người khác, đó là một điều không nên. Hãy nắm vững những điều cơ bản, cố gắng áp dụng, thử nhiều cách hơn đối với những gì bạn đã biết. VD: Bạn đã biết dùng background,border, bạn đã biết sử dụng padding 1 cách tương đối khá ( chỉ là khá nhé, về vụ padding mình sẽ nói sau trong loạt CSS qua các ví dụ, sẽ khá đau đầu đó) nhưng đã bao giờ bạn nghĩ : chuyện gì sẽ xảy ra nếu bạn dùng kết hợp cả 3 thứ này nhỉ :D, “Try it yourself”, kết quả có thể làm bạn ngạc nhiên đó ( Hãy phối màu thật tốt nhé ).
Và một lời khuyên nữa, hãy bắt đầu từ những layout 1 column.
Ok, bây giờ bạn đã nắm vững khá nhiều thứ rồi đó, việc tiếp theo của bạn là gì ?
Hãy bắt tay vào xây dựng 1 trang web “based on CSS & (x)HTML” thực sự của riêng bạn.
Từng bước, từng bước thật chậm, như khi chúng ta xây 1 căn nhà: Ta bắt đầu xây móng, dựng khung cột, sau đó xây tường, và cuối cùng là sơn phết. Sau khi đã có căn nhà, ta sẽ tiến hành bày biện đồ đạc trong căn nhà đó. Thật vậy, việc thiết kế 1 trang web cũng tương tự như vậy:
1. Global reset: Nếu bạn chưa hề biết đến, tôi khuyên bạn nên tập thói quen sử dụng global reset, nó có thể sẽ giúp bạn bớt đau đầu hơn với hàng tá lỗi phát sinh sau này đấy :D. Đây là đoạn CSS global reset mà JaL hiện đang dùng, các bạn có thể down về tham khảo.Reset Reloaded
2. Dàn khung chính cho giao diện: Hãy bắt đầu với layout 2 colum, sẽ đơn giản hơn rất nhiều. Bạn chỉ cần thật thận trọng với width của 2 colum, nó có thể làm bạn phải đau đầu đó :D
Vì đây chỉ là 1 bài viết định hướng, không phải 1 bài viết hướng dẫn, mình sẽ bỏ qua phần hướng dẫn chi tiết, nhưng ngay khi có thời gian, mình sẽ viết bài hướng dẫn cụ thể cho các bạn. Hoặc bạn có thể vào: http://www.subcide.com/tutorials/csslayout/index.aspx để tham khảo.
3. Sau khi đã xong các khung chính, bạn sẽ bắt đầu format cho những thành phần nhỏ ở trong, hãy hình dung phần này tương tự như phần 2, nhưng thay vì làm cho những column, row chính, bạn sẽ thực hiện nó trên những column, row nhỏ nằm trong column, row lớn.
Phần này sẽ gây chút rắc rối cho bạn, vì vậy hãy lưu ý thật kĩ những điểm sau ( Ưu tiên theo thứ tự từ trên xuống):
* ID khác với class: ID chỉ dùng 1 lần duy nhất trên 1 trang, và có thứ tự ưu tiên cao hơn class. 1 element có thể có nhiều class, nhưng chỉ có duy nhất 1 ID. Hãy suy nghĩ cẩn thận trước khi bạn gán ID hay class vào 1 đối tượng xem nên dùng ID hay dùng class (Rất nhiều người có thói quen dùng toàn bộ là class, đây là 1 sai lầm nghiêm trọng)
* Suy nghĩ đơn giản: Đừng tự gây khó cho mình, hãy làm cách nào mà bạn thấy phù hợp với bạn nhất. Tại sao lại phải tự gây khó cho chính mình ? Điều đó hoàn toàn không tốt.
* Làm đơn giản: Hãy nhớ đến sức mạnh của selector, hãy nắm thật vững cách để chọn 1 (nhóm) đối tượng theo ý muốn. Tiết kiệm code là tiết kiệm sức, là tiết kiệm thời gian debug. 1 lần nữa, hãy suy nghĩ kĩ trước khi gán ID hay class cho 1 đối tượng, hãy nghĩ xem liệu có cần thiết phải sử dụng ID hay class không ?
VD:
<div id="left">
<div class="login">
<h2 class="login-head">
Ở ví dụ này, header của login box khác với header của các box khác
</h2>
<div class="form">
<label class="login-label">
<input class="text" name="login" />
</label>
...
</div>
</div>
</div>
Tôi gọi đây là “class mania”, tại sao bạn lại cần dùng quá nhiều class, trong khi bạn hoàn toàn có thể dùng css selector để thay thế ? <h2 class=”login-head”> ta có thể thay bằng <h2> và dùng selector : #left .login h2 { properties}, tương tự vậy, ta có thể lược bớt 1 đống class dư thừa.
* Hỏi đơn giản: Khi bạn thật sự bị bí, hãy hỏi, điều đó không có gì xấu, nhưng hãy đặt câu hỏi thật cụ thể. Lời khuyên: hãy nói cụ thể về điều bạn muốn làm, đừng hỏi điều bạn đang nghĩ tới, hoặc hỏi về cách để thực hiện 1 giải pháp mà bạn nghĩ ra. VD: Bạn muốn làm khung news, trong đó có 1 tấm hình nằm bên góc trái (float), nếu không có tấm hình thì nội dung sẽ tràn đầy khung news. Hãy lấy đó là vấn đề để bạn đặt câu hỏi, đừng đặt những câu hỏi đại loại : Làm sao để 1 div tự động có width = 0 ? Hoặc : làm sao để tự động giãn khoảng cách của content. Người khác sẽ không hiểu bạn muốn làm gì để có giải pháp cụ thể giúp bạn. Và nếu được, bạn có thể vẽ ý tưởng mình ra. Trong trường hợp debug, bạn nên có mẫu để người khác có thể nhìn thấy lỗi của bạn. Tôi không thể debug những lỗi nghiêm trọng nếu chỉ nghe và tưởng tượng, hoặc 1 part trong code của bạn, vì có thể những phần khác bạn không nghĩ sẽ gây lỗi nhưng thật sự nó lại là phần gây lỗi.
4. Trang trí: phần này sẽ là phần thú vị nhất, hãy thưởng thức thành quả của bạn ( Tips cuối: ;) “từ từ thưởng thức”, rất quan trọng đấy ;) )
Mình rất thường gặp các câu hỏi trên các diễn đàn đại loại như: “Em muốn học CSS, cho em xin tài liệu”. “Em muốn học CSS nhưng không biết bắt đầu từ đâu”. “CSS phức tạp quá”. Vậy cũng xin chia sẻ với các bạn rằng: CSS không phức tạp như bạn nghĩ, và tài liệu về CSS không hề khó kiếm, hãy bắt đầu tất cả từ google.
Tuy nhiên nếu bạn vừa mới bắt đầu, tôi khuyên bạn nên bắt đầu từ w3school. Trên đây hướng dẫn rất đầy đủ, với ví dụ cụ thể và những bài thực hành “Try it yourself” rất thú vị ( Đừng nghĩ chỉ những người mới đầu với ghé thăm trang này, ngay cả những người làm việc lâu năm với CSS vẫn phải ghé thăm thường xuyên để ôn lại kiến thức)
Sau khi bạn đã nắm rõ những điều căn bản, bạn có thể tự test qua CSS Quiz
Và tiếp theo, đây là giai đoạn thật sự quan trọng và khó khăn nhất : Ứng dụng
Bạn hãy bắt đầu với những trang đơn giản. Hãy chú ý: suy nghĩ đơn giản, làm đơn giản, tự làm, tự suy nghĩ trước khi tham khảo người khác, chỉ tham khảo khi thật sự quá “bí“. Thật vậy, không ít bạn khi mới bắt đầu đã suy nghĩ đến những việc quá cao siêu, sau đó làm không nổi và hỏi hết người này đến người khác, đó là một điều không nên. Hãy nắm vững những điều cơ bản, cố gắng áp dụng, thử nhiều cách hơn đối với những gì bạn đã biết. VD: Bạn đã biết dùng background,border, bạn đã biết sử dụng padding 1 cách tương đối khá ( chỉ là khá nhé, về vụ padding mình sẽ nói sau trong loạt CSS qua các ví dụ, sẽ khá đau đầu đó) nhưng đã bao giờ bạn nghĩ : chuyện gì sẽ xảy ra nếu bạn dùng kết hợp cả 3 thứ này nhỉ :D, “Try it yourself”, kết quả có thể làm bạn ngạc nhiên đó ( Hãy phối màu thật tốt nhé ).
Và một lời khuyên nữa, hãy bắt đầu từ những layout 1 column.
Ok, bây giờ bạn đã nắm vững khá nhiều thứ rồi đó, việc tiếp theo của bạn là gì ?
Hãy bắt tay vào xây dựng 1 trang web “based on CSS & (x)HTML” thực sự của riêng bạn.
Từng bước, từng bước thật chậm, như khi chúng ta xây 1 căn nhà: Ta bắt đầu xây móng, dựng khung cột, sau đó xây tường, và cuối cùng là sơn phết. Sau khi đã có căn nhà, ta sẽ tiến hành bày biện đồ đạc trong căn nhà đó. Thật vậy, việc thiết kế 1 trang web cũng tương tự như vậy:
1. Global reset: Nếu bạn chưa hề biết đến, tôi khuyên bạn nên tập thói quen sử dụng global reset, nó có thể sẽ giúp bạn bớt đau đầu hơn với hàng tá lỗi phát sinh sau này đấy :D. Đây là đoạn CSS global reset mà JaL hiện đang dùng, các bạn có thể down về tham khảo.Reset Reloaded
2. Dàn khung chính cho giao diện: Hãy bắt đầu với layout 2 colum, sẽ đơn giản hơn rất nhiều. Bạn chỉ cần thật thận trọng với width của 2 colum, nó có thể làm bạn phải đau đầu đó :D
Vì đây chỉ là 1 bài viết định hướng, không phải 1 bài viết hướng dẫn, mình sẽ bỏ qua phần hướng dẫn chi tiết, nhưng ngay khi có thời gian, mình sẽ viết bài hướng dẫn cụ thể cho các bạn. Hoặc bạn có thể vào: http://www.subcide.com/tutorials/csslayout/index.aspx để tham khảo.
3. Sau khi đã xong các khung chính, bạn sẽ bắt đầu format cho những thành phần nhỏ ở trong, hãy hình dung phần này tương tự như phần 2, nhưng thay vì làm cho những column, row chính, bạn sẽ thực hiện nó trên những column, row nhỏ nằm trong column, row lớn.
Phần này sẽ gây chút rắc rối cho bạn, vì vậy hãy lưu ý thật kĩ những điểm sau ( Ưu tiên theo thứ tự từ trên xuống):
* ID khác với class: ID chỉ dùng 1 lần duy nhất trên 1 trang, và có thứ tự ưu tiên cao hơn class. 1 element có thể có nhiều class, nhưng chỉ có duy nhất 1 ID. Hãy suy nghĩ cẩn thận trước khi bạn gán ID hay class vào 1 đối tượng xem nên dùng ID hay dùng class (Rất nhiều người có thói quen dùng toàn bộ là class, đây là 1 sai lầm nghiêm trọng)
* Suy nghĩ đơn giản: Đừng tự gây khó cho mình, hãy làm cách nào mà bạn thấy phù hợp với bạn nhất. Tại sao lại phải tự gây khó cho chính mình ? Điều đó hoàn toàn không tốt.
* Làm đơn giản: Hãy nhớ đến sức mạnh của selector, hãy nắm thật vững cách để chọn 1 (nhóm) đối tượng theo ý muốn. Tiết kiệm code là tiết kiệm sức, là tiết kiệm thời gian debug. 1 lần nữa, hãy suy nghĩ kĩ trước khi gán ID hay class cho 1 đối tượng, hãy nghĩ xem liệu có cần thiết phải sử dụng ID hay class không ?
VD:
<div id="left">
<div class="login">
<h2 class="login-head">
Ở ví dụ này, header của login box khác với header của các box khác
</h2>
<div class="form">
<label class="login-label">
<input class="text" name="login" />
</label>
...
</div>
</div>
</div>
Tôi gọi đây là “class mania”, tại sao bạn lại cần dùng quá nhiều class, trong khi bạn hoàn toàn có thể dùng css selector để thay thế ? <h2 class=”login-head”> ta có thể thay bằng <h2> và dùng selector : #left .login h2 { properties}, tương tự vậy, ta có thể lược bớt 1 đống class dư thừa.
* Hỏi đơn giản: Khi bạn thật sự bị bí, hãy hỏi, điều đó không có gì xấu, nhưng hãy đặt câu hỏi thật cụ thể. Lời khuyên: hãy nói cụ thể về điều bạn muốn làm, đừng hỏi điều bạn đang nghĩ tới, hoặc hỏi về cách để thực hiện 1 giải pháp mà bạn nghĩ ra. VD: Bạn muốn làm khung news, trong đó có 1 tấm hình nằm bên góc trái (float), nếu không có tấm hình thì nội dung sẽ tràn đầy khung news. Hãy lấy đó là vấn đề để bạn đặt câu hỏi, đừng đặt những câu hỏi đại loại : Làm sao để 1 div tự động có width = 0 ? Hoặc : làm sao để tự động giãn khoảng cách của content. Người khác sẽ không hiểu bạn muốn làm gì để có giải pháp cụ thể giúp bạn. Và nếu được, bạn có thể vẽ ý tưởng mình ra. Trong trường hợp debug, bạn nên có mẫu để người khác có thể nhìn thấy lỗi của bạn. Tôi không thể debug những lỗi nghiêm trọng nếu chỉ nghe và tưởng tượng, hoặc 1 part trong code của bạn, vì có thể những phần khác bạn không nghĩ sẽ gây lỗi nhưng thật sự nó lại là phần gây lỗi.
4. Trang trí: phần này sẽ là phần thú vị nhất, hãy thưởng thức thành quả của bạn ( Tips cuối: ;) “từ từ thưởng thức”, rất quan trọng đấy ;) )