CSS - Giới thiệu

Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ bước vào thế giới đầy màu sắc của CSS. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất háo hức dẫn dắt các bạn trong hành trình này. Vậy, hãy cầm lấy cọ vẽ ảo của mình, và cùng nhau làm cho web trở nên đẹp đẽ hơn!

CSS - Introduction

CSS là gì?

CSS, hay Tập tin Style Tương tự, giống như nhà thiết kế thời trang của thế giới web. Còn HTML cung cấp cấu trúc của một trang web (hãy tưởng tượng nó như xương sống), CSS lại chịu trách nhiệm về cách nó trông và cảm nhận. Đó là thành phần kỳ diệu giúp biến một trang web đơn giản, nhàm chán thành một kiệt tác thị giác ấn tượng.

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. HTML sẽ là gạch và vữa, trong khi CSS sẽ là sơn, giấy dán tường và thiết kế nội thất. Đó là điều làm cho trang web của bạn nổi bật và trông tuyệt vời!

Dưới đây là một ví dụ đơn giản để minh họa cách CSS hoạt động:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #0066cc;
text-align: center;
}
</style>
</head>
<body>
<h1>Chào mừng đến với Website Tuyệt vời của tôi!</h1>
</body>
</html>

Trong ví dụ này, chúng ta đã sử dụng CSS trong thẻ <style> để:

Đặt màu nền của toàn bộ trang thành màu xám nhạt (#f0f0f0)
Thay đổi phông chữ của toàn bộ văn bản thành Arial (hoặc bất kỳ phông chữ sans-serif nào nếu Arial không có sẵn)
Làm cho tiêu đề h1 có màu xanh (#0066cc) và căn giữa trên trang

Lợi ích của CSS

Hiện tại, bạn có thể đang tự hỏi, "Tại sao phải phiền phức với CSS? Không thể chỉ cần thiết kế mọi thứ trong HTML được sao?" Well, các bạn tò mò, hãy để tôi chia sẻ với các bạn những siêu năng lực mà CSS mang lại:

Phân cách quan tâm: CSS cho phép chúng ta tách biệt việc trình bày (cách mọi thứ trông như thế nào) khỏi cấu trúc (nội dung và tổ chức của nó). Điều này làm cho mã của chúng ta sạch sẽ và dễ bảo trì hơn.
Consistency: Với CSS, bạn có thể xác định các样式 một lần và áp dụng chúng trên nhiều trang. Cần thay đổi màu sắc của tất cả các tiêu đề? Chỉ cần một thay đổi trong tệp CSS của bạn, và voilà!
Độ linh hoạt: CSS cho bạn quyền kiểm soát chi tiết về bố cục và的外观 của các trang web. Từ việc thay đổi màu sắc đơn giản đến các hiệu ứng动画 phức tạp, CSS đều có thể thực hiện được.
Tính linh hoạt: CSS cho phép bạn tạo ra các thiết kế phù hợp với các kích thước màn hình khác nhau, đảm bảo trang web của bạn trông tuyệt vời trên mọi thứ từ điện thoại di động đến màn hình máy tính để bàn lớn.
Hiệu quả băng thông: Bằng cách di chuyển thông tin样式 vào một tệp CSS riêng biệt, bạn có thể giảm thiểu冗余 trong HTML, dẫn đến kích thước tệp nhỏ hơn và thời gian tải nhanh hơn.

Hãy xem một ví dụ minh họa một số lợi ích này:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Chào mừng đến với Website Tuyệt vời của tôi!</h1>
<p>Đây là một đoạn văn bản.</p>
<ul>
<li>Mục danh sách 1</li>
<li>Mục danh sách 2</li>
<li>Mục danh sách 3</li>
</ul>
</body>
</html>

Và trong tệp styles.css riêng biệt của chúng ta:

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

h1 {
color: #0066cc;
text-align: center;
}

p {
color: #333;
}

ul {
background-color: #f4f4f4;
padding: 20px;
}

li {
margin-bottom: 10px;
}

@media (max-width: 600px) {
body {
padding: 10px;
}
h1 {
font-size: 24px;
}
}

Trong ví dụ này, chúng ta đã tách样式 ra thành một tệp khác, làm cho HTML của chúng ta sạch sẽ hơn. Chúng ta cũng đã thêm một chút thiết kế linh hoạt với quy tắc @media, điều chỉnh样式 cho màn hình nhỏ hơn.

Ai tạo ra và duy trì CSS?

CSS không phải là sản phẩm của một nhà phát triển duy nhất làm việc trong một căn phòng tối (mặc dù nhiều người trong chúng ta viết CSS như vậy!). Nó thực sự được duy trì bởi một nhóm gọi là Tổ chức Tiêu chuẩn Trên toàn thế giới (W3C).

W3C giống như Liên hợp quốc của các tiêu chuẩn web. Nó bao gồm các tổ chức thành viên, nhân viên toàn thời gian và công chúng, tất cả cùng nhau phát triển các tiêu chuẩn web. Họ là những người quyết định những tính năng mới nào nên được thêm vào CSS và chúng hoạt động như thế nào.

Nhưng đây là phần thú vị: bạn, đúng vậy, bạn có thể có tiếng nói trong việc CSS phát triển như thế nào! W3C chào đón ý kiến từ các nhà phát triển web và nhà thiết kế. Vậy ai biết được? Có lẽ một ngày nào đó, bạn sẽ đề xuất tính năng CSS lớn tiếp theo!

Các phiên bản của CSS

Như bất kỳ phần mềm tốt nào, CSS đã trải qua nhiều phiên bản trong những năm qua, mỗi phiên bản thêm vào các tính năng và khả năng mới. Dưới đây là một cái nhìn nhanh:

Phiên bản	Năm	Tính năng chính
CSS1	1996	Định dạng cơ bản (phông chữ, màu sắc, khoảng cách)
CSS2	1998	Định vị, z-index, các loại media
CSS2.1	2011	Sửa lỗi và thay đổi nhỏ
CSS3	2011-nay	Tiêu chuẩn modul, animation, flexbox, grid

CSS3 có chút khác biệt so với các tiền nhiệm của nó. Thay vì là một tiêu chuẩn duy nhất lớn, nó được chia thành các module. Điều này cho phép các phần khác nhau của tiêu chuẩn tiến hóa với tốc độ khác nhau.

Dưới đây là một chút trải nghiệm với CSS3:

.fancy-box {
background: linear-gradient(to right, #ff8a00, #da1b60);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.fancy-box:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

CSS này tạo ra một hộp với nền渐变, góc tròn và bóng. Khi bạn di chuột vào nó, nó sẽ mượt mà lớn hơn và bóng sẽ trở nên rõ ràng hơn. Rất tuyệt vời phải không?

Và thế là bạn đã bước những bước đầu tiên vào thế giới kỳ diệu của CSS. Nhớ rằng, như bất kỳ hình thức nghệ thuật nào, việc thành thạo CSS đòi hỏi sự luyện tập. Vậy đừng nản lòng nếu những nỗ lực đầu tiên của bạn không trông như những gì bạn thấy trong một tạp chí thiết kế. Hãy tiếp tục thử nghiệm, học hỏi, và trước khi bạn biết, bạn sẽ thiết kế web như một chuyên gia!

Bây giờ, hãy tiến lên và làm cho web trở nên đẹp hơn, một stylesheet tại một thời điểm!

Credits: Image by storyset