Cascading Style Sheets гэж юу вэ?
Вэбсайтууд нь зураг, текст, төрөл бүрийн баримт бичиг бүхий хэд хэдэн ширхэгээс бүрдэнэ. Эдгээр баримт бичгүүд нь PDF файлууд гэх мэт төрөл бүрийн хуудсуудтай холбоотой байж болох төдийгүй HTML хуудас гэх мэт хуудсын бүтэц болон CSS (Cascading Style Sheet) баримтуудыг тодорхойлохын тулд хуудсуудыг өөрсөддөө бүрдүүлэхэд хэрэглэгддэг баримт бичгүүдийг агуулдаг. хуудасны харагдах байдлыг тодруулах. Энэ нийтлэл нь өнөөдрийн вэбсайт дээр юу байгааг, мөн хаана байгаа вэб хуудсан дээр ашиглагдах CSS-г судлах болно.
CSS Түүхийн хичээл
CSS нь анх 1997 онд вэб хөгжүүлэгчдэд зориулан хийсэн вэб хуудсын харагдах байдлыг тодорхойлох аргаар боловсруулсан. Энэ нь веб мэргэжилтнүүд вебсайтын кодын агуулгын бүтэц, бүтцийг энэ үеийнхээс өмнө боломжгүй байсан зүйлээс харуулах зорилготой байжээ.
Бүтэц, хэв маягийг тусгаарлах нь HTML нь анхнаасаа вэб хуудасны дизайны болон зохион байгуулалтын талаар санаа зовохгүйгээр функцын тэмдэглэгээнд суурилсан функцийг илүү сайн гүйцэтгэх боломжийг олгодог. Энэ нь "харагдах болон мэдрэх" хуудасны хуудас.
CSS вэб хөтөч нь энэ маркийн хэлний үндсэн фонт болон өнгөт талаас илүүг ашиглаж вэбсайт хөтчөөс 2000 орчим хүртэл алдартай болж чадаагүй. Өнөөдөр бүх орчин үеийн хөтөчүүд CSS Level 1 бүх CSS-ийн Түвшин 2-ын ихэнхийг дэмжиж, CSS Level 3-ийн ихэнх асуудлуудыг ч дэмждэг. CSS-г үргэлжлүүлэн хөгжүүлж, шинэ загварыг нэвтрүүлсэнээр вэб хөтөч нь шинэ CSS дэмжлэгийг хөтлөгчид рүү хөтөлж, вэбсайт дизайнеруудтай ажиллах шинэ хүчирхэг загвар үүсгэх модулийг хэрэгжүүлж эхлээд байна.
Вэбсайтыг зохиох, хөгжүүлэхэд CSS ашиглахаас татгалзсан хэд хэдэн вэбсайт дизайнерүүд байсан боловч энэ нь өнөөгийн аж үйлдвэрээс алга байна. CSS нь вэб дизайныг өргөнөөр ашигладаг бөгөөд та энэ хэлийг үндсэн ойлголтонд оруулаагүй өнөөгийн аж үйлдвэрт ажиллаж буй хэн нэгнийг хайж олоход хэцүү болно.
CSS нь товчлол юм
Өмнө дурдсанчлан, CSS гэсэн нэр томъёо нь "Cascading Style Sheet." Эдгээр баримт бичгүүд юуг илүү бүрэн тайлбарлахын тулд энэ өгүүлбэрийг жаахан доошлуулцгаая.
"Загварын хуудас" гэсэн үг нь баримтыг өөрөө илэрхийлдэг (HTML гэх мэт, CSS файлууд нь үнэхээр төрөл бүрийн програмуудаар засварлаж болох текст баримтууд юм). Style хуудас олон жилийн турш баримт бичгийн дизайн хийхэд ашиглагддаг. Тэд бол хэвлэмэл эсвэл интернетэд байрладаг зохион байгуулалтын техникийн үзүүлэлт юм. Хэвлэх дизайнерууд загварыг урт хугацаанд ашигладаг бөгөөд тэдгээрийн загвар нь яг өөрийнх нь тодорхойлолтоор хэвлэгддэг гэдгийг баталгаажуулдаг. Вэб хуудсын загварын хуудас нь ижил зорилготой байдаг боловч энэ нь баримтын харагдацыг хэрхэн үзүүлэхийг вэб хөтчийг хэлэх нэмэлт функцийг агуулсан байдаг. Өнөөдөр CSS загварын хуудас нь медиа асуулга ашиглаж янз бүрийн төхөөрөмжүүд болон дэлгэцийн хэмжээнээс хамаарч өөр өөр төрлийн хуудсыг хайж олох боломжтой . Энэ нь маш чухал ач холбогдолтой бөгөөд энэ нь нэг HTML баримтыг түүнд хандах дэлгэцийн дагуу өөрөөр үзүүлэх боломжийг олгодог.
Cascade бол "cascading style sheet" нэр томъёоны онцгой хэсэг юм. Вэб загварын хуудас нь хүрхрээ дээгүүр голын нэгэн адил энэ хуудсан дээрх цуврал хэв маягаар дамжин өнгөрүүлэх зорилготой юм. Голын ус нь хүрхрээн дэх бүх хад чулуудалд автдаг. Гэтэл доод талд байгаа ус нь ус урсдаг. Вэб хуудасны загварын хуудсан дахь каскад мөн адил.
Вэб дизайнер ямар ч загвар хэрэглэхгүй байсан ч гэсэн вэб хуудас бүр дор хаяж нэг загварын хуудас нөлөөлсөн. Энэ загварын хуудас нь хэрэглэгчийн агентлагийн загварын хуудас бөгөөд бусад хөтөч байхгүй тохиолдолд вэб хөтөч нь хуудсыг харуулах үндсэн загвар гэж нэрлэдэг. Жишээ нь анхдагч hyperlinks нь хөх өнгөтэй бөгөөд доогуур зураастай байна. Эдгээр загвар нь вэб хөтөчийн анхдагч загварын хуудаснаас гардаг. Хэрэв вэб дизайнер бусад заавруудыг өгч байгаа бол хөтөч нь ямар зааврыг урьдчилан мэдэх шаардлагатай. Бүх хөтөч өөрсдийн үндсэн хэв маягийг агуулсан байдаг боловч тэдгээрийн ихэнх нь (цэнхэр доогуур зураастай текстийн холбоос гэх мэт) бүх эсвэл ихэнх гол хөтчүүд болон хувилбаруудын хооронд хуваалцдаг.
Браузерын анхдагч жишээ нь миний вэб хөтөч дээр үндсэн үсгийн фонт нь " Times New Roman " 16-р хэмжээтэй гарч ирэв. Миний зочлох хуудсуудын бараг аль ч үсгийн болон гэр бүлийнх нь үсгийн хэмжээ харагдахгүй байна. Энэ нь дизайнерууд өөрсдөө тохируулсан хоёр дахь хэв маяг хуудас, фонтны хэмжээ , гэр бүлийн хэмжээг дахин тодорхойлох, вэб хөтчийнхөө анхдагчуудыг дарж өөрчлөхийг тодорхойлж байгаа юм. Вэб хуудсанд зориулж үүсгэсэн загварын хуудаснууд нь хөтөчийн анхдагч загвараас илүү өвөрмөц шинжтэй байх болно, тэгэхээр таны загварын хуудас тэдгээрийг дарж бичихгүй тохиолдолд анхдагчууд л хэрэглэгдэнэ. Хэрвээ холбоосууд цэнхэр, доогуур зураастай байхыг хүсвэл та үүнийг анхдагчаас хойш хийх шаардлагагүй, гэхдээ хэрэв таны вэбсайтын CSS файл нь холбоос нь ногоон байх ёстой гэж үзвэл өнгө нь цэнхэр өнгөөр дарна. Доорх зураас энэ жишээнд үлдэх болно, учир нь өөрөөр заагаагүй байна.
Ашигласан CSS хаана байна?
CSS нь веб хөтөчөөс өөр вэбсайт дээр үзэхэд вэб хуудас хэрхэн харагдахыг тодорхойлж өгдөг. Жишээлбэл, та вэб хуудас хэрхэн хэвлэхийг тодорхойлж өгдөг хэвлэх загварын хуудас үүсгэж болно. Уншигдах товчлуурууд эсвэл вэб маягт зэрэг вэб хуудсууд нь хэвлэгдэх хуудсан дээр ямар ч зорилгогүй тул хуудас хэвлэгдэх үед эдгээр хуудсуудыг "унтрааж" хэвлэнэ. Олон сайт дээр үнэхээр нийтлэг байдаггүй боловч хэв маягийн хуудсуудыг үүсгэх сонголт нь хүчирхэг, сонирхолтой байдаг. (Миний туршлагад - ихэнх вэбсайт мэргэжилтнүүд энэ нэмэлт ажлыг хийхийг шаарддаггүй тул төсвийн хамрах хүрээг шаарддаггүй ).
CSS яагаад чухал вэ?
CSS нь веб дизайнераас суралцах хамгийн хүчирхэг хэрэгсэлүүдийн нэг юм. Учир нь та вэбсайтын харагдах бүхэлд нь нөлөөлж чадна. Зөв бичгийн хэв маягийн хуудсыг хурдан шинэчилж, сайтууд дээр харагдах байдлыг урьдчилан харах боломжтой болгодог бөгөөд ингэснээр өөрчлөлтүүдийг ямар ч өөрчлөлтгүйгээр HTML тэмдэглэгээнд хийх шаардлагагүй зочинд анхаарал хандуулах болно.
CSS-ийн гол сорилт бол өдөр бүр өөрчлөгдөж байдаг хөтчүүдийг сурахад нэлээд бага зүйл шаардагддаг бөгөөд өнөөдөр юу нь сайн ажилладаг нь маргааш ойлгомжгүй байж магадгүй тул шинэ хэв маяг дэмжигдэх, бусад нь уналтанд орсон, эсвэл нэг шалтгааны улмаас .
CSS нь дүрэм журмыг дагаж мөрдөж, янз бүрийн хөтчүүд хэрхэн удирдамжуудыг өөр өөрөөр тайлбарлаж, хэрэгжүүлж болохыг авч үзье. CSS нь энгийн HTML-ээс илүү хэцүү байж болно. CSS нь браузерт HTML-д үнэхээр тийм биш байдлаар хувиргадаг. CSS ашиглахаас эхлээд та загварын хуудасны хүчийг ашиглах нь танд вэб хуудас хэрхэн байршуулж, тэдний харагдах байдал болон мэдрэмжийг тодорхойлоход танд тааламжтай уян хатан байдлыг өгөх болно. Замынхаа дагуу та ирээдүйд ажиллаж байсан хэв маяг, арга барилынхаа аргуудыг цуглуулж, ирээдүйд шинэ вэбсайт бүтээхэд та дахин хандаж болох юм.
Женнифер Кэрнин эх нийтлэл. 7/5/17-нд Жереми Герард засварлав.