CSS là một phần không thể thiếu trong việc thiết kế trang web hiện nay, nó giúp nhà phát triển web tạo ra các trang web đẹp mắt, dễ đọc và dễ sử dụng. Nếu bạn mới bắt đầu học lập trình web thì việc học CSS là cần thiết để bạn có thể tạo ra các trang web chuyên nghiệp.
Vậy CSS là gì mà lại cần thiết đến thế, chúng ta cùng tìm hiểu qua bài viết bên dưới nhé!
CSS là gì?
CSS viết tắt Cascading Style Sheets là ngôn ngữ định dạng được sử dụng để điều khiển và định dạng kiểu cho các ngôn ngữ đánh dấu siêu văn bản (HTML, XML, SVG,...)
CSS cho phép bạn áp dụng các kiểu định dạng cho các phần tử trong HTML, bao gồm các phần tử văn bản, hình ảnh, bảng, đường viền, định vị, màu sắc và hiệu ứng. Nó cũng cho phép bạn tạo các kiểu tùy chỉnh, tạo hiệu ứng chuyển động, thay đổi kích thước, ẩn hiện các phần tử.
Với CSS, bạn có thể tạo ra các trang web độc đáo, hấp dẫn, dễ đọc và dễ sử dụng. Nó cũng cho phép bạn tạo ra các trang web đáp ứng, tức là trang web có thể thích ứng với các thiết bị khác nhau chẳng hạn như máy tính, điện thoại và máy tính bảng.
Tại sao cần biết CSS?
Kiểu dáng là một trong những thuộc tính quan trọng cần thiết đối với bất kỳ trang web nào, nó làm tăng giao diện tổng thể, giúp người dùng tương tác một cách dễ dàng. Người dùng chắc chắn sẽ không muốn tương tác với một trang web không được định dạng, không chia cột, không màu sắc,... một cách tẻ nhạt và không có thẩm mĩ. Vì vậy, khi bạn bắt đầu tìm hiểu về lập trình web thì việc biết CSS là bắt buộc.
Vai trò của CSS
Sau khi đã viết một tài liệu web bằng HTML thì nó chỉ là một văn bản HTML bình thường chưa có màu sắc, hiệu ứng bắt mắt và để làm đẹp website lúc này bạn cần CSS.
Bạn hãy liên tưởng, HTML như là khuôn mặt của một cô gái và CSS là lớp makeup của cô gái đó. Cô gái sẽ có nhiều style trang điểm như kiểu ngọt ngào, mắt mèo, tươi tắn,... tương tự vậy CSS cũng có thể tạo ra nhiều style khác nhau.
Cấu trúc của CSS
Cấu trúc của CSS bao gồm:
- Selector: Định danh đối tượng HTML mà CSS sẽ áp dụng style.
- Property: Chỉ định các thuộc tính của đối tượng HTML mà CSS sẽ thiết lập.
- Value: Xác định giá trị cho thuộc tính được chỉ định.
Các Selector, Property và Value được viết trong cặp dấu ngoặc nhọn {} và phân tách bởi dấu chấm phẩy ;.
Ví dụ:
selector {
property: value;
}
Trong selector, bạn viết bao nhiêu property cũng được không giới hạn.
Các loại CSS phổ biến
CSS có 3 loại phổ biến dưới đây:
- Inline CSS: được sử dụng để áp dụng kiểu trực tiếp vào một phần tử HTML bằng cách sử dụng thuộc tính "style".
Ví dụ:
<h1 style="color: red;">This is a heading</h1>
- Internal or Embedded: được định nghĩa bên trong phần khai báo của HTML sheets bằng cách sử dụng thẻ <style>. Nó cho phép bạn áp dụng kiểu cho toàn bộ trang web hoặc cho một HTML sheets cụ thể.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is some sample text.</p>
<p>This is another paragraph.</p>
</body>
</html>
- External: được định nghĩa trong một tệp CSS riêng biệt và được liên kết với HTML sheets bằng cách sử dụng thẻ <link>. Nó cho phép bạn tái sử dụng kiểu cho nhiều trang web và giúp tách rời phần kiểu ra khỏi phần nội dung của trang web.
Ví dụ (style.css):
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
Ví dụ (index.html):
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is some sample text.</p>
<p>This is another paragraph.</p>
</body>
</html>
Ví dụ: trang web HTML với các kiểu CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Simple webpage
</title>
<!-- Stylesheet of web page -->
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Welcome to 200Lab</h1>
<p>Learn Deep, Go Different</p>
</body>
</html>Output:
Ví dụ: áp dụng kiểu sử dụng class và id.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<!-- Stylesheet of web page -->
<style>
/* To color the background */
body {
background-color: rgb(221, 177, 136);
}
/* Text alignment Center */
.main {
text-align: center;
}
/* Text color, font size & font weight */
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
/* Font Size and style */
#geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">200Lab</div>
<div id="geeks">
Learn Deep, Go Different
</div>
</div>
</body>
</html>Output
CSS khác so với HTML như thế nào?
- HTML được sử dụng để xác định cấu trúc trang web trong khi CSS được sử dụng để tạo kiểu dáng cho trang web bằng cách sử dụng các tính năng tạo dáng khác nhau.
- HTML bao gồm các tags bên trong chứa văn bản và CSS bao gồm các bộ chọn (selector) và khối khai báo (declaration).
- CSS có thể là internal hoặc external tùy thuộc vào yêu cầu.
- Chúng ta không thể sử dụng HTML bên trong CSS sheets nhưng chúng ta có thể sử dụng CSS bên trong HTML sheets.
- CSS có khả năng sao lưu và hỗ trợ cao hơn HTML.
Bạn có thể xem thêm bài viết này để hiểu rõ hơn về HTML nhé!
Pum
Tại sao CSS được sử dụng trong HTML?
- Giải quyết một vấn đề lớn: Ngày trước khi chưa có CSS, chúng ta phải sao chép phông chữ, màu sắc, background style, căn chỉnh, đường viền và size tags trên mỗi trang web. Đó là một quá trình rườm rà và đòi hỏi nhiều công sức, CSS đã xuất hiện và giải quyết một vấn đề lớn.
- Tiết kiệm rất nhiều thời gian: Vì các định nghĩa CSS style được lưu trữ trong external CSS files, chỉ cần cập nhật một tệp là có thể sửa đổi toàn bộ trang web.
- Cung cấp nhiều thuộc tính: CSS cung cấp nhiều tính năng cụ thể hơn để xác định giao diện của trang web so với HTML đơn giản.
- Trang tải nhanh hơn: CSS không yêu cầu phải viết các thuộc tính HTML tag mọi lúc. Quy tắc của tags có thể được viết một lần và áp dụng cho tất cả các phiên bản của tag. Do đó, CSS sử dụng ít code hơn dẫn đến thời gian tải xuống nhanh hơn.
- Bảo trì trang web dễ dàng hơn: CSS giúp việc bảo trì trang web dễ dàng hơn nhiều. Nếu bạn cần thay đổi toàn bộ file, bạn chỉ cần thay đổi kiểu dáng, thao tác này sẽ tự cập nhật tất cả các thành phần (elements) trên trang web.
- Cơ sở để phát triển web: HTML và CSS là kỹ năng cơ bản mà mọi nhà phát triển web nên biết. Đó là kỹ năng cơ bản cần thiết để xây dựng một trang web.
Lời kết
Trên đây là những khái niệm cơ bản về CSS, hiểu rõ về CSS là cần thiết nếu bạn muốn trở thành một nhà phát triển web chuyên nghiệp. Việc tìm hiểu và sử dụng CSS đúng cách sẽ giúp bạn tạo ra các trang web tốt hơn, đáp ứng nhu cầu của người dùng và tăng tính tương tác trên trang web. Hy vọng với những thông tin mà 200Lab mang lại sẽ giúp bạn có thêm kiến thức về CSS.
Bạn có thể tham khảo thêm những bài viết hữu ích về chủ đề "Lập trình web" tại Blog của 200Lab nhé!
Bài viết liên quan
ReactJS là gì? Thư viện Javascript tối ưu cho giao diện Web
Sep 12, 2024 • 11 min read
Prettier là gì? Công cụ Định dạng mã nguồn tự động cho Lập trình viên
Sep 10, 2024 • 6 min read
Thư viện Husky là gì? Đảm bảo chất lượng Code với Git Hooks và Husky
Sep 08, 2024 • 5 min read
Functional Programming là gì? Giải pháp cho Hệ thống đa luồng và Xử lý song song
Sep 06, 2024 • 6 min read
ESLint là gì? Hướng dẫn cấu hình ESLint cho dự án Typescript
Sep 04, 2024 • 11 min read
Hướng dẫn TypeScript Syntax cơ bản cho người mới - Phần 2
Sep 04, 2024 • 16 min read