Phân nhóm định dạng CSS

Thuộc tính CSS thì rất là đa dạng và nhiều, do đó để dể dàng hệ thống được kiến thức thì chúng ta phải gom các thuộc tính CSS thành các nhóm định dạng riêng biệt từ đó giúp cho các bạn dể dàng học CSS nhanh hơn.

Có thể chia các thuộc tính CSS thành 7 nhóm định dạng cơ bản.

1. Type Group

Type group: định dạng cho văn bản.

Các thuộc tính cơ bản thuộc nhóm Type group: 

• font-family: nhóm font được sử dụng cho 1 đối tượng HTML.
• font-style: định dạng cho font chữ nghiêng hay thẳng ...
• font-size: định dạng kích thước cho font chữ.
• font-variant: định dạng kiểu cho font chữ thưởng hoặc chữ hoa.
• font-weight: kiểu của chữ.
• line-height: chiều cao giữa các dòng.
• text-transform: định dạng hiển thị của font chữ trong văn bản như chữ hoa, chữ thường, chữ cái đầu viết hoa ...
• text-decoration: định dạng các trang trí thêm cho văn bản.
• color: màu sắc font chữ.

2. Background Group

Background group: định dạng hình ảnh nền cho đối tượng nào đó.

Các thuộc tính cơ bản thuộc nhóm Background group: 

• background-color: màu nền của đối tượng HTML
• background-image: sử dụng nền là hình ảnh
• background-repeat: kiểu sử dụng hình nền nếu sử dụng hình ảnh làm nền cho đối tượng
• background-position: vị trí bắt đầu hiển thị của hình nền
• background-attachment: chế độ cố định hình nền

3. Block Group

Block group: định dạng cho văn bản

Các thuộc tính cơ bản thuộc nhóm Block group: 

• letter-spacing: khoảng cách giữa các ký tự
• word-spacing: tăng hoặc giảm khoảng cách giữa các từ trong đoạn văn bản
• text-align: sắp xếp các nội dung theo chiều ngang
• text-indent: khoảng cách thuộc vào đầu dòng của một đoạn văn bản
• white-space: định dạng cho khoảng trắng trong đoạn văn bản
• display: các kiểu hiển thị của một phần tử HTML
• vertical-align: vị trí của một phần tử

4. Border Group

Border group: định dạng đường viền cho một đối tượng nào đó

Các thuộc tính cơ bản thuộc nhóm Border group: 

• border-width, border-top-width, border-right-width, border-bottom-width, border-left-width: độ rộng của đường viền
• border-style, border-top-style, border-right-style, border-bottom-style, border-left-style: kiểu hiển thị của đường viền
• border-color, border-top-color, border-right-color, border-bottom-color, border-left-color: màu sắc của đường viền

5. Box Group

Box group: định dạng kích thước, vị trí cho khối.

Các thuộc tính cơ bản thuộc nhóm Box group: 

• width, min-width, max-width: chiều rộng của đối tượng
• height, min-height, max-height: chiều dài của đối tượng
• margin, margin-top, margin-right, margin-bottom, margin-left: khoảng cách đối với phần tử bên ngoài
• padding, padding-top, padding-right, padding-bottom, padding-left: khoảng cách đối với phần tử bên
• float: lệch khối về bên trái hoặc phải.
• clear: xoá các thuộc tính float của các phần tử phía trên

6. List Group

List group: định dạng cho các danh sách

Các thuộc tính cơ bản thuộc nhóm List group: 

• list-style-position: vị trí của icon <li>, giá trị mặc định là outsite.
• list-style-type: kiểu icon của <li>
• list-style-image: hình ảnh icon của <li>

7. Position Group

Position group: định toạ độ của một phần tử HTML nào đó

Các thuộc tính cơ bản thuộc nhóm Position group: 

• position: kiểu hiển thị của một đối tượng
• top: khoảng cách từ đối tượng đến vị trí top
• right: khoảng cách từ đối tượng đến vị trí right
• left: khoảng cách từ đối tượng đến vị trí left
• bottom: khoảng cách từ đối tượng đến vị trí bottom
• z-index: vị trí của đối tượng
• overflow, overflow-x, overflow-y: chế độ hiển thị thanh cuộn

Bài viết nên đọc

• Giới thiệu về HTML
• Các thẻ HTML thường được sử dụng nhất
• Phân loại thẻ HTML và cách chuyển đổi khối
• Tìm hiểu về cấu trúc và cách định dạng của thẻ HTML
• Tìm hiểu selectors trong CSS
• Javascript là gì?

Trên đây là những kiến thức từ kinh nghiệm bản thân mình nên các bạn có thể tham khảo. Nếu các bạn có góp ý cho mình thì hãy gửi vào đây, mình sẵn sàng nhận ý kiến đóng góp từ các bạn.