Học CSS căn bản

Học CSS là 1 cách tiếp cận với việc xây dựng website. Bạn không cần biết cách lập trình các ngôn ngữ khác, nhưng CSS là cách giúp bạn chuyển hóa hình ảnh thành 1 website tĩnh sống động bất ngờ.

Dưới đây là loạt bài học CSS từ blog Thạch Phạm:

Giới thiệu serie Học CSS căn bản

Serie học CSS và CSS3 cơ bản miễn phí có video tiếng Việt kèm theo,serie nay các bạn sẽ học được các kỹ thuật về CSS cơ bản và cách dựng một layout website.

CSS là gì và vai trò của nó trên website

Bài đầu tiên của serie học CSS cơ bản tại Thachpham.com. Giới thiệu sơ lược về CSS như CSS là gì, vai trò của nó trên một website và CSS hoạt động như thế nào.

Nhúng CSS vào website

Cách nhúng CSS vào website với hai kiểu đó là Inline Styles và External Styles.

Tìm hiểu về vùng chọn cơ bản (Selector)

Học CSS căn bản và làm quen với 5 kiểu tạo vùng chọn CSS cơ bản bao gồm vùng chọn dựa theo tên thẻ, vùng chọn dựa theo ID, vùng chọn class và vùng chọn thứ cấp.

Tìm hiểu về đơn vị px, pt, percentages, em và rem

Tìm hiểu ý nghĩa các đơn vị đo lường thường được sử dụng trong CSS bao gồm px, %, pt, em và rem.

Các thuộc tính cho Text (văn bản)

Các thuộc tính định dạng văn bản cho website với CSS như căn lề văn bản, tạo văn bản đổ bóng, tùy chỉnh in hoa văn bản,…

Trang trí font chữ cho văn bản

Tìm hiểu các thuộc tính CSS thường dùng để trang trí font chữ cho văn bản là font-family, font-weight và color.

Phần tử Block (khối) và Inline (nội dòng)

Tìm hiểu về phần tử Block và Inline trong HTML để dễ dàng xử lý khi học CSS cho việc xây dựng bố cục website.

Thẻ div và tạo bố cục trên website

Thẻ div là gì và cách sử dụng thẻ div để phân khu vực trong website cho mục đích dàn trang với CSS.

Box Model và các thuộc tính

Box Model là thuật ngữ chỉ các thuộc tính margin, padding và border trong CSS để căn chỉnh khoảng cách cho các phần tử.

Các thuộc tính tùy chỉnh kích thước

Tìm hiểu các thuộc tính tùy chỉnh kích thước các phần tử trong CSS như width, height, min-width, max-width, min-height, max-height.

Tìm hiểu box-sizing

box-sizing sẽ giúp bạn tùy chỉnh lại kích thước một phần tử đã bao gồm phần padding và border hoặc không bao gồm phần padding và border.

Màu nền và Ảnh nền (background)

Hướng dẫn sử dụng các thuộc tính background trong CSS để thêm màu nền và ảnh nền.

Chia cột với float và clear float

Tìm hiểu về cách chia cột bằng CSS trong website và clear float là gì, cách clear float chính xác để fix một số lỗi tràn khung khi float phần tử.

Reset CSS là gì và vì sao nên reset CSS

Tìm hiểu về kỹ thuật reset CSS. Reset CSS sẽ giúp bạn đưa tất cả các giá trị của phần tử HTML về 0 để dễ dàng viết lại như ý muốn.

Tùy biến hiển thị danh sách (List)

Tìm hiểu qua các thuộc tính hỗ trợ tùy biến danh sách (list) từ các thẻ li trong HTML. Với thuộc tính này, bạn có thể chỉ định một danh sách hiển thị tùy ý mà không phụ thuộc vào tên thẻ.

Tùy biến loại phần tử với “display”

Thuộc tính “dishplay” trong CSS được dùng để sửa lại kiểu hiển thị cho các phần tử trong HTML như chuyển từ dạng block sang inline, hoặc các kiểu khác. Thuộc tính này sử dụng cho toàn bộ phần tử.

Position và Absolute – Relative

Tìm hiểu về ý nghĩa của các giá trị trong thuộc tính position bao gồm fixed, static, relative và absolute. Đây là một kỹ thuật rất quan trọng để xây dựng các chi tiết nhỏ trong website.

Một vài Pseudo Class đơn giản

Các Pseudo Class trong CSS3 giúp bạn chọn các trạng thái đặc biệt của một phần tử để viết CSS cho nó. Ví dụ viết CSS cho liên kết khi rê chuột vào.

Kỹ thuật tạo menu ngang cơ bản

Hướng dẫn từng bước cách làm một menu ngang đơn giản với CSS và có hỗ trợ dropdown menu.

Kỹ thuật tạo menu dọc cơ bản

Hướng dẫn tạo menu dọc cơ bản và menu dọc có hỗ trợ dropdown đơn giản.

Thực hành tạo layout đơn giản

Thực hành tạo một layout website đơn giản bằng kiến thức HTML và CSS cơ bản.

CSS Framework là gì và cách sử dụng

CSS Framework hỗ trợ designer thiết kế một giao diện website nhanh chóng và tiết kiệm thời gian viết CSS hay trang trí các thành phần ở website.

Tạo chuyển động với transition

Hướng dẫn sử dụng transition chi tiết trong CSS3 để thêm các hiệu ứng chuyển động đẹp mắt trong CSS.

Thay đổi hình dạng với transform và transform-origin

Hướng dẫn sử dụng transform và transform-origin để thay đổi hình dạng của phần tử bằng CSS3.

Kết thúc serie CSS cơ bản

Lời nhắn khi kết thúc serie Học CSS căn bản.

Tham khảo: thachpham.com

1 thought on “Học CSS căn bản”

Leave a Reply

Your email address will not be published. Required fields are marked *