Thuộc tính CSS: Khám phá và Sử dụng

Dưới đây là giải thích chi tiết về từng thuộc tính trong CSS:

 

Thuộc tính "color"

Thuộc tính "color" được sử dụng để định dạng màu chữ của một phần tử.

Giá trị của thuộc tính có thể là tên màu (ví dụ: "red", "blue", "green"), mã hex (ví dụ: "#FF0000" cho màu đỏ), hoặc hàm "rgb()" để chỉ định giá trị Red, Green, Blue.

Ví dụ: color: red;

Thuộc tính "font-size"

Thuộc tính "font-size" được sử dụng để định dạng kích thước của chữ trong một phần tử.

Giá trị của thuộc tính có thể là đơn vị pixel (ví dụ: "12px"), đơn vị em (ví dụ: "1.2em"), phần trăm (%) hoặc các giá trị tương đối khác.

Ví dụ: font-size: 16px;

Thuộc tính "background-color"

Thuộc tính "background-color" được sử dụng để định dạng màu nền của một phần tử.

Giá trị của thuộc tính cũng có thể là tên màu, mã hex hoặc hàm "rgb()" để chỉ định màu sắc.

Ví dụ: background-color: #F0F0F0;

Thuộc tính "font-family"

Thuộc tính "font-family" xác định font chữ được sử dụng cho phần tử.

Giá trị của thuộc tính có thể là tên font chữ (ví dụ: "Arial", "Helvetica") hoặc danh sách các font chữ ưu tiên (ví dụ: "Arial, Helvetica, sans-serif").

Ví dụ: font-family: Arial, sans-serif;

Thuộc tính "text-align"

Thuộc tính "text-align" dùng để căn chỉnh văn bản bên trong một phần tử.

Giá trị có thể là "left" (căn trái), "right" (căn phải), "center" (căn giữa) hoặc "justify" (canh đều hai bên).

Ví dụ: text-align: center;

Thuộc tính "width"

Thuộc tính "width" xác định chiều rộng của một phần tử.

Giá trị có thể là đơn vị pixel (ví dụ: "200px"), phần trăm (%) hoặc "auto" (chiều rộng tự động).

Ví dụ: width: 300px;

Thuộc tính "height"

Thuộc tính "height" xác định chiều cao của một phần tử.

Giá trị cũng có thể là đơn vị pixel, phần trăm (%) hoặc "auto" (chiều cao tự động).

Ví dụ: height: 200px;

Thuộc tính "border"

Thuộc tính "border" được sử dụng để tạo đường viền quanh một phần tử.

Giá trị có thể bao gồm độ dày (ví dụ: "1px"), kiểu đường viền (ví dụ: "solid", "dotted") và màu sắc (ví dụ: "red").

Ví dụ: border: 1px solid black;

Thuộc tính "margin"

Thuộc tính "margin" xác định khoảng cách giữa phần tử và các phần tử xung quanh nó.

Giá trị có thể là số pixel (ví dụ: "10px"), số pixel theo từng hướng (ví dụ: "5px 10px") hoặc "auto" (khoảng cách tự động).

Ví dụ: margin: 10px;

Thuộc tính "padding"

Thuộc tính "padding" xác định khoảng cách giữa nội dung và đường viền của một phần tử.

Giá trị cũng có thể là số pixel hoặc số pixel theo từng hướng.

Ví dụ: padding: 20px;

 

Đây chỉ là một số ví dụ về các thuộc tính và giá trị trong CSS. CSS cung cấp nhiều thuộc tính khác nhau để tùy chỉnh các phần tử trên trang web của bạn. Bạn có thể tìm hiểu thêm về các thuộc tính khác và tùy chỉnh chúng để tạo kiểu và hiệu ứng đa dạng cho trang web của mình.