Tiếng Việt

Hướng dẫn CSS

Hướng dẫn CSS3

CSS Nâng cao

Tham chiếu CSS

CSS T响应

Hướng dẫn CSS3: Cẩm nang cho người mới bắt đầu trong việc thiết kế web

CSS là gì?

CSS, viết tắt của Cascading Style Sheets, là một ngôn ngữ định dạng mạnh mẽ được sử dụng để mô tả cách trình bày tài liệu được viết bằng HTML hoặc XML. Nó giống như nhà thiết kế thời trang của thế giới web, quyết định cách các phần tử nên được hiển thị trên màn hình, trên giấy hoặc trong các phương tiện khác.

CSS3 - Tutorial

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. HTML sẽ là cấu trúc - các bức tường, mái nhà và nền móng. CSS, sau đó, là tất cả những gì làm cho ngôi nhà trông đẹp hơn - sơn, giấy dán tường, rèm cửa và nội thất. Đó là điều làm cho một trang web thô sơ trở thành một kiệt tác về thị giác!

Ai nên học CSS?

Bất kỳ ai muốn tạo ra các trang web đẹp mắt, linh hoạt đều nên học CSS. Điều này bao gồm:

  1. Nhà phát triển web
  2. Nhà thiết kế web
  3. Nhà thiết kế UI/UX
  4. Nhà tiếp thị số
  5. Blogger
  6. Bất kỳ ai quan tâm đến công nghệ web

Ngay cả khi bạn là người mới bắt đầu hoàn toàn không có kinh nghiệm lập trình trước đây, đừng lo lắng! CSS được thiết kế để dễ hiểu và dễ học. Với một chút thực hành, bạn sẽ thiết kế web như một chuyên gia trong thời gian ngắn.

Các loại CSS

Có ba loại CSS chính:

  1. CSS inline
  2. CSS nội bộ
  3. CSS ngoại bộ

Hãy phân tích chúng với một số ví dụ:

1. CSS inline

CSS inline được áp dụng trực tiếp vào các phần tử HTML bằng cách sử dụng thuộc tính style.

<p style="color: blue; font-size: 16px;">Đây là đoạn văn bản màu xanh với kích thước chữ 16px.</p>

Phương pháp này nhanh nhưng không được khuyến khích cho các dự án lớn hơn vì nó trộn lẫn nội dung với trình bày.

2. CSS nội bộ

CSS nội bộ được đặt trong thẻ <style> trong phần <head> của HTML.

<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Đoạn văn bản này sẽ có màu xanh với kích thước chữ 18px.</p>
</body>

Phương pháp này hữu ích cho việc thiết kế các trang đơn nhưng trở nên không hiệu quả cho các trang web nhiều trang.

3. CSS ngoại bộ

CSS ngoại bộ được lưu trữ trong một tệp .css riêng biệt và liên kết với tài liệu HTML.

<!-- Trong tệp HTML của bạn -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* Trong tệp styles.css của bạn */
p {
color: red;
font-size: 20px;
}

Đây là phương pháp hiệu quả nhất cho các dự án lớn vì nó tách nội dung khỏi trình bày và cho phép dễ bảo trì.

Ví dụ mã CSS

Hãy cùng xem một ví dụ toàn diện hơn để thấy CSS trong hành động:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trang web tuyệt vời của tôi</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Chào mừng đến với Trang web tuyệt vời của tôi</h1>
<p>Đây là đoạn văn bản có một phần <span class="highlight">nổi bật</span>.</p>
</div>
</body>
</html>

Trong ví dụ này, chúng ta đang sử dụng CSS nội bộ để thiết kế trang web. Hãy phân tích từng phần của nó:

  • Chúng ta đặt phông chữ body là Arial và nền màu xám nhạt.
  • Lớp .container tạo ra một hộp trắng được căn giữa với một chút padding và bóng mờ.
  • Thẻ h1 được căn giữa và có màu đen.
  • Lớp .highlight tạo ra văn bản nổi bật màu vàng.

Lý do sử dụng CSS

  1. Tách nội dung và trình bày
  2. Đồng nhất trên nhiều trang
  3. Tải trang nhanh hơn
  4. Dễ bảo trì và cập nhật
  5. Khả năng thiết kế linh hoạt
  6. Cải thiện trải nghiệm người dùng

Yêu cầu tiên quyết để học CSS

Để bắt đầu với CSS, bạn sẽ cần:

  1. Hiểu biết cơ bản về HTML
  2. Một trình soạn thảo văn bản (như Visual Studio Code, Sublime Text, hoặc thậm chí là Notepad)
  3. Một trình duyệt web (Chrome, Firefox, hoặc Safari)
  4. Sự nhiệt huyết và sự sẵn lòng thử nghiệm!

Hướng dẫn bắt đầu với CSS Tutorial

Bây giờ chúng ta đã bao gồm các alap, hãy bắt đầu thiết kế! Chúng ta sẽ tạo một trang web đơn giản và thiết kế nó từng bước.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trang đầu tiên được thiết kế của tôi</title>
<style>
/* Chúng ta sẽ thêm CSS ở đây */
</style>
</head>
<body>
<header>
<h1>Chào mừng đến với Trang web của tôi</h1>
</header>
<nav>
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Về tôi</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
<main>
<h2)Về tôi</h2>
<p>Xin chào! Tôi đang học CSS và nó rất tuyệt vời!</p>
</main>
<footer>
<p>&copy; 2023 Trang web của tôi</p>
</footer>
</body>
</html>

Bây giờ, hãy thêm một chút CSS để làm cho nó trông tuyệt vời!

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

CSS này thực hiện các thao tác sau:

  • Đặt phông chữ và khoảng cách dòng cho toàn bộ trang.
  • Tạo một tiêu đề tối với văn bản trắng và căn giữa.
  • Thiết kế menu điều hướng với nền tối và các phần tử danh sách hàng ngang.
  • Thêm hiệu ứng nổi bật cho các liên kết điều hướng.
  • Thêm padding cho phần nội dung chính.
  • Tạo một footer cố định ở dưới cùng của trang.

Các thuộc tính CSS

CSS sử dụng một loạt các thuộc tính để thiết kế các phần tử. Dưới đây là bảng một số thuộc tính phổ biến:

Thuộc tính Mô tả Ví dụ
color Đặt màu văn bản color: blue;
background-color Đặt màu nền background-color: #f0f0f0;
font-size Đặt kích thước phông chữ font-size: 16px;
font-family Đặt loại phông chữ font-family: Arial, sans-serif;
margin Đặt khoảng cách ngoài margin: 10px;
padding Đặt khoảng cách trong padding: 5px;
border Đặt kiểu viền border: 1px solid black;
text-align Đặt căn chỉnh văn bản text-align: center;
display Đặt loại hiển thị display: flex;

CSS nâng cao

Khi bạn cảm thấy thoải mái hơn với CSS, bạn có thể khám phá các khái niệm nâng cao như:

  1. Bố cục Flexbox và Grid
  2. Thiết kế linh hoạt với media queries
  3. Hiệu ứng动画 và chuyển đổi
  4. Preprocessors CSS như Sass hoặc Less
  5. Các khung công tác CSS như Bootstrap hoặc Tailwind

Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Đừng ngại thử nghiệm và mắc lỗi - đó là cách chúng ta học! Chúc bạn may mắn trong việc thiết kế!

Credits: Image by storyset

Hướng Dẫn Trước:
CSS - Loại dữ liệu
Hướng Dẫn Tiếp Theo:
CSS - Góc tròn