[CSS 03] Các thuộc tính CSS thông dụng nhất

Hôm nay, chúng ta sẽ khám phá những thuộc tính CSS thông dụng nhất mà chắc chắn bạn sẽ gặp phải khi thiết kế website theo ý muốn.

Thuộc tính CSS Font (phông chữ)

Cùng bắt đầu với thuộc tính CSS Font - một phần quan trọng trong việc tạo nên sự độc đáo và thu hút của trang web. Dưới đây là một số thuộc tính CSS Font thông dụng:

font-family: Để chọn font chữ cho trang web. Ví dụ: font-family: tahoma, arial, "Time New Roman", sans-serif;
font-style: Để thiết lập kiểu chữ. Có 3 giá trị: normal (bình thường), italic (in nghiêng), oblique (xiên chéo).
font-weight: Để thay đổi độ đậm của chữ. Có thể sử dụng giá trị normal (thường) hoặc bold (đậm), hoặc các giá trị từ 100 đến 900 để chỉ mức độ đậm nhạt.
font-variant: Để thay đổi kiểu chữ hoa nhỏ. Có 2 giá trị: normal (thường) và small-caps (in hoa nhỏ).
font-size: Để thay đổi kích thước chữ. Ví dụ: font-size: 24px; hoặc font-size: 2em;

Thuộc tính CSS cho Background (nền)

Tiếp theo, chúng ta sẽ tìm hiểu về thuộc tính CSS cho nền của trang web. Dưới đây là một số thuộc tính CSS cho Background phổ biến:

Xem thêm:

Bài tập lớp 4 nâng cao: Tìm giá trị của biểu thức

background-color: Để thay đổi màu nền. Ví dụ: background-color: red; hoặc background-color: #333333;
background-image: Để thay đổi hình ảnh nền. Ví dụ: background-image: url("link_hình_ảnh");
background-repeat: Để kiểm soát việc lặp lại hình ảnh nền. Có các giá trị như repeat-x (lặp lại theo chiều ngang), repeat-y (lặp lại theo chiều dọc), repeat (lặp lại cả hai chiều), và no-repeat (không lặp lại).
background-attachment: Để điều chỉnh sự cuộn của hình ảnh nền. Có các giá trị như scroll (cuộn cùng nội dung trang web) và fixed (cố định hình ảnh nền so với nội dung trang web).
background-position: Để định vị hình ảnh nền. Ví dụ: background-position: 5cm 2cm; (định vị ảnh từ lề trái qua và từ lề trên xuống).

Thuộc tính CSS cho Text (văn bản)

Tiếp theo, chúng ta sẽ tìm hiểu về thuộc tính CSS cho văn bản trên trang web. Dưới đây là một số thuộc tính CSS cho Text phổ biến:

color: Để thay đổi màu chữ. Ví dụ: color: #5656463;
text-indent: Để thụt đầu dòng cho dòng đầu tiên trong một đoạn văn bản. Ví dụ: text-indent: 30px;
text-align: Để căn lề chữ. Có các giá trị như left (căn trái), right (căn phải), center (căn giữa), và justify (căn đều hai bên).
text-decoration: Để thêm hiệu ứng cho văn bản. Có các giá trị như underline (gạch chân), line-through (gạch xiên), overline (gạch đầu), blink (chữ nhấp nháy), và none (không hiệu ứng).
text-transform: Để thay đổi kiểu viết chữ. Có các giá trị như uppercase (in hoa), lowercase (in thường), và capitalize (in hoa ký tự đầu).
height / width: Để thay đổi kích thước của văn bản. Ví dụ: height: 30px; width: 50px;

Thuộc tính CSS Border (viền)

Tiếp theo, chúng ta sẽ tìm hiểu về thuộc tính CSS Border - để tạo viền cho các phần tử trên trang web. Dưới đây là một số thuộc tính CSS Border thông dụng:

border-width: Để thay đổi độ rộng của viền. Ví dụ: border-width: value;
border-color: Để thay đổi màu của viền. Ví dụ: border-color: value;
border-style: Để thay đổi kiểu của viền. Có các giá trị như solid (viền liền), dotted (viền chấm chấm), dashed (viền gạch gạch), double (viền liền đôi), và nhiều giá trị khác. Ví dụ: border: 1px solid #fafafa;

Thuộc tính CSS Margin

Tiếp theo, chúng ta sẽ tìm hiểu về thuộc tính CSS Margin - để căn lề cho các phần tử trên trang web. Dưới đây là một số điểm chính về Margin:

margin: Để thiết lập khoảng cách giữa phần tử và các thành phần xung quanh. Ví dụ: margin: value_1 value_2; hoặc margin: value;
Ngoài ra, còn có các thuộc tính như margin-top, margin-right, margin-bottom, margin-left để điều chỉnh lề từng phía riêng lẻ.

Đây là một số thuộc tính CSS thông dụng mà bạn sẽ gặp phải khi thiết kế website. Sử dụng chúng một cách sáng tạo và phù hợp để tạo nên trang web độc đáo và chuyên nghiệp.

Ảnh minh họa: Mô hình hộp Box Model

Hãy áp dụng kiến thức này vào thiết kế của bạn và tận dụng tối đa các thuộc tính CSS để tạo ra trang web ấn tượng và đáng chú ý.