CSS сонгон шалгаруулагчийн. сонгон шалгаруулагчийн төрөл

тус бүр нь та тухайн өнгийг тохируулах хүсэж байна. Хэрхэн үүнийг хийх вэ? Стандарт CSS сонгох асуудал нь тэд нэг дор бүх блок зориулсан параметрүүдийг зааж, хаягууд нь тохиромжтой биш байдаг. шийдэл нь энгийн байдаг. Ангийн гишүүдээс хүс. анги = 'цэнхэр', гурав дахь - - анги = "ногоон" Жишээ нь эхний DIV анги = 'улаан', хоёр дахь хүлээн авч уулзлаа. Одоо тэд CSS хүснэгтийг ашиглан сонгож болдог.

синтакс дараах байдалтай байна: оноо ( "."), ангийн нэрийг бичиж, дараа нь заана. Эхний нэгжийг удирдахын тулд .red барьж ашиглаж байна. Хоёрдугаар - гэх .blue болон.

Чухал! Энэ анги шинж чанарын утга учиртай утгыг хэрэглэхийг зөвлөж байна. Энэ хөрвүүлэлт (жишээ нь, krasiviy-blok), эсвэл захидал / тоо санамсаргүй хослол (ojfh834871) ашиглаж муу хэлбэр гэж үздэг. Энэ код нь та дараа төсөлд оролцож болно хүмүүст тулгарах болно бэрхшээл энд дурьдах нь биш, будлиантай авах үүрэг байдаг. хамгийн сайн сонголт - Ийм BEM шиг, ямар ч арга зүйг ашиглах талаар.

Давуу тал - Харьцангуй өндөр уян хатан.

Сул тал - олон элементүүд нэг ижил анги, тэд нэгэн зэрэг засварлах болно гэсэн үг байж болох юм. асуудал хөрвүүлэлтэнд хэрэглэгддэг процессорууд аргачлал, түүнчлэн өвийг ашиглан шийдэж байна. Тэд маш их ажлыг хялбаршуулах, гараа бага sass, эсвэл өөр ямар нэг процессор авах хэрэгтэй.

ID сонгогч

энэ хувилбарын тухай санал хамрагдсан болон програмчид тодорхой бус байна. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. буруу хэрэглэх тэд өв нь асуудал үүсгэж болох юм, учир нь зарим нь CSS хичээлүүд, ID ашиглахыг санал болгож байна. Гэсэн хэдий ч, олон шинжээчид идэвхтэй байдаг зохион даяар тэднийг зохион байгуулна. Та шийдвэр. # »), затем имя блока. фунт тэмдэг ( "#"), блок дараа нэр: синтакс дараах байдлаар байна. #red. Жишээ нь, #red.

отличается от класса по нескольким параметрам. ID хэд хэдэн аргаар ангиас ялгаатай. ID. Нэгдүгээрт, хуудас нь хоёр ижил ID байж болохгүй. Тэд өвөрмөц нэр өгсөн байна. Хоёрдугаарт, ийм сонгогч илүү өндөр давуу эрхтэй. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Энэ нь та нэгж ангийг улаан зааж байвал, CSS хүснэгтүүдэд улаан зааж гэсэн үг суурь өнгө, дараа нь мөн ID цэнхэр түүнд оноож, цэнхэр өнгийг зааж, нэгж цэнхэр эргэж болно.

Давуу тал - Та хаягууд болон ангийн хэв маягийг үл тоомсорлож, тодорхой элементийг хянаж болно.

ID и class. Сул тал - хялбар ID болон ангийн тооны алдсан авах.

Чухал! ID вам, в общем-то, не нужны. Хэрэв та өөртөө BEM аргачлал (эсвэл түүний аналоги), ID ашиглаж байгаа бол, ер нь хэрэгтэй байна. Энэ арга нь байршил өвөрмөц ангиллын илүү тохиромжтой ашиглах явдал юм.

нийтийн сонгогч

{}. Синтакс нь: Starlets тэмдэг ( "*") болон хаалт, өөрөөр хэлбэл, {*} ...

нэг удаа тодорхой шинж чанаруудыг хуудасны бүх элементүүдийг зааж байсан. Энэ нь ашигтай байж болох вэ? box-sizing: border-box. Жишээ нь, та хуудас өмчийн хайрцаг-гуудын тогтоосон хүсэж байгаа бол: хилийн хайрцаг. div *{}. Зөвхөн баримт бичгийн бүх бүрэлдэхүүн хэсгийг удирдах ашиглаж чадахгүй байгаа ч, жишээ нь заасан блок бүх хүүхэд, хянах, DIV * {}.

Давуу тал - Та нэг удаа зүйлсийн олон тооны хянаж болно.

Байг - нь хангалттай биш, уян хатан сонголт. Үүнээс гадна, энэ сонгон шалгаруулагч ашиглах, зарим тохиолдолд доош хуудас ажлыг удаашруулж.

шинж чанаруудыг өөр

Энэ нь тодорхой шинж элементийг хяналт тавих боломжтой болдог. Жишээ нь, та өөр өөр шинж чанар төрлийн оролтын хаягууд хэд хэдэн байна. Тэдний нэг нь - текст, хоёр дахь - нууц үг, гурав дахь - тоо. Мэдээж та анги эсвэл ID бүрт тохируулж болно, гэхдээ энэ нь үргэлж тохиромжтой биш юм. шинж чанаруудын CSS сонгох асуудал энэ нь байж болох хамгийн дээд нарийн тодорхой хаягууд утгуудыг зааж өгөх хэрэгтэй. Жишээ нь, энэ мэт:

оруулах [төрөл = 'текст'] {}

Энэ нь сонгогч оруулах текст төрлийн бүхий л шинж чанаруудыг сонгож болно.

хэрэгсэл нь маш уян хатан бөгөөд хаягууд, ямар шинж чанарууд байж болох ямар ч ашиглаж болно. Гэвч энэ нь бүгд биш шүү дээ! CSS тодорхойлолт бүр ч илүү дөхөм элементүүдийг хянах чадвартай байдаг!

"Нь нэрийг оруулна" болон оролтын агуулагч = "нууц үгээ оруулна уу" = таны хуудас шинж чанар агуулагч нь хувь нэмэр оруулах гэж төсөөлөөд үз дээ. Мөн сонгогч ашиглан сонгож болдог! Үүнийг хийхийн тулд дараах бүтцийг ашиглана:

оруулах [агуулагч = "нэрийг оруулна"] {}, эсвэл оролт [агуулагч = "нууц үгээ оруулна уу"]

шинж чанарууд нь магадгүй илүү уян хатан ажил. нь та ижил төстэй шинж чанарууд нь нэрийг нь (жишээ нь, "Каспийн" болон "Каспийн") нь хаягууд нь хэд хэдэн байна гэж үзье. аль аль нь сонгохын тулд дараах сонголт ашиглана:

[Нэр * = "Kaspiysk"]

CSS нь "Каспийн", өөрөөр хэлбэл. E. болон "Каспийн" болон "Каспийн тэнгис" -ийн бэлэг тэмдэг байдаг гарчиг дахь бүх зүйлсийг сонгоно болно.

Та бас тодорхой тэмдэгт шинж чанаруудыг нь эхэлж хаягуудыг сонгож болно:

[Нэр ^ = "тэмдэгт та хүсэж байна"] {}

эсвэл цуцлах:

[Нэр $ = "зөв тэмдэгт"] {}.

Давуу тал - дээд тал нь уян хатан. Та анги оо өмөөрч ямар ч байгаа хуудас элементүүдийг сонгож болно.

Сул тал - зөвхөн тодорхой тохиолдолд харьцангуй ховор байсан. цэг зэрэг олон зохион байгуулах нь илүү хялбар байдаг тул олон вэб дизайнерууд, арга зүй илүүд үздэг дөрвөлжин хаалт , таних тэмдэг "тэгш". Үүнээс гадна, эдгээр сонгох асуудал Internet Explorer хувилбарууд 7, доор ажиллаж байна. Гэсэн хэдий ч, одоо хуучин Internet Explorer хэрэгтэй хэн юм бэ?

псевдо ангийн сонгох асуудал

нь псевдо-статус элементийг илэрхийлнэ. Жишээ нь ,: Hover нь - Хэрэв та хулганыг аваачиж үед хуудасны хэсэг юу ,: зочилж - зочилсон холбоос. Эхний хүүхэд болон: сүүлийн хүүхдэд Энэ нь мөн зэрэг элементүүд багтана.

Энэ төрлийн сонгон шалгаруулагч идэвхтэй, орчин үеийн зохион хэрэглэж Хэрэв ачаар та JavaScript ашиглах ямар ч хуудсыг "амьд" хийж болно, учир нь байна. Жишээ нь, та түүний өнгө нь өөрчлөгдсөн btn анги нь товчлуур дээр хулганыг аваачиж байх үед эсэхийг шалгах хэрэгтэй. Үүнийг хийхийн тулд бид дараах бүтцийг ашиглана:

.btn: Hover {

суурь өнгө: улаан,

}

Гоо сайхан, товчлуур, шилжилтийн эд хөрөнгийн үндсэн шинж чанар заасан болно, жишээ нь, 0.5s - энэ тохиолдолд, товч даруй нүүр байх болно, хагас секундын дотор.

Ариун журам - өргөн хуудасны "сэргэлт" ашиглаж байна. Ашиглахад хялбар.

Сул тал - нь тэд биш юм. Энэ нь үнэхээр уран арга хэрэгсэл юм. Гэсэн хэдий ч, туршлагагүй вэб дизайнерууд псевдо анги элбэг алдагдсан авах болно. асуудал нь судалгаа, дадлага шийдвэрлэсэн байна.

псевдо сонгох асуудал

"Псевдо" - эдгээр нь HTML-д биш юм хуудасны хэсэг байдаг, гэхдээ тэдгээр нь ч удирдаж болно. Та ойлгохгүй байна бэ? Энэ мэт илүү хялбар юм. Жишээ нь, та бусад жижиг, хар бичвэр орхиж, том, улаан мөр эхний үсэг хийхийг хүсч байна. Мэдээж хэрэг, энэ нь тодорхой анги нь хугацаанд тэр захидлыг дүгнэж болно, гэхдээ энэ нь урт, уйтгартай юм. Энэ нь бүх зүйлийг сонгох, псевдо :: эхний үсгийг ашиглах нь хамаагүй хялбар байдаг. Энэ нь анх удаа захидал төрхийг хянах боломжийг олгодог.

псевдо элементийн маш олон тооны байдаг. нэг зүйлд тэднийг жагсааж амжилт гаргах магадлал бага юм. Та өөрийн дуртай хайлтын систем нь холбогдох мэдээллийг олж авах боломжтой.

Давуу тал - хуудасны харагдах өөрчлөх уян хатан болдог.

Сул тал - тэдэнд шинэ үргэлж эргэлзэж байдаг. зөвхөн зарим хөтчүүд ажил нь энэ төрлийн ихэнх нь сонголт.

дүгнэхэд

Сонголтын - баримт бичиг урсгал зохицуулагчид нь хүчирхэг хэрэгсэл юм. Түүний ачаар та хуудасны бүр нэг бүрэлдэхүүн сонгож болно (энд зөвхөн хэсэгчлэн адил байдаг). бүх байгаа тохируулгууд байгаа сурах, эсвэл бүр бичиж мартуузай. Хэрэв та орчин үеийн дизайн бүхий цогц хуудас болон интерактив элементийн олон бий бол энэ нь чухал ач холбогдолтой юм.