Tự học CSS

CSS is the language used for website design and layout combined with JS and HTML

Viết tắt của “Cascading Style Sheets”, CSS là ngôn ngữ dùng cho thiết kế định dạng và layout website. Rất nhiều menu trên website và ứng dụng di động đều được viết bởi CSS kết hợp cùng JavaScript và HTML.

Ai đã từng làm web qua thì chắc chắn đều biết CSS đóng vai trò quan trọng như thế nào trên website rồi, nó vốn là thứ mà website phải cần nếu muốn trở thành một giao diện web đầy đủ như có màu sắc, được chia cột rõ ràng,…Thật không aon uổng khi nói rằng CSS chiếm hết 70% yếu tố giúp website bạn có đẹp hay không.

Một trong các kiến thức cơ bản nhất của một người làm web dù chuyên nghiệp hay nghiệp dư đó là thành thạo HTML và CSS. Trong serie Học HTML cơ bản của mình cũng đã nhiều lần nhắc qua CSS như một phần phải học sau khi đã hoàn thành HTML cơ bản, và đây là serie về CSS mà bạn bắt buộc phải xem nếu như muốn tự mình chỉnh sửa giao diện website.

Nội dung serie CSS căn bản

Trong serie này mình sẽ nói qua các vấn đề cơ bản trong CSS nhưng quan trọng nhất, ví dụ như cấu trúc CSS cơ bản, làm việc với các vùng chọn (Selector), hiểu khái niệm position, phân biệt margin và padding, inline với block là thế nào, và quan trọng nhất là các kỹ thuật xây dựng layout website quan trọng mà bạn hay gặp phải (như làm thế nào để phân giao diện website ra 3 cột chẳng hạn).

Ngoài ra, trong serie này mình cũng nói qua các khái niệm về CSS3 mà đang được sử dụng rất nhiều hiện nay, bao gồm các hiệu ứng box shadows, text shadows, border radius, media query,…mà các khái niệm đó sẽ giúp website bạn trở nên lộng lẫy hơn. Mình dám chắc với các bạn đây là serie học CSS bằng tiếng Việt đầy đủ nhất mà bạn đã từng thấy.

Kiến thức yêu cầu

Học CSS cũng rất dễ, nên mình cần các bạn biết qua HTML (tốt nhất nên xem hết serie Học HTML cơ bản của mình) và biết sử dụng các phần mềm soạn thảo code đơn giản như Notepad++ hay Sublime Text (khuyến khích).

Ngoài ra nếu có thể, mình cần các bạn biết qua tiếng Anh để có thể đọc qua các tài nguyên trên mạng vì trong serie này mình không thể truyền tải hết 100% kiến thức về CSS mà chỉ nói qua các kỹ thuật quan trọng. Còn lại bạn có thể tự tham khảo tại các trang như CSS Reference của Mozilla.

Xem video

Nếu bạn cần theo dõi serie này bằng video thì có thể xem tại playlist này. Mặc dù trong mỗi bài sau mình đều có chèn video vào mỗi bài.

Bắt đầu

Bạn đã sẵn sàng chưa nào? Còn chần chừ gì nữa mà không bấm qua bài tiếp theo để cùng bước vào thế giới CSS đầy màu sắc ngay từ bây giờ.

Các khái niệm CSS cơ bản

CSS là gì ?

Cú pháp CSS

Include CSS vào HTML

Đơn vị

Màu (Color)

Background

Định dạng Font

Định dạng Text

Hình ảnh

Trang trí Link

Bảng

Đường viền (Border)

Căn lề (Margin)

List và Marker

Padding

Con trỏ (Cursor)

Outline

Kích thước

Scrollbar

CSS nâng cao

Visibility

Căn chỉnh vị trí

Layer (Thuộc tính z-index)

Giới thiệu Pseudo Class

Phần tử giả (Pseudo Element)

Qui tắc @

Media Type

Qui tắc @page

Định dạng trước khi in

Thiết lập Layout

Validation

Học CSS3 cơ bản

Giới thiệu CSS3

Rounded Corner

Thuộc tính Border Image

Multi Background

Màu trong CSS3

Gradient là gì ?

Tạo Shadow

Tạo hiệu ứng cho Text

Web Font

2D Transform

3D Transform

Hiệu ứng (Animation)

Chia cột (Multi Column)

User Interface

Thuộc tính box-sizing

Khái niệm CSS Responsive

CSS Responsive là gì ?

Tra cứu nhanh CSS

Tổng hợp tất cả Thuộc tính

Danh sách tên màu

Web Safe Font

Tổng hợp các Hiệu ứng

CSS Tool

Chuyển đổi PX sang EM