Tùy biến giao diện với khối CSS
Tùy biến giao diện với khối CSS
CSS là chữ viết tắt của Cascading Style Sheets.
CSS được dùng để biểu mô tả, biểu diễn giao diện phù hợp với người dùng.
CSS được viết tập trung và có thể sử dụng lại nhiều lần thông qua tên định danh.
CSS có thể được sử dụng theo nhiều cách, đây là 3 cách thường dùng:
- Inline : Là sử dụng ngay trong thẻ bằng thuộc tính style của thẻ.
- Internal : trong nội bộ, nghĩa là được khai báo bên trong thẻ <style>[Nội dung]</style>
- External: gọi lại từ tệp tin, cách này đặt css thông qua <link href="[Đường dẫn]" />
Hướng dẫn cách sử dụng :
- CSS được sử dụng như là Inline:
Ví dụ :
<h1 style="color:red;">Nội dung chuyển đổi thành màu xanh</h1>
- CSS được sử dụng như là Internal:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: red;}
h1 {color: green;}
p {color: blue;}
</style>
</head>
<body>
<h1>Nội dung tiêu đề</h1>
<p>Chi tiết.</p>
</body>
</html>
+ CSS sử dụng như là External:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Nội dung tiêu đề</h1>
<p>Chi tiết.</p>
</body>
</html>
Hướng dẫn bổ sung cách sử dụng CSS External
+ Áp dụng css đường viền cho các thẻ trực tiếp.
Ví dụ :
p {
border: 1px solid powderblue;
}
+ Áp dụng phông chữ cho các thẻ trực tiếp.
Ví dụ:
p {
color: red;
font-family: courier;
font-size: 160%;
}
+ Áp dụng căn Padding cho các thẻ trực tiếp.
Ví dụ :
p {
border: 1px solid powderblue;
padding: 30px;
}
+ Áp dụng cho thẻ có id định trước
Ví dụ:
<p id="A01">Thẻ P</p>
<style>
#A01{
color: blue;
}</style>
+ Áp dụng gọi thông qua tên lớp đặt trực tiếp
Ví dụ:
<p class="A01">I am different</p>
<style>
.A01{
color: blue;
}</style>
+ Áp dụng gọi thông qua đường dẫn đặt trực tiếp
Ví dụ:
<link rel="stylesheet" href="/styles.css">
- Viết bởi bxh.cpu@gmail.com
- 13/09/2018
- 100
- HTML