Та элементийн нэг CSS ангилалаар хязгаарлагдахгүй.
Cascading Style Sheets (CSS) нь элементийн дүр төрхийг тодорхойлоход элементийн дүр төрхийг тодорхойлох боломжийг олгодог. Эдгээр шинж чанарууд нь аль эсвэл ID эсвэл анги байж болох ба бүх шинж чанаруудтай адилаар тэдгээр нь хавсаргасан элементүүдэд ашигтай мэдээлэл нэмдэг. Аль нэг элемент рүү ямар шинж чанарыг нэмж байгаагаас хамааран та элемент болон вэбсайтыг бүхэлд нь харах, мэдрэхийн тулд шаардлагатай харааны загварыг ашиглахын тулд CSS сонгогчийг бичиж болно.
Хэдийгээр ID эсвэл классын аль аль нь CSS дүрмүүдтэй холбогдохын тулд орчин үеийн вэб дизайны аргууд нь ID-ууд дээр ангиудыг дэмждэг боловч хэсэгчилсэн байдлаар ажиллахад илүү тодорхой, хялбар байдаг. Тиймээ, та ID-г хэрэглэдэг олон сайтуудыг олох болно, гэхдээ эдгээр шинж чанарууд нь өнгөрсөн үеийнхээс арай илүү хэрэглэж байгаа бол ангиуд нь орчин үеийн веб хуудсууд дээр гардаг.
CSS доторх ганц эсвэл олон ангиуд?
Ихэнх тохиолдолд та нэг ангиллын шинж чанарыг элементэд өгдөг, гэхдээ үнэндээ таны ID-тэй байгаа нэг л ангилалаар хязгаарлагдахгүй. Хэдийгээр элемент нь зөвхөн ганц ID шинж чанартай байж болох ч, та элементийг олон төрлийн элементүүдээр өгч болох бөгөөд зарим тохиолдолд ингэснээр таны хуудас хэв загварыг илүү уян хатан болгох болно.
Хэрэв та олон ангиудыг элементэд өгөх шаардлагатай бол та нэмэлт ангиудыг нэмж, тэдгээрийг өөрийн шинж чанар дахь зайгаар тусгаарлаж болно.
Жишээлбэл, энэ догол мөр нь гурван ангилалтай:
pullquote left left "> Энэ нь догол мөрийн текст болно
Энэ нь догол мөрөнд дараах гурван ангиллыг тогтоодог:
- Pullquote
- Онцлог
- Зүүн талд
Эдгээр ангийн утгуудаас зай авна уу. Эдгээр зай нь тэдгээрийг өөр өөр, өөр өөр ангиудаар өөрчилдөг. Энэ нь ангиудын нэр нь тэдгээрт зай байхгүй тул яагаад үүнийг тусад нь ангилдаг.
Жишээлбэл, хэрэв та "огторгуйн боломжит-зүүн" -ийг зайгүйгээр ашиглавал энэ нь нэг ангийн утга байх болно. Харин дээрхи жишээ нь эдгээр гурван үг нь зайгаар тусгаарлагдсан тэдгээрийг тус тусдаа утга болгон хувиргадаг. Ангиллын утгыг таны вэб хуудас дээр ашиглах талаар шийдвэр гаргахдаа энэ ойлголтыг ойлгох нь чухал юм.
Хэрвээ та HTML дэх классаа үнэлэх юм бол дараа нь CSS дээрээ эдгээр хичээлүүдийг зааж өгч болно. Жишээлбэл.
.pullquote {...}
.featured {...}
p.left {...}
Эдгээр жишээн дээр CSS мэдэгдэл болон хос утгууд нь буржгар хаалтан дотор байх бөгөөд эдгээр загварууд нь зохих сонгогчдод хэрхэн хэрэглэхийг харуулдаг.
Тэмдэглэл - Хэрэв та тодорхой нэг элементийг (жишээ нь, p.left) ангилсан бол түүнийгээ хичээлийн жагсаалтуудын нэг хэсэг болгон ашиглаж болно; Гэхдээ энэ нь зөвхөн CSS-д тодорхойлсон элементүүдэд нөлөөлөх болно гэдгийг анхаарах хэрэгтэй. Өөрөөр хэлбэл, p.left style нь танай сонгон шалгаруулагч "зүүн" ангийн утга бүхий догол мөрийг хэрэглэх гэж байгаагаас энэ ангид хамаарах зүйлүүдэд зөвхөн хамаарна. Эсрэгээр, жишээн дээр байгаа бусад хоёр сонгогч нь тодорхой элементийг зааж өгөөгүй тул тэдгээр ангийн утгыг хэрэглэдэг элементэд хэрэглэнэ.
Олон ангилалын давуу тал
Олон элемент нь элементийн шинэ хэлбэрийг үүсгэлгүйгээр элементүүдэд онцгой нөлөө үзүүлэхэд илүү хялбар болгож өгдөг.
Жишээ нь, та элементүүдийг зүүн эсвэл баруун тийш хурдан гаргах чадвартай байхыг хүсч болох юм. Та зүүн, баруун талд хоёр анги бичиж болно. болон float: right; Тэдэнд. Дараа нь таныг элементтэй бол зүүн тийш нь хөвөх шаардлагатай болно.
Гэсэн хэдий ч энд алхах нарийн шугам бий. Вэбийн стандартууд нь хэв маяг, бүтцийг тусгаарлахыг шаарддаг гэдгийг санаарай. Бүтцийг HTML хэлбэрээр зохицуулж байхад хэв маяг нь CSS-д байдаг.
Хэрвээ таны HTML баримт бичиг нь элементүүдээр дүүрсэн бол бүгд "улаан" эсвэл "зүүн" гэх мэт ангийн нэрийг агуулсан байх бөгөөд элемент нь ямар байдалтай байгааг харуулах нэрс бөгөөд энэ нь бүтэц, хэв маягийн хоорондох зайг холбож өгдөг. Би энэ шалтгааны улмаас семантик бус ангийн нэрийг аль болох хязгаарлахыг хичээдэг.
Олон ангилал, семантик, JavaScript
Олон ангиудыг ашиглах өөр нэг давуу тал нь танд илүү олон харилцан үйлчлэлийн боломжийг олгодог явдал юм.
Та анхны хичээлүүдийн аль нэгийг устгаагүй бол JavaScript ашиглан одоо байгаа элементүүдэд шинэ анги хэрэглэх боломжтой. Мөн элементийн семантиксийг тодорхойлохын тулд ангиудыг ашиглаж болно. Энэ нь энэ элементийг ямар утгатай болохыг тодорхойлохын тулд нэмэлт ангиуд дээр нэмж болно гэсэн үг юм. Энэ бол бичил форматууд юм.
Олон ангит сул талууд
Таны элементүүд дээр олон ангиудыг ашиглах хамгийн том дутагдал нь цаг хугацаа өнгөрөх тусам харж, удирдахад маш хэцүү болгодог. Аливаа стиль ямар элементэнд нөлөөлж байгааг тодорхойлж, ямар нэгэн скрипт нөлөөлөх эсэхийг тодорхойлоход хэцүү байж болно. Өнөөдөр олон тооны ажлын хэсгүүд, Bootstrap зэрэг олон төрлийн элементүүдийг хүндээр ашигладаг. Хэрэв та анхааралтай байх юм бол энэ код гараас холдох бөгөөд маш хурдан ажиллахад хэцүү байдаг.
Хэрэв та олон анги хэрэглэдэг бол, нэг ангиллын хувьд хэв загвартай болох эрсдэлтэй байдаг. Энэ нь яагаад хэв маяг нь яагаад заавал хэрэглэдэггүй байгаагаас шалтгаалах юм.
Та тухайн элементэд хамаарах шинж чанаруудтай байсан ч гэсэн өвөрмөц чанарыг мэдэж байх хэрэгтэй!
Chrome-ийн Вэбмастерын хэрэгсэл шиг хэрэгслийг ашиглах замаар та анги танай стилд хэрхэн нөлөөлж байгааг харж, зөрчилдөөнтэй стиль болон шинж чанарыг алдахаас сэргийлж чадна.
Женнифер Кэрнин эх нийтлэл. Жереми Герард 8/7/17 дээр зассан