HTML CSS
CSS - гэдэг нь Cascading Style Sheets гэсэн үгний товчлол юм.
CSS нь HTML-н элементүүдийг дэлгэцэд хэрхэн харагдахыг тодорхойлдог.
CSS нь маш их ажлыг хэмнэж өгдөг. Өөрөөр хэлбэл вэб сайтын маш олон хуудасны загварыг нэг газраас хянах боломжийг олгодог.
CSS-г HTML-н элементэд гурван аргаар нэмж болно.
Inline - Html-н элементэд style атрибутад нэг бүрчлэн бичиж өгөх
Internal - <head> tag-н элементэд <style> элементийг ашиглаж болно
External - CSS файл ашиглаж болно.
CSS файлыг HTML-д дуудаж оруулж ирж ашиглах нь хамгийн түгээмэл хэрэглэгддэг арга юм. Гэхдээ бид энэ хичээлээр зөвхөн туршиж үзэх болно.
Зөвлөмж: Хэрэв та CSS-н талаа илүү дэлгэрэнгүй үзэхийг хүсвэл 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;
}
CSS Font
CSS-д color-д атрибутад текстийн өнгийг тодорхойлно
CSS-д font-family-д атрибутад текстийн үсгийн фонтыг тодорхойлно
CSS-д font-size-д атрибутад текстийн хэмжээг тус тус тодорхойлно
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
body {background-color:Tomato;}
h1 {color: SlateBlue;
font-family: verdana;
font-size: 320%;
}
p {color: white;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1> Энэ бол хамгийн чухал гарчиг </h1>
<p> Энэ бол маш их текст агуулах догол мөр </p>
</body>
</html>
CSS Border
CSS-д border-д шинж чанарт HTML элементийн хэл хязгаарыг тодорхойлно
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
p {
border: 1px solid MediumSeaGreen;
}
</style>
</head>
<body>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
</body>
</html>
CSS Padding
CSS-н padding-д шинж чанарт border буюу хэл хязгаараас авах зайг тодорхойлно
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
p {
border: 1px solid MediumSeaGreen;
padding: 20px;
}
</style>
</head>
<body>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
</body>
</html>
CSS margin
CSS-н margin-д шинж чанарт border буюу хэл хязгаарын гаднаас авах зайг тодорхойлно
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
p {
border: 1px solid MediumSeaGreen;
margin: 30px;
}
</style>
</head>
<body>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
</body>
</html>
Id атрибут
Ямар нэг элементэд тусгайлан авч загварыг өөрчлөх үед id атрибутыг HTML элементэд нэмэж өгнө
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
#p01 {
border: 1px solid MediumSeaGreen;
margin: 30px;
}
</style>
</head>
<body>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
<p id="p01"> Энэ бол догол мөр </p>
</body>
</html>
Class атрибут
Тусгай төрлийн элементүүдийн загварыг өөрчлөх үед class атрибутыг HTML элементэд нэмэж өгнө
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
p.warning {
color: orange;
}
</style>
</head>
<body>
<p> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
<p class="warning"> Энэ бол догол мөр </p>
<p> Энэ бол догол мөр </p>
<p class="warning"> Энэ бол догол мөр ялгаатай </p>
</body>
</html>
Сэтгэгдэлүүд
