HTML - BảngStyleSheet: Hướng dẫn cho người mới bắt đầu

Chào mừng các bạn future web developers! Hôm nay, chúng ta sẽ khám phá thế giới đầy màu sắc của HTML Style Sheets, còn được gọi là CSS (Cascading Style Sheets). Hãy tưởng tượng HTML là xương sống của trang web của bạn, và CSS là những bộ quần áo thời trang làm cho nó trở nên lung linh. Hãy cùng bắt đầu hành trình thú vị này nhé!

HTML - Style Sheet

什么是样式表？

Trước khi chúng ta nhảy vào phần sâu, hãy hiểu什么是样式表 là gì. Một bảng样式 là một bộ các quy tắc định dạng告诉网页浏览器如何展示一个 tài liệu được viết bằng HTML. Nó giống như cuốn cẩm nang của nhà thiết kế thời trang cho trang web của bạn!

Ví dụ về CSS trong tài liệu HTML

Hãy bắt đầu với một ví dụ đơn giản để xem CSS trong hành động:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>Chào mừng đến với trang web thời trang của tôi!</h1>
<p>Đây là một đoạn văn với định dạng mặc định.</p>
</body>
</html>

Trong ví dụ này, chúng ta đã thêm thẻ <style> vào phần <head> của tài liệu HTML. Trong thẻ này, chúng ta đã định nghĩa một số quy tắc CSS:

Chúng ta đặt màu nền của body thành xám nhạt (#f0f0f0) và thay đổi phông chữ thành Arial.
Chúng ta định dạng thẻ h1 để có màu xanh dương và đặt nó ở giữa trang.

Các loại CSS

Bây giờ chúng ta đã thấy CSS trong hành động, hãy khám phá ba loại CSS. Hãy tưởng tượng chúng như những cách khác nhau để thêm phong cách vào trang phục HTML của bạn:

1. Inline CSS

Inline CSS giống như thêm một chiếc mũ thời trang trực tiếp vào trang phục của bạn. Nó được áp dụng trực tiếp vào các phần tử HTML sử dụng thuộc tính style.

<h1 style="color: red; font-size: 24px;">This is a red heading</h1>

Trong ví dụ này, chúng ta đã làm cho tiêu đề có màu đỏ và tăng kích thước của nó lên 24 pixel.

2. Internal CSS

Internal CSS giống như có một nhà tạo mẫu cá nhân cho một trang web duy nhất. Nó được định nghĩa trong thẻ <style> trong phần <head> của tệp HTML, như chúng ta đã thấy trong ví dụ đầu tiên.

3. External CSS

External CSS giống như có một cẩm nang thời trang UNIVERSAL cho tất cả các trang web của bạn. Nó được lưu trữ trong một tệp .css riêng biệt và liên kết đến tài liệu HTML.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Chào mừng đến với trang web thời trang của tôi!</h1>
<p>Trang này được định dạng bằng một tệp CSS bên ngoài.</p>
</body>
</html>

Trong ví dụ này, chúng ta đã liên kết một tệp CSS bên ngoài có tên styles.css vào tài liệu HTML của chúng ta.

Ví dụ về việc sử dụng Bảng样式

Hãy khám phá một số ví dụ khác để thấy sức mạnh của CSS:

Định dạng Văn bản

p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

Quy tắc CSS này định dạng tất cả các đoạn văn với phông chữ Georgia, kích thước 16px,(height 1.6 và màu xám đậm.

Tạo Nút

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

CSS này tạo ra một nút xanh lá cây thời trang. Bạn có thể áp dụng này vào bất kỳ phần tử nào bằng cách cho nó lớp "button".

Thiết kếResponsive

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}

CSS này sử dụng một media query để điều chỉnh kích thước phông chữ khi chiều rộng màn hình là 600px hoặc nhỏ hơn, làm cho trang web của bạn responsive.

Bảng tóm tắt các phương pháp CSS

Dưới đây là bảng tóm tắt các phương pháp CSS mà chúng ta đã thảo luận:

Phương pháp	Mô tả	Ưu điểm	Nhược điểm
Inline CSS	Áp dụng trực tiếp vào các phần tử HTML	Nhanh cho các thay đổi nhỏ	Không thể tái sử dụng, làm rối loạn HTML
Internal CSS	Định nghĩa trong thẻ `<style>` trong tệp HTML	Áp dụng cho một trang duy nhất	Không thể tái sử dụng giữa các trang
External CSS	Lưu trữ trong tệp .css riêng biệt	Tái sử dụng, giữ cho HTML sạch sẽ	Yêu cầu yêu cầu HTTP bổ sung

Nhớ nhé, các bạn trẻ, việc thành thạo CSS giống như học vẽ - nó đòi hỏi sự thực hành, kiên nhẫn và một chút óc sáng tạo. Đừng害怕 thử nghiệm với các phong cách khác nhau và xem điều gì phù hợp nhất cho trang web của bạn.

Khi chúng ta kết thúc bài học này, tôi nhớ lại một học sinh曾经说过, "CSS đã biến trang web nhàm chán của tôi thành một kiệt tác số!" Và đó là vẻ đẹp của CSS - nó cho bạn quyền lực để biến đổi web thành canvas của bạn.

Vậy hãy tiến lên, style dũng cảm, và mong rằng trang web của bạn luôn luôn tuyệt vời!

Credits: Image by storyset