Để tiện cho các bạn mới theo dõi các bài viết về CSS trên Ewebvn.Com, hôm nay mình sẽ tổng hợp lại các bài viết đã đăng trong chuyên mục CSS để các bạn có thể nắm bắt tốt hơn.
1, CSS là gì?
Bài đầu tiên, bạn sẽ hiểu được khái niệm về CSS trong Thiết kế Web, các thức sử dụng CSS trong file HTML như thế nào, các thứ tự ưu tiên trong CSS.
2, Cú pháp CSS
Bài học thứ 2, bạn sẽ được tìm hiểu về cú pháp câu lệnh trong CSS cũng như cách ghi chú trong CSS.
3, Class và ID trong CSS
Bài học giúp bạn hiểu và nắm được khái niệm ID và Class trong CSS, sự phân biệt giữa class và id.
4, Box model trong CSS
Bài học thứ 4 giúp bạn tìm hiểu và nắm được khái niệm về Box model trong CSS, một trong những kiến thức bạn phải biết và nắm được khi làm việc với CSS
5, Margin và Padding trong CSS
Margin và padding là 2 yếu tố cấu thành mô hình Box model, với bài viết này bạn sẽ nắm kỹ hơn về mô hình Box Model, biết được cách viết tắt đối với Margin và padding.
6, Thuộc tính Border trong CSS
Thuộc tính Border cũng là một pần khá quan trọng trong Box model, bài học này bạn sẽ hiểu cách định dạng đường viền (Border) của các thành phần trên website, cách viết tắt đối với thuộc tính Border.
7, Độ lớn thực sự của Box
Sau khi kết thúc bài học này, bạn sẽ biết được cách tính toán độ lớn của các thành phần trong thiết kế giao diện website.
8, Float và Clear trong CSS
Đây là 2 kỹ thuật khá qua trọng CSS, được ứng dụng trọng kỹ thuật thiết kế giao diện với div (Div layout)
9, CSS selectorts
Sau khi kết thúc bài học, bạn sẽ nắm được khái niệm CSS Selector, nó cũng là mẫu chốt để bạn có thể ứng dụng được CSS trong kỹ thuật Thiết Kế Website.
10, Thiết kế giao diện với Div và CSS
Bài học này sẽ thực sự hữu ích cho bạn, nó sẽ giúp bạn hệ thống đã học được từ các bài viết trên, hãy cố gắng thực hành thật tốt để đạt được kết quả. Sau khi kết thúc bạn sẽ hiểu cách triển khai một giao diện với kỹ thuật Div và CSS.
11, CSS Attribute selectors
Tìm hiểu thêm về CSS Selector trong CSS
11, Tạo nền trong CSS (CSS background)
Giúp bạn có kiến thức về CSS background, các kỹ thuật sử dụng màu nền và ảnh nền cho các thành phần trên trang web.
12, Định dạng văn bản trong CSS (Phần 1), Định dạng văn bản trong CSS (Phần 2)
Qua 2 bài viết này, bạn sẽ được tìm hiểu về cách định dạng văn bản trong CSS: Text, font chữ…
13, Định dạng liên kết với CSS
Tìm hiểu về các trạng thái của một liên kết và kỹ thuật định dạng liên kết với CSS
14, Định dạng HTML List trong CSS
HTML List được sử dụng nhiều cho việc thiết kế hệ thống Menu trên trang web, bài viết sẽ giúp bạn tìm hiểu những kiến thức cơ bản về định dạng HTML List.
15, CSS absolute position
CSS position được sử dụng nhiều trong việc thiết kế giao diện, bài viết cung cấp cho bạn kiến thức về Relative position và absolute position, vận dụng tốt absolute position bạn có khả năng thiết kế được những giao diện có mức độ khó cao.
16, Thuộc tính Z-index trong CSS
Sau bài học, bạn sẽ nắm được khái niệm về z-index trong CSS, nắm bắt được phương pháp xếp lớp (Layer).
17, Thuộc tính display trong CSS
Thuộc tính display có thể thay đổi thuộc tính hiện thị của các thành phần, thuộc tính display cũng được ứng dụng để tạo ra các hiệu ứng trên trang web sinh động hơn, thiết kế menu, tabs…
18, Sử dụng !important trong CSS
Tìm hiểu về thứ tự ưu tiên trong CSS và các thức thay đổi thứ tự ưu tiên với thuộc tính !important trong CSS
19, PSD to HTML (Phần cuối – Dựng Mã CSS)
Video dài 1h30 phút được trích từ loạt bài viết PSD to HTML sẽ giúp bạn hiểu rõ hơn về các kiến thức CSS.
20, Tìm hiểu thêm
Nếu có thời gian, bạn nên tìm hiểu thêm các chủ đề bên dưới để bổ sung một số kiến thức cần biết về CSS
Hướng dẫn sử dụng SpriteMe
CSS Image Sprites là gì?
3 cách khắc phục lỗi Double margin IE 6
Hy vọng bài tổng hợp này sẽ giúp bạn học CSS tốt hơn và hiệu quả hơn.
Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter 
Đinh Văn Phường (4)
Nguyen Van Than (2)
Ban xe dap the thao (1)
Bùi Văn Thiêm (1)
{ 34 comments… read them below or add one }
Học rất nhiều điều bổ ích và cơ bản khi ghé thăm website của bạn! Chúc bạn thành công!
bai viet rat chi tiet de hieu a. em dang hoc thiet ke web. cai menu cua em no dai qua kho nen em muon tao thuoc cuon cho menu.a co the giup em duoc khong?huong dan em ? thanhk
“em muon tao thuoc cuon cho menu”
Không hiểu em hỏi gì cả, gõ tiếng Việt có dấu giúp anh nhé.
A ơi. giúp em một số vấn đề này với:
làm thế nào để tạo trang web tự tạo thước cuộn cho menu.
2,em dùng php để viết code nhưng khi dùng tiếng việt thì khi run thì toàn bị lỗi phông chữ?
3:em dùng “background-img “để chèn ảnh nền cho trang web,tiếp theo lấy một ảnh khác chèn nên trên ảnh nền thì phải làm như thế nào ạ?
Chào em,
1, Anh chưa hiểu tạo “Thước cuộn” cho menu là thế nào, chưa hiểu ý em lắm, em có demo nào không??
2, Để hiện thị đúng font tiếng việt:
a, Trước hết em hãy sử dụng đúng bảng mã Unicode
b, Chắc chắn rằng đã đặt tag <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> trong phần head của website
c, File phải được encode ở dạng UTF-8
3, Em cứ chèn hình bình thường thôi, em tìm hiểu thêm về thẻ <img> tại đây: http://www.ewebvn.com/cac-the-trong-html.html
Thân chào em
như này ạ, trong 1 box em cho giới hạn: width 200px, height=400px .khi e lập danh sách nhiều quá giới hạn cho phép ở trên thì trang web tự động tạo thước cuộn ngang hoặc thước cuộn dọc.thanks
Àh, để làm như vậy em thêm thuộc tính sau nhé:
.box-menu { overflow : auto }
A ơi! giúp em vấn đề này.em thấy trên trang web người ta chia trang thành 3 phần(left, right,maincontent) ví dụ thế.khi em click vào đường link(vd: giới thiệu) ở phần left thì các thông tin trong đường link(giới thiệu) sẽ hiện ra ở phần maincontent.thanks.hướng dẫn chi tiết cho e với
Vì đây chỉ là trang web tĩnh, nên bạn phải tạo ra một số trang web, có thể coppy từ file gốc sau đó thay đổi nội dung (phần maincontent).
Giả sử bạn tạo được 3 trang như sau: index.html, about.html, contact.html
Để liên kết các trang này lại với nhau, bạn sử dụng thẻ <a>
Phần bên trái (tất cả các trang) bạn gắn các link như sau:
[code lang="html"]
<p><a href="index.html">Trang chủ</a></p>
<p><a href="about.html">Giới thiệu</a></p>
<p><a href="contact.html">Liên hệ</a></p>
Thân!
Muốn viết tiếng Việt thì làm kiểu gì hả a?
Okie, đã bổ sung bộ gõ Tiếng Việt rồi nhé em.
“a, Trước hết em hãy sử dụng đúng bảng mã Unicode
b, Chắc chắn rằng đã đặt tag trong phần head của website
c, File phải được encode ở dạng UTF-8″
encode TF-8 kiểu gì?
Em xem tại đây nhé Hiển thị Tiếng Việt trên website
ak anh ơi anh viết luôn bài hướng dẫn thiết kế menu nhá! em xem trên video thấy hay quá nhưng hiểu làm kiểu gì
Cám ơn em, có thời gian anh sẽ làm, ghé thăm EW thường xuyên nhé.
Chào em
Encode kiểu j hả a?
Em xem tại đây nhé Hiển thị Tiếng Việt trên website
Thân chào em
hehe bài viết của anh dễ hiểu mấy web khác em đọc chả hiểu gì hết trơn
Thanks em,
Rất vui vì nó giúp ích được cho em, Chúc em học vui, nhanh tiến tới.
anh ơi muốn tạo 1 bảng ở phía trái rồi tạo tiếp 1 bảng bên dưới kiểu gì??????????
VD như bên phải web anh ấy Tìm kiếm muốn tạo đăng kí bài mới và nhiều phần khác bên dưới kiểu gì ????? em làm mãi nó ko hiện ra
Mỗi block sẽ là một khối div và hiện thị lần lượt theo thứ tự trong code html
Em có thể xem thêm tại các bài viết này nhé: http://www.ewebvn.com/psd-to-html-phan-6-dung-ma-xhtml.html
http://www.ewebvn.com/block-va-inline.html
Thân chào em
A ơi thẻ li:hover là j? Dùng như nào?
Chào em,
li:hover là trạng thái khi di chuyển con trỏ chuột lên đối tượng (hover) <li> em ah, nó cũng tương trự a:hover, Ví dụ khi di chuyển trỏ chuột qua mình sẽ thay đổi màu text với mã CSS như sau:
li:hover {color: red}
Thân.
Thế làm kiểu j để khj chỉ vào một mục trên thah menu n hjện thêm nhjều kái hả a??
Đây là Dropdown menu em ah, có thời gian anh sẽ viết một Tut về chủ đề này.
Thân
Chào anh, em đang bắt đầu học về HTML và CSS, khi đi tìm tài liệu thì ghé qua trang này. Em học được rất nhiều điều trong này mà trong các tài liệu khác không nói đến như là cách tính độ rộng thực sự của box… Em cảm ơn anh rất nhiều và chúc a thật nhiều sức khỏe để duy trì và phát huy trang web hơn nữa anh nhé.
Nhân tiện anh cho em hỏi cái margin trong css với cái spacing trong table giống và khác nhau thế nào ạ?
Về căn bản thì có thể hiểu nó là như nhau em ah.
margin thì sẽ tạo ra khoảng cách giữa các thành phần
cellspacing tạo ra khoảng cách giữa các ô trong bảng
anh ơi, anh cho em xin code javascript để làm như ảnh này http://me.zing.vn/apps/photo?params=/dt/kunzubi/apps/photo/album/photo-detail/id/362294792?from=lb&aid=39732533, anh cho e mau mau nhé a. e đang cần gấp lắm
à, giống như cái này của a vậy đó, để cho khách vào để lại comment đó a, chỉ e nhé
Thanks PT nhiều nhé !
Loạt bài CSS rất bổ ích cho những ai muốn nâng cao khả năng viết web cũng như trang trí cho web thêm phần hồn !
Anh ơi có thể giúp em cách tạo đồng hồ cho trang web không.
Hi em,
Em có thể xem bài viết tại đây nhé: http://www.ewebvn.com/tao-dong-ho-voi-javascript.html
anh ơi cho em hỏi: trong CSS làm thế nào để chia đoạn văn bản thành 2 cột, giống như chia cột báo đấy anh, cần dùng câu lệnh nào vậy anh?
Cảm ơn rất nhiều !! Những bài viết của bạn rất hữu ích.