CSS -ийг HTML -д оруулах

Гадаад хэвийн хүснэгт

Доорх код бүхий ердийн html хуудас үүсгэе.

<html>
<head>
<title>CSS -ийг HTML -д оруулах</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>1-р түвшингийн гарчиг</h1>
Энд энгийн текст
<h2>2-р түвшингийн гарчиг</h2>
Энд энгийн текст
</body>
</html>

Одоо Notepad дээр хоосон файл үүсгээд style.css гэсэн нэрээр html хуудас байрлах хавтаст хадгална. Одоохондоо манай style.css файл хоосон байх бөгөөд бидний хэвүүдийн хуудас болох юм.

Одоо бид style.css хуудсыг html хуудаст оруулна. Үүний тулд html -д гадаад файлыг оруулан ирдэг <link> тегийг дээрх кодод нэмэн оруулна. 

<html>
<head>
<title>CSS -ийг HTML -д оруулах</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>1-р түвшингийн гарчиг</h1>
Энд энгийн текст
<h2>2-р түвшингийн гарчиг</h2>
Энд энгийн текст
</body>
</html>

CSS -ийг HTML -д оруулах энэ арга нь хамгийн эвтэйхэн байдаг тул цаашид бид энэхүү аргыг ашиглах болно. Дээрх кодыг бид цаашид ашиглах тул тусд нь файл болгон хадгалаарай.

Үр дүн

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

мөр нь хуудас дээрх кирил үсгүүдийг хөтөч дээр зөв харагдуулахын тулд оруулж байгаа бөгөөд CSS оруулахтай холбогдолгүй гэдгийг та мэдэх байх. Энэ тухай HTML хичээлээр бид үзсэн. Гэхдээ CSS -ийг HTML -д оруулах өөр аргууд байдаг ба тэдгээртэй танилцгаая.
 
Дотоод хэвийн хүснэгт

HTML элементийн дотор style параметрээр өгөгдсөн хэвийг дотоод гэж нэрлэдэг. Жишээ нь

<h1 style="color:red">Энэ бол улаан өнгийн гарчиг</h1>

Энэ аргын дутагдалтай тал нь илэрхий. Жишээ нь style параметрийг элемент бүрд бичих хэрэгтэй болно. Ингэснээр CSS -ийн давуу талаа алдахад хүргэнэ.

Оруулан өгсөн хэвийн хүснэгт

Энэ аргаар бол хэвийн хүснэгтийг html хуудасны толгой хэсэгт оруулан өгдөг. Үүнийг хийдэг <style></style> гэдэг тег HTML-д байдаг. Тэгийн type параметрт яг CSS -ийг оруулан өгч байгааг тодорхойлдог. Ерөнхийдөө бас өөр бусдыг ч оруулж болдог. Кодын жишээ.

<html>
<head>
<title>CSS -ийг HTML -д оруулах</title>
<style type="text/css">
h1{
color:red
}
</style>
</head>
<body>
<h1>Энэ гарчиг улаан өнгөтэй</h1>
<h1>Энэ гарчиг улаан өнгөтэй</h1>
<h1>Энэ гарчиг улаан өнгөтэй</h1>
</body>
</html>

Үр дүн

Одоо хуудасны h1 бүх гарчигууд улаан өнгөтэй болно. Хэрвээ бид гарчгуудын аль нэгийг хөх өнгөтэй байлгая гэвэл түүнд дотоод хэвийн хүснэгтийг ашиглах юм.

<html>
<head>
<title>CSS -ийг HTML -д оруулах</title>
<style type="text/css">
h1{
color:red
}
</style>
</head>
<body>
<h1>Энэ гарчиг улаан өнгөтэй</h1>
<h1 style="color:blue">Энэ гарчиг хөх өнгөтэй болно</h1>
<h1>Энэ гарчиг улаан өнгөтэй</h1>
</body>
</html>

Үр дүн


Энэ тохиолдолд зөрчлийн арилгах үелэлийн зарчим хэрэглэгдэх юм. Тухайн тохиолдолд дотоод хүснэгт нь өндөр эрхтэй байх тул гарчиг хөх өнгөтэй болно. Энэ аргын дутагдалтай тал нь бас л илэрхий байгаа биз. Учир нь хэвийн хүснэгтийг хуудас бүрд үүсгэн өгөх шаардлагатай. Энэ нь цаашид бид гадаад хэвийн хүснэгтийг ашиглах нэг шалтгаан болж байгаа билээ.     
Бид CSS -ийг HTML -д оруулах аргуудыг үзлээ. Дараагийн хичээлээр CSS -ийн бичлэгийн дүрмийг үзнэ.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 1884 Төлбөртэй

Элементүүд блок болон мөр төрлийнх гэж байдгийг бид мэднэ. Элемент бүр нь анхдагч байдлаар өөрийн төрөлтэй байдаг. Жишээ нь div ба p элементүүд блокийн төрөлтэй байдаг бол span ба a элементүүд мөр төрлийнх байх жишээтэй. Хааяа энэ анхдагч төрлийг өөрчлөх хэрэг гардаг бөгөөд үүнийг display шинжийг ашиглан хийнэ. Шинж нь боломжит дөрвөн утгуудаас аль нэгийг авч болно. Бүх дөрвөн утгыг жишээн дээр авч үзье.  

display:block

Энэ утга нь элементийг блок төрлийнх болгодог. Бидэнд босоо цэс хийх хэрэгтэй боллоо гэж үзье. Үүний тулд html хуудас дээрээ дараах кодыг бичин өгье.

<html>
<head>
<title>css display</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<a href="index.html">Нүүр</a>
<a href="about_us.html">Бидний тухай</a>
<a href="contact.html">Холбоо барих</a>
</div>
</body>
</html>

  Нээгдсэн тоо: 1974 Төлбөртэй

text шинжээр үг ба өгүүлбэр түүнчлэн тэдгээрийн байрлалын параметрүүдийг заан өгөх боломжтой.

text-decoration

Шинж нь текстийг хэлбэржүүлэх үүрэгтэй. Дараах утгуудыг авна.

  • none - текст хэлбэржилт байхгүй.
  • underline - доогуур зураастай текст.
  • overline - дээгүүр зураастай текст.
  • line-through - дарагдсан текст.
  • blink - анивчсан текст (IE ажилладаггүй).

Холбоосыг доогуур зураасыг аваад харин заагчийг холбоос дээр аваачихад доогуур зураастай болгох нь нилээд дэлгэрсэн арга юм. Үүний тулд хэвийн хүснэгтэд

  Нээгдсэн тоо: 2259 Бүртгүүлэх

Өнгө - color

Өмнөх хичээлүүдийн туршид бид өнгөний шинжийг ашиглан ирсэн. Шинж нь элементийн доторх текстийн өнгийг өгдөг. Color шинж нь өвлөгддөг. Өвлөгдөх гэдэг нь юу болохыг жишээгээр авч үзье. Бидэнд дараах код бүхий html хуудас байлаа гэе.

<html>
<head>
<title>css color (өнгө)</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Гарчиг</h1>
<p>Хэсгийн текстүүд.</p>
Энд зүгээр текст.
</body>
</html>

body элементэд хэв өгье.

  Нээгдсэн тоо: 1606 Төлбөртэй

Толгойн хэсэг.

Хичээлээ сайтын толгойн хэсгийг кодлохоос эхлэе. Толгойн хэсэг хамгийн энгийн амархан хэсэг гэдгийг index.html хэсгийн кодоос ч тэр PSD макетаас ч харсан тодорхой. Кодын хэсгийг харуулбал.

<div id="header">
    <div id="logo">
        <h1><a href="#home" title="Home Page">E-surgalt.com</a></h1>
        <h2>ONLINE LEARNING</h2>
    </div>
</div>

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 25

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 56

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 57

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 60

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 78

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 84

 

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 73

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 59

 

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 77

 
Энэ долоо хоногт

Арифметик прогресийн 5-р гишүүн 8,4 харин 10-р гишүүн 14,4 тэнцүү бол энэ прогресийн 22-р гишүүнийг ол.

Нээгдсэн тоо : 1084

 

Дарааллын эхний n гишүүний нийлбэр томьёогоор өгөгджээ. Хэрэв энэ дараалал геометр прогресс бол q -г ол, арифметик прогресс бол d -г ол.

Нээгдсэн тоо : 776

 

бол M·N=?

Нээгдсэн тоо : 1066