CSS гэдэг нь тохиргоот загварын хуудаснууд гэсэн үг юм.
CSS нь маш их ажлыг хэмнэдэг. Энэ нь олон вэб хуудасны байршлыг нэг дор хянах боломжтой.
CSS гэж юу вэ? #
Cascading Style Sheets (CSS) нь вэб хуудасны байршлыг хэлбэржүүлхэд хэрэглэгддэг.
CSS-ийн тусламжтайгаар та өнгө, фонт, текстийн хэмжээ, элементүүдийн хоорондын зай, элементүүдийг хэрхэн байрлуулах, ямар дэвсгэр зураг эсвэл дэвсгэр өнгө ашиглах, янз бүрийн төхөөрөмжүүдийн дэлгэцийн хэмжээ, илүү их зүйл!
CSS ашиглах нь #
CSS нь 3 аргаар HTML-д нэмэгдэж болно.
- Inline – HTML элементийн дотор
-
<style>шинж чанарыг ашиглах - Internal –
<style>шинж чанары<head>хэсэгт оруулах - External –
<link>элемент ашиглан линкээр холбогдох
CSS нэмэх хамгийн түгээмэл арга бол хэв маягийг CSS-ийн тусдаа файлд хадгалах юм. Гэхдээ энэ гарын авлагад бид Inline болон Internal хэв маягийг ашиглах болно.Учир нь үүнийг үзүүлэх нь илүү хялбар бөгөөд та өөрөө туршиж үзэх нь илүү хялбар байдаг.
Inline CSS #
An inline CSS нь HTML-ийн ганцхан элементэд тусгай хэв маяг оруулдаг.
An inline CSS нь HTML-ийн styleшинж чанарыг ашиглдаг
Дараах жишээнд <h1> элементийн текстийн өнгийг цэнхэр болгож,<p> элементийн текстийн өнгийг улаан болгож байна.
<h1 style="color:blue;">Цнхэр гарчиг</h1>
<p style="color:red;">Улаан гарчиг.</p> Дотоод CSS(Internal CSS) #
HTML-ийн нэг хуудасны хэв маягийг тодорхойлоход дотоод CSS ашигладаг.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a “powderblue” background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html Гаднах CSS(External) #
Гаднах CSS нь HTML-ийн олон хуудсуудын хэв маягыг янзалдаг.
Энийг ашиглахын тулд HTML хуудас бүрийн <head>хэсэгт линк нэмэх хэрэгтэй.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Гаднах(External) хэв маягийн хуудсыг дурын текст засварлагч дээр бичиж болно. Файл нь ямар ч HTML код агуулаагүй байх ёстой бөгөөд .css өргөтгөлөөр хадгалагдах ёстой.
“Styles.css” файл иймэрхүү харагдаж байна.
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
} CSS Өнгө, хэмжээ, үсгийн хэв #
Энд бид зарим түгээмэл хэрэглэгддэг CSS шинж чанаруудыг харуулах болно. Та дараа нь тэдний талаар илүү ихийг мэдэх болно.
The CSS color тодруулга нь ашиглах текстийн өнгийг тохируулна.
CSS font-family тодруулга(property) нь ашиглах гэж байгаа үгсийг хэвийг(Font) тохируулна.
CSS font-size нь ашиглах гэж байгаа текстийн хэмжээг тохируулна.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> CSS Хүрээ #
CSS borderнь HTML элементийн гадуурх хүрээг тодорхойлно.
Зөвөлгөө: Та HTML элементийн ихэнх хүрээг тохируулаж болно.
p {
border: 2px solid powderblue;
} CSS Чигжээс(padding) #
The CSS padding нь хүрээ болон HTML элементийн хооронд чигжээс(зай) оруулахад хэрэглэгддэг.
p {
border: 2px solid powderblue;
padding: 30px;
} CSS Зааг(Margin) #
The CSS margin нь хүрээнээс гадуурх зааг(зайг) тохируулдаг.
p {
border: 2px solid powderblue;
margin: 50px;
} Гаднах(External) CSS-рүү холбогдох #
Гаднах хэв маягийн хуудсыг(External style sheets) бүрэн URL эсвэл одоогийн вэб хуудастай харьцуулсан замаар лавлаж болно.
Энэ жишээ нь хэв маягийн хүснэгтэд(style sheet) холбогдохын тулд бүрэн URL ашиглаж байна.
<link rel="stylesheet" href="https://Aprrentice.mn/styles.css">
Энэ жишээ нь одоогийн вэбсайт дээрх html хавтсанд байрлах загварын хуудастай холбож байна.
<link rel="stylesheet" href="/html/styles.css"> Энэ жишээ нь одоогийн хуудастай ижил фолдерт байрласан хэв маягийн хуудсыг холбосон болно.
<link rel="stylesheet" href="styles.css"> Бүлэгийн хураангуй # #
- HTML
styleшинж чанарыг ашиглаж элемент доторх хэв маягыг тохируулдаг - HTML
<style>элемент нь дотоод CSS-ийг тодорхойлно. - Use the HTML
<link>element to refer to an external CSS file - HTML
<link>элементийг ашиглан гаднах CSS файл руу хандана уу - <style> болон <link> элементүүдийг хадгалахын тулд HTML
<head>элементийг ашиглана - CSS
colorнь текстийн өнгө тохируулна - CSS
font-familyтексн дахь үсгийн хэв тохируулна - CSS
font-sizeнь текстийн үсгийн хэмжээг тохируулна - CSS
borderнь HTML элементийн хүрээг тодорхойлно - CSS
paddingнь HTML элемент болон хүрээ хоорондын зайг тохируулна - CSS
marginхүрээний гадуурх зайг тохируулна
Зөвөлгөө: CSS-ийн талаар илүү ихийг эндээс CSS Хичээл
