Bài F8. Một số thuộc tính cơ bản của CSS

1. Những thuộc tính định kiểu cho màu sắc và phông chữ

• Mục đích: Làm nội dung web nổi bật, dễ đọc, có trải nghiệm tốt.

• Các thuộc tính định kiểu phông chữ:

  • font-family: Tên phông chữ (VD: Arial, Georgia…)

  • font-size: Cỡ chữ (VD: 16px, 150%, 2em…)

  • font-style: Kiểu in nghiêng (normal, italic, oblique)

  • font-weight: Độ đậm nhạt (normal, bold, 100–900)

Ví dụ 1: Dùng thẻ <span> và thuộc tính style để định kiểu cho từ Vô địch.

<li>Giải kéo co cấp trường. Thành tích: <span style="font-family: Georgia; font-size: 1.5em; font-style: oblique; font-weight: bolder;">Vô địch</span></li>

Bảng 1. Một số thuộc tính và giá trị dùng để định kiểu phông chữ

• Thuộc tính định kiểu màu chữ:

  • Sử dụng color để đổi màu văn bản

  • Có thể dùng: tên màu (red), mã màu (#ff0000), hàm màu (rgba(...))

Ví dụ 2: Dùng style="color: #87e3cd;" để đổi màu tiêu đề.

<h1 style="color: #87e3cd;">Các hoạt động đã tham gia</h1>

2. Những thuộc tính định kiểu cho văn bản

• Căn chỉnh văn bản theo chiều ngang: Dùng text-align (left, center, right, justify)

• Căn chỉnh văn bản theo chiều dọc: Dùng vertical-align (top, middle, sub, super,…)

• Các hiệu ứng văn bản khác:

  • text-decoration: Gạch ngang, gạch chân (underline, line-through,…)

  • text-transform: In hoa, thường, viết hoa đầu từ (uppercase, lowercase, capitalize)

  • text-shadow: Tạo bóng cho chữ (VD: 2px 2px 4px grey)

  • letter-spacing: Khoảng cách giữa các ký tự

  • word-spacing: Khoảng cách giữa các từ

Ví dụ 3: Dùng thêm text-align: center để căn giữa nội dung đã đổi màu.

<h1 style="color: #87e3cd; text-align: center;">Các hoạt động đã tham gia</h1>

3. Những thuộc tính định kiểu cho nền

• Thuộc tính chính:

  • background-color: Thiết lập màu nền cho phần tử HTML (theo tên màu, mã màu #, rgb,…)

  • background-image: Lấy ảnh làm nền (dùng url('tên_ảnh.png'))

  • opacity: Độ trong suốt của nền (từ 0 đến 1, nhỏ hơn thì trong suốt hơn)

  • background-repeat: Thiết lập việc lặp lại ảnh nền (repeat, repeat-x, repeat-y, no-repeat)

Ví dụ 4: Tạo nền xanh nhạt cho phần nội dung mục Các hoạt động đã tham gia bằng:

<div style="background: #b1f1bf; height: 100px">...</div>

Bảng 3: Một số thuộc tính định kiểu nền

<div style="border: 1px solid #00a2d3; border-radius: 10px;
            margin: 20px 50px 50px 250px; padding: 20px;
            background: #b1f1bf; height: 100px; width: 500px;">
</div>