CSS/Cú pháp CSS

From Wikiversity
< CSS
Jump to navigation Jump to search

Cú pháp định hình CSS[edit]

Cú pháp định hình CSS của một trang mạng

Cú pháp
<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 một phần tử mặc định của trang mạng HTML[edit]

Định dạng một phần tử mặc định của trang mạng HTML

Cú pháp
<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ụ
<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[edit]

Định dạng dùng chung cho một hay nhiều phần tử của trang mạng HTML

Cú pháp
<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>
</style>
Thí dụ
<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[edit]

Định dạng trực tiếp một thẻ lệnh HTML

Cú pháp
<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ụ
<P Style="Font-Family : Tahoma,Arial ; Font-Color : Red ; Font-Weight : Small ;"></P>

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

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>