Bài 22.5: Bài tập thực hành styling

Chào mừng bạn đến với bài thực hành chuyên sâu về CSS! Sau khi đã nắm vững các khái niệm cơ bản về cách CSS hoạt động, bây giờ là lúc chúng ta xắn tay áo lên và áp dụng chúng vào thực tế. Bài này sẽ đưa ra một số bài tập nhỏ giúp bạn làm quen và thành thạo việc biến các thẻ HTML đơn giản thành những khối nội dung có phong cách và thẩm mỹ hơn.

Hãy nhớ rằng, cách tốt nhất để học CSS là thực hành, thực hành và thực hành! Đừng ngại thử nghiệm, thay đổi các giá trị, và xem kết quả hiển thị trên trình duyệt của bạn. Chúng ta sẽ sử dụng phương pháp CSS ngoài (external stylesheet) là chủ yếu, vì đây là cách tổ chức code CSS chuyên nghiệp và dễ quản lý nhất.

Giả sử bạn đã có một file HTML (index.html) và một file CSS (style.css) được liên kết đúng cách trong thẻ <head> của file HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bài Tập Styling</title>
    <link rel="stylesheet" href="style.css"> // Đây là dòng liên kết file CSS
</head>
<body>
    <!-- Nội dung HTML của bạn sẽ ở đây -->
</body>
</html>

Bây giờ, chúng ta hãy bắt đầu với các bài tập nhỏ nhé!

Bài tập 1: Styling Tiêu đề và Đoạn văn cơ bản

Mục tiêu của bài tập này là làm cho tiêu đề và đoạn văn bản trông bắt mắt hơn thay vì chỉ là màu đen mặc định.

Yêu cầu:

Tiêu đề cấp 1 (<h1>) có màu xanh lam, cỡ chữ lớn (ví dụ: 36px), và căn giữa.
Đoạn văn bản (<p>) có màu xám đậm, cỡ chữ vừa phải (ví dụ: 18px), và có một khoảng lề trên đáng kể.

Code HTML:

<div class="text-section">
    <h1>Chào mừng bạn!</h1>
    <p>Đây là một đoạn văn bản mẫu để chúng ta thực hành styling.</p>
    <p>Thực hành giúp bạn hiểu rõ hơn cách CSS hoạt động.</p>
</div>

Chúng ta đặt chúng trong một thẻ <div> với class text-section để dễ quản lý hơn, mặc dù trong bài tập này ta sẽ target trực tiếp <h1> và <p>.

Code CSS (style.css):

/* Styling cho tiêu đề */
h1 {
    color: #2196f3; /* Màu xanh lam */
    font-size: 36px; /* Cỡ chữ lớn */
    text-align: center; /* Căn giữa */
}

/* Styling cho đoạn văn bản */
p {
    color: #333; /* Màu xám đậm */
    font-size: 18px; /* Cỡ chữ vừa phải */
    margin-top: 20px; /* Khoảng lề trên 20px */
}

Giải thích:

Chúng ta sử dụng các selector là tên thẻ (h1, p) để chọn tất cả các thẻ <h1> và <p> trên trang.
Thuộc tính color dùng để thay đổi màu chữ. Chúng ta có thể dùng tên màu (như blue), mã hex (như #2196f3), hoặc giá trị RGB/HSL.
font-size điều chỉnh kích thước phông chữ. Đơn vị px (pixel) là một đơn vị cố định phổ biến.
text-align dùng để căn chỉnh nội dung văn bản bên trong phần tử (trái, phải, giữa, hoặc justify).
margin-top là một phần của box model, dùng để tạo khoảng trống bên ngoài phía trên của phần tử. Giá trị 20px tạo ra khoảng cách 20 pixel giữa đoạn văn và phần tử phía trên nó (ở đây là tiêu đề hoặc đoạn văn khác).

Hãy thử thay đổi các giá trị màu, cỡ chữ và lề xem kết quả thay đổi như thế nào nhé!

Bài tập 2: Làm việc với Box Model - Tạo khung và lề

Box Model là một khái niệm cực kỳ quan trọng trong CSS. Mọi phần tử HTML đều được coi là một chiếc hộp. Bài tập này giúp bạn làm quen với border, padding, và margin.

Yêu cầu:

Tạo một div có class my-box.
div này có viền (border) màu xanh lá cây dày 2px, kiểu solid.
Nội dung bên trong div có khoảng đệm (padding) là 15px xung quanh.
div này có khoảng lề (margin) là 25px xung quanh để tạo khoảng cách với các phần tử khác.
Đặt một văn bản bất kỳ vào trong div.

Code HTML:

<div class="my-box">
    <p>Tôi là nội dung bên trong chiếc hộp này.</p>
    <p>Hãy xem viền, đệm và lề xung quanh tôi!</p>
</div>

<div class="another-element">
    <p>Tôi là một phần tử khác, cách chiếc hộp bên trên bởi lề (margin).</p>
</div>

Code CSS (style.css):

/* Styling cho chiếc hộp */
.my-box {
    border: 2px solid green; /* Viền dày 2px, kiểu nét liền, màu xanh lá */
    padding: 15px; /* Khoảng đệm 15px xung quanh nội dung */
    margin: 25px; /* Khoảng lề 25px xung quanh hộp */
    background-color: #e0f7fa; /* Thêm màu nền nhạt cho dễ nhìn */
}

.another-element {
    border: 1px solid #ccc;
    padding: 10px;
    margin-left: 25px; /* Chỉ thêm lề trái để thấy rõ tác dụng của margin box bên trên */
}

Giải thích:

Chúng ta sử dụng selector class .my-box để chọn div có class này.
border: Đây là thuộc tính viết gọn cho border-width, border-style, và border-color. 2px là độ dày, solid là kiểu nét liền, green là màu viền.
padding: Tạo khoảng trống giữa nội dung của phần tử và viền của nó. padding: 15px; áp dụng đệm 15px cho tất cả bốn phía (trên, phải, dưới, trái). Bạn có thể viết riêng padding-top, padding-right, padding-bottom, padding-left hoặc dùng cú pháp rút gọn với nhiều giá trị.
margin: Tạo khoảng trống bên ngoài viền của phần tử, tách nó ra khỏi các phần tử khác. Tương tự như padding, margin: 25px; áp dụng lề 25px cho tất cả bốn phía. margin-top, margin-right, margin-bottom, margin-left cũng tồn tại.
background-color: Đặt màu nền cho phần tử. Chúng ta thêm vào đây để dễ dàng nhìn thấy vùng đệm (padding) bên trong viền.

Sự khác biệt giữa padding và margin là một điểm thường gây nhầm lẫn cho người mới bắt đầu. Hãy thử bỏ một trong hai thuộc tính và xem kết quả để hiểu rõ hơn nhé!

Bài tập 3: Styling Danh sách

Danh sách (<ul>, <ol>, <li>) là các thành phần phổ biến. Làm cho chúng trông gọn gàng và có tổ chức là một kỹ năng quan trọng.

Yêu cầu:

Tạo một danh sách không thứ tự (<ul>).
Xóa bỏ các dấu chấm (bullet points) mặc định.
Mỗi mục trong danh sách (<li>) có một khoảng đệm nhỏ bên trái và một viền dưới mỏng để phân tách.
Thay đổi màu chữ của các mục danh sách khi rê chuột vào (hover effect).

Code HTML:

<ul class="styled-list">
    <li>Mục danh sách thứ nhất</li>
    <li>Mục danh sách thứ hai</li>
    <li>Mục danh sách thứ ba</li>
</ul>

Code CSS (style.css):

/* Styling cho toàn bộ danh sách */
.styled-list {
    list-style-type: none; /* Xóa bỏ dấu chấm mặc định */
    padding: 0; /* Xóa khoảng đệm trái mặc định của trình duyệt */
    margin: 20px 0; /* Thêm lề trên/dưới, bỏ lề trái/phải */
    border: 1px solid #eee; /* Thêm viền nhẹ cho cả khối danh sách */
}

/* Styling cho từng mục danh sách */
.styled-list li {
    padding: 10px 15px; /* Đệm bên trong mục: trên/dưới 10px, trái/phải 15px */
    border-bottom: 1px solid #ddd; /* Viền dưới mỏng để phân cách */
    transition: background-color 0.3s ease; /* Tạo hiệu ứng chuyển đổi mượt khi hover */
}

/* Xóa viền dưới cho mục cuối cùng để tránh bị viền kép */
.styled-list li:last-child {
    border-bottom: none;
}

/* Hiệu ứng khi rê chuột vào mục danh sách */
.styled-list li:hover {
    background-color: #f0f0f0; /* Đổi màu nền khi hover */
    cursor: pointer; /* Biến con trỏ thành hình bàn tay */
}

Giải thích:

.styled-list: Chúng ta target thẻ <ul> bằng class.
list-style-type: none;: Thuộc tính này bắt buộc phải có để loại bỏ các ký hiệu mặc định (dấu chấm, số, v.v.).
padding: 0;: Trình duyệt thường thêm một khoảng đệm bên trái mặc định cho danh sách. Đặt padding: 0; sẽ loại bỏ nó, giúp bạn kiểm soát khoảng cách tốt hơn.
margin: 20px 0;: Đặt lề trên và dưới là 20px, còn lề trái và phải là 0.
.styled-list li: Chúng ta sử dụng combinator là dấu cách để chọn tất cả các thẻ <li> nằm bên trong phần tử có class styled-list.
border-bottom: Chỉ định viền cho phía dưới của phần tử <li>.
:last-child: Đây là một pseudo-class, cho phép bạn chọn phần tử là con cuối cùng của phần tử cha nó. Chúng ta dùng nó để xóa viền dưới của mục cuối cùng cho thẩm mỹ.
:hover: Một pseudo-class khác, cho phép bạn định kiểu cho một phần tử khi con trỏ chuột rê qua nó.
transition: Thuộc tính này làm cho sự thay đổi style (ở đây là background-color) diễn ra mượt mà trong 0.3 giây thay vì nhảy đột ngột.

Thử thay đổi list-style-type thành circle, square (cho <ul>) hoặc decimal, upper-roman (cho <ol>) để xem các kiểu hiển thị khác nhau nhé!

Bài tập 4: Tạo một nút (Button) đơn giản

Nút là một yếu tố tương tác quan trọng. Styling một nút không chỉ làm nó đẹp hơn mà còn giúp người dùng nhận biết nó là một yếu tố có thể click được.

Yêu cầu:

Tạo một thẻ <button> với class basic-button.
Thiết lập màu nền, màu chữ, và kích thước chữ cho nút.
Thêm khoảng đệm bên trong nút.
Loại bỏ viền mặc định và thêm viền riêng.
Thay đổi giao diện nút khi rê chuột vào.

Code HTML:

<button class="basic-button">Nhấn vào đây</button>

Code CSS (style.css):

/* Styling cho nút cơ bản */
.basic-button {
    background-color: #4CAF50; /* Màu nền xanh lá cây */
    color: white; /* Màu chữ trắng */
    padding: 10px 20px; /* Đệm trên/dưới 10px, trái/phải 20px */
    border: none; /* Xóa viền mặc định */
    border-radius: 5px; /* Bo tròn góc 5px */
    cursor: pointer; /* Biến con trỏ thành hình bàn tay */
    font-size: 16px; /* Cỡ chữ */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển đổi mượt */
}

/* Hiệu ứng khi rê chuột vào nút */
.basic-button:hover {
    background-color: #45a049; /* Thay đổi màu nền khi hover */
}

Giải thích:

.basic-button: Target thẻ button bằng class.
background-color, color, font-size: Các thuộc tính cơ bản để định màu nền, màu chữ và kích thước chữ.
padding: Tạo khoảng đệm bên trong nút, làm cho nút trông thoáng đãng hơn.
border: none;: Thẻ <button> có viền mặc định của trình duyệt. Dòng này sẽ xóa nó đi để chúng ta có thể tự tạo viền theo ý muốn (hoặc không viền như ví dụ này).
border-radius: 5px;: Bo tròn các góc của nút.
cursor: pointer;: Thay đổi hình dạng con trỏ chuột thành biểu tượng bàn tay khi rê qua nút, là một dấu hiệu cho người dùng biết đây là một phần tử có thể tương tác.
transition: Tương tự bài tập 3, tạo hiệu ứng mượt khi màu nền thay đổi.
:hover: Thay đổi background-color khi rê chuột vào nút.

Hãy thử thay đổi border-radius thành các giá trị khác hoặc thậm chí dùng phần trăm (%) để tạo nút hình bầu dục. Bạn cũng có thể thêm thuộc tính border để tạo viền cho nút.

Bài tập 5: Kết hợp tất cả - Tạo một "Card" đơn giản

Đây là bài tập tổng hợp, sử dụng các kiến thức về Box Model, text styling và background để tạo ra một thành phần giao diện phổ biến: một chiếc "card".

Yêu cầu:

Tạo một div có class product-card.
Bên trong card có một tiêu đề sản phẩm (<h2>) và một đoạn mô tả (<p>).
Card có chiều rộng cố định, có bóng đổ (box-shadow), và các góc được bo tròn nhẹ.
Nội dung bên trong card có khoảng đệm.
Tiêu đề sản phẩm có màu sắc và cỡ chữ riêng.
Đoạn mô tả có màu chữ và lề trên phù hợp.

Code HTML:

<div class="product-card">
    <h2>Laptop XYZ Pro</h2>
    <p>Hiệu năng vượt trội, thiết kế sang trọng, màn hình sắc nét. Lựa chọn hoàn hảo cho công việc và giải trí.</p>
</div>

Code CSS (style.css):

/* Styling cho toàn bộ card */
.product-card {
    width: 300px; /* Chiều rộng cố định */
    border: 1px solid #ddd; /* Viền mỏng */
    border-radius: 8px; /* Bo tròn góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tạo bóng đổ nhẹ */
    padding: 20px; /* Khoảng đệm bên trong */
    margin: 20px auto; /* Lề trên/dưới 20px, căn giữa theo chiều ngang */
    background-color: white; /* Nền trắng */
    font-family: sans-serif; /* Chọn phông chữ */
}

/* Styling cho tiêu đề sản phẩm */
.product-card h2 {
    color: #007bff; /* Màu xanh dương */
    font-size: 20px; /* Cỡ chữ */
    margin-top: 0; /* Xóa lề trên mặc định của h2 */
    margin-bottom: 10px; /* Thêm lề dưới để tách khỏi mô tả */
}

/* Styling cho đoạn mô tả */
.product-card p {
    color: #555; /* Màu xám */
    font-size: 15px; /* Cỡ chữ */
    line-height: 1.5; /* Chiều cao dòng, giúp dễ đọc hơn */
    margin-bottom: 0; /* Xóa lề dưới mặc định của p */
}

Giải thích:

.product-card: Container chính cho card.
width: Đặt chiều rộng cố định cho card.
border, border-radius: Tạo viền và bo tròn góc cho card.
box-shadow: Thuộc tính này tạo hiệu ứng bóng đổ. Các giá trị lần lượt là: offset-x (ngang), offset-y (dọc), blur-radius (độ mờ), spread-radius (độ lan tỏa, tùy chọn), và màu sắc (với kênh alpha rgba để tạo độ trong suốt).
padding: Tạo không gian giữa viền card và nội dung bên trong.
margin: 20px auto;: Dòng này cực kỳ hữu ích để căn giữa một phần tử block theo chiều ngang khi bạn đã đặt width cho nó. auto cho lề trái và phải sẽ tự động tính toán để cân bằng khoảng trống hai bên.
background-color, font-family: Các style cơ bản cho card.
.product-card h2, .product-card p: Sử dụng selector kết hợp (descendant selector) để chỉ định chỉ style cho <h2> và <p> nằm bên trong phần tử có class product-card.
margin-top: 0;, margin-bottom: 10px;: Điều chỉnh lề trên/dưới cho tiêu đề và đoạn văn để kiểm soát khoảng cách giữa chúng và các thành phần khác trong card.
line-height: Tăng khoảng cách giữa các dòng trong đoạn văn, cải thiện đáng kể khả năng đọc. Giá trị 1.5 gấp 1.5 lần kích thước phông chữ hiện tại.

Thử thay đổi màu sắc, bóng đổ, hoặc thêm các thành phần khác như hình ảnh hoặc nút "Mua ngay" vào card này để bài tập trở nên thú vị hơn!

Comments

There are no comments at the moment.