CSS, эсвэл Cascading Style Sheets нь орчин үеийн вэбсайт дизайнд хэрэглэгддэг хуудсыг харааны харагдацыг ашиглахад хэрэглэгддэг. Хэдийгээр HTML нь хуудасны бүтцийг бий болгож, жаваскрипт нь зан төлөвийг зохицуулж чаддаг бол вэбсайтын харагдац болон мэдрэмж нь CSS-ийн домэйн юм. Эдгээр загваруудад эдгээрийг гадны хэв маяг ашиглан ашиглана. Гэхдээ "хэв маягийн хэв мая" гэж нэрлэдэг зүйлсийг ашиглан нэг, тусгай элементэд CSS загварыг хэрэглэж болно.
Inline хэлбэрүүд нь CSS хэлбэрүүд нь хуудсын HTML-д шууд ашиглагддаг. Энэ аргын давуу болон сул талууд хоёулаа байдаг. Нэгдүгээрт, эдгээр загварыг яг хэрхэн бичсэнийг үзье.
Шугамын загвар хэрхэн бичих талаар
Inline CSS загварыг үүсгэхийн тулд та хэв маягийн хуудасныхаа загвартай төстэй загварын өмчөө бичиж эхлэхээсээ эхлээд бүх мөр байх хэрэгтэй. Загвар хуудас дээрээсээ ижил цэгээр хагас цэг сонгох олон шинж чанарыг тус тусад нь бич.
background: #ccc; өнгө: #fff; border: хатуу хар 1px;
Төлөвлөж байхыг хүсч байгаа элементийн загварын шинж чанар доторх хэв маягийн байршлыг байрлуул. Жишээ нь, хэрэв та энэ загварыг өөрийн HTML дэх догол мөрийг ашиглахыг хүсвэл тэр элемент иймэрхүү харагдах болно:
Энэ жишээнд, энэ хэсэг нь цайвар саарал дэвсгэртэй (#ccc гэж юу вэ), хар текст (# 000 өнгөөр), 1-пиксел хатуу хар хил бүхий .
Дотоод загварын давуу талууд
Cascading Style Sheet-ийн загвар нь ач холбогдол бүхий баримт бичгүүдийн хамгийн өндөр давтамж эсвэл онцлогтой байдаг. Энэ нь тэдгээрийг гаднах хэв загвартаа өөр юугаар зааж байгаагаас үл хамааран хэрэглэнэ гэсэн үг (нэг онцгой тохиолдол нь хуудасны чухал мэдэгдэл өгөгдсөн ямар ч загвар байж болох юм, гэхдээ энэ нь үйлдвэрлэлийн сайтуудад хийх ёстой зүйл биш юм Үүнээс зайлсхийх боломжтой).
Борлуулалтын загвараас илүү давуу чанартай цорын ганц загвар нь уншигчид өөрсдөө хэрэглэдэг хэрэглэгчийн стиль юм. Хэрэв та өөрчлөлтөө ашиглахад асуудалтай байгаа бол элемент дээр inline загварын тохиргоог хийж үзээрэй. Хэрэв та стилийг хэв маягийн загвараар харуулахгүй бол өөр ямар нэг зүйл тохиолдож байгааг та мэднэ.
Шугамын загварууд нь хялбар бөгөөд хурдан нэмэх бөгөөд та өөрчлөлт хийхийг хүсч буй элемент рүү шууд загварыг нэмж байгаа тул зөв CSS сонгогчийг бичихэд санаа зовох шаардлагагүй байдаг (тэр элемент нь таны гадаад бичгийн хэлбэрээр ). Та шинэ баримт бичгийг (гадаад стилийн хуудасны адил) үүсгэх эсвэл документын толгойдоо шинэ элементийг (дотоод загварын хуудас шиг) үүсгэх шаардлагагүй. Та бараг бүх HTML элементэд хүчинтэй хэв загварын шинж чанарыг нэмж өгнө. Эдгээр нь та бүхэнд яаж загварыг ашиглахыг хүсч байгаа бүх шалтгаанууд юм, гэхдээ та энэ аргыг ашиглахад маш чухал ач холбогдолтой сул талыг мэдэж байх ёстой.
Шугамын загварын сул талууд
Товчлолын загвар нь тэдгээрийн хамгийн онцлогтой учир тэдгээрийг хүсээгүй зүйлсээ хэтэрхий давах боломжтой байдаг. Тэд мөн CSS-ийн хамгийн хүчирхэг хүчин зүйлсийг нэгтгэдэг - ирээдүйд шинэчлэлт, загварын өөрчлөлтийг удирдахад илүү төвөгтэй болгохын тулд нэг төв CSS файлаас загварын хэв маяг болон вэб хуудаснуудаас олон боломжуудыг үгүйсгэдэг.
Хэрэв та зөвхөн тоон хэлбэрийг ашиглах шаардлагатай бол таны бичиг баримтууд нь түргэн болж, хадгалагдахад маш хэцүү байдаг. Учир нь тэдгээрийг хүссэн элемент бүрт тойм хэлбэрийг хэрэглэнэ. Хэрвээ та бүх үсэгнүүдээ "Arial" фонттой гэр бүлдээ оруулахыг хүсч байгаа бол , та өөрийн документын
таг бүрт inline style нэмэх хэрэгтэй. Энэ нь дизайнерын хувьд засварын ажлыг аль алийг нь уншигчдад зориулж засах цагийг нэмж өгдөг тул энэ хуудсан дээрх хуудсууд дээр энэ фонтын гэр бүлээ өөрчлөхөд хэрэгтэй болно. Өөрөөр, хэрэв та тусдаа загварын хуудсаа хэрэглэвэл нэг цэг дээр үүнийг өөрчилж, хуудас бүрийг шинэчлэх боломжтой.
Үнэндээ энэ бол вэб дизайны урагш ахих алхам юм - хаягуудын өдрүүдийг буцаана!
Inline загварын өөр нэг дутагдал нь псевдо-элементүүд болон тэдгээрийн ангиллыг загварчлах боломжгүй юм. Жишээ нь гадны загварын хуудсуудтай бол та зочдод зочилсон, хөдлөх, идэвхитэй, зангилаа өнгөөр хэвлэж болно, гэхдээ доторх загвартай бол та хэв маягийг холбож болно, учир нь энэ нь загварын шинж чанарыг хавсаргав .
Эцэст нь, бид вэб хуудсаа тойм хэлбэрээр хэрэглэхгүй байхыг зөвлөж байна . Учир нь тэд асуудалтай болж, хуудсуудыг илүү ихээр ажиллуулах боломжтой болгодог. Бидний ашигладаг цорын ганц цаг бол бид загварыг хурдан хугацаанд шалгахыг хүсч байгаа үе юм. Нэгэнт энэ элементийг зөв хайж үзсэний дараа бид үүнийг гадаад загварын хуудас руу шилжүүлээрэй.
Женнифер Криннигийн бичсэн өгүүллэг. Жереми Герард засварт хийсэн.