HTML/CSS | Thuộc tính CSS thông dụng #2

Học HTML, CSS từ Zero Tới Hero

• Thuộc tính color
• Thuộc tính font-size
• Thuộc tính background-color
• Thuộc tính background-image
• Tìm hiểu về Box Model
• Thuộc tính width và height
• Thuộc tính padding
• Thuộc tính border
• Thuộc tính margin
• Thuộc tính border-radius

Thuộc tính color

Thuộc tính colordùng để kiểm soát màu văn bản trên trang web.

Ví dụ:

<h1>Làm quen với CSS</h1>

<style>
  h1 {
  /* Đổi màu văn bản thành màu xanh */
  color: green;   
  }
</style>

Làm quen với CSS

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ữ.

Ví dụ:

<h1>Làm quen với CSS</h1>

<style>
  h1 {
  color: green;  
  font-size: 14px;
  }
</style>

Làm quen với CSS

Thuộc tính background-color

Trong CSS, 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: 200px;
    height: 200px;
    margin: 20px;
    
    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 của một phần tử và được lặp lại theo cả chiều dọc và chiều ngang.

Giá trị của thuộc tính background-image thường là một hàm, sử dụng nhiều nhất là hàm url().

Ví dụ:

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

<style> 
.box {
  width: 200px;
  height: 200px;
  background-image: url("https://pbs.twimg.com/profile_images/1573239805357350912/R_Y5V2Wy_200x200.jpg");
  background-repeat: no-repeat;
}

</style>

Tìm hiểu về Box Model

Trong CSS, thuật ngữ “Box Model” được sử dụng để nói lên mô hình của các thẻ HTML khi hiển thị trên giao diện website.

Trong CSS, có thể tùy chỉnh các thành phần của Box Model bằng các thuộc tính phù hợp. Có 5 thuộc tính CSS liên quan đến 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.

Thuộc tính width và height

Thuộc tính width và height trong CSS được dùng để xác định chiều rộng và chiều cao của một phần tử. Từ đó kiểm soát kích thước của các phần tử, giúp tạo nên bố cục chắc chắn và ổn định cho trang web.

Ví dụ:

div {
  width: 300px;
  height: 150px;
}

Thuộc tính padding

Trong CSS, thuộc tính padding được sử dụng để điều chỉnh khoảng cách giữa nội dung của phần tử và viền xung quanh giúp cải thiện khả năng đọc và thẩm mỹ của trang web.

Thuộc tính border

Trong Box Model, border nằm ở vị trí thứ 3 tính từ trong ra ngoài, nằm giữa padding và margin. Thuộc tính border được dùng để tạo viền cho phần tử

Thuộc tính margin

Thuộc tính margin được sử dụng để tạo khoảng cách giữa phần tử hiện tại với các phần tử xung quanh.

Thuộc tính border-radius

Thuộc tính border-radius dùng để bo góc các phần tử, tránh các góc nhọn và cứng, tạo ra hiệu ứng mềm mại và thân thiện hơn cho giao diện web.

Tra cứu thược tính CSS

Tra cứu thuộc tính CSS tại: https://cssreference.io/

Trong bài học này mình chỉ giới thiệu tổng quan về các thuộc tính. Sẽ có các bài học chi tiết về từng thuộc tính trong các bài tiếp theo bạn nhé.