CSS là gì?
CSS là viết tắt của C ascading S tyle S heets
CSS mô tả cách các phần tử HTML được hiển thị
Ví dụ CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào.
Cú pháp CSS
Quy tắc CSS bao gồm một bộ chọn và một khối khai báo :
Bộ chọn trỏ đến phần tử HTML để tạo kiểu (h1).
Khối khai báo (trong dấu ngoặc nhọn) chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy.
Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm.
Trong ví dụ sau, tất cả các phần tử <p> sẽ được căn giữa, màu đỏ và có kích thước phông chữ là 32 pixel:
Thí dụ
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Ví dụ tương tự cũng có thể được viết như thế này:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Bảng định kiểu bên ngoài
Một biểu định kiểu CSS có thể được lưu trữ trong một tệp bên ngoài :
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Các biểu định kiểu bên ngoài được liên kết với các trang HTML bằng thẻ <link> :
Thí dụ
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Kiểu nội tuyến
Thí dụ
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Thứ tự xếp tầng
Nếu các kiểu khác nhau được chỉ định cho các phần tử HTML, thì các kiểu sẽ xếp thành các kiểu mới với mức độ ưu tiên sau:
- Ưu tiên 1: Kiểu nội tuyến
- Ưu tiên 2: Bảng định kiểu bên ngoài và bên trong
- Ưu tiên 3: Mặc định của trình duyệt
- Nếu các kiểu khác nhau được xác định trên cùng một mức độ ưu tiên thì kiểu cuối cùng có mức độ ưu tiên cao nhất.
Thí dụ
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS Demo - Một trang HTML - Nhiều kiểu!
Ở đây chúng tôi sẽ hiển thị một trang HTML được hiển thị với 4 bảng định kiểu khác nhau.
Nhấp vào các nút Biểu định kiểu (1-4) để xem trang được hiển thị với các kiểu khác nhau.
Hướng dẫn CSS đầy đủ
Đây là một mô tả ngắn về CSS.
Để có hướng dẫn CSS đầy đủ, hãy truy cập Hướng dẫn CSS của W3Schools .
Để có tài liệu tham khảo đầy đủ về CSS, hãy truy cập Tài liệu tham khảo CSS của W3Schools .