Цэвэр CSS дээр:targetгүйгээр үйл явдлыг товшино уу. CSS дахь зорилтот. Хэрхэн ажилладаг? Семантик болон хүртээмжтэй байдлын талаар юу хэлэх вэ
CSS дээр товшилтын үйл явдлуудыг ямар ч аргаар зохицуулах арга бий юу? JavaScript ашиглан. Та аргыг ашиглаж болно : зорилтот. Гэхдээ үүнийг ашиглах боломжгүй бол яах вэ? Өөр нэг арга бий.
Демо үзэх. Энэ нь JavaScript кодын мөр биш, бүрэн CSS дээр хийгдсэн. Энэ нь:active болон:hover сонгогчийн анхны хэрэглээнд суурилдаг.
Тодорхойлолт
Эхлээд та хулгана дарахад харагдах товчлуур болон блокуудыг агуулсан савыг үүсгэх хэрэгтэй. Тэмдэглэгээний бүтэц нь дараах байдалтай байна.
Бид .wrapper дээр хулганы товчийг дарах хүртэл контентыг үл үзэгдэх болгох хэрэгтэй. Асуудлыг шийдэхийн тулд .content шинж чанарын дэлгэцийг тохируулна уу: none . Дараа нь .wrapper дээр хулганы товчийг дарахад бид .content-д зориулсан дэлгэц: блок шинж чанарыг оруулах болно. Яагаад .wrapper:active .content шинж чанарыг харуулах: блок . Энэ төлөвт .контент нь зөвхөн хулганы товчийг дарахад л харагдах болно. Хэрэв та үүнийг гаргавал .контент дахин алга болно. Үүнийг засахын тулд хулганы курсор .content дууссан үед тухайн элементэд дэлгэцийн: блокийн шинж чанар оноогдсон эсэхийг шалгацгаая. Өөрөөр хэлбэл, бид .content:hover-д зориулсан дэлгэц: блок шинж чанарыг тохируулсан. CSS код нь дараах байдлаар харагдах болно.
Агуулга (дэлгэц: байхгүй; ) .wrapper:active .content (дэлгэц: блок; ) .content:hover ( дэлгэц: блок; )
Зөвхөн "самнах" л үлдлээ. Гадаад төрхмөн илүү ойлгомжтой болгох:
Боодол (байрлал: харьцангуй; ) .товчлуур (арын дэвсгэр: шар; өндөр: 20px; өргөн: 150px; ) .контент (байрлал: үнэмлэхүй; дээд хэсэг: 20px; ) .контент li (арын дэвсгэр: улаан; )
Дээрх кодын товчлуурын текст шар дэвсгэртэй байх ба хулганы товчийг дарахад гарч ирэх мэдээлэл улаан дэвсгэртэй байна.
Та псевдо-class:target ашиглан интернетээс олон хичээлийг хялбархан олох боломжтой. Гэсэн хэдий ч, хэн нэгний кодыг дагаж мөрдөхгүй, харин үүнийг ойлгож, хэрхэн ажилладагийг ойлгохыг хичээцгээе? Мэдээжийн хэрэг, бид жишээгүйгээр хийж чадахгүй.
Юу вэ: зорилтот?
CSS:target-д энэ нь псевдо анги бөгөөд ямар нэгэн үйлдэл хийх HTML баримтынхаа бүхэл бүтэн "хэсгийг" сонгох боломжийг олгодог. Жишээлбэл, энэ нь текстийн догол мөр эсвэл гарчиг байж болно.
Псевдо-ангилуудыг псевдо-элементүүдтэй андуурч болохгүй бөгөөд энэ нь зөвхөн эхний үсэг, догол мөрний эхний мөр зэрэг элементийн тодорхой хэсгийг сонгох боломжтой.
Псевдо ангиуд:
- a:холбоос(өнгө:#111)
- a: хулганаар(өнгө:#222)
- div: анхны хүүхэд(өнгө:#333)
Псевдо элементүүд:
- p::эхний үсэг(өнгө:#444)
- p::эхний мөр(өнгө:#555)
Энэ эсвэл псевдо анги, псевдо элемент юу хийдэг нь синтаксаас тодорхой болсон гэж би бодож байна. Хамгийн алдартай псевдо анги бол :hover, бүх вэбмастерууд үүнтэй тааралддаг; энэ нь гүйлгэх үед элементийн хэв маягийг тодорхойлдог. зорилт нь ижил төстэй ажилладаг бөгөөд тодорхой нөхцөл байдал үүссэн үед элементийн хэв маягийг дүрсэлдэг.
Фрагмент ID
Товчхондоо энэ бол манай псевдо ангийнхны холбоотой зүйл юм. Энэ бол хаягийн төгсгөлд байрлуулсан үг эсвэл хэллэг бүхий hashtag юм. Энэ нь дараах байдалтай харагдаж байна.
Энэ техникийг нийтлэл доторх шилжилтэд ашиглаж болно. Жишээлбэл, нийтлэлийн эхэнд та жижиг агуулгын хүснэгт үүсгэх бөгөөд тухайн элемент дээр дарахад тухайн хүнийг холбоос руу хөтөлдөг хэсэг рүү аваачдаг бөгөөд энэ хэсэгт танигч нэмэх шаардлагатай.
Энэ нь ажилладаг цэвэр HTML, ямар ч заль мэх шаардлагагүй. Жижиг танигч.
:target ашиглан товшилтыг зохицуулах
Одоо та манай хийцтэй цэснээс хүссэн хэсэг дээр дарахад гарчгийн загвар өөрчлөгдөж, аль догол мөр идэвхтэй байгааг харуулахыг хичээцгээе.
H1 (фонт: 30px Arial sans-serif; ) h1:target (фонтын хэмжээ: 50px; текстийн чимэглэл: доогуур зураас; өнгө: #37aee4; )
Код нь маш энгийн - дарахад гарчиг нь хэмжээ, өнгө өөрчлөгдөж, доогуур зураастай байдаг. Та амьдрал (Руслан, сайн уу) нэмж, гарчгийн өнгийг өөрчлөх хөдөлгөөнт дүрс хийж болно.
H1 (фонт: 30px Arial sans-serif; -webkit-шилжилт: өнгө 0.5 сек хялбар; -moz-шилжилт: өнгө 0.5 сек хялбар; -o-шилжилт: өнгө 0.5 секунд; -ms-шилжилт: өнгө 0.5 секунд хялбар; шилжилт: өнгө 0.5 сек хялбар; )
Идэвхтэй гарчгийг онцлон тэмдэглэх нь сайн хэрэг, гэхдээ та үүнийг дагаж байгаа текстийн дизайныг өөрчлөх шаардлагатай бол яах вэ? CSS бидэнд энэ боломжийг олгодог. Энэ нь дараах байдалтай харагдаж байна.
H1:target + p (арын дэвсгэр: #eaeaea; дэвсгэр: 10px; )
Энэ тохиолдолд нэмэх тэмдэг нь гарчгийн дараах догол мөрөнд хэв маягийг хэрэглэх ёстой гэсэн үг юм. Тиймээс, Идэвхтэй толгой өөрчлөгдөхөд бид хэсгийн дизайныг бас өөрчилдөгтүүнд "харъяалагдах" бичвэрийн хамт.
Хөтөчийн дэмжлэг
Зорилтот псевдо анги нь CSS-ийн гурав дахь хэвлэлд хамаарах ба IE-ээс бусад бүх хөтчүүдээр төгс дэмжигддэг, 9-ээс дээш хувилбар. Тиймээс, хэрэв таны үзэгчид энэ хөтчийг ашигладаг бол үүнийг хэрэгжүүлэх ёсгүй. Гэсэн хэдий ч гарах арга зам бий - энэ бол Selectvizr, JS номын сан бөгөөд та IE-ийг CSS3-тэй ажиллах боломжтой болгодог. Бид зүгээр л скриптийг нэмээд л болоо, энэ нь ажиллана.
Цорын ганц зүйл бол хэрэв та JQuery эсвэл MooTools ашигладаггүй бол энэ скриптийг ажиллуулахын тулд үүнийг холбох хэрэгтэй. Албан ёсны вэбсайт нь аль номын сан юуг дэмждэгийг харуулсан хүснэгттэй. Хэрэв та сонирхож байвал уншаарай. Энэ .
Дүгнэлт
Псевдо ангиудыг ашиглах нь төвөгтэй мэт санагдаж болох ч тэдгээрийн хэрхэн ажилладагийг ойлгосны дараа та зөвхөн CSS ашиглан гайхалтай зүйлсийг хийж чадна, өөр юу ч биш. Псевдо анги: зорилтот- үүний маш сайн баталгаа. Үүний тусламжтайгаар та хуудасны зочинтой харилцах харилцааг эрс өөрчилж чадна. Дээрх жишээ нь хамгийн энгийн боловч энэ нь хуудсанд бага зэрэг интерактив байдлыг нэмсэн хэвээр байна. Гэхдээ энэ бол ердөө хоёр мөр код юм.
Гоо сайхны болон хөтөчийн дэмжлэгийг бүү хэтрүүлээрэй, бүх зүйл сайхан болно.
Өдрийг сайхан өнгөрүүлээрэй
target="_blank" нь шошго хийхэд ашиглагддаг холбоосыг шинэ цонхонд нээв. Гэхдээ зорилтот HTML гэж юу вэ? Яагаад хоосон байх ёстой гэж? Хамгийн сонирхолтой нь яагаад эхэнд нь доогуур зураастай байдаг юм бэ? Энэ кодыг нарийвчлан авч үзээд энэ нь юу болохыг ойлгоцгооё.
зорилтот шинж чанар
Зорилтот үнэ цэнэ
Зорилтот шинж чанарын хамгийн нийтлэг дөрвөн утга нь:
_өөрөө
Зөвхөн HTML дээр шошгыг ашигласан тохиолдолд л ийм зүйл тохиолдож болно
_хоосон
Холбоосыг шинэ таб эсвэл цонхонд нээнэ. Энэ нь хэрэглэгчийн дотоод тохиргоогоор тодорхойлогддог бөгөөд ихэнх хөтөч дээр энэ нь шинэ таб хуудас юм. Та энэ утгыг ашигласнаар гарч ирэх зар сурталчилгааны нэгжүүдийг хэрэгжүүлж чадна гэж бодож магадгүй юм. Гэхдээ энэ нь үнэн биш юм. Ихэнхдээ HTML гэхээсээ илүү JavaScript-г ашигладаг.
Энэхүү зорилтот HTML атрибутын утгыг гадаад сайтууд эсвэл PDF файлуудын холбоосыг шинэ таб дээр нээхэд хамгийн сайн ашигладаг. Үүний ачаар эдгээр табыг хаасны дараа хэрэглэгч таны сайт руу буцаж ирдэг. Гэхдээ үүнийг буруугаар ашиглах ёсгүй, учир нь холбоос бүр шинэ таб дээр нээгдэх юм бол хэрэглэгч шилжихэд хэцүү байх болно.
_эцэг эх
_parent утга нь таны байгаа фреймийн эх хүрээний холбоосыг нээнэ. Хүрээ үүсгэх шошготой тул энэ нь түгээмэл үнэ цэнэ биш юм