Вэб дизайн нь ерөнхий зарчмууд, тодорхойлолтуудыг график болон хэвлэх загварын ертөнцөөс зээлдэг байсан. Энэ нь ялангуяа веб флэшлограф болон бидний вэб хуудсандаа захидал хэлбэрийг авах арга юм. Эдгээр хосолсон хэллэгүүд нь үргэлж 1-ээс 1 хэлээр орчуулагддаггүй, гэхдээ та нэг сахилга батын нөлөөнд хэрхэн нөлөөлсөнийг та мэдэж болно. Энэ нь "тэргүүлэх" уламжлалт typography нэр томьёоны хоорондох хамаарал болон "мөрийн өндөр" гэж нэрлэгддэг CSS шинж чанаруудын хоорондох хамаарлыг авч үзэхэд энэ нь илт харагдаж байна.
Тэргүүлэх зорилго
Хүмүүс гараар металл эсвэл модон үсгийг хэвлэмэл хуудас болгохын тулд хэвлэмэл хуудсыг хэвлүүлэхийн тулд хэрэглэдэг байсан бол тэдгээрийн хоорондох зайг үүсгэхийн тулд текстийг хэвтээ шугамын хооронд байрлуулсан байсан. Хэрэв та илүү том зай авахыг хүсвэл илүү том хар тугалга оруулах болно. Энэ бол "тэргүүлэх" гэсэн нэр томьёог бий болгосон юм. Хэрэв та хэвлэлийн дизайн болон үндсэн зарчмын тухай "тэргүүлэх" гэсэн нэр томъёог хайж олсон бол дараагийн мөрүүдийн төрлүүдийн хоорондох зай хоорондын зайг ямар нэгэн зүйл уншдаг.
Вэб дизайны тэргүүлэгч
Тоон дизайнд тэргүүлэх нэр томьёо нь текст мөр хоорондын зайг ашигладаг хэвээр байна. Ихэнх хөтөлбөрүүд энэ нэр томьёог ашигладаг боловч бодит хар тугалга нь тухайн хөтөлбөрт хэрэглэгддэггүй. Гэхдээ энэ зарчмын хэрэгжилт өөрчлөгдсөн хэдий ч уламжлалт аргаар дизайн хийх шинэ загварын санаанууд нь гайхалтай жишээ юм.
Вэб дизайн дээр ажиллахдаа "тэргүүлэх" гэсэн CSS өмч байхгүй болно. Харин текстийн харагдах байдлыг зохицуулах CSS property нь мөрийн өндрөөр нэрлэгддэг. Хэрэв та текстийг хэвтээ шугамын хоорондох зайг өөр тексттэй болгохыг хүсвэл, энэ өмчийг ашиглах болно. Жишээ нь, та сайтын <гол> элемент доторх бүх догол мөрүүдийн мөрийн өндрийг нэмэгдүүлэхийг хүсч байгаа бол ингэж болно:
үндсэн p {line-height: 1.5; }Энэ нь хэвийн шугамны өндрөөс 1.5 дахин их хэмжээтэй байх бөгөөд хуудасны анхдагч фонтоор (ерөнхийдөө 16хх байх).
Хэрвээ шугамын өндөрийг ашиглах бол
Дээр дурдсанчлан, мөрийн өндрийг догол мөр эсвэл текстийн бусад блокуудад текстийн мөрийг зайнд хэрэглэхэд тохиромжтой. Хэрвээ мөр хоорондын зай хэтэрхий бага байвал текст нь таны сайт руу үзэгчдийг уншихад хэцүү болно. Үүнтэй адилаар хэрэв мөр нь хуудаснаас хэт хол зайд байвал уншлагын хэвийн урсгал зогсох бөгөөд уншигчид тэр шалтгаанаар текстээ асуудалтай байх болно. Ийм учраас шугамын өндрийг зөв ашиглахыг хүсч байна. Та мөн дизайнеруудаа бодит хэрэглэгчидтэй туршиж үзээд хуудасны уншилтын талаархи саналаа авах боломжтой .
Шугамын өндөрийг хэрэглэхгүй байх
Хуудасны загвар эсвэл түүний догол мөрийг багтаасан хуудсын дизайныг хоосон зайг нэмэхийн тулд мөрийн өндрийг бүү мартаарай. Энэ зай нь тэргүүлэх чиглэлгүй, тиймээс энэ нь шугамын өндрөөр зохицуулагддаггүй.
Хэрвээ та тодорхой текст элементүүдээр зай нэмэхийг хүсвэл та ашиг эсвэл хетелбер ашиглаж болно. Өмнөх CSS жишээн дээрээ буцаж ороод бид үүнийг нэмж болно:
үндсэн p {line-height: 1.5; margin-bottom: 24px; }Энэ нь бидний хуудасны догол мөрүүдийн (мөрийн <гол> элементийн хэсэгт байгаа) мөрийн хооронд 1.5 мөрийн өндөр байх болно. Эдгээр догол мөрүүд нь 24 пикселийн зайтай байх бөгөөд уншигчдад нэг догол мөрийг хялбархан олох боломжтой ба вебсайт уншихад хялбар болгох боломжийг олгодог. Та энд мөнөөх хонгилыг ашиглаж болно:
үндсэн p {line-height: 1.5; Дотор талыг доод хэсэг: 24px; }Бараг бүх тохиолдолд энэ нь өмнөх CSS шиг харагдана.
"Үйлчилгээний цэс" гэсэн ангилалтай жагсаалтын дагуу зайд зай авахыг хүсч байна гэж хэлэхийг хүссэн мөрийг, эсвэл өндрийн мөрийг ашиглахгүй байхыг зөвлөж байна. Тиймээс энэ нь тохиромжтой байх болно.
.services-menu li {