Вэбсайтын визуал хэв маяг, загвар нь CSS эсвэл Cascading Style Sheets-ээр тодорхойлогддог. Эдгээр нь вэб хуудасны HTML тэмдэглэгээг үүсгэдэг баримтууд бөгөөд вэб хөтөч нь тухайн тэмдэглэгээнээс гарах хуудсуудыг хэрхэн яаж үзүүлэх заавраар хангадаг. CSS нь хуудасны байршил, өнгө, дэвсгэр зураг, хэвлэмэл болон бусад зүйлсийг зохицуулдаг.
Хэрэв та CSS файлыг харах юм бол ямар ч тэмдэглэгээ эсвэл кодчилолын хэллэг шиг эдгээр файлууд нь тэдгээрийн тусгай синтакстай байдаг. Style хуудас бүр CSS дүрмүүдээс бүрддэг. Эдгээр дүрмүүд нь бүрэн хэмжээгээр хийгдсэн үед сайтууд ямар хэв маягтай байдаг.
CSS дүрмийн хэсгүүд
CSS дүрэм нь сонгон шалгаруулагч болон мэдэгдэл гэсэн хоѐр ялгаатай хэсгээс бүрдэнэ. Сонгосон хэсэг нь хуудсууд болон хэвлэмэл хэлбэрээр юуг тодорхойлж байгааг тодорхойлдог. Жишээлбэл:
p {
өнгө: # 000;
}
Энэ бол CSS дүрэм юм. Сонгох хэсэг нь "догол мөр" гэсэн элемент сонгогч юм. Тиймээс, сайтын ALL догол мөрийг сонгож тэдгээрийг энэ хэв маягаар хэвлэнэ (CSS баримт бичигт өөр өөр стилүүдээс хамаарах догол мөрүүд байхаас бусад тохиолдолд).
"Өнгө: # 000;" гэсэн дүрмийн хэсэг гэдэг нь тунхаглал гэж нэрлэдэг. Энэ мэдэгдэл нь эд хөрөнгө ба үнэ гэсэн хоёр хэсгээс бүрдэнэ.
Эд хөрөнгө бол энэ тунхаглалын "өнгө" хэсэг юм. Энэ нь сонгон шалгаруулагчийн ямар талыг харагдахыг зааж өгнө.
Үнэ цэнэ нь сонгосон CSS шинж чанарыг өөрчлөх болно. Бидний жишээн дээр, бид "xx" гэсэн гэгээвчийг CSS гэж нэрлэдэг.
Тиймээс энэ CSS дүрмийг ашигласнаар манай хуудас хар үсэг-өнгөт догол мөрийг харуулах болно.
CSS өмчийн үндэс
CSS-ийн шинж чанарыг бичихэд та зүгээр л тохирохыг харж чаддаггүй. Жишээ нь "color" нь жинхэнэ CSS property бөгөөд та үүнийг ашиглаж болно. Энэ шинж чанар нь элементийн текстийн өнгөийг тодорхойлно. Хэрэв та "текстийн өнгө" эсвэл "фонт-өнгө" CSS шинж чанарыг ашиглах гэж оролдвол эдгээр нь CSS хэлний бодит хэсгүүд биш учир эдгээр нь амжилтгүй болно.
Өөр нэг жишээ бол "background-image" өмч байна. Энэ шинж чанар нь арын дэвсгэр дээр ашиглагдаж болох зургийг тавьдаг:
.logo {
background-image: url (/images/company-logo.png);
}
Хэрэв та "background-image" эсвэл "background-graphic" гэсэн үгийг property болгон ашиглахыг оролдвол тэдгээр нь жинхэнэ CSS шинж чанар биш юм.
Зарим CSS Properties
Сайтаа хэв маягаар ашиглах хэд хэдэн CSS шинж чанарууд байдаг. Жишээ нь:
- Хилийн (хилийн хэв маягийн, хилийн өнгө, хилийн өргөн гэх мэт)
- Талбай (дээд дэвсгэр, дээд талын дэвсгэр, дэвсгэр, дэвсгэр, доод хэсэг)
- Мөрөнгүүд (маржин-дээд, маржин-баруун, маржин-доод, маржин зүүн)
- Фонт-гэр бүл
- Үсгийн хэмжээ
- Дэвсгэр өнгө
- Өргөн
- Өндөр
Эдгээр CSS шинж чанарууд нь жишээ болгон ашиглахад агуу зүйл юм. Учир нь тэдгээр нь бүгд маш энгийн, учир нь CSS танихгүй байсан ч тэдгээрийн нэр дээр үндэслэн юу хийж болохыг таах боломжтой.
Таны бусад тулгардаг CSS шинж чанарууд байдаг бөгөөд тэдгээр нь тэдгээрийн нэр дээр тулгуурлан хэрхэн ажиллах нь тодорхойгүй байж болох юм:
- Float
- Тодорхой
- Усан халаагуур
- Текст-хувиргах
- Z-индекс
Вэб дизайныг илүү гүнзгийрүүлэх тусам эдгээр бүх шинж чанаруудтай тулгарах болно.
Properties Үнэ цэнэтэй байх хэрэгтэй
Та өмч хөрөнгийг ашиглах бүрдээ үнэ цэнийг өгөх ёстой бөгөөд тодорхой шинж чанарууд нь зөвхөн тодорхой утгыг хүлээн авдаг.
"Өнгө" үл хөдлөх хөрөнгийн эхний жишээн дээр өнгөт утгыг ашиглах хэрэгтэй. Энэ нь hex утга , RGBA утга эсвэл өнгөт түлхүүр үг байж болно. Гэхдээ эдгээр утгуудын аль нь ч гэсэн энэ шинж чанараар "гунигтай" үгийг хэрэглэсэн бол энэ нь тэр үгээр дүрсэлсэн шиг CSS-ийн хүлээн зөвшөөрөгдсөн утга биш юм.
"Background-image" -ний хоёрдахь жишээ нь таны сайтын файлаас бодит зургийг авахад зургийн замыг ашиглахыг шаарддаг. Энэ нь шаардагдах утга / синтакс юм.
Бүх CSS шинж чанарууд нь тэдний хүлээж буй үнэлэмжүүдтэй байдаг. Жишээлбэл:
- Хилийн өнгө нь өнгөний үнэ цэнийг хүлээнэ
- Хилийн хэмжээтэй бол тоогоор эсвэл проперти шиг хэмжээний утгыг тооцоолно
- Хилийн хэв маягийн энэ шинж чанарыг ашигладаг хадгалагдсан загваруудын нэг нь "хатуу"
Хэрэв та CSS шинж чанаруудын жагсаалтыг харах юм бол тэдгээр нь тус бүрт зориулж загвараа бий болгоход ашиглах тусгайлсан утгуудтай болохыг олж мэднэ.
Жереми Герард засварт хийсэн