Bài 2.5: Bài tập thực hành CSS cơ bản

Chào mừng bạn đến với bài thực hành CSS đầu tiên trong chuỗi bài học của chúng ta! Sau khi đã làm quen với cú pháp và cách thức hoạt động của CSS, đã đến lúc chúng ta "xắn tay áo" lên và bắt đầu viết code thực tế. Lý thuyết là quan trọng, nhưng thực hành mới là chìa khóa để bạn thực sự nắm vững và sử dụng CSS một cách hiệu quả.

Các bài tập dưới đây được thiết kế để củng cố những kiến thức cơ bản nhất mà chúng ta đã học về CSS, từ cách chọn phần tử đến việc áp dụng các thuộc tính phổ biến. Hãy kiên nhẫn, thử nghiệm và đừng ngại mắc lỗi nhé!

Bài tập 1: Tạo kiểu cho Văn bản và Nền

Mục tiêu: Áp dụng màu sắc cho văn bản, căn chỉnh và thay đổi màu nền cho các phần tử HTML.

HTML cần thiết:

Chúng ta sẽ sử dụng một cấu trúc HTML đơn giản gồm một tiêu đề <h1> và một đoạn văn bản <p>.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bài Tập CSS 1</title>
    <link rel="stylesheet" href="styles.css"> <!-- Đảm bảo bạn có file styles.css -->
</head>
<body>

    <h1>Tiêu đề của Trang Blog</h1>

    <p>Đây là đoạn văn bản đầu tiên. Chúng ta sẽ làm cho nó có màu nền khác biệt một chút.</p>

    <p>Đoạn văn bản thứ hai này sẽ có màu chữ khác.</p>

</body>
</html>

Trong file index.html này, chúng ta có một tiêu đề <h1> và hai đoạn p. Lưu ý dòng <link rel="stylesheet" href="styles.css">, đây là cách chúng ta liên kết file HTML với file CSS (styles.css) nơi bạn sẽ viết code CSS của mình.

Yêu cầu CSS:

  1. Đặt màu chữ cho toàn bộ trang là màu đen (#000).
  2. Đặt màu nền cho phần tử <body> là màu trắng nhẹ (#f8f8f8).
  3. Đặt màu chữ cho tiêu đề <h1> là màu xanh dương đậm (navy) và căn giữa (text-align: center).
  4. Đặt màu nền cho đoạn văn bản đầu tiên (p) là màu vàng nhạt (lightyellow).
  5. Đặt màu chữ cho đoạn văn bản thứ hai (p) là màu đỏ tươi (crimson).

Code CSS (Giải pháp):

Mở file styles.css (hoặc tạo mới nếu chưa có) và thêm đoạn code sau:

/* Yêu cầu 1 & 2: Áp dụng cho toàn bộ trang và body */
body {
    font-family: Arial, sans-serif; /* Thêm font chữ cho dễ đọc */
    color: #000; /* Màu chữ đen */
    background-color: #f8f8f8; /* Màu nền trắng nhẹ */
    margin: 0; /* Bỏ margin mặc định của body */
    padding: 20px; /* Thêm padding cho nội dung không bị sát lề */
}

/* Yêu cầu 3: Áp dụng cho tiêu đề h1 */
h1 {
    color: navy; /* Màu xanh dương đậm */
    text-align: center; /* Căn giữa */
    margin-bottom: 20px; /* Thêm khoảng cách dưới tiêu đề */
}

/* Yêu cầu 4: Áp dụng cho đoạn p đầu tiên (sử dụng pseudo-class) */
p:first-of-type {
    background-color: lightyellow; /* Màu nền vàng nhạt */
    padding: 10px; /* Thêm padding cho nền */
    border: 1px solid #ccc; /* Thêm viền nhẹ */
    margin-bottom: 15px; /* Khoảng cách với đoạn sau */
}

/* Yêu cầu 5: Áp dụng cho đoạn p thứ hai (sử dụng pseudo-class) */
p:nth-of-type(2) {
    color: crimson; /* Màu đỏ tươi */
    font-weight: bold; /* In đậm */
}

Giải thích code CSS:

  • Chúng ta sử dụng selector body để thiết lập các thuộc tính chung cho toàn bộ nội dung hiển thị. font-family để chọn phông chữ, color để thiết lập màu chữ mặc định, background-color cho màu nền của trang. margin và padding được thêm vào để bố cục trang trông thoáng đãng hơn.
  • Selector h1 nhắm mục tiêu trực tiếp vào phần tử tiêu đề cấp 1. color: navy; đặt màu chữ, và text-align: center; căn chỉnh nội dung ra giữa. margin-bottom tạo khoảng trống bên dưới tiêu đề.
  • Để chọn đoạn <p> đầu tiên, chúng ta dùng selector pseudo-class :first-of-type. Pseudo-class là cách để chọn phần tử dựa trên trạng thái hoặc vị trí của nó trong cấu trúc HTML. Ở đây, nó chọn <p> là con đầu tiên cùng loại (<p>) trong phần tử cha của nó (<body>).
  • Để chọn đoạn <p> thứ hai, chúng ta dùng pseudo-class :nth-of-type(2). Tương tự, nó chọn <p> là con thứ 2 cùng loại.
  • Các thuộc tính như background-color, padding, border, color, font-weight được áp dụng như yêu cầu để tạo kiểu riêng cho từng đoạn văn bản.

Hãy lưu cả hai file (index.html và styles.css) vào cùng một thư mục và mở index.html trong trình duyệt để xem kết quả nhé!

Bài tập 2: Thực hành với Class và ID Selectors

Mục tiêu: Sử dụng các selector .class và #id để áp dụng kiểu cho các phần tử cụ thể, ngay cả khi chúng cùng loại thẻ HTML.

HTML cần thiết:

Thêm đoạn HTML sau vào phần <body> của file index.html (bên dưới nội dung của Bài tập 1):

<hr> <!-- Đường kẻ ngang để phân tách bài tập -->

<h2>Bài tập về Selectors Class và ID</h2>

<div id="special-container">
    <p class="highlight">Đoạn văn bản này có class "highlight".</p>
    <p>Đoạn văn bản bình thường.</p>
    <p class="highlight">Đoạn văn bản này cũng có class "highlight".</p>
</div>

<div class="info-box">
    <p>Đây là một div có class "info-box".</p>
</div>

Trong phần HTML này, chúng ta có một <div> với id="special-container", chứa ba đoạn p, trong đó hai đoạn có class="highlight". Bên dưới là một <div> khác với class="info-box".

Yêu cầu CSS:

  1. Đặt màu nền cho phần tử có id="special-container" là màu xanh lá cây nhạt (lightgreen).
  2. Đặt màu chữ cho tất cả các phần tử có class="highlight" là màu tím (purple).
  3. Đặt màu viền cho phần tử có class="info-box" là màu xanh dương (blue) với độ dày 2px và kiểu solid.
  4. Đặt padding 15px cho cả #special-container và .info-box.

Code CSS (Giải pháp):

Thêm đoạn code sau vào file styles.css:

/* Bài tập 2 CSS */

/* Yêu cầu 1: Áp dụng cho ID */
#special-container {
    background-color: lightgreen; /* Màu nền xanh lá cây nhạt */
    margin-top: 20px; /* Khoảng cách với nội dung phía trên */
}

/* Yêu cầu 2: Áp dụng cho Class */
.highlight {
    color: purple; /* Màu tím */
    font-style: italic; /* Thêm kiểu chữ nghiêng cho dễ nhận biết */
}

/* Yêu cầu 3 & 4: Áp dụng cho Class và thêm padding */
.info-box {
    border: 2px solid blue; /* Viền xanh dương, dày 2px, nét liền */
    padding: 15px; /* Padding 15px */
    margin-top: 20px; /* Khoảng cách với nội dung phía trên */
    background-color: #e9e9e9; /* Màu nền xám nhạt */
}

/* Yêu cầu 4 (tiếp): Áp dụng padding cho ID */
#special-container {
    padding: 15px; /* Padding 15px */
}

/* Lưu ý: Khi có các yêu cầu lặp lại thuộc tính (như padding ở đây), bạn có thể nhóm các selector lại. */
/* Ví dụ gộp padding 15px cho cả hai: */
/*
#special-container, .info-box {
    padding: 15px;
}
*/

Giải thích code CSS:

  • Selector #special-container sử dụng ký tự # đứng trước tên ID để chọn chính xác một phần tử duy nhất có ID đó. Chúng ta đặt background-color cho nó.
  • Selector .highlight sử dụng ký tự . đứng trước tên class để chọn tất cả các phần tử (bất kể loại thẻ nào) có class đó. Điều này cho phép bạn áp dụng cùng một kiểu cho nhiều phần tử khác nhau.
  • Selector .info-box cũng là một class selector, được dùng để chọn <div> có class "info-box".
  • Thuộc tính border được sử dụng để tạo viền, với 3 giá trị: độ dày (2px), kiểu (solid), và màu (blue).
  • Thuộc tính padding: 15px; tạo khoảng cách 15 pixel giữa nội dung của phần tử và viền/biên của nó. Padding giúp nội dung không bị dính sát vào viền.
  • Lưu ý cách chúng ta có thể viết padding: 15px; hai lần cho hai selector khác nhau, hoặc gộp chúng lại bằng dấu phẩy để gọn gàng hơn.

Lưu file styles.css và refresh trang index.html trong trình duyệt để thấy sự thay đổi. Bạn sẽ thấy hai đoạn văn bản có class "highlight" đều chuyển sang màu tím, và các div có id/class tương ứng có nền và viền như đã thiết lập.

Bài tập 3: Làm quen với Box Model (Margin, Padding, Border)

Mục tiêu: Hiểu và áp dụng các thuộc tính margin, padding, và border để kiểm soát kích thước và khoảng cách của các phần tử. Box Model là một khái niệm cực kỳ quan trọng trong CSS!

HTML cần thiết:

Thêm đoạn HTML sau vào phần <body> của file index.html:

<hr>

<h2>Bài tập về Box Model</h2>

<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>

Chúng ta có ba phần tử div đơn giản, mỗi div có class chung là "box" và một class riêng ("one", "two", "three") để dễ dàng chọn và áp dụng kiểu khác nhau.

Yêu cầu CSS:

  1. Tạo kiểu chung cho tất cả các .box:
    • Màu nền: #add8e6 (xanh dương nhạt).
    • Màu chữ: #333 (xám đậm).
    • Padding: 20px (tất cả các cạnh).
    • Border: 1px solid #000 (viền đen nét liền dày 1px).
    • Margin: 10px (tất cả các cạnh).
    • Width: 150px.
  2. Thay đổi border cho .box.two: Border 3px dashed darkred.
  3. Thay đổi margin cho .box.three: Margin trên (top) 30px, margin dưới (bottom) 5px, margin trái phải (left/right) auto (để căn giữa nếu phần tử là block và có width).

Code CSS (Giải pháp):

Thêm đoạn code sau vào file styles.css:

/* Bài tập 3 CSS */

/* Yêu cầu 1: Kiểu chung cho tất cả các box */
.box {
    background-color: #add8e6; /* Nền xanh dương nhạt */
    color: #333; /* Chữ xám đậm */
    padding: 20px; /* Padding 20px cho top, right, bottom, left */
    border: 1px solid #000; /* Viền đen 1px nét liền */
    margin: 10px; /* Margin 10px cho top, right, bottom, left */
    width: 150px; /* Chiều rộng cố định */
    box-sizing: border-box; /* Quan trọng: Đảm bảo padding và border không làm tăng width */
    text-align: center; /* Căn giữa chữ */
    display: block; /* Div mặc định là block, nhưng khai báo lại cho rõ */
}

/* Yêu cầu 2: Thay đổi border cho box thứ hai */
.box.two {
    border: 3px dashed darkred; /* Viền đỏ đậm 3px nét đứt */
}

/* Yêu cầu 3: Thay đổi margin cho box thứ ba */
.box.three {
    margin-top: 30px;    /* Margin trên 30px */
    margin-bottom: 5px;   /* Margin dưới 5px */
    margin-left: auto;    /* Margin trái tự động */
    margin-right: auto;   /* Margin phải tự động => căn giữa */
}

Giải thích code CSS:

  • Selector .box áp dụng kiểu chung cho cả ba div.
  • background-color và color thiết lập màu nền và màu chữ.
  • padding: 20px; tạo không gian bên trong viền, giữa nội dung và viền.
  • border: 1px solid #000; tạo viền xung quanh nội dung và padding.
  • margin: 10px; tạo khoảng trống bên ngoài viền, giữa phần tử này và các phần tử khác.
  • width: 150px; đặt chiều rộng cố định cho nội dung bên trong box.
  • box-sizing: border-box; là một thuộc tính rất quan trọng. Theo mặc định (content-box), width chỉ áp dụng cho nội dung. Padding và border sẽ cộng thêm vào chiều rộng tổng thể của phần tử. Với border-box, width đã bao gồm cả padding và border, giúp việc tính toán kích thước phần tử trở nên dễ dàng hơn rất nhiều.
  • Selector .box.two là một cách kết hợp selector: nó chỉ chọn phần tử nào vừa có class "box" vừa có class "two".
  • Thuộc tính margin có thể được viết tắt (margin: 10px;) hoặc viết chi tiết cho từng cạnh (margin-top, margin-bottom, margin-left, margin-right).
  • Việc đặt margin-left: auto; và margin-right: auto; cho một phần tử block có width cố định là kỹ thuật phổ biến để căn giữa phần tử đó theo chiều ngang trong phần tử chứa nó.

Quan sát kết quả trong trình duyệt. Hãy thử thay đổi các giá trị padding và margin để xem chúng ảnh hưởng đến bố cục như thế nào nhé!

Bài tập 4: Tạo kiểu cho Link và Pseudo-class :hover

Mục tiêu: Thay đổi kiểu hiển thị của các đường link và sử dụng pseudo-class :hover để tạo hiệu ứng khi di chuột qua.

HTML cần thiết:

Thêm đoạn HTML sau vào phần <body> của file index.html:

<hr>

<h2>Bài tập về Link và Hover</h2>

<p>Truy cập trang chủ: <a href="#">Trang Chủ</a></p>
<p>Đi đến phần giới thiệu: <a href="#" class="special-link">Giới Thiệu</a></p>

Chúng ta có hai đường link <a>. Đường link thứ hai có thêm class "special-link".

Yêu cầu CSS:

  1. Loại bỏ gạch chân mặc định cho tất cả các link.
  2. Đặt màu chữ mặc định cho tất cả các link là màu xanh dương (blue).
  3. Khi di chuột qua bất kỳ link nào, màu chữ chuyển thành màu cam (orange) và xuất hiện gạch chân trở lại.
  4. Đối với link có class .special-link, đặt màu nền là vàng nhạt (lightyellow) và thêm padding 5px.
  5. Khi di chuột qua link .special-link, màu nền chuyển thành màu xanh lá cây nhạt (lightgreen).

Code CSS (Giải pháp):

Thêm đoạn code sau vào file styles.css:

/* Bài tập 4 CSS */

/* Yêu cầu 1 & 2: Kiểu mặc định cho tất cả link */
a {
    text-decoration: none; /* Loại bỏ gạch chân */
    color: blue; /* Màu chữ xanh dương */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu mượt mà */
}

/* Yêu cầu 3: Kiểu khi di chuột qua bất kỳ link nào */
a:hover {
    color: orange; /* Màu chữ cam */
    text-decoration: underline; /* Thêm gạch chân */
}

/* Yêu cầu 4: Kiểu riêng cho link có class special-link */
.special-link {
    background-color: lightyellow; /* Màu nền vàng nhạt */
    padding: 5px; /* Padding 5px */
    border: 1px solid #ccc; /* Thêm viền nhẹ */
    display: inline-block; /* Cho phép áp dụng padding/margin như block nhưng vẫn nằm trên dòng */
    border-radius: 3px; /* Bo góc nhẹ */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu nền mượt mà */
}

/* Yêu cầu 5: Kiểu khi di chuột qua special-link */
.special-link:hover {
    background-color: lightgreen; /* Màu nền xanh lá cây nhạt */
    /* Có thể giữ hoặc bỏ các thuộc tính khác, CSS cascade sẽ quyết định */
    /* color: orange; // Màu chữ vẫn theo a:hover vì nó cụ thể hơn */
    /* text-decoration: underline; // Gạch chân vẫn theo a:hover */
}

Giải thích code CSS:

  • Selector a nhắm mục tiêu tất cả các thẻ link. text-decoration: none; loại bỏ gạch chân mặc định. color: blue; đặt màu chữ mặc định. transition được thêm vào để làm cho sự thay đổi màu chữ khi hover trở nên mượt mà hơn thay vì thay đổi đột ngột.
  • Selector a:hover sử dụng pseudo-class :hover để chỉ áp dụng kiểu khi con trỏ chuột di chuyển qua phần tử <a>. Ở đây, chúng ta đổi màu chữ và thêm gạch chân trở lại (text-decoration: underline;).
  • Selector .special-link áp dụng các kiểu riêng cho link có class này. background-color và padding tạo nền và khoảng trống xung quanh chữ. display: inline-block; là cần thiết nếu bạn muốn áp dụng padding (hoặc margin-top/margin-bottom) cho phần tử inline như <a> mà vẫn giữ nó nằm trên cùng một dòng với văn bản khác. border-radius làm tròn các góc. transition được thêm vào cho màu nền.
  • Selector .special-link:hover kết hợp class selector .special-link và pseudo-class :hover để chỉ áp dụng kiểu khi di chuột qua đúng link có class "special-link". Chúng ta đổi màu nền ở đây. Lưu ý rằng các thuộc tính khác như color và text-decoration đã được định nghĩa ở a:hover vẫn có hiệu lực ở đây do tính kế thừa và độ ưu tiên (specificity) của CSS (trong trường hợp này, a:hover và .special-link:hover có độ ưu tiên tương đương, nhưng a:hover có thể được viết sau nên nó thắng nếu không có quy tắc cụ thể hơn). Tuy nhiên, việc cả hai selector a:hover và .special-link:hover cùng xuất hiện và áp dụng kiểu hover là phổ biến.

Lưu file styles.css và kiểm tra trên trình duyệt. Di chuột qua từng link để xem hiệu ứng thay đổi màu sắc và gạch chân nhé.

Comments

There are no comments at the moment.