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

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

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

Сайтын макетыг фотошоп дээр хийн дараа нь html кодод хэрхэн хөрвүүлэхийг сайтын Photoshop  болон HTML хэл  хэсгүүдээс үзэж танилцсан бол одоо бид сайтын html хуудсыг css ашиглан хэлбэржүүлэхэд суралцах юм. Ингэснээр та өөрөө сайтын загварыг бүрэн гаргаж сурах болно. Хэвийн хүснэгтийг зохиож эхлэхийн өмнө бид блокийн моделийн талаарх зарим зүйлсийг сайн ойлгох хэрэгтэй.

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

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

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

CSS -д фонтын параметрүүдийг өгөхдөө font шинжийг ашигладаг.

Font-family

Шинж нь фонтын багцуудыг өгдөг. Бүх фонтуудыг ерөнхийд нь хэдэн бүлэгт хувааж болдог:

  • Serif - үсгүүдийн төгсгөлд жижигхэн элемент (зураас) оруулсан фонтууд, жишээ нь, Times New Roman.
  • Sans-serif - үсгүүдийн төгсгөлд жижигхэн элемент (зураас) оруулаагүй фонтууд, жишээ нь, Arial.
  • Monospace - бүх тэмдэгтүүд нь ижилхэн өргөнтэй фонтууд, жишээ нь, Courier New.
  • Cursive - гар бичмэл хэлбэрийн фонтууд, жишээ нь, Calisto MT.
  • Fantasy - гоёлын фонтууд, жишээ нь, Torhok.

Фонтуудын бүлгүүдийн жишээ:

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

Хэвийн үндсэн хүснэгт

Бид reset.css файлыг зохиох үед түүнийг html файлд холбоос ашиглан шууд оруулахгүй сайтын хэвийн үндсэн хүснэгтээс түүнийг дуудах талаар дурдсан. Мэдээжээр та хүсвэл бүх CSS файлуудыг HTML кодоос холбоос үүсгэн оруулан ирж болно. Гэхдээ би кодын дээд хэсгийг цэвэрхэн байлгах үүднээс үүнийг хийхгүйгээр шийдсэн байгаа.
Одоо бид хэвийн үндсэн хүснэгтээ үүсгэх хэрэгтэй. Би голдуу үндсэн хүснэгтийг style.css гэж нэрлэдэг. Харин та түүнийг main.css, master.css, screen.css гэх мэтээр яаж ч нэрлэж болно. Хэвийн үндсэн хүснэгтэнд бид манай reset болон тесктийг хэлбэржүүлэх typography файлуудыг оруулан ирнэ. Үүнийг бид @import дүрмийг ашиглан оруулах юм.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 

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

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