Cascading Style Sheets буюу CSS нь вэб хуудсыг хэрхэн харахыг хэлдэг хэл юм. CSS нь вэбсайтын энгийн бүтцэд өнгө, хэв маяг, зохион байгуулалтыг нэмдэг. Та сайхан, дэгжин харагдахын тулд хувцсаа сонгож авдаг шиг CSS вэб хуудсыг гоёж, сэтгэл татам харагдахад тусалдаг. Вэб хөгжүүлэлтийн хувьд бид хуудасны текст болон хайрцагны өнгө, хэмжээ, байрлалыг өөрчлөхийн тулд CSS ашигладаг. Энэ хичээл нь танд энгийн хэлээр CSS-ийн үндсийг танилцуулах болно. Бид CSS гэж юу болох, яагаад чухал болох, HTML-тэй хэрхэн ажилладаг талаар суралцах болно.
CSS нь Cascading Style Sheets гэсэн үгийн товчлол юм. Энэ нь вэб хуудсуудыг загварчлахад ашигладаг тусгай хэл юм. CSS-ийг барилгын будаг, чимэглэл гэж төсөөлөөд үз дээ. Барилга нь HTML-ээр хийгдсэн бөгөөд CSS нь үүнийг үзэсгэлэнтэй болгодог. CSS-ийг ашигласнаар та вэб хуудасныхаа арын дэвсгэр өнгө, үсгийн хэв маяг, элементүүдийн эргэн тойрон дахь зайг өөрчлөх боломжтой. CSS нь вэб дизайнеруудад вэбсайтыг илүү сайхан, хөгжилтэй болгоход тусалдаг хэрэгсэл юм.
Та зураг зурж байна гэж төсөөлөөд үз дээ. Зургийн шугамууд нь вэбсайтын үндсэн бүтэцтэй адил юм. CSS нь зурагт амьдрал нэмдэг өнгийн харандаа, тэмдэглэгээтэй адил юм. Хэдхэн энгийн дүрмийн дагуу та зурсан зургаа энгийнээс өнгөлөг болгон өөрчилж болно!
CSS-ийг вэбсайтуудыг дур булаам, хэрэглэхэд хялбар болгоход ашигладаг. Энэ нь хэв маягийг агуулгаас нь тусад нь хадгалдаг. Энэ нь хуудас дээрх үг, зураг (HTML-ээр хангагдсан) хэвээр үлддэг бол CSS нь хэрхэн харагдахыг хянадаг гэсэн үг юм. Загварыг шинэчлэх үед агуулгыг өөрчлөх шаардлагагүй. Энэхүү тусгаарлалт нь вэб хөгжүүлэгчдэд илүү хурдан ажиллахад тусалж, сайтуудыг зочлоход илүү таатай болгодог.
CSS-ийг сонгосон хувцас шигээ бодоорой. Өөр хувцас өмссөн бол өөр харагдах ч нэг л хүн. CSS нь вэбсайт дээрх мэдээллийг өөрчлөхгүйгээр түүний харагдах байдлыг өөрчилдөг. Энэ нь зөвхөн нэг CSS файлыг засварлах замаар вэбсайтын дизайныг шинэчлэхэд хялбар болгодог.
CSS нь HTML-тэй хамт ажилладаг. HTML бол вэб хуудасны хаашаа явж байгааг тодорхойлох үндэс суурь юм. Дараа нь CSS нь өнгө, фонт, хэв маягийг нэмэхийн тулд ирдэг. Хөтөч вэб хуудсыг ачаалахдаа эхлээд HTML-ээр бүтцийг бүтээж, дараа нь CSS-д тодорхойлсон загваруудыг ашигладаг.
CSS нь дүрмийн багц хэлбэрээр бичигдсэн байдаг. Дүрэм бүр нь сонгогч ба мэдэгдлийн блок гэсэн хоёр хэсэгтэй. Сонгогч нь хөтчид аль HTML элементийг загварчлахыг зааж өгдөг. Мэдэгдлийн блок нь нэг буюу хэд хэдэн мэдэгдлийг агуулна. Тунхаглал бүр өмч, үнэ цэнэтэй байдаг. Үл хөдлөх хөрөнгө нь таны өөрчлөхийг хүсч буй зүйл бөгөөд утга нь үүнийг хэрхэн өөрчлөхийг хэлж өгдөг.
Жишээлбэл, хуудасны дэвсгэр өнгийг цайвар цэнхэр болгож тохируулахын тулд та дараах дүрмүүдийг бичиж болно.
<код>бие {
дэвсгэр өнгө: цайвар цэнхэр;
}</code>Энэхүү энгийн дүрэм нь бүх хуудасны дэвсгэрийг өөрчилдөг.
Үндсэн CSS дүрэм нь энгийн хэв маягийг дагадаг. Энэ нь сонгогч болон шинж чанар, утгын блокыг харуулдаг. Загвар нь иймэрхүү харагдаж байна:
<код>сонгогч {
өмч: үнэ цэнэ;
}</code>Энд сонгогч нь аль HTML элементийг чиглүүлэхээ сонгоно. Үл хөдлөх хөрөнгө нь таны өөрчлөхийг хүсч буй зүйл бөгөөд үнэ цэнэ нь таны өөрчлөхийг хүсч буй зүйл юм.
Жишээлбэл, хэрэв та бүх догол мөрний текстийг цэнхэр өнгөтэй болгохыг хүсвэл дараах зүйлийг бичнэ үү.
<код>х {
өнгө: цэнхэр;
}</code>Энэ дүрэм нь вэб хөтөчид <p> (догол мөр) элемент бүр цэнхэр тексттэй байх ёстойг хэлдэг.
CSS сонгогч нь таны вэб хуудасны аль элементэд загварын дүрмэнд нөлөөлөхийг сонгох боломжийг танд олгоно. Хэд хэдэн төрлийн сонгогч байдаг бөгөөд тус бүр нь арай өөрөөр ажилладаг.
Эдгээр өөр өөр сонгогчид нь вэб хуудасныхаа тодорхой хэсгийг загварчлахад маш их хүчийг өгдөг. Эдгээр нь элементүүдийг яг таг чиглүүлэх, хэрхэн харагдахыг шийдэх боломжийг олгодог.
CSS нь вэб хуудсаа загварчлахад ашиглаж болох олон төрлийн шинж чанаруудыг өгдөг. Өмч бүр нь элементийн харагдах байдлын тодорхой хэсгийг өөрчлөх боломжийг танд олгоно. Зарим нийтлэг шинж чанарууд нь:
CSS шинж чанар бүрийн араас утгыг оруулна. Жишээлбэл, текстэд улаан өнгө өгөхийн тулд та дараах зүйлийг бичиж болно.
<код>х {
өнгө: улаан;
}</code>Энэхүү энгийн дүрэм нь бүх догол мөрийг улаан тексттэй болгодог. Үл хөдлөх хөрөнгийн өнгө нь текст хэрхэн харагдахыг удирдаж, улаан утга нь ямар өнгөтэй байхыг зааж өгдөг.
CSS-ийн "cascading" гэдэг үг нь хэв маяг нь нэг дүрмээс нөгөөд шилжих боломжтой гэсэн үг юм. Хэрэв ижил элементэд хоёр дүрэм үйлчилж чадвал аль нь ялахыг захиалга шийдэж болно. Энэ нь нэг блок нь заримдаа нөгөөгийнхөө хэсгийг хамардаг блокуудыг овоолсонтой төстэй юм.
Нэг нийтлэг дүрэм бол HTML элемент дотор шууд бичигдсэн загварууд (inline styles гэж нэрлэдэг) нь таны CSS файлын хэв маягийг дарах болно. Өөр нэг дүрэм бол хэрэв эх элементийг загварчилсан бол өөрөөр заагаагүй бол түүний хүүхэд элементүүд тэр хэв маягийг өвлөн авч болно.
Жишээлбэл, хэрэв та <div>-ийн текстийн өнгийг ногоон болгож тохируулсан бол удамшлын улмаас <div> доторх текст мөн ногоон өнгөтэй харагдана. Энэ нь вэб хуудсан дээр тогтвортой дизайныг хадгалахад тусалдаг.
CSS-ийн тусламжтайгаар та өнгийг олон янзаар өөрчлөх боломжтой. Та улаан , цэнхэр , ногоон гэх мэт нийтлэг өнгөний нэрийг ашиглаж болно. Та мөн улаан өнгөний хувьд <code>#FF0000</code> гэх мэт арван зургаатын тоот кодыг эсвэл <code>rgb(255, 0, 0)</code> гэх мэт RGB утгыг ашиглаж болно.
Фонтууд нь CSS-ийн өөр нэг чухал хэсэг юм. Үсгийн фонт нь дэвтэр дээрээ сонгосон гар бичмэлийн хэв маягтай адил юм. CSS дээр та үсгийн төрөл, хэмжээ, жин, хэв маягийг өөрчлөх боломжтой. Жишээлбэл, хэрэв та догол мөрүүдийг Arial дээр харуулахыг хүсвэл дараахыг ашиглаж болно:
<код>х {
font-family: Arial, sans-serif;
}</code>Энэ дүрэм нь хөтчид текстийг байгаа бол Arial фонтоор харуулах, байхгүй бол өөр ижил төстэй фонт ашиглахыг заадаг.
CSS-ийн тусламжтайгаар өнгө, фонтыг өөрчлөх нь текстийг уншихад хялбар, таны вэб хуудсыг харахад илүү сонирхолтой болгодог.
CSS Box Model нь элементийн өөр өөр хэсгүүдийг хуудсан дээр хэрхэн байрлуулж байгааг ойлгох арга юм. Элемент бүр хайрцаг шиг. Хайрцагны загвар нь дөрвөн хэсгээс бүрдэнэ.
Гэрэл зургийг төсөөлөөд үз дээ. Зураг нь өөрөө агуулга юм. Гэрэл зургийг хүрээлж буй дэвсгэр нь дэвсгэртэй адил юм. Энэ бүгдийг нэгтгэж буй хүрээ нь хил юм. Мөн хүрээний эргэн тойрон дахь зай нь захын зай юм. Энэ загварыг ашигласнаар та дизайныхаа бүх хэсгүүдийг зохих зай, тэнцвэртэй байлгах боломжтой.
CSS нь зөвхөн өнгө, фонтын тухай биш юм; Энэ нь мөн вэб хуудасны элементүүдийг зохион байгуулахад тусална. Үүнийг зохион байгуулалт ба байрлал гэж нэрлэдэг. CSS-ийн тусламжтайгаар та элемент бүр хуудасны хаана харагдахыг шийдэж болно.
Вэб хуудасны байршлыг хянах хэд хэдэн арга байдаг бөгөөд үүнд:
Эдгээр зохион байгуулалтын техникийг ашиглах нь тоглоомыг тавиур дээр байрлуулахтай адил юм. Тоглоом бүр нь хангалттай зайтай, цэвэрхэн харагдахын тулд хаашаа явахаа шийднэ. Энэ нь таны вэб хуудсыг илүү эмх цэгцтэй, сонирхолтой болгодог.
HTML болон CSS хэрхэн хамтран ажилладаг тухай жишээ энд байна. Энэ жишээ код нь зарим загвартай энгийн вэб хуудсыг харуулж байна:
<код><!DOCTYPE html>
<html>
<толгой>
<загвар>
бие {
дэвсгэр өнгө: цайвар цэнхэр;
}
h1 {
өнгө: хөх;
үсгийн хэмжээ: 24px;
}
p {
өнгө: ногоон;
үсгийн хэмжээ: 18px;
}
</style>
</head>
<бие>
<h1>Миний анхны вэб хуудас</h1>
<p>Энэ бол CSS ашиглан загварчилсан энгийн вэб хуудас юм.</p>
</body>
</html></code>Энэ код нь цайвар цэнхэр дэвсгэр өнгө бүхий вэб хуудсыг үүсгэдэг. Толгойн текст нь хөх, догол мөрний текст нь ногоон өнгөтэй байна. <code><style></code> таг доторх CSS нь дүрэм хэрхэн бичиж, хэрэглэгдэж байгааг харуулдаг.
Та HTML-дээ CSS-ийг үндсэн гурван аргаар нэмж болно. Нөхцөл байдлаас шалтгаалан арга бүр өөрийн гэсэн хэрэглээтэй байдаг.
Гадаад арга нь HTML-г цэвэр байлгаж, олон хуудасны хэв маягийг нэг дор шинэчлэх боломжийг олгодог тул мэргэжлийн вэб хөгжүүлэлтэд хамгийн түгээмэл байдаг.
CSS нь олон талаараа маш их тустай. Вэб хөгжүүлэлтэнд CSS ашиглахын зарим давуу талууд энд байна.
CSS ашиглах нь тусгай хэрэгслийн хайрцагтай адил юм. Хэрэгслийн хайрцагт байгаа хэрэгсэл бүр нь вэб хуудсаа хялбархан сайжруулахад тусална. Дасгал хийх явцдаа CSS вэб сайтыг үзэсгэлэнтэй, хэрэглэгчдэд ээлтэй болгоход хэр хүчтэй болохыг харах болно.
Таны зочилсон вэбсайт бүр ямар нэгэн байдлаар CSS ашигладаг. Таны дуртай хүүхэлдэйн киноны сайтуудаас сургуулийн төслийн хуудас хүртэл CSS нь хөгжилтэй, уншихад хялбар зураглал үүсгэхэд тусалдаг. Цэвэрхэн зайтай, тодорхой текст бүхий өнгөлөг вэб хуудсыг харахад CSS ажиллаж байна.
Тоглоом, хүүхэлдэйн кино, онлайн түүх зэрэг алдартай вэбсайтуудын дизайныг анхаарч үзээрэй. Өнгө, фонт, бүдүүвчийг сайтар бодож ашиглах нь эдгээр вэбсайтуудыг сэтгэл хөдөлгөм, сонирхолтой болгоход тусалдаг. CSS нь программууд болон гар утасны сайтуудад ашиглагддаг бөгөөд агуулгыг том дэлгэц болон жижиг утсан дээр сайн харагдуулдаг.
Өдөр тутмын амьдралд CSS нь өрөөг засахтай адил юм. Та өрөөнийхөө загварыг сонгож, өнгө өнгийн зураг өлгөж, тавилгаа цэгцтэй байрлуулж болно. CSS нь вэбсайтуудын хувьд ижил зүйлийг хийдэг. Энэ нь дижитал орон зайд дэг журам, гоо үзэсгэлэнг авчирч, зочдод тааламжтай болгодог.
CSS-ийн талаар бидний олж мэдсэн гол санаанууд энд байна:
CSS нь вэб хөгжүүлэлтийн чухал хэсэг бөгөөд сайтуудыг үзэсгэлэнтэй, удирдахад хялбар болгодог. Та илүү ихийг судалж, өөрийн вэб хуудсаа бүтээхдээ CSS нь таны бүтээлч байдлыг илэрхийлэх хэрэгсэл гэдгийг санаарай. Өнгө, фонт, бүдүүвч зэргийг туршиж үзээрэй, учир нь өчүүхэн өөрчлөлт бүр сайн дизайнтай вэб сайтын ид шидийг нэмж өгдөг.
Дуртай вэб сайтаа үргэлжлүүлэн дасгал хийж, ажиглаарай. Таны анхаарлыг татаж, тааламжтай мэдрэмжийг бий болгохын тулд янз бүрийн хэв маягийг хэрхэн ашигладаг болохыг анзаараарай. Цаг хугацаа өнгөрөхөд та CSS нь энгийн HTML бүтцийг нүдээр харуулах вэб хуудас болгон хувиргахад ямар хүчтэй болохыг харах болно.