Анги ба ID нь таны CSS-ийг өргөтгөдөг
Өнөөгийн вэбсайт дээр вэбсайтуудыг бий болгох нь CSS (Cascading Style Sheets) талаар гүн гүнзгийгээр ойлгохыг шаарддаг. Эдгээр нь вэбсайтыг хөтлөх цонхонд хэрхэн байрлуулахыг тодорхойлох зааврууд юм. Та вэбсайтынхаа харагдах байдлыг мэдрэхийн тулд HTML загварт хэд хэдэн "стиль" -ийг хэрэглэдэг.
Баримтад эдгээр дээр дурдсан загваруудыг ашиглах олон арга зам байдаг боловч заримдаа элементүүдийн бүх тохиолдлууд биш баримт бичгийн зарим элементийг ашиглахыг хүсдэг.
Та мөн жишээлбэл баримтын хэд хэдэн элементийг хэрэглэж болох хэв загварыг үүсгэхийг хүсч болох юм. Эдгээр хүссэн хэв маягийг олж авахын тулд та class болон ID HTML шинж чанаруудыг ашиглана. Эдгээр шинж чанарууд нь бараг бүх HTML шошгонд ашиглагдаж болох дэлхийн шинж чанарууд юм .Энэ нь таны документууд дахь хэсгүүд, догол мөрүүд, холбоосууд, жагсаалтууд эсвэл бусад хэсгүүдийн HTML хэлбэрийн аль нь ч байсан байгаа тул та class болон ID шинжүүдийг Энэ үүргийг биелүүлэхэд тусална уу!
Ангилагч сонгогчид
Ангиллын сонгон шалгаруулагч нь олон загварыг нэг документэд ижил элемент эсвэл шошгонд тавих боломжийг олгодог. Жишээлбэл, та текстийн тодорхой хэсгүүдийг баримт бичгийн бусад хэсгээс өөр өнгөөр дуудаж авахыг хүсч болох юм. Эдгээр онцолсон хэсгүүд нь таны хуудсан дээр байрладаг "анхааруулга" байж болох юм. Та эдгээрийг ангиудтай адил тэгшитгэлээр хуваарилж болно:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Эдгээр загвар нь бүх догол мөрийн өнгөийг хөх (# 0000ff) болгож тохируулах боловч "анхааруулга" гэсэн ангилалын шинж чанарыг улаан өнгөтэйгаар (# ff0000) тавина. Учир нь классын шинж чанар нь эхний CSS дүрмээс өндөр өвөрмөц чанартай байдаг тул энэ нь зөвхөн сонгогчийг ашигладаг.
CSS-тэй ажиллахад илүү тодорхой дүрэм нь илүү тодорхой нэгийг дарах болно. Энэ жишээн дээр илүү ерөнхий дүрмээр бүх догол мөрийн өнгөийг зааж өгдөг боловч хоёрдахь, илүү тодорхой дүрмийг зөвхөн зарим нэг догол мөрөнд зааж өгдөг.
Энэ нь зарим HTML тэмдэгт дээр хэрхэн хэрэглэгдэж болохыг энд харууллаа.
Энэ хэсэг нь цэнхэр хуудсан дээр харагдах бөгөөд хуудасны анхдагч нь.
Энэ догол мөр бас хөх өнгөтэй байна.
Ангийн шинж чанар нь элемент сонгох загвараас стандарт цэнхэр өнгө дарж бичих тул энэ догол мөр нь улаанаар харагдана.
Энэ жишээнд "p.alert" загвар нь зөвхөн "alert" ангиллыг ашигладаг элементийн элементэд зөвхөн хамаарна. Хэрэв та энэ төрлийг олон HTML элементээр ашиглахыг хүсвэл, та HTML элементийг эхнээс нь загварын дуудлага (зүгээр л хугацаандаа (.) оруулаарай), иймэрхүү:
.alert {background-color: # ff0000;}
Энэ ангид одоо хэрэгтэй бүх элементэд бэлэн байна. "Анхааруулга" гэсэн категорийн утгатай HTML-ийн аль ч хэсэг одоо энэ хэв маягийг авах болно. Доорх HTML-д бид "alert" класс ашигладаг догол мөр 2 гэсэн гарчигтай. Эдгээр хоёр хоёулаа бидний харуулсан CSS дээр үндэслэсэн улаан өнгийн дэвсгэртэй байх болно.
Энэ хэсгийг улаанаар бичнэ.
Мөн энэ h2 нь бас улаан өнгөтэй болно.
Өнөөдөр вэбсайтууд дээр классын шинж чанаруудыг ихэвчлэн ихэнх элементүүдэд ашигладаг. Учир нь тэд ID-ууд нь өвөрмөц байдлын талаас нь ажиллахад хялбар байдаг. Та хамгийн сүүлийн үеийн HTML хуудсыг зөвхөн ангийн шинж чанаруудаар дүүргэх болно. Зарим нь зөвхөн нэг удаа гарч ирж болох баримт бичигт бусад олон удаа давтана.
ID сонгогчид
ID сонгон шалгаруулагч нь таныг хаяг эсвэл бусад HTML элементтэй холбохгүйгээр тусгай загварт нэр өгнө. Та үйл явдлын тухай мэдээлэл агуулсан HTML тэмдэглэгээг хуваах байсан гэж хэлнэ үү.
Та энэ хэллэгийг "үйл явдал" -ын ID шинж чанарыг өгч болох бөгөөд дараа нь 1-пиксел өргөн хар хил бүхий хуваагдлыг тодорхойлохыг хүсвэл доорхтой адил кодын кодыг бичнэ үү:
#event {border: 1px solid # 000; }
ID сонгогчтой тулгамдсан асуудал нь HTML баримт бичигт давтагдахгүй байх явдал юм. Тэд өвөрмөц байх ёстой (та өөрийн сайтын олон хуудсан дээр ижил ID хэрэглэж болно, гэхдээ зөвхөн нэг удаа HTML баримт бүрт нэг удаа). Хэрвээ та 3 хил дээр энэ бүх хил хязгаар шаардлагатай байсан бол тэдэнд "event1", "event2", "event3" гэсэн ID шинж чанаруудыг өгч, тэдгээрийг нь хэвлэ. Тиймээс "үйл явдал" дээр дурдсан ангийн шинж чанарыг ашиглах нь илүү хялбар байх бөгөөд тэдгээрийг бүгдийг нэг дор хэвлэ.
ID-ийн онцлог шинж чанар бүхий өөр нэг сорилт бол тэд ангийн шинж чанаруудаас илүү өвөрмөц чанартай байдаг явдал юм. Энэ нь хэрэв та өмнө нь үүсгэсэн хэв маягийг өөрчлөх CSS-г ашиглах шаардлагатай бол хэрэв та ID-ууд дээр хэт их найдаж байсан бол үүнийг хийхэд хэцүү болно гэсэн үг юм. Иймээс олон вэб хөгжүүлэгчид ID-г ашиглан тэмдэглэгээндээ шилжиж, тэрхүү утгыг нэг удаа ашиглахаар зорьсон боловч бараг бүх загваруудын хувьд тусгайлсан ангилалын шинж чанарыг өөрчилсөн байлаа.
ID-ийн шинж чанарууд нь тоглоход ашиглагддаг нэг талбар нь хуудсын дотор холбоос үүсгэх хуудсыг үүсгэхийг хүсдэг. Жишээлбэл, хэрэв та хуудасны янз бүрийн хэсгүүдэд "үсрэх" холбоос бүхий нэг хуудсан дээрх бүх агуулгыг агуулсан parallax загварын вэбсайттай бол. Энэ нь эдгээр зангуу холбоосыг ашигладаг ID шинж чанарууд болон текст холбоосыг ашиглан хийгддэг.
Та зүгээр л тухайн attribute-ийн утга, # тэмдгээр, холбоосын href attribute рүү зүгээр л нэмнэ:
Энэ нь холбоос юм
Хэрэв товшсон эсвэл хүрвэл энэ холбоос нь энэ ID атрибуттай хуудсан дээр очих болно. Хэрвээ энэ хуудсан дээрх элемент нь энэ ID-г ашиглаагүй бол холбоос нь юу ч хийхгүй болно.
Хэрвээ та сайтад холбоос хийх хуудсыг үүсгэхийг хүсвэл ID шинж чанарыг ашиглах шаардлагатай болно, гэхдээ та ерөнхий CSS-ийн загварыг ашиглах боломжтой болно. Өнөөдөр би өнөө үед хуудсуудыг тэмдэглэж байна. Би сонгон шалгаруулагчдыг аль болох аль болох өргөн хэрэглэж, зөвхөн библийн дугаар руу шилжүүлэх нь зөвхөн CSS-ийн холбоосоор зогсохгүй хуудасны холбоос хэлбэрээр ажиллах хэрэгтэй.
Женнифер Кэрнин эх нийтлэл. 8/9/17 дээр Жереми Герард засварлав