Хэлбэрийг CSS-тэй хэрхэн оруулах вэ?

Текст индикатор болон хөрш зэргэлдээ орших сонгогчид ашиглах

Сайн вэб дизайн нь ихэвчлэн сайн хэвлэгддэг. Вэб хуудасны агуулга нь текст хэлбэрээр илэрч байгаа тул текстийг хоёуланг нь сонирхолтой, үр дүнтэй байлгах чадвартай байх нь вэб дизайнер болохын тулд маш чухал чадвар юм. Харамсалтай нь, бид хэвлэлийнхний хийсэн хэвлэлийн хяналттай ижил түвшинтэй байдаггүй. Энэ нь бид вэбсайтад текст хэв маягийг найдвартай хэвээр байж чаддаггүй хэвээр үлдээж болох юм.

Таны хэвлэгддэг нийтлэг загвар болох догол маягийн хэв загварыг (бид онлайнаар дахин үүсгэж болно) энэ хэсгийн эхний мөрийг нэг табын зайд байршуулдаг. Энэ нь уншигчдад нэг догол мөрийг эхэлж, нэгийг нь төгсгөхийг зөвшөөрнө.

Вэб хуудсанд энэ визуал хэв маяг шиг харагдахгүй байгаа тул анх удаагаа хөтөч програмууд нь хаа нэгтээ дуусч байгааг харуулахын тулд догол мөрийг доор байрлуулж болно, догол мөрөнд индикаторын загварыг зохиож, та текст-indent загварын шинж чанартай хамт хийж болно.

Энэ өмчлөлийн синтакс нь энгийн. Энд баримт бичиг дэх бүх догол мөрүүдэд текстийг хэрхэн оруулахыг доор харуулав.

p {text-indent: 2em; }

Илтгэлүүдийг өөрчлөнө

Зөвхөн догол мөрөнд догол мөрийг зааж өгөх нэг арга бол, та догол мөрийг нэмэхийг хүссэн догол мөрийг нэмж болно, гэхдээ догол мөр бүрийг засварлахыг шаарддаг. Энэ нь үр дүн муутай бөгөөд HTML код бичих шилдэг туршлагуудыг дагадаггүй.

Үүний оронд та догол мөрийг гаргахдаа авч үзэх хэрэгтэй. Та өөр нэг догол мөрийг шууд мөрдөж буй догол мөрүүдийг дар. Үүнийг хийхийн тулд та хөрш зэргэлдээ сонгон шалгаруулагчийг ашиглаж болно. Энэ сонгогчоор та өөр нэг догол мөрөнд өмнө нь догол мөр бүрийг сонгож байна.

p + p {текст-indent: 2em; }

Та эхний мөрийг индексжүүлж байгаа болохоор, догол мөрүүд нь тэдгээрийн хооронд ямар ч зай байхгүй (browser-ийн анхдагч байгаа) эсэхийг шалгаарай. Стандартаар бол, та эхний мөрөнд догол мөр эсвэл догол мөрийг оруулах хэрэгтэй.

p {margin-bottom: 0; доод тал нь: 0; } p + p {margin-top: 0; Дээд талын дэвсгэр: 0; }

Сөрөг үзүүлэлт

Та мөн мөрийн эхлэлийг хэвийн бус шиг баруун талд нь зүүн тийш очиход хүргэхийн тулд текст-indent өмчийг сөрөг утгатай ашиглаж болно. Хэрвээ эгнээ нь заагч тэмдэгтээс эхэлвэл эгнээгийн зүүн талд байрлах зүүний хөндлөн огтлолцол дээр гарч ирдэг бөгөөд үсгүүд нь зүүн тийшээ чиглэсэн хэвээр байх болно.

Жишээлбэл, та блоккомотын үр удмын нэг догол мөртэй байгаа бөгөөд үүнийг сөрөг утгатай болгохыг хүсч байгаа гэж хэлээрэй. Та энэ CSS-г бичиж болно:

blockquote p {text-indent: -.5em; }

Энэ нь үсгэн эхлэлийн цэгийг үүсгэхийн тулд зүүн тийш шилжихийн тулд нээлтийн эшлэлийн тэмдэгтийг агуулах болно.

Материал ба дэвсгэрлэлтийн талаар

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