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

Lập trình Web

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.

<p>Có thể chia các thuộc tính CSS thành 7 nhóm định dạng cơ bản.</p> <h3>1. Type Group</h3> <p>Type group: định dạng cho văn bản.</p> <p>Các thuộc tính cơ bản thuộc nhóm Type group: </p> <ul> <li>font-family: nhóm font được sử dụng cho 1 đối tượng HTML.</li> <li>font-style: định dạng cho font chữ nghiêng hay thẳng ...</li> <li>font-size: định dạng kích thước cho font chữ.</li> <li>font-variant: định dạng kiểu cho font chữ thưởng hoặc chữ hoa.</li> <li>font-weight: kiểu của chữ.</li> <li>line-height: chiều cao giữa các dòng.</li> <li>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 ...</li> <li>text-decoration: định dạng các trang trí thêm cho văn bản.</li> <li>color: màu sắc font chữ.</li> </ul> <h3>2. Background Group</h3> <p>Background group: định dạng hình ảnh nền cho đối tượng nào đó.</p> <p>Các thuộc tính cơ bản thuộc nhóm Background group: </p> <ul> <li>background-color: màu nền của đối tượng HTML</li> <li>background-image: sử dụng nền là hình ảnh</li> <li>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</li> <li>background-position: vị trí bắt đầu hiển thị của hình nền</li> <li>background-attachment: chế độ cố định hình nền</li> </ul> <h3>3. Block Group</h3> <p>Block group: định dạng cho văn bản</p> <p>Các thuộc tính cơ bản thuộc nhóm Block group: </p> <ul> <li>letter-spacing: khoảng cách giữa các ký tự</li> <li>word-spacing: tăng hoặc giảm khoảng cách giữa các từ trong đoạn văn bản</li> <li>text-align: sắp xếp các nội dung theo chiều ngang</li> <li>text-indent: khoảng cách thuộc vào đầu dòng của một đoạn văn bản</li> <li>white-space: định dạng cho khoảng trắng trong đoạn văn bản</li> <li>display: các kiểu hiển thị của một phần tử HTML</li> <li>vertical-align: vị trí của một phần tử</li> </ul> <h3>4. Border Group</h3> <p>Border group: định dạng đường viền cho một đối tượng nào đó</p> <p>Các thuộc tính cơ bản thuộc nhóm Border group: </p> <ul> <li>border-width, border-top-width, border-right-width, border-bottom-width, border-left-width: độ rộng của đường viền</li> <li>border-style, border-top-style, border-right-style, border-bottom-style, border-left-style: kiểu hiển thị của đường viền</li> <li>border-color, border-top-color, border-right-color, border-bottom-color, border-left-color: màu sắc của đường viền</li> </ul> <h3>5. Box Group</h3> <p>Box group: định dạng kích thước, vị trí cho khối.</p> <p>Các thuộc tính cơ bản thuộc nhóm Box group: </p> <ul> <li>width, min-width, max-width: chiều rộng của đối tượng</li> <li>height, min-height, max-height: chiều dài của đối tượng</li> <li>margin, margin-top, margin-right, margin-bottom, margin-left: khoảng cách đối với phần tử bên ngoài</li> <li>padding, padding-top, padding-right, padding-bottom, padding-left: khoảng cách đối với phần tử bên</li> <li>float: lệch khối về bên trái hoặc phải.</li> <li>clear: xoá các thuộc tính float của các phần tử phía trên</li> </ul> <h3>6. List Group</h3> <p>List group: định dạng cho các danh sách</p> <p>Các thuộc tính cơ bản thuộc nhóm List group: </p> <ul> <li>list-style-position: vị trí của icon <li>, giá trị mặc định là outsite.</li> <li>list-style-type: kiểu icon của <li></li> <li>list-style-image: hình ảnh icon của <li></li> </ul> <h3>7. Position Group</h3> <p>Position group: định toạ độ của một phần tử HTML nào đó</p> <p>Các thuộc tính cơ bản thuộc nhóm Position group: </p> <ul> <li>position: kiểu hiển thị của một đối tượng</li> <li>top: khoảng cách từ đối tượng đến vị trí top</li> <li>right: khoảng cách từ đối tượng đến vị trí right</li> <li>left: khoảng cách từ đối tượng đến vị trí left</li> <li>bottom: khoảng cách từ đối tượng đến vị trí bottom</li> <li>z-index: vị trí của đối tượng</li> <li>overflow, overflow-x, overflow-y: chế độ hiển thị thanh cuộn</li> </ul>

Ngọc Phương

Web Developer

Cảm ơn các bạn đã ghé thăm blog của tôi. Tôi tên là Phương và tôi đã có hơn 10 năm kinh nghiệm trong lĩnh vực phát triển website. Tôi tự tin khẳng định mình là chuyên gia trong việc tạo ra những trang web ấn tượng và hiệu quả. Bạn nào có nhu cầu thiết kế website có thể liên hệ cho tôi qua zalo 0935040740.

Đóng góp ý kiến

Địa chỉ email của bạn sẽ không được công khai. Các trường bắt buộc được đánh dấu *

Your Name

Your Email

Your Website