Хөтөч загварын хуудсыг уншиж HTML баримт бичгийг загварын хуудас дахь мэдээллийн дагуу өөрчилнө.
CSS оруулах гурван арга #
Загварын хуудсыг оруулах гурван арга байдаг.
- Гадаад CSS(external CSS)
- Дотоод CSS(internal CSS)
- Шугаман дахь CSS(inline CSS)
Гадаад CSS #
Гаднах хэв маягийн хуудасны тусламжтайгаар та ганцхан файлыг өөрчлөх замаар бүхэл бүтэн вэбсайтын дүр төрхийг өөрчлөх боломжтой!
HTML хуудас бүр толгой хэсгийн дотор элемент доторх гадаад хэв маягийн хуудасны файлын лавлагаа агуулсан байх ёстой.
Гаднах хэв маягийг элемент дотор, HTML хуудасны хэсэг дотор тодорхойлно.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Гаднах хэв маягийн хуудсыг дурын текст засварлагч дээр бичиж болох бөгөөд үүнийг .css өргөтгөлөөр хадгалах шаардлагатай.
Гадаад .css файлд HTML хаяг агуулаагүй байх ёстой.
“Mystyle.css” файлын харагдах байдал энд байна:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} Тэмдэглэл: шинж чанарын утга ба нэгжийн хооронд зай нэмж оруулахгүй margin-left: 20 px;) гэх мэт. Зөв арга зам бол: margin-left: 20px;
Дотоод CSS #
Нэг HTML хуудас өвөрмөц хэв маягтай бол дотоод загварын хуудасыг ашиглаж болно.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Шугаман дахь CSS #
Шугаман загвараыг дан ганц элементэд тусгай загвар өгөх гэж ашиглаж болно.
Шугаман хэв маягийг ашиглахын тулд загварчилахыг хүсэж буй элемент дотор style шинж чанарыг нэмнэ. Style шинж чанар нь CSS-ийн ямар ч шинж чанарыг агуулж болно.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html Олон загварын хуудас #
Хэрвээ нэг элемент олон загварын хуудас дээр дурдагдсан байвал хамгийн сүүлд уншигдсан загварын хуудас ашиглагдана.
Гаднах хэв маягийн хуудас нь <h1> элементэд дараахь хэв маягтай байна гэж үзье.
h1 {
color: navy;
} Дараа нь дотоод хэв маягийн хуудас <h1> элементэд дараахь хэв маягтай байна гэж үзье.
h1 {
color: orange;
} Жишээ #
Хэрэв гаднах хэв маягийн хуудсыг холбосны дараа дотоод хэв маягийг тодорхойлсон бол <h1> элементүүд нь “orange” байх болно:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Жишээ #
Гэхдээ дотоод хэв маягийг гадаад хэв маягийн хуудас руу холбохоос өмнө тодорхойлсон бол <h1> элементүүд нь “navy” байх болно:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 
