HTML Загвар /Style/
<style> атрибутад HTML-ийн загварыг тодорхойлж өгдөг.
<style> атрибутын бичиглэл буюу syntax нь дараах байдалтай байна.
<tagname style="property:value; property:value;">
HTML-ийн <style> атрибутад бичигдэж байгаа property болон value нь бүгд CSS-д хамаарах бөгөөд энэхүү хичээл дээр товчхон авч үзэх болно
CSS-ийн хичээлээс илүү дэлгэрэнгүй гүн судлах болно.
Дэвсгэр өнгө
CSS-д дэвсгэр өнгө нь background-color шинж чанарт тодорхойлогддог бөгөөд HTML элементийн арын өнгийг зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body style="background-color:yellow;">
<h1>Энэ бол гарчиг</h1>
<p style="background-color:red; color:white;">Энэ бол догол мөр</p>
</body>
</html>
Текстын өнгө
CSS-д текстийн өнгө нь color шинж чанарт тодорхойлогддог бөгөөд HTML элементийн текстийн өнгийг зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="color:red;">Энэ бол гарчиг</h1>
<p style="color:blue;">Энэ бол догол мөр</p>
</body>
</html>
HTML фонт
CSS-д үсгийн фонтыг нь font-family шинж чанарт тодорхойлогддог бөгөөд HTML элементийн үсгийн фонтыг зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="font-family:verdana;">Энэ бол гарчиг</h1>
<p style="font-family:courier;">Энэ бол догол мөр</p>
</body>
</html>
Текстийн хэмжээ
CSS-д текстийн хэмжээг font-size шинж чанарт тодорхойлогддог бөгөөд HTML элементийн текстийн хэмжээг зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="font-size:320%;">Энэ бол гарчиг</h1>
<p style="font-size:180%;">Энэ бол догол мөр</p>
</body>
</html>
Текстийг зэрэгцүүлэх
CSS-д текстийг зэрэгцүүлэхэд text-align шинж чанарт тодорхойлогддог бөгөөд HTML элементийн текстийг хэвтээ шугамын дагуу тодорхойлно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="text-align:center;">Энэ бол гарчиг</h1>
<p style="text-align:right;">Энэ бол догол мөр</p>
</body>
</html>
Сэтгэгдэлүүд
