Sách CSS/Cú pháp
< Sách CSS
(Đổi hướng từ Sách CSS/Chương 1 - Cú pháp)Dòng lệnh định dạng thể hình để trực tiếp trong trang mạng thường nằm giửa Thẻ Lệnh HTML <style>
</style>
theo ba cách thức sau
- Định Dạng Thể Hình Một Phần Tử Mặc Định Của Trang Mạng HTML
- Định Dạng Thể Hình Dùng Chung Cho Một Hay Nhiều Phần Tử Của Trang Mạng HTML
- Định Dạng Thể Hình Trực Tiếp Một Thẻ Lệnh HTML
Định Dạng Một Phần Tử Mặc Định Của Trang Mạng HTML
sửaCú pháp
sửa<style> Phần Tử Trang Mạng { Thuộc_Tính_1 : Giá Trị ; Thuộc_Tính_2 : Giá Trị ; Thuộc_Tính_n : Giá Trị } </style>
Thí Dụ
sửa<style> P { Font-Family : Arial,Tahoma ; Font_Color : blue ; Background-Color : Grey } </style>
Định Dạng Dùng Chung Cho Một Hay Nhiều Phần Tử Của Trang Mạng HTML
sửaCú pháp
sửa<style> #Tên_Lớp {thuộc-tính-1: giá-trị-1; thuộc-tính-2: giá-trị-2;} Phần Tử Trang Mang.Tên_Lớp {thuộc-tính-1: giá-trị-1; thuộc-tính-2: giá-trị-2;} </style> <p class="Tên_Lớp"> <a class="Tên_Lớp" href="http://www.yahoo.com">Yahoo</a>
Thí Dụ
sửa<style> #TextStyle { Font-Color : red; Font-Family : Tahoma,Arial; Font-Size : 2; } </style> <p class="TextStyle"> <a class="TextStyle" href="http://www.yahoo.com">Yahoo</a>
Định Dạng Trực Tiếp Một Thẻ Lệnh HTML
sửaCú pháp
sửa<thẻ_lệnh_HTML Style="Thuộc_Tính_1 : Giá_Trị_1 ; Thuộc_Tính_2 : Giá_Trị_2 ; Thuộc_Tính_n : Giá_Trị_n ;"></thẻ_lệnh>
- Tham số
- Style Kiểu dạng
Thí Dụ
sửa<P Style="Font-Family : Tahoma,Arial ; Font-Color : Blue ; Font-Weight : Bold ;"></P> <ADDRESS Style="Font-Family : Tahoma,Arial ; Font-Color : Red ; Font-Weight : Small ;"></ADDRESS>
Dòng lệnh nhúng CSS từ bên ngoài vào trang HTML
sửaDòng lệnh nhúng tệp có định dạng đuôi .css vào trang mạng. Trang mạng sẽ thực thi đoạn mã được viết trong tệp được nhúng. Cấu trúc đoạn lệnh như sau:
Cú pháp
sửa<link type="text/css" rel="stylesheet" href="duong_dan/style.css">
- Tham số
- type - Dạng hồ sơ
- rel - Hồ sơ định hình
- href - Liên kết đến hồ sơ định hình
Thí Dụ
sửa<html>
<head>
<style>
a:active {color: red;}
a:link {color: blue;}
a:visited {color: black;}
a:hover {background-color: yellow; color: aqua;}
body
{
backgroung-image : http://www.geocities.com/pictures/background_picture.gif ;
background-color: beige ;
color: blue ;
}
*.input-box {width: 200px; background-color: beige;}
*.button {width: 50px; background-color: white;}
</style>
</head>
<body>
<input type="button" class="button">
<input type="text" class="input-box">
</body>
</html>