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

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

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.

Ngoc Phuong

Ngoc Phuong - 61 bài viết - Đánh giá:

Có 2 cách học hiệu quả nhất, 1 là nói cho người khác biết thứ bạn mới học được, 2 là nói cho người khác biết thứ bạn sắp quên. Tôi mới học được rất nhiều thứ. Tôi cũng sắp quên rất nhiều thứ.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công khai