Trong quá trình xây dựng một trang web, việc định dạng nội dung đóng vai trò quan trọng để tạo ra giao diện đẹp mắt, dễ đọc và thân thiện với người dùng. HTML Styles cho phép bạn thay đổi cách hiển thị nội dung của các phần tử trên trang, từ màu sắc, kích thước chữ cho đến bố cục và khoảng cách.

Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng CSS (Cascading Style Sheets) để áp dụng các style trong HTML và các phương pháp khác nhau để định dạng nội dung.

1. HTML Styles là gì?

HTML Styles là các thuộc tính cho phép bạn định dạng và thay đổi cách các phần tử HTML hiển thị trên trang web. Để áp dụng các style này, bạn có thể sử dụng CSS. CSS giúp bạn thay đổi màu sắc, kích thước chữ, khoảng cách giữa các phần tử và nhiều yếu tố khác để làm cho trang web của bạn trực quan hơn.

Ví dụ về style trong HTML:

html
Thử online
<p style="color: blue;">Đoạn văn này có chữ màu xanh.</p>

Trong ví dụ này, đoạn văn sẽ hiển thị với màu chữ là màu xanh.

2. Các cách áp dụng Style trong HTML

Có ba cách chính để áp dụng CSS vào HTML: inline, internal, và external. Mỗi phương pháp có những ưu và nhược điểm riêng, và tùy thuộc vào tình huống mà bạn lựa chọn cách thích hợp.

a. Inline CSS (CSS nội tuyến)

Với inline CSS, bạn có thể áp dụng style trực tiếp vào phần tử HTML bằng cách sử dụng thuộc tính style.

Ví dụ:

html
Thử online
<p style="color: red; font-size: 20px;">Đoạn văn có màu đỏ và kích thước 20px.</p>

Ưu điểm:

  • Dễ dàng áp dụng cho từng phần tử cụ thể.

Nhược điểm:

  • Khó quản lý và duy trì khi áp dụng nhiều style cho nhiều phần tử.
  • Không tối ưu cho các trang web lớn.

b. Internal CSS (CSS nội bộ)

Internal CSS được sử dụng khi bạn muốn áp dụng style cho toàn bộ trang web, nhưng không cần phải sử dụng tệp CSS riêng. Bạn có thể thêm style vào phần <head> của tài liệu HTML bằng cách sử dụng thẻ <style>.

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về CSS nội bộ - codetuthub.com</title>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>Đoạn văn này có màu xanh lá và kích thước 18px.</p>
</body>
</html>

Ưu điểm:

  • Dễ dàng quản lý khi chỉ cần định dạng một trang cụ thể.
  • Không cần thêm tệp CSS bên ngoài.

Nhược điểm:

  • Không thể tái sử dụng cho nhiều trang web khác nhau.
  • Code CSS và HTML bị trộn lẫn, khó bảo trì khi dự án lớn.

c. External CSS (CSS ngoài)

Với external CSS, các quy tắc định dạng được lưu trữ trong một tệp riêng biệt với phần mở rộng .css. Tệp này sau đó được liên kết với tài liệu HTML thông qua thẻ <link> trong phần <head>.

Ví dụ:

html
Thử online
<!-- Tài liệu HTML -->
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về CSS ngoài - codetuthub.com</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Đoạn văn này sẽ được định dạng từ tệp CSS ngoài.</p>
</body>
</html>

Tệp styles.css:

css
styles.css
p {
    color: purple;
    font-size: 16px;
}

Ưu điểm:

  • Dễ dàng tái sử dụng cho nhiều trang khác nhau.
  • Tách biệt giữa mã HTML và CSS, dễ bảo trì.

Nhược điểm:

  • Phải tải thêm tệp CSS khi tải trang, có thể làm chậm tốc độ tải trang một chút.

3. Các thuộc tính CSS phổ biến

Dưới đây là một số thuộc tính CSS phổ biến để định dạng các phần tử HTML.

a. Màu sắc (Color)

Thuộc tính color xác định màu sắc của văn bản. Bạn có thể sử dụng tên màu, mã màu HEX, RGB, hoặc HSL.

Ví dụ:

css
p {
    color: red; /* Sử dụng tên màu */
    color: #ff0000; /* Sử dụng mã màu HEX */
    color: rgb(255, 0, 0); /* Sử dụng mã màu RGB */
}

b. Kích thước chữ (Font-size)

Thuộc tính font-size xác định kích thước của văn bản. Bạn có thể sử dụng đơn vị px, em, rem, hoặc %.

Ví dụ:

css
p {
    font-size: 20px; /* Kích thước tính bằng pixel */
    font-size: 1.5em; /* Tính theo đơn vị em (tương đối so với kích thước chữ gốc) */
}

c. Font chữ (Font-family)

Thuộc tính font-family xác định kiểu chữ (font) của văn bản. Bạn có thể chỉ định một font cụ thể hoặc một danh sách các font dự phòng.

Ví dụ:

css
p {
    font-family: "Arial", sans-serif;
}

d. Căn chỉnh văn bản (Text-align)

Thuộc tính text-align dùng để căn chỉnh văn bản. Các giá trị phổ biến bao gồm left (trái), right (phải), center (giữa), và justify (căn đều hai bên).

Ví dụ:

css
p {
    text-align: center; /* Căn giữa văn bản */
}

e. Độ dài và chiều rộng (Width và Height)

Thuộc tính width và height xác định độ dài và chiều rộng của các phần tử.

Ví dụ:

css
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

f. Viền (Border)

Thuộc tính border dùng để tạo viền cho phần tử. Bạn có thể định dạng độ dày, kiểu viền, và màu sắc của viền.

Ví dụ:

css
div {
    border: 2px solid black; /* Viền đen dày 2px */
}

g. Khoảng cách bên trong và bên ngoài (Padding và Margin)

  • padding: Xác định khoảng cách giữa nội dung và viền của phần tử.
  • margin: Xác định khoảng cách giữa phần tử này với phần tử khác.

Ví dụ:

css
div {
    padding: 10px; /* Khoảng cách bên trong phần tử */
    margin: 20px; /* Khoảng cách bên ngoài phần tử */
}

4. Định dạng nâng cao với CSS

Ngoài các thuộc tính cơ bản, CSS còn cung cấp nhiều tính năng nâng cao để làm cho trang web trở nên sinh động và hiện đại hơn.

a. Hiệu ứng hover

CSS cho phép bạn thay đổi style của một phần tử khi người dùng di chuột vào nó bằng thuộc tính :hover.

Ví dụ:

css
a:hover {
    color: green;
    text-decoration: underline;
}

b. Đổ bóng (box-shadow và text-shadow)

Bạn có thể thêm hiệu ứng đổ bóng cho văn bản hoặc khối phần tử với box-shadow và text-shadow.

Ví dụ:

css
p {
    text-shadow: 2px 2px 5px gray; /* Đổ bóng cho văn bản */
}

div {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Đổ bóng cho khối */
}

c. Định dạng Flexbox và Grid

Flexbox và Grid là các phương pháp bố cục CSS hiện đại, giúp bạn sắp xếp và căn chỉnh các phần tử trên trang một cách linh hoạt và dễ dàng hơn.

Ví dụ sử dụng Flexbox:

css
.container {
    display: flex;
    justify-content: space-between;
}

Ví dụ sử dụng Grid:

css
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

5. Thực hành: áp dụng Style cho trang web

Dưới đây là ví dụ về cách áp dụng CSS để tạo một trang web có bố cục và định dạng cơ bản:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Học HTML Styles - codetuthub.com</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1>Chào Mừng Đến Với CodeTutHub</h1>
        <p>Nơi cung cấp kiến thức lập trình web từ cơ bản đến nâng cao.</p>
    </header>

    <section>
        <h2>Khám Phá Các Chủ Đề</h2>
        <p>Chúng tôi cung cấp các bài viết về HTML, CSS, và JavaScript.</p>
    </section>

</body>
</html>

Tệp CSS styles.css:

css
styles.css
body {
    font-family: "Arial", sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: 36px;
}

p {
    font-size: 18px;
}

section {
    padding: 20px;
}

h2 {
    color: #4CAF50;
    font-size: 28px;
}

6. Kết luận

HTML Styles là một phần quan trọng trong việc thiết kế và phát triển giao diện web. Bằng cách kết hợp CSS và HTML, bạn có thể tạo ra các trang web không chỉ hoạt động hiệu quả mà còn có giao diện đẹp mắt, dễ sử dụng. Với kiến thức về các cách áp dụng style và các thuộc tính CSS phổ biến, bạn đã có thể bắt đầu xây dựng các trang web với giao diện phong phú và linh hoạt hơn.

Nếu bạn muốn tìm hiểu thêm về CSS và cách áp dụng nó vào dự án thực tế, hãy tiếp tục theo dõi series học CSS trên CodeTutHub nhé!