Nhập môn CSS/Cú pháp CSS

Phần Tử của trang mạng

Các Phần Tử của trang mạng đều có 3 đặc tính sau

Phần Tử Trang Mạng (selector)
Thuộc Tính (Property)
Trị Số Giá Trị (Value)

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>

CSS code

</style>

Cú pháp

Cú pháp định hình CSS

<style>

Phần_Tử_Trang_Mạng {Thuộc_Tính_1 : Giá_Trị_1 ; Thuộc_Tính_2 : Giá_Trị_2 ; Thuộc_Tính_n : Giá_Trị_n }

</style>

Hay

<style>

Phần_Tử_Trang_Mạng

{

Thuộc_Tính_1 : Giá_Trị_1 ;

Thuộc_Tính_2 : Giá_Trị_2 ;

Thuộc_Tính_n : Giá_Trị_n

}

</style>

Thí dụ

<style>

P{Thuộc_Tính_1 : Giá_Trị_1 ; Thuộc_Tính_2 : Giá_Trị_2 ; Thuộc_Tính_n : Giá_Trị_n }

</style>

Định dạng thể hình trong hồ sơ rời

Dòng lệnh định dạng Thể Hình còn có thể để trong một hồ sơ rời với một tên có đuôi chữ CSS sau dấu chấm. Hồ sơ rời này được dùng để định dạng thể hình của một hay nhiều trang mạng. Cách đính kèm hồ sơ rời này bên trong trang mạng HTML như sau

Cú pháp

<link Type="text/css" Rel="stylesheet" Href="style.css">
<Style Type="text/css" Scr="style.css"></Style>

Tham số: Type - Dạng hồ sơ; Rel - Hồ sơ định hình; Href - Liên kết đến hồ sơ định hình; Scr - Liên kết đến hồ sơ định hình

Thí Dụ

<html>
<head>
<style>
a:active {color: red;}
a:link {color: blue;}
a:visited {color: black;}
a:hover {background-color: yellow; color: aqua;}

body 
{
background-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>