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.

Để lại bình luận
Địa chỉ email của bạn sẽ không được công khai
Bài viết phổ biến
Ngoc Phuong - 82 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ứ.