Яагаад энгийн комманд кодчиллыг хялбаршуулдаг вэ?
CSS, эсвэл Cascading Style Sheets нь вэбсайтын дизайны салбарын хүлээн зөвшөөрөгдсөн арга юм. CSS-ийн тусламжтайгаар та хуудасны загвар, өнгө, хэвлэмэл зураг, дэвсгэр зураг болон бусад зүйлсийг хянаж болно. Үндсэндээ, энэ нь харагдах хэв маяг бол CSS нь эдгээр загварыг таны вэбсайтад авчрах арга юм.
Баримтыг CSS хэлбэрээр нэмэх үед баримт бичиг нь удаан хугацаагаар үргэлжилж байгааг анзаарч магадгүй юм. Зөвхөн цөөхөн хуудас бүхий жижигхэн вэбсайт нь ихээхэн хэмжээний CSS файлтай болох ба маш их хэмжээний вэбсайттай маш том сайт нь маш том CSS файлтай байж болно. Үүнийг загварын хуудсанд багтаасан олон төрлийн мессежүүд багтсан хариу урвал сайтай бөгөөд визуал харагдах байдал хэрхэн өөрчлөгдөж, хуудсууд өөр өөр дэлгэц дээр гарч ирдэг.
Тийм ээ, CSS файлууд урттай болох боломжтой. Энэ нь сайтын гүйцэтгэл болон хурдыг татаж авахад асуудал биш юм. Учир нь урт CSS файл ч гэсэн жижигхэн байх магадлалтай (учир нь энэ бол үнэхээр текст документ байдаг). Гэсэн хэдий ч, хуудасны хурдыг багасгахад бага ч гэсэн тооцогддог. Ингэснээр та хэв маягийг бүтээх боломжтой бол энэ нь зөв санаа юм. Энд байгаа "коммент" нь таны хэв маягийн хуудсанд маш тохиромжтой байдаг.
Комасс ба CSS
CSS сонголтын синтакс дахь коммандын үүрэг юу вэ гэж та гайхаж байж магадгүй юм. Өгүүлбэрүүдийн адилаар таслал нь тусгаарлах-код биш кодыг авчирдаг. CSS-ийн сонгон шалгаруулагч коммандууд нь ижил загварын хүрээнд олон сонголтын хэсгийг салгана.
Жишээ нь доорх CSS-г үзье.
th {color: red; }
td {color: red; }
p.red {color: red; }
div # firstred {color: red; }
Энэ синтаксийг ашиглан та улаан өнгийн шошготой, шошго хаяг, догол мөрний шошгыг хүсч байгаагаа илэрхийлж байна, мөн ID-тай хамт DI-ийн шошго нь бүгд хэв маяг улаан өнгөтэй байхаар буудсан гэсэн үг юм.
Энэ нь CSS хүлээн зөвшөөрөхүйц байх боловч энэ аргаар бичихэд хоёр чухал сул тал бий:
- Ирээдүйд, эдгээр шинж чанаруудын цэнхэр өнгийг өөрчлөхийг шийдвэл та энэ загварын өөрчлөлтийг 4 удаа хийх хэрэгтэй.
- Энэ нь танд хэрэггүй загварын хэв маяг дээр маш олон тэмдэгтийг нэмдэг. Эдгээр 4 загвар нь хэтэрхий давтагдашгүй мэт санагдаж болох ч, хэрэв та бүхэл загварын хуудсандаа үргэлжлүүлэн хийх юм бол мөрүүд нэмж, тэр хуудас нь илүү их байх болно.
Эдгээр сул талуудаас зайлсхийж, таны CSS файлыг сайжруулахын тулд бид таслал ашиглана уу.
Комасуудыг Тусгаарлагч сонгогчдод ашиглах нь
4 бие даасан CSS сонгон шалгаруулагч болон 4 дүрмийг бичихийн оронд эдгээр бүх загварыг нэг дүрмээр нэгтгэж, сонгон шалгаруулагчдыг таслалаар тусгаарлаж болно. Үүнийг хэрхэн хийхийг дор харуулав:
th, td, p.red, div # firstred {color: red; }
Тухайн коммандын тэмдэгт нь "сонгон шалгаруулагч" дотор "ба" гэсэн үгээр илэрхийлэгддэг. Тиймээс энэ нь t h тагууд болон td хаягууд болон догол мөрүүд улаан гэсэн ангилал бүхий догол мөрүүд хамаарна Мөн ID скрипттэй хамт DIV tag. Энэ нь яг өмнө нь байсан байсан, гэхдээ 4 CSS дүрмүүд шаардахын оронд олон сонгон шалгаруулагчтай ганц дүрэм байдаг. Энэ нь сонгон шалгаруулагч командын утга юм.
Зөвхөн энэ аргыг илүү уян хатан, цэвэр CSS файлуудаар хийдэг төдийгүй ирээдүйн шинэчлэлтүүдийг илүү хялбар болгодог. Хэрэв та өнгийг улаанаас цэнхэр болгохыг хүсч байгаа бол зөвхөн анхны 4 дүрмийн дүрмийг өөрчлөхийн оронд зөвхөн нэг байрлалд өөрчлөлт хийх шаардлагатай! Бүх цаг үеийн туршид хадгалагдсан CSS файлыг хадгалж, энэ нь урт хугацааны туршид зай, цагийг хэмнэх болно.
Синтаксын өөрчлөлт
Зарим хүмүүс CSS-г илүү сайн мэддэг болгохын тулд сонгон шалгаруулагч бүрийг өөрийн мөрөн дээр салгахаар сонгож, үүнийг бүгдийг нэг мөрөн дээр бичихийн оронд бичих хэрэгтэй. Үүнийг хэрхэн хийх вэ:
р,
td,
хуучирсан,
div # firstred
{
өнгө: улаан;
}
Дараа нь сонгон шалгаруулагч бүрийн дараа таслал тавьж, дараагийн сонгон шалгаруулагчийг өөрийн мөрөнд хуваахын тулд "оруул" ашиглана уу. Та эцсийн сонголтын дараа комманд нэмэхгүй.
Өөрийн сонгон шалгаруулагчдын хоорондох зайг ашигласнаар ирээдүйд шинэчлэлт хийхэд хялбар, илүү хялбархан загварын хуудас үүсгэх бөгөөд өнөөдөр уншихад хялбар юм!
Женнифер Кэрнин эх нийтлэл. 5/8/17 дээр Жереми Герард засварлав