CSS-г HTML-д хэрхэн нэмэх вэ?
Browser буюу интернет хөтөч Style sheet-г уншихад HTML хуудсанд зааж өгсөн форматын дагуу унших болно.
Inline - Html-н элементэд style атрибутад нэг бүрчлэн бичиж өгөх
Internal - <head> tag-н элементэд <style> элементийг ашиглаж болно
External - CSS файл ашиглаж болно.
Inline CSS
Inline CSS нь нэг HTML элементэд өвөрмөц буюу бусдаас ялгаатай хэв маягийг харуулахад ихэвчлэн ашигладаг.
Inline CSS нь HTML-н <style> атрибутыг ашигладаг.
Жишээлбэл:
<h1> элементийн текстийн өнгийг улаан болгож үзье
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="color:red;"> Энэ бол хамгийн чухал гарчиг </h1>
</body>
</html>
Internal CSS
HTML хуудасны хэв маягийг дотоод CSS ашиглан тодорхойлж болно, үүнийг Internal CSS гэдэг.
Дотоод CSS-г HTML хуудасны <head> хэсэгт <style> элементэд тодорхойлж өгнө.
Жишээлбэл:
<h1> элементийн текстийн өнгийг улаан болгож үзье
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
body {background-color:Tomato;}
h1 {color: SlateBlue;}
p {color: white;}
</style>
</head>
<body>
<h1> Энэ бол хамгийн чухал гарчиг </h1>
<p> Энэ бол маш их текст агуулах догол мөр </p>
</body>
</html>
External CSS
Гадаад CSS нь олон HTML хуудасны загварыг тодорхойлдог бөгөөд ганц CSS файлаас вэб сайтын өнгө төрхийг өөрчилж болно.
Гадаад CSS-г ашиглахын тулд HTML хуудасны <head> хэсэгт холболт хийнэ.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<link rel="stylesheet" href="/static/csss/style.css">
</head>
<body>
<h1> Энэ бол хамгийн чухал гарчиг </h1>
<p> Энэ бол маш их текст агуулах догол мөр </p>
</body>
</html>
Гадаад CSS-г дурын текст editor дээр хөгжүүлж болох бөгөөд ямар нэгэн HTML код агуулдаггүй мөн .css өргөтгөлтэй хадгалагддаг болохыг дээрх жишээнээс /href="/static/csss/style.css"/ анзаарсан биз ээ.
body {
background-color: Violet;
}
h1 {
color: red;
}
p {
color: yellow;
}
Сэтгэгдэлүүд
