Css

CSS là gì?

CSS là viết tắt của từ Cascading Style Sheets, nó là một ngôn ngữ dùng để định dạng và thiết kế giao diện cho các trang web. Nó cho phép bạn điều chỉnh màu sắc, phông chữ, bố cục, kích thước, khoảng cách, và nhiều thuộc tính khác của các phần tử HTML trên trang web.

CSS hoạt động bằng cách áp dụng các quy tắc định dạng (rules) vào các phần tử HTML. Một quy tắc CSS bao gồm một bộ chọn (selector), chỉ định phần tử nào đó trên trang web sẽ được định dạng, và một khối khai báo (declaration block), chứa các thuộc tính và giá trị tương ứng để định dạng phần tử đó.

CSS có vai trò quan trọng trong việc tạo ra các trang web có giao diện hấp dẫn, sinh động và dễ sử dụng.

Ví dụ quy tắc cơ bản của CSS

Ví dụ

body {
background-color: white;
}
h2 {
color: blue;

font-size: 22px;

text-align: center;
}

Giải thích :

h2: là bộ chọn (selector), chỉ định rằng quy tắc này áp dụng cho tất cả các thẻ <h2> trên trang.
color: blue; là khai báo thuộc tính màu chữ, làm cho chữ trong thẻ <h2> có màu xanh.
font-size: 22px; đặt kích thước chữ là 22 pixel.
text-align: center; căn giữa văn bản.

Cách sử dụng CSS

CSS được sử dụng theo ba cách chính: Inline CSS, Internal CSS, và External CSS. Dưới đây là chi tiết về cách sử dụng từng phương pháp:

1.Inline CSS

Inline CSS được áp dụng trực tiếp vào phần tử HTML bằng cách sử dụng thuộc tính style ngay trong thẻ của phần tử đó.

Ví dụ

<p style="color: red; font-size: 22px;"> Ví dụ sử dụng CSS Inline cho thẻ paragraph.</p>

Ưu điểm:

Dễ dàng áp dụng kiểu cho từng phần tử cụ thể.
Không cần tạo thêm file CSS.

Nhược điểm:

Khó quản lý khi có nhiều phần tử cần định dạng.
Không khuyến khích dùng vì làm mã HTML trở nên khó đọc và không thể tái sử dụng.

2.Internal CSS

Internal CSS được đặt trong phần <head> của trang HTML, được bao quanh bởi cặp thẻ <style>.

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightblue;
}
h2 {
color: navy;
margin-left: 20px;
}
</style>
<title>Internal CSS Example</title>
</head>
<body>
<h2>Xin chào!</h2>
<p>Đây là thẻ paragraph.</p>
</body>
</html>

Ưu điểm:

Dễ quản lý khi chỉ có một trang web duy nhất hoặc khi cần áp dụng một số kiểu riêng biệt.
Tất cả mã CSS được lưu trữ trong cùng một tệp HTML.

Nhược điểm:

Không thể tái sử dụng định dạng cho nhiều trang web khác nhau.
Nếu trang web lớn, file HTML có thể trở nên phức tạp và khó quản lý.

3.External CSS

External CSS được viết trong một tệp riêng biệt có phần mở rộng .css, và được liên kết với tệp HTML bằng thẻ <link> trong phần <head>.

Ví dụ file HTML liên kết với file CSS

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>External CSS Example</title>
</head>
<body>
<h2>Xin chào!</h2>
<p>Đây là thẻ paragraph.</p>
</body>
</html>

Nội dung file styles.css

Ví dụ

body {
background-color: white;
}
h2 {
color: red;
margin-left: 15px;
}

Ưu điểm:

Tách biệt mã HTML và CSS, giúp mã dễ đọc và bảo trì hơn.
CSS có thể được tái sử dụng cho nhiều trang web khác nhau.
Trang web tải nhanh hơn vì trình duyệt có thể lưu trữ file CSS.

Nhược điểm:

Cần thêm một bước để liên kết file CSS với file HTML.
Có thể gây khó khăn khi quản lý nhiều file trong một dự án lớn.

4. Sử dụng CSS Frameworks

Ngoài cách viết CSS thủ công, bạn cũng có thể sử dụng các CSS frameworks như Bootstrap, Foundation,... để tiết kiệm thời gian và công sức khi thiết kế giao diện.

Lưu Ý:

Inline CSS: Dùng khi bạn chỉ cần thay đổi định dạng của một phần tử duy nhất.
Internal CSS: Dùng khi bạn muốn định dạng cho một trang HTML cụ thể mà không cần tái sử dụng.
External CSS: Dùng khi bạn muốn tái sử dụng các quy tắc CSS trên nhiều trang HTML.Chúng tôi khuyên các bạn nên dùng Extenal CSS hoặc Bootstrap để hiệu quả, khoa học và tiết kiệm gian.