Nhúng CSS vào trang HTML
Có ba cách nhúng CSS vào trang HTML là:
- Inline CSS: Mã CSS được viết trong thuộc tính
stylecủa phần tử html. - Internal CSS: Mã CSS được viết trong khối thẻ
<style>nằm trong trang html. - External CSS: Mã CSS được lưu trong một file riêng biệt (thường là file .css), sau đó được nạp vào bằng phần tử
<link>của html.
Inline CSS
Mã css được viết trong thuộc tính style của phần tử HTML
<p style="color: red; font-size: 20px;">Đoạn văn này có màu đỏ và cỡ chữ 20px</p>
<p style="color: blue; background: red;">Đoạn văn này có màu xanh và nền màu đỏ </p>Internal CSS
Mã CSS được viết trong khối thẻ <style> nằm trong trang html.
<html>
<head>
<style>
.red{
color: red;
font-size: 20px;
}
.blue{
color: blue;
background: red;
}
</style>
</head>
<body>
<p class="red">Đoạn văn này có màu đỏ và cỡ chữ 20px</p>
<p class="blue">Đoạn văn này có màu xanh và nền màu đỏ </p>
</body>
</html>Kết quả:
External CSS
Đoạn mã CSS được viết trong một file riêng biết (thường có đuôi .css) và file này được nạp bằng phần tử <link> của html
ví dụ file demo.css có nội dung sau:
.red{
color: red;
font-size: 20px;
}
.blue{
color: blue;
background: red;
}File demo.html có nội dung sau:
<html>
<head>
<!-- tải css từ file demo.css -->
<link rel="stylesheets" href="demo.css" />
</head>
<body>
<p class="red">Đoạn văn này có màu đỏ và cỡ chữ 20px</p>
<p class="blue">Đoạn văn này có màu xanh và nền màu đỏ </p>
</body>
</html>Kết quả:
Multiple Style Sheets
Nếu một thuộc tính được định nghĩa nhiều lần thì giá trị được đọc cuối cùng (theo thứ tự từ trên xuống dưới) sẽ được hiển thị.
Ví dụ:
<html>
<head>
<style>
h1{
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1> Nội dung này có màu xanh</h1>
</body>
</html>
Nếu file demo.css định nghĩa thẻ h1 có nội dung sau :
h1{
color: red:
}trong file demo.html cũng định nghĩa