1.1. CSS là gì
- CSS là viết tắt của cụm từ Cascading Style Sheets.
- Styles định nghĩa cách các thành phần HTML hiển thị như nào trên trang web.
- Các styles thông thường được lưu trữ trong một Style Sheets.
- Các styles đã được thêm vào từ công bố HTML bản 4.0.
- Nhiều định nghĩa style trong một tệp được gọi là Cascade (xếp chồng) Style Sheets.
1.2. Lý do sử dụng CSS
CSS thường được sử dụng để định nghĩa kiểu cho trang web của bạn, bao gồm thiết kế, bố cục và các hiển thị khác phù hợp với các thiết bị khác nhau và các kích thước màn hình khác nhau.
1.3. CSS đã giải quyết được vấn đề "lớn" trong thiết kế web
- HTML ban đầu chưa từng có ý định tạo các thẻ cho việc định dạng một trang web.
- HTML đã tạo các mô tả nội dung của một trang web như:
+ <h2>Đây là nội dung trong thẻ h2</h2>
+ <p>Đây là nội dung của đoạn văn bản</p>
- HTML phiên bản 3.2 ra mắt với các thẻ định dạng như <font>. Trong đó, rất nhiều thuộc tính định dạng kích thước, màu sắc được bổ sung vào mã HTML. Đây thực sự là một điều "ác mộng" với các nhà thiết kế web. Với việc phát triển một website lớn, ở đó thông tin màu sắc, kích thước, phông chữ được thêm vào từng đối tượng, trên nhiều trang web tạo ra sự phức tạp, tốn thời gian của các lập trình viên. Để khắc phục, tổ chức W3C đã tạo ra CSS.
1.4. CSS tiết kiệm được rất nhiều thời gian để thiết kế web
- Các style thường được lưu trong một file bên ngoài có đuôi mở rộng .css
- Khi cần thay đổi thiết kế trang web, bạn chỉ cần thay đổi thuộc tính của thẻ được định nghĩa trong file .css, mọi thẻ được khai báo trong trang web sẽ thay đổi theo.
1.5. Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Các đoạn văn đều bị áp dụng chữ màu đỏ, lề căn giữa</p>
<p id="para1">Đoạn văn này cũng chữ đỏ, căn lề giữa</p>
<p>Đoạn văn này cũng chữ đỏ, lề giữa vì sử dụng thẻ p</p>
</body>
</html>
