Giới Thiệu về CSS
1. CSS là gì?
CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để mô tả cách hiển thị và bố trí của các phần tử HTML trên trang web.
Nó giúp làm cho trang web trở nên hấp dẫn, dễ sử dụng hơn và cung cấp khả năng kiểm soát chi tiết giao diện người dùng.
2. Định nghĩa và vai trò của CSS trong phát triển web
- Định nghĩa: CSS là ngôn ngữ mô tả cách thức hiển thị các thành phần HTML, như màu sắc, kích thước, bố cục, phông chữ, và nhiều yếu tố giao diện khác.
-
Vai trò:
- Tách biệt nội dung và thiết kế: CSS cho phép quản lý giao diện riêng biệt với nội dung, giúp mã nguồn dễ quản lý và tái sử dụng.
- Cải thiện trải nghiệm người dùng: Giao diện đẹp và dễ dùng giúp người dùng tiếp cận thông tin dễ dàng hơn.
- Hỗ trợ responsive design: CSS cho phép trang web hiển thị tốt trên nhiều thiết bị (máy tính, điện thoại, máy tính bảng).
3. Sự khác biệt giữa HTML và CSS
| HTML | CSS |
|---|---|
| Được sử dụng để tạo cấu trúc và nội dung của trang web. | Được sử dụng để tạo phong cách và giao diện cho trang web. |
| Là ngôn ngữ đánh dấu. | Là ngôn ngữ kiểu dáng (styling). |
| Không hỗ trợ định dạng chi tiết giao diện. | Tập trung vào định dạng như màu sắc, kích thước, bố cục. |
4. Các cách sử dụng CSS
-
Inline CSS
CSS được thêm trực tiếp vào thẻ HTML thông qua thuộc tínhstyle.
Ví dụ:<h1 style="color: blue; font-size: 24px;">Tiêu đề</h1> -
Internal CSS
CSS được viết trong thẻ<style>đặt trong phần<head>của tài liệu HTML.
Ví dụ:<style> h1 { color: green; font-size: 24px; } </style> -
External CSS
CSS được lưu trong một file riêng có đuôi.css, sau đó liên kết với file HTML qua thẻ<link>.
Ví dụ:- Nội dung file
styles.css:h1 { color: red; font-size: 24px; } - Cách liên kết trong file HTML:
<link rel="stylesheet" href="styles.css">
- Nội dung file
5. Cách liên kết file CSS với HTML
Sử dụng thẻ <link> trong phần <head> của file HTML.
Cú pháp:
<link rel="stylesheet" href="tên-file.css">
Ví dụ đầy đủ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Demo CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Đây là tiêu đề</h1>
</body>
</html>
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com