Thuộc tính CSS thông dụng

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu cho các phần tử HTML, giúp website trở nên đẹp và trực quan hơn.

Bài viết này tập trung vào việc giới thiệu các thuộc tính CSS thường gặp cùng ví dụ minh họa trực quan. Đây là cái nhìn tổng quan giúp nắm bắt những thành phần nền tảng nhất của CSS - từ màu chữ, kích thước chữ, nền, ảnh nền cho đến Box Model và bo góc phần tử.

Thuộc tính color

Thuộc tính color dùng để kiểm soát màu văn bản trên trang web. Bạn có thể sử dụng tên màu (red, blue), mã HEX (#ff0000), RGB, HSL,...

<h1>Thuộc tính (color) trong CSS</h1>

<style>
  h1 {
    color: red;
  }
</style>

Thuộc tính font-size

Thuộc tính font-size được sử dụng để thay đổi kích thước phông chữ. Các đơn vị phổ biến: px, em, rem, %...

<h1>Thuộc tính (font-size) trong CSS</h1>

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }
</style>

Thuộc tính background-color

Thuộc tính background-color được sử dụng để thay đổi màu nền của một phần tử. Giá trị mặc định là transparent (trong suốt).

Ví dụ, đặt cho .box có màu nền là green:

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>

<div class="box"></div>

Thuộc tính background-image

Thuộc tính background-image được sử dụng để đặt ảnh nền cho một phần tử.

Theo mặc định, hình nền được đặt ở góc trên bên trái và lặp lại theo cả hai chiều.

Kết hợp với background-repeat, background-size, background-position để kiểm soát hiển thị ảnh nền tốt hơn.

<div class="box"></div>

<style>
  .box {
    width: 500px;
    height: 500px;
    background-image: url('https://placehold.co/100x100');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
</style>

Tìm hiểu về Box Model

Box Model là mô hình hiển thị các phần tử HTML trên giao diện website.

Mỗi phần tử được coi là một "hộp" gồm: content, padding, border, margin.

Các thuộc tính chính trong Box Model:

• width: chiều rộng của phần tử.
• height: chiều cao của phần tử.
• padding: làm dày phần tử
• border: đường viền của phần tử, có thể tùy chỉnh kiểu dáng, màu sắc, v.v.
• margin: khoảng cách giữa phần tử hiện tại và các phần tử xung quanh.

<div class="box"></div>

<style>
  .box {
    background-color: red;
    width: 50px;
    height: 50px;
    padding: 20px;
    border: 20px solid blue;
    margin: 20px;
  }
</style>

Thuộc tính border-radius

Thuộc tính border-radius dùng để bo góc các phần tử, giúp tránh góc nhọn và tạo hiệu ứng mềm mại, hiện đại hơn.

<div class="box"></div>

<style>
  .box {
    background-color: red;
    width: 50px;
    height: 50px;
    border-radius: 10px; /* bo góc 10px */
  }
</style>

Kết luận