Вэбсайтыг байгуулахдаа төвийн зураг, текст, блок элементүүд
Хэрвээ та вэбсайтаа хэрхэн бүтээхийг сурч байгаа бол хөтөчийн цонхны зүйлсийг хэрхэн төвөгтэй болгох вэ гэдэг нь хамгийн түгээмэл арга юм. Энэ нь хуудсан дээрх зургийг төвлөрүүлэх гэсэн үг юм. Энэ нь текстийг хэвлэлийн эх сурвалж шиг гардаг шиг текст хэлбэрээр тайлбарлахад хүргэж болох юм.
Энэхүү харагдах байдлыг төвөгтэй дүрснүүд эсвэл текст, эсвэл бүхэлд нь вэб хуудас болгон ашиглах зөв арга бол Cascading Style Sheets (CSS) ашиглана. Төвлөрүүлэх шинж чанаруудын ихэнх нь хувилбар 1.0-аас хойш CSS-д хийгдэж байсан бөгөөд CSS3 болон орчин үеийн вэб хөтөчүүдээр маш сайн ажилладаг.
Веб дизайны олон талын нэгэн адил вэб хуудас дахь элементүүдийн төвд CSS ашиглах олон аргууд байдаг. Энэ харагдах байдлыг хангахын тулд CSS ашиглахын тулд өөр өөр аргуудыг харцгаая.
HTML дэх элементүүдийн төвийг CSS ашиглах
CSS-тэй төвлөрөх нь вэб дизайнерийг эхлүүлэхэд хүндрэл учруулж болох тул энэ нь нэг төрлийн харагдах загварыг бий болгох олон янзын арга зам байдаг. Хэдийгээр янз бүрийн аргууд нь элемент бүр дээр ажилладаггүй, туршлагатай вэбсайт хөгжүүлэгчид байж болох ч энэ нь янз бүрийн аргуудаас аль нь хэрэглэх талаар мэдэх хэрэгтэй гэсэн үг юм. Үүнийг хийх хамгийн сайн зүйл бол хэд хэдэн аргыг ойлгох явдал юм. Та тэдгээрийг ашигласнаар аль арга нь хамгийн тохиромжтой гэдгийг мэдэх болно.
Өндөр түвшинд та CSS-г ашиглаж болно:
- Төв текст
- Блок түвшний элементийг төв (хуваах гэх мэт)
- Зургийн төвийг сонго
- Блок эсвэл зураг зурах
Олон (many) жилийн өмнө вэб дизайнерууд нь
CSS-тэй төвлөрөх
Вэб хуудсан дээр төвлөрөх хамгийн хялбар зүйл бол текст юм. Үүнийг хийхийн тулд зөвхөн нэг загварын өмч байдаг: текст зохицуулалт. Жишээ нь доорх CSS загварыг авна уу:
p.center {text-align: center; }
CSS-ийн энэ мөрөнд төвийн ангитай бичсэн бүх үсэг нь эцэг эхийнхээ элемент дотор хэвтээ байрлалтай байх болно. Жишээ нь, хэрэв догол мөр нь хуваалт дотор байсан бол энэ хэлтсийн хүүхэд байсан бол энэ нь
HTML баримт бичигт энэ ангийн жишээ байна:
Энэ текст төвтэй.
Текстийг шинж чанараар нь төвлөрүүлэхдээ текстийг төвлөрүүлэхдээ түүний элемент дотор төвлөрч бүрэн хуудас дотор төвлөрөх шаардлагагүй гэдгийг санаарай. Мөн төвийн үндэслэлтэй текст нь агуулгын том хэсгүүдэд уншихад хэцүү байж болно гэдгийг санаарай. Тиймээс энэ загварыг бага зэрэг ашиглаарай. Нийтлэл, бусад агуулгын хувьд текст текстийн жижиг текст, текстийн жижиг текст зэрэг нь төвлөрсөн үед унших, торгоход хялбар байдаг боловч бүрэн нийтлэл шиг текстийн том блокууд нь агуулгыг бүрэн төвлөрүүлсэн тохиолдолд хэрэглэхэд бэрхшээлтэй байдаг. зөвтгөсөн. Вэбсайт текстэнд уншихад хялбар байх нь үргэлж түлхүүр гэдгийг санаарай!
CSS-тэй контентыг блокло
Блок нь тодорхой хэмжээний өргөн цар хүрээтэй, блок түвшний элемент болж буй хуудасны аль ч элемент юм. Эдгээр блокууд нь HTML
div.center {
margin: 0 auto;
өргөн: 80em;
}
Энэ CSS нь барьцааны өмчлөгчийн хувьд дээд ба доод захыг 0 утгатай, харин зүүн, баруун нь "авто" -г ашиглана. Энэ нь үндсэндээ элементийг төвлөрүүлэхэд боломжтой бүх зайг авч үздэг.
Энд HTML:
харин доторх текстийг нэг мөр үлдээдэг.
Таны блок тодорхой хэмжээстэй бол энэ нь элемент дотор оршино. Тухайн блокод агуулагдсан текст дотор төвлөрөхгүй, харин үлдсэнийг зөвтгөх болно. Энэ нь текст үлдсэн бөгөөд вэб хөтчүүдэд анхдагчаар зөвтгөгддөг. Хэрвээ та текстийг төвлөрүүлэхийг хүсч байгаа бол энэ аргыг ашиглахын тулд өмнөх текстийг бидэнтэй хуваалцах боломжтой.
CSS бүхий зургийг төвтэй болгох
Ихэнх browsers нь догол мөрөнд харуулсан ижил текстийг тохируулахдаа төвлөрч байгаа зургийг харуулах боловч W3C-ийн санал болгодоггүй техникийг ашиглах нь тийм ч сайн санаа биш юм. Энэ нь зөвлөдөггүй болохоор хөтчийн ирээдүйн хувилбарууд энэ аргыг үл тоомсорлох боломжтой байх нь үргэлж боломжтой байдаг.
Зургийг төв рүү чиглүүлэхийн оронд зураг нь блок түвшний элементийг тодорхой зааж өгөх ёстой. Ингэснээр та үүнээс илүү төвөгтэй байх болно. Үүнийг хийхийн тулд CSS энд байна:
img.center {
дэлгэц: блок;
margin-left: auto;
margin-right: auto;
}
Бид энд төвлөрөхийг хүссэн дүр төрхийг харуулж байна HTML:
Та мөн CSS-г ашиглан объектуудыг төвлөрүүлэх боломжтой (доороос харна уу), гэхдээ энэ нь таны HTML тэмдэглэгээнд харагдахуйц хэлбэрийг нэмдэг тул энэ аргыг хэрэглэхгүй. Бид загвар, бүтцийг салгахыг хүсч байгаа тул CSS загварыг өөрийн HTML кодруу нүүлгэж эвдэж эвдэж, боломжтой бол аль болох зайлсхийх хэрэгтэй.
CSS-г босоо элементүүд байрлуулах
Босоо чиглэлтэй объектуудыг байршуулах нь вэб дизайн хийхэд маш хэцүү байдаг боловч CSS3-ийн CSS Flexible Box Layout Module хувилбарыг гаргахад одоо үүнийг хийх боломжтой болсон.
Босоо шугам нь дээр дурдсан хөндлөн шугамтай төстэй. CSS өмч нь босоо тэнхлэгийн дагуу дундаж утгатай нийцдэг.
.vcenter {
босоо шугам: дунд;
}
Энэ хандлагын сул тал нь бүх хөтчүүд CSS FlexBox-г дэмждэггүй, гэхдээ илүү их зүйл нь энэ шинэ CSS байршлын аргаар эргэн тойронд гарч байна! Үнэн хэрэгтээ орчин үеийн бүх хөтөч өнөөдөр энэ CSS загварыг дэмжиж байна. Энэ нь таны Flexbox-тэй холбоотой ганцхан асуудал нь илүү хуучин хөтөч хувилбар байх болно гэсэн үг юм.
Хуучин хөтөчүүдтэй холбоотой асуудлууд байвал W3C нь дараах арганд ашиглан текстийг босоо байдлаар босоо байдлаар байрлуулахыг зөвлөж байна:
- Элемент зэрэг элемент дотор агуулагдах элементүүдийг байрлуул.
- Элемент агуулсан хамгийн бага өндрийг тохируулна уу.
- Элемент агуулсан элементийн хүснэгтийг тэмдэглэнэ үү.
- Босоо чиглэлийг "дунд" гэж тохируулна.
Жишээ нь: CSS:
.vcenter {
мин-өндөр: 12em;
Дэлгэц: хүснэгт-нүд;
босоо шугам: дунд;
}
Энд HTML байна:
Энэ текст нь хайрцагт босоо байрлалтай байна.
Internet Explorer-ийн босоо төвлөрөл болон хуучин хувилбарууд
Интернэт Explorer (IE) -ийг төвөггүй байрлуулах, зарим тохиолдолд нөхцөл байдлын тайлбарыг ашиглахад зарим аргууд байдаг. Тиймээс IE нь зөвхөн стилийг үздэг, гэхдээ тэдгээр нь арай бага утгатай, муухай юм. Майкрософт сүүлийн үеийн шийдвэрийг IE-ийн хуучин хувилбарыг дэмжихээсээ татгалзсан саяхны шийдвэрийг дагаад эдгээр дэмжигдээгүй хөтчүүд нь удахгүй гарах болно, вэб дизайнерууд нь CSS FlexBox шиг орчин үеийн байршлын арга барилыг ашиглах нь илүү хялбар болгодог бөгөөд энэ нь бүх CSS байрлуулалтыг хийх болно, Зөвхөн төвлөрөх төдийгүй бүх вэб дизайнеруудад илүү хялбар болно.