🎨 Cẩm Nang Lập Trình Giao Diện Web

Bước 1

Hiểu về Cấu trúc Khung (HTML)

HTML đóng vai trò định hình các khối thành phần nội dung có trên trang web. Hãy tưởng tượng bạn đang dựng cột nhà trước khi sơn sửa.

Ví dụ cách tạo một tiêu đề, một đoạn văn bản và một nút bấm cơ bản bằng HTML:

<div class="box">
    <h2>Đăng ký tài khoản</h2>
    <p>Vui lòng bấm vào nút bên dưới để tiếp tục.</p>
    <button class="my-button">Xác Nhận Ngay</button>
</div>

Bước 2

Chi tiết hóa cách code một nút bấm (Button Styling)

Nút bấm là thành phần tương tác quan trọng nhất. Để làm một nút bấm đẹp, chuyên nghiệp bằng CSS, chúng ta cần phối hợp nhiều thuộc tính chi tiết:

Bảng giải mã các thuộc tính CSS của nút bấm:

Thuộc tính CSS	Ý nghĩa chi tiết	Ví dụ giá trị
background-color	Màu nền của nút bấm	#2563eb (Xanh dương)
color	Màu sắc chữ hiển thị trên nút	#ffffff (Trắng)
padding	Khoảng cách đệm bên trong (giúp nút to, dễ bấm)	12px 24px (Trên/Dưới Trái/Phải)
border-radius	Độ bo tròn 4 góc của nút	6px (Góc bo nhẹ) hoặc 30px (Tròn xoe)
box-shadow	Tạo hiệu ứng bóng đổ nổi khối không gian 3D	0 4px 6px rgba(0,0,0,0.2)
cursor: pointer	Đổi con trỏ chuột thành hình bàn tay khi rê vào	Giúp người dùng biết nút này có thể bấm được

Mẫu 1: Nút bấm màu xanh hiện đại (Có hiệu ứng nổi khi di chuột)

Mã CSS áp dụng:

.btn-sample-1 {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    transition: all 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào nút (:hover) */
.btn-sample-1:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
}

Mẫu 2: Nút bấm bo tròn viền xanh lá (Dạng viên thuốc)

Mã CSS áp dụng:

.btn-sample-2 {
    background-color: #10b981;
    color: white;
    border: 2px solid #059669;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px; 
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-sample-2:hover {
    background-color: #059669;
}

Bước 3

Tạo màu sắc và phong cách tổng thể cho trang web

Để trang web có tính thẩm mỹ cao, bạn cần thiết lập bảng màu chủ đạo (Color Palette) thông qua biến CSS (CSS Variables) ở đầu file:

:root {
    --primary-color: #4f46e5;    /* Màu chủ đạo (Thanh menu, nút chính) */
    --bg-color: #f8fafc;         /* Màu nền tổng thể trang web */
    --text-color: #1e293b;       /* Màu chữ hiển thị chính */
    --card-background: #ffffff;  /* Màu nền của các khung thẻ nội dung */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', sans-serif;
}

Việc sử dụng biến CSS giúp bạn có thể dễ dàng thay đổi toàn bộ màu sắc của website chỉ bằng cách sửa giá trị tại một dòng duy nhất ở thẻ :root.

Bước 4

Kiểm tra và Xuất bản

Sau khi viết xong mã nguồn cho HTML và CSS:

1. Nhấn tổ hợp phím Ctrl + S (trên Windows) hoặc Cmd + S (trên Mac) để lưu file lại.
2. Mở file trực tiếp bằng trình duyệt Google Chrome hoặc Microsoft Edge để kiểm tra giao diện trực quan.
3. Sử dụng tính năng Inspect (Kiểm tra phần tử) bằng cách bấm chuột phải vào nút bấm hoặc chữ bất kỳ trên trình duyệt để tinh chỉnh thông số màu sắc theo ý muốn trực tiếp.