Các thuộc tính CSS và Bootstrap cơ bản

Trong bài học này, chúng ta sẽ tìm hiểu về các thuộc tính CSS cơ bản như màu sắc, font chữ, kích thước và cách Bootstrap hỗ trợ những thuộc tính này. Việc kết hợp CSS thuần và Bootstrap giúp bạn tối ưu hiệu suất lập trình và tăng tốc phát triển giao diện web.

1. Màu sắc trong CSS và Bootstrap

CSS thuần

CSS cho phép thiết lập màu sắc cho các phần tử bằng color (màu chữ) và background-color (màu nền).

Ví dụ:

p {
    color: red; /* Màu chữ đỏ */
    background-color: yellow; /* Nền vàng */
    opacity: 0.8; /* Độ trong suốt */
}

HTML:

<p>Chào mừng bạn đến với CSS!</p>

Bootstrap

Bootstrap cung cấp các lớp màu sắc nhanh chóng:

• .text-primary, .text-danger, .text-success: Màu chữ
• .bg-warning, .bg-dark, .bg-light: Màu nền

Ví dụ:

<p class="text-primary bg-warning">Chào mừng bạn đến với Bootstrap!</p>

2. Font chữ trong CSS và Bootstrap

CSS thuần

Sử dụng các thuộc tính font-family, font-size, font-weight, line-height.

Ví dụ:

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
}

Bootstrap

Bootstrap cung cấp các lớp:

• .fs-1, .fs-2, .fs-3: Cỡ chữ lớn nhỏ
• .fw-bold, .fw-light: Độ dày font

Ví dụ:

<p class="fs-3 fw-bold">Font chữ trong Bootstrap!</p>

3. Kích thước trong CSS và Bootstrap

CSS thuần

Ví dụ:

div {
    width: 300px;
    height: 150px;
    max-width: 100%;
}

Bootstrap

Bootstrap cung cấp các lớp:

• .w-25, .w-50, .w-100: Chiều rộng
• .h-25, .h-50, .h-100: Chiều cao

Ví dụ:

<div class="w-50 h-25 bg-primary text-white">Kích thước trong Bootstrap</div>

4. So sánh CSS thuần và Bootstrap

5. Bài tập thực hành

Hãy thiết kế một đoạn văn bản với màu sắc, font chữ và kích thước khác nhau. Sử dụng CSS thuần và Bootstrap và so sánh kết quả.

HTML:

<p class="text-danger fs-4">
    Đây là văn bản được thiết lập bằng Bootstrap.
</p>

CSS:

p {
    color: blue;
    font-size: 20px;
    font-family: Verdana, sans-serif;
}

6. Kết luận

Qua bài học này, bạn đã nắm vững các thuộc tính CSS quan trọng và cách Bootstrap giúp tối ưu hoá thiết kế giao diện. Hãy luyện tập thực hành để nâng cao kỹ năng làm việc với CSS và Bootstrap!