CSS-ийн элементүүдийн зай болон физик тусгаарлалтыг үүсгэх
HTML-ийн элементүүдийн зай болон физик тусгаарлалтыг үүсгэх нь эхэн үеийн вэб дизайнерийг ойлгоход хэцүү байж болно. Учир нь HTML нь "хоосон зай нурах" гэж нэрлэгддэг шинж чанараас болдог. Та вэбсайтдаа 1 зай эсвэл 100 кодыг бичиж байгаа эсэх, вэб хөтөч автоматаар тэдгээр зайг нэг л зайнд нүүлгэнэ. Энэ нь Microsoft Word шиг програмаас өөр юм. Энэ нь документ бүтээгчид олон хэл дээр нэмж үг, бусад элементүүдийг салгах боломжийг олгодог.
Энэ нь вэб дизайны зай хэрхэн ажилладаг тухай биш юм.
Тэгэхээр вэб хуудас дээр харагдах HTML-д хоосон зай үлдээдэг вэ? Энэ өгүүллийг янз бүрийн аргаар авч үздэг.
CSS бүхий HTML зай
HTML доторх зайг нэмэхэд илүүдэхгүй арга нь Cascading Style Sheets (CSS) юм. CSS нь веб хуудасны ямар нэг визуал талыг нэмж оруулахад ашиглах бөгөөд зай нь хуудасны харааны дизайны шинж чанаруудын нэг хэсэг учраас CSS нь үүнийг хийхийг хүсч байгаа газар юм.
CSS-д элементүүдийн эргэн тойрон дахь зайг нэмэхийн тулд маржин эсвэл дэвсгэртүүдийн шинжийг ашиглаж болно. Түүнчлэн, текст-indent өмч нь догол мөрийг оруулах зэрэг текстийн урд талыг нэмнэ.
Таны бүх догол мөрний өмнө зайг нэмэхийн тулд CSS-ийг хэрхэн ашиглах жишээ энд байна. Дараах CSS-г өөрийн гадаад болон дотоод загварын хуудсан дээр нэмнэ үү:
p {
текст оруулах: 3em;
}
HTML дэх зай: Таны текст дотор байна
Хэрэв та зөвхөн текстэнд нэмэлт зайгаа нэмэх эсвэл хоёрыг нэмэхийг хүсвэл завсаргүй зайг ашиглаж болно.
Энэ тэмдэгт нь стандарт орон зайтай адилхан үйлдэл бөгөөд зөвхөн хөтөч дотроо нурж унахгүй.
Текст мөр доторх таван зайг хэрхэн нэмж оруулах жишээ энд байна:
Энэ текст дотор дотор нь таваас илүү зайтай байна
HTML ашигладаг:
Энэ текст & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; дотор талдаа таван нэмэлт зай байна
Та мөн нэмэлт мөрийн завсар оруулахын тулд "tag" -ыг ашиглаж болно.
Энэ өгүүлбэрийн төгсгөлд таван мөр завсарлагатай байна.
Яагаад HTML дээр зай гаргах нь муу санаа юм
Эдгээр тохируулгууд нь хоёулаа ажилладаг боловч тасрахгүй элементүүд нь таны текстэнд зай зайг нэмж өгдөг бөгөөд мөрийн завсар нь дээр үзүүлсэн догол мөрний доод хэсэгт нэмэх болно. Энэ нь таны вэбсайт дахь зай гаргах хамгийн сайн арга биш юм. Эдгээр элементүүдийг HTML дээр нэмэх нь харагдах загвар (CSS) -н (HTML) бүтцийг салгахын оронд кодыг харагдах мэдээллүүдийг нэмдэг. Шилдэг туршлага нь ирээдүйд, нийт файлын хэмжээ, хуудасны гүйцэтгэлийг хялбар болгох зэрэг хэд хэдэн шалтгаанаар салангид байх ёстой гэдгийг онцолсон.
Хэрвээ та хэв маяг, зайг зааж өгөхийн тулд гаднах загварын хуудсыг ашиглаж байгаа бол бүх хэв маягт зориулж эдгээр хэв маягийг өөрчлөх нь хялбар байх болно. Учир нь та энэ загварын нэг хуудсыг шинэчлэх шаардлагатай.
Дээрх өгүүлбэрийн 5-р тэмдэг бүхий өгүүлбэрийн жишээг авч үзье. Хэрвээ та догол мөрний хамгийн доод хэсэгт зай авахыг хүсвэл, бүх вэбсайт дахь догол мөр бүрт HTML кодыг нэмэх хэрэгтэй болно. Энэ нь таны хуудсуудыг нэмж болох нэмэлт тэмдэглэгээ юм.
Үүнээс гадна хэрэв та энэ зай хэтэрхий бага эсвэл хэтэрхий бага байгаа замыг шийдэж, үүнийг бага зэрэг өөрчлөхийг хүсч байвал бүхэл бүтэн вэбсайт бүрт нэг догол мөрийг засварлах хэрэгтэй болно. Үгүй ээ баярлалаа!
Эдгээр зайд элементүүд таны кодод нэмэгдэхийн оронд CSS ашигла.
p {
Доод тал нь: 20px;
}
CSS мөрийн нэг мөр нь таны хуудасны догол мөрний дагуу зай авах болно. Хэрэв та ирээдүйд энэ зайг өөрчлөхийг хүсвэл, энэ нэг мөрийг засах (бүхэл бүтэн сайтын кодын оронд), та явахад сайн!
Одоо, хэрэв та вэбсайтынхаа нэг хэсэг дээр нэг зай нэмэх шаардлагатай бол
шошго эсвэл ганц тасархай зай ашиглан дэлхийн төгсгөл биш, гэхдээ та анхааралтай байх хэрэгтэй.
Эдгээр хөндлөн огтлолын HTML зайг ашиглах нь гулгамтгай налуу байж болно. Нэг эсвэл хоёр нь таны сайтыг гэмтээхгүй байж болох ч, хэрэв та энэ замыг үргэлжлүүлбэл, та өөрийн хуудсандаа асуудлуудыг танилцуулах болно. Эцэст нь хэлэхэд, HTML зай болон CSS бусад вэбсайтын харааны хэрэгцээнд зориулсан CSS рүү эргэх нь дээр юм.