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 -ийн бичлэгийн дүрмийг үзнэ.

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

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

Элементүүд блок болон мөр төрлийнх гэж байдгийг бид мэднэ. Элемент бүр нь анхдагч байдлаар өөрийн төрөлтэй байдаг. Жишээ нь 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>

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

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

text-decoration

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

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

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

  Нээгдсэн тоо: 2856 Нийтийн

Сайтын загварт цэс том үүрэгтэй. Энэ хичээлээр энгийн хэвтээ цэсийг хэрхэн хийхийг авч үзэх юм. Цэсийг хийхдээ энгийн аргуудыг ашиглах бөгөөд үр дүнд нь бүх хөтөч дээр зөв ажилладаг цэсийг гарган авах болно. Ингээд хичээлээ эхлэе.

Цэсний нэрүүдийн жагсаалтыг гаргая. Манай цэс "Нүүр", "Мэдээ", "Бүтээгдхүүн", "Үйлчилгээ", "Загварууд", "Холбоо" гэсэн хэсгүүдийг агуулж байна гэж үзье. Эхлээд Dreamweawer эсхүл текст засварлагч Notepad зэрэг програмыг ашиглан menu.html нэртэй файлыг үүсгэнэ. Би ихэнхдээ Notepad++ програмыг ашигладаг.

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

Өнгө - 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 элементэд хэв өгье.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

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

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

функцийн уламжлалыг тооц.

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

 

утгыг ол.

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

 

prob04_103_01 ба prob04_103_02 векторууд перпендикуляр бол y -ийн утгыг ол.

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