Вэбийн баримтуудад өв залгамжлах CSS хэрхэн ажилладаг талаар

Вэбсайттай вэбсайтыг загварчлах чухал хэсэг нь өв залгамжлалын ойлголтыг ойлгох явдал юм.

CSS өмчлөл нь ашиглагдаж буй эд хөрөнгийн хэв маягаар автоматаар тодорхойлогддог. Та стилийн өмчийн өнгөөр ​​харахдаа "Өв залгамжлах" гэсэн гарчигтай хэсгийг үзнэ үү. Хэрэв та ихэнх вэб дизайнеруудтай адилхан бол тэрхүү хэсгийг үл тоомсорлосон боловч зорилгодоо хүрдэг.

CSS өвлөх гэж юу вэ?

HTML баримт дахь элемент бүр нь модны хэсэг бөгөөд эхний элементээс бүр элемент бүр нь түүний элементтэй байна. Хэрвээ шинж чанарууд нь өвлөгдөх боломжтой бол тэдгээр толгойн элементүүдэд ямар ч загварыг хэрэглэж болно.

Жишээ нь, доорх HTML код нь EM тагийн хавсаргасан H1 тагтай байна:

Энэ бол Том Толгой хуудас юм

EM элемент нь H1 элементийн хүүхэд бөгөөд удамшсан H1-ийн хэв маягийг EM текст рүү дамжуулах болно. Жишээлбэл:

h1 {font-size: 2em; }

Фонтын хэмжээ нь өвлөгдөж ирсэн тул "Big" (EM хаягууд дотроо оршдог) гэж бичсэн текст нь H1 үлдсэн хэмжээтэй адил хэмжээтэй байх болно. Энэ нь CSS-ийн өмчийг заасан үнэ цэнийг өвлөн авсантай холбоотой юм.

CSS өвийг хэрхэн ашиглах вэ

Үүнийг хэрэглэх хамгийн хялбар арга бол CSS-ийн шинж чанарууд бөгөөд өвлөгдөөгүй хүмүүстэй танилцах явдал юм. Хэрвээ эд хөрөнгө нь өвлөгдсөн бол энэ утга нь баримт бичгийн хүүхдийн элемент бүрийн хувьд утга хэвээр байх болно гэдгийг мэднэ.

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

body {font-family: Arial, sans-serif; }

Өв өвлөх утгыг ашиглана уу

CSS-ийн бүх үл хөдлөх хөрөнгө нь боломжит сонголт болох "өвлөх" утга агуулдаг. Энэ нь вэб хөтчийг хэлдэг бөгөөд тухайн өмч нь ихэвчлэн өвлөгдөхгүй байсан ч гэсэн эцэг эхтэйгээ ижил утгатай байх ёстой. Хэрэв та өвлөгдөөгүй маржин зэрэг загварын загварыг тогтоовол дараагийн өмчүүдэд үлдээх үнэ цэнэ нь өв залгамжилж буй эцэг эхийнхтэй адилхан хэмжээг өгч болно. Жишээлбэл:

body {margin: 1em; } p {margin: inherit; }

Өв залгамжлал нь тооцоолсон үнэт зүйлс ашигладаг

Энэ нь уртыг ашигладаг фонтын хэмжээ зэрэг өвлөгдсөн утгуудын хувьд энэ нь чухал юм. Тооцоолсон утга нь Вэб хуудсанд байгаа бусад утгатай харьцуулсан утга юм.

Хэрэв та өөрийн BODY элементийн 1em-н фонтыг тохируулсан бол таны бүхэл бүтэн хуудас нь зөвхөн 1em хэмжээтэй биш байх болно. Энэ нь толгой (H1-H6) болон бусад элементүүд (зарим хөтөчүүд хүснэгтүүдийн шинж чанарыг өөрөөр тооцдог) учраас вэб хөтөч дээр харьцангуй хэмжээтэй байдаг. Бусад фонтуудын хэмжээ байхгүй тохиолдолд вэб хөтөч нь хуудасны хамгийн том текстийн H1 гарчгийг, дараа нь H2 гэх мэтээр хийдэг. Таны биеийн элементийг тодорхой үсгийн хэмжээгээр тохируулахдаа "дундаж" үсгийн хэмжээгээр ашигладаг бөгөөд гарчгийн элементүүдийг үүнээс тооцдог.

Өмнөх өв ба үндэслэлийн талаархи мэдээлэл

Жагсаалтанд орсон хэд хэдэн хэв маяг нь W3C дээр CSS 2-д өвлөгдөөгүй боловч Вэб хөтөч нь үнэ цэнийг өвлөнө. Жишээ нь, та дараах HTML болон CSS бичсэн бол: