Програмчлалд вэбсайтууд, текстийг төвлөрүүлэх нь контентын дизайн, танилцуулгад чухал үүрэг гүйцэтгэдэг. Бид хувийн хуудас үүсгэж байгаа эсвэл хэрэглэгчийн нарийн төвөгтэй интерфэйсийг зохион бүтээж байгаа эсэхээс үл хамааран текстийг төвлөрүүлэх нь агуулгын харагдах байдал, уншигдах чадварт өөрчлөлт оруулж чадна. Энэ нийтлэлд бид HTML хэл дээрх текстийг төвлөрүүлэх арга техник, аргуудыг судалж, програмистуудыг үзэмж сайтай, ажиллагаатай танилцуулга хийхэд шаардлагатай хэрэгслээр хангах болно. Бид хамгийн үндсэн аргуудаас эхлээд текстийг төвлөрүүлэх хамгийн сүүлийн үеийн онцлог, чиг хандлага хүртэл суралцаж, хөгжүүлэгчдэд энэхүү чухал хэрэглүүрийг бүрэн ашиглах боломжийг олгох болно. вэб хөгжүүлэлтэд.
HTML текстийг төвлөрүүлэх танилцуулга
HTML текстийг төвлөрүүлэх нь вэб хөгжүүлэлтэд HTML хуудсан дээрх текстийг хэвтээ байдлаар зэрэгцүүлэх маш түгээмэл арга юм. Энэхүү үр дүнд хүрч, контентыг илүү мэргэжлийн, сэтгэл татам дүр төрхтэй болгохын тулд ашиглаж болох өөр өөр арга, техникүүд байдаг.
Текстийг голлуулах хамгийн хялбар аргуудын нэг бол бидний голлохыг хүссэн текстийг агуулсан HTML элементийн нээлтийн таг дахь "зохицуулах" шинж чанарыг ашиглах явдал юм. Жишээлбэл, хэрэв бид h1 толгой хэсэгт гарчгийг голлуулахыг хүсвэл дараах HTML кодыг нэмж болно:
Төвлөрсөн гарчиг
. Энэ техникийг хэрэгжүүлэхэд хялбар боловч хуучирсан гэж үздэг тул илүү орчин үеийн аргуудыг ашиглахыг зөвлөж байна.
Өөр нэг шинэчлэгдсэн техник бол CSS хэв маягийг ашиглах явдал юм. Бид захын зай, текстийг зэрэгцүүлэх зэрэг загварын шинж чанаруудыг тохируулснаар текстийг илүү нарийвчлалтай, уян хатан байдлаар төвлөрүүлж чадна. Жишээлбэл, хэрэв бид догол мөрийг div дотор голлохыг хүсвэл дараах CSS кодыг ашиглаж болно: div { text-align: center; }. Энэ техник нь дизайны хэрэгцээнд илүү сайн зохицож, хамгийн сүүлийн үеийн хувилбаруудтай нийцдэг тул илүү их зөвлөж байна вэб хөтөч.
Дүгнэж хэлэхэд, HTML текстийг төвлөрүүлэх нь харааны тэнцвэртэй танилцуулгад хүрэхийн тулд вэб дизайны чухал арга юм. »align» шинж чанар, CSS-ийн хэв маяг зэрэг өөр өөр арга, техникээр дамжуулан бид хүссэн үр дүнд хүрч, агуулгынхаа үзэмжийг сайжруулж чадна. Боломжтой сонголтуудыг судалж, бидний хэрэгцээ, хөтөчийн нийцтэй байдлын дагуу хамгийн тохиромжтойг нь сонгох нь чухал юм. Ирээдүйд илүү сайн засвар үйлчилгээ хийх үүднээс кодоо цэвэр, эмх цэгцтэй байлгахаа үргэлж санаарай. Өөр өөр аргуудыг туршиж үзээд аль нь таны төслүүдэд хамгийн сайн тохирохыг олж мэдээрэй. Сонирхолтой, төвлөрсөн загваруудыг бүтээх дасгал хийж, хөгжилтэй байгаарай!
HTML хэл дээрх текстийг голлуулах аргууд
Догол мөр, гарчиг, жагсаалтад байгаа текстийг HTML хэл дээр голлуулах хэд хэдэн арга байдаг. HTML хэл дээрх текстийг төвлөрүүлэхэд ашигладаг зарим нийтлэг арга, аргуудыг доор харуулав.
1. Шошго ашиглах
2. CSS Text-align: Өөр нэг сонголт бол CSS-ийг ашиглан текстийг голлуулах явдал юм. Чи чадна Энэ нь шинж чанарыг хэрэглэснээр text-align: center; HTML элемент эсвэл CSS анги руу. Жишээлбэл:
CSS-тэй төвлөрсөн текст!
. Хэрэв та хуудсан дээр олон текстийн элементийг голлуулахыг хүсвэл энэ техник хэрэг болно.
3. Margin ашиглах: Та CSS margin шинж чанарыг ашиглаж, зүүн болон баруун захын зайг автоматаар тохируулснаар текстийг голлох боломжтой. Энэ Үүнийг хийж болно inline CSS эсвэл CSS классаар дамжуулан. Жишээ нь:
Төвлөрсөн захын зайтай текст!
. Энэ техник нь илүү том текст эсвэл зургийн блокуудыг голлохыг оролдоход ялангуяа ашигтай байж болно.
Текстийг төвлөрүүлэх нь тухайн текст байгаа саванд хамааралтай гэдгийг санаарай, тиймээс та эдгээр техник, аргуудыг зөв элементүүдэд ашиглах хэрэгтэй. Түүнчлэн, одоогийн HTML болон CSS стандартууд дээр үндэслэн зарим аргыг хэрэглэхийг зөвлөдөггүй тул шилдэг туршлагыг мэддэг байх нь чухал гэдгийг санаарай. Эдгээр аргуудын тусламжтайгаар та текстийг зөв төвлөрүүлж чадна таны төслүүдэд HTML дээр вэб хөгжүүлэлт.
CSS-тэй текстийг төвлөрүүлэх арга
CSS ашиглан HTML хэл дээрх текстийг голлуулах хэд хэдэн техник, аргууд байдаг. Эдгээр аргууд нь таны вэб хуудсан дээр харагдахуйц, тэнцвэртэй дизайн хийхэд зайлшгүй шаардлагатай. Дараа нь бид танд хамгийн их хэрэглэгддэг аргуудыг танилцуулах болно.
Текстийг голлуулах хамгийн хялбар аргуудын нэг бол "text-align" CSS шинж чанарыг ашиглах явдал юм. Энэ өмч хэрэглэж болно блок элементүүд болон доторлогооны элементүүдийн аль алинд нь. Блок элемент дэх текстийг голлуулахын тулд дараах мөрийн кодыг өөрийн загварын хүснэгтэд нэмнэ үү.
«`
сонгогч {
text-align: center;
}
«`
Текстийг төвлөрүүлэх өөр нэг түгээмэл арга бол »маржин» шинж чанарыг зүүн ба баруун захын автомат утгыг ашиглах явдал юм. Үүнийг дараах CSS кодыг нэмснээр олж авна.
«`
сонгогч{
margin-left: auto;
margin-right: auto;
}
«`
Хэрэв та текстийг тодорхой саванд голлуулахыг хүсвэл Flexbox техникийг ашиглаж болно. Эхлээд "display: flex" шинж чанарыг ашиглан савыг flexbox элемент болгон тохируулна уу. Дараа нь "justify-content" шинж чанарыг ашиглан контентыг "center" утгатай хэвтээ байдлаар зэрэгцүүлнэ. Жишээлбэл:
«`
.контейнер {
дэлгэц: уян хатан;
зөвтгөх-агуулга: төв;
}
«`
Эдгээр нь HTML хэл дээрх CSS ашиглан текстийг төвлөрүүлэхэд хамгийн түгээмэл хэрэглэгддэг аргуудын зөвхөн нэг хэсэг юм. Таны хэрэгцээ, вэбсайтын дизайнаас хамааран аль нэг техникийг ашиглах нь илүү тохиромжтой гэдгийг санаарай.Туршилт хийж, таны шаардлагад хамгийн сайн тохирохыг нь олоорой. Текстийг төвлөрүүлэх нь таны вэбсайтууд дээр тодорхой, мэргэжлийн дизайн хийхэд чухал ач холбогдолтой зүйл юм!
HTML дээрх текстийг төвд оруулах загварын шинж чанарыг ашиглах
HTML-д текстийг голлуулах хамгийн түгээмэл бөгөөд энгийн аргуудын нэг бол "хэв маяг" шинж чанарыг ашиглах явдал юм. Энэ шинж чанар нь HTML элементийн хэв маягийг шууд ашиглах боломжийг бидэнд олгодог бөгөөд энэ тохиолдолд текстийг төвлөрүүлдэг. Текстийг хэвтээ байдлаар голлуулахын тулд бид "text-align" шинж чанарыг "төв" гэсэн утгатай ашиглаж болно. Жишээлбэл, хэрэв бид догол мөрийг голлуулахыг хүсвэл бид зүгээр л "загварын" шинж чанарыг нэмж, "текстийг тэгшитгэх: төвд" гэсэн утгыг онооно.
HTML хэл дээрх текстийг голлуулах өөр нэг сонголт бол « tag ашиглах явдал юм
Эдгээр үндсэн аргуудаас гадна flexbox болон grid ашиглах зэрэг HTML хэл дээрх текстийг төвлөрүүлэх бусад дэвшилтэт аргууд байдаг. Эдгээр техникүүд нь илүү төвөгтэй боловч дизайн хийхэд илүү уян хатан байдлыг санал болгож, текстийг хэвтээ болон босоо байдлаар голлуулах боломжийг бидэнд олгодог. Эдгээр техникийг ашиглахын тулд бид HTML шинж чанаруудын оронд CSS ашиглах ёстой. Бид хэв маяг, төвлөрсөн шинж чанарыг тусдаа CSS дүрмээр эсвэл загварын шинж чанарыг ашиглан шууд шугаман хэв маягаар тодорхойлж болно.
HTML хэл дээрх босоо болон хэвтээ текстийг төвлөрүүлэх
Босоо болон хэвтээ текстийг төвлөрүүлэх нь вэб хөгжүүлэлтэд харагдахуйц үзэмжтэй танилцуулга хийхэд маш хэрэгтэй арга юм. HTML-д дизайны хэрэгцээ шаардлагаас хамааран энэхүү төвлөрсөн үр дүнд хүрэх янз бүрийн аргууд байдаг. Энэ нийтлэлд бид HTML хэл дээрх текстийг голлоход ашигладаг хамгийн түгээмэл аргуудыг судлах болно.
HTML хэл дээрх текстийг голлуулах хамгийн хялбар аргуудын нэг бол "text-align" CSS шинж чанарыг ашиглах явдал юм. Энэ шинж чанар нь HTML элемент доторх текстийн хэвтээ байрлалыг тодорхойлох боломжийг танд олгоно. Текстийг тэгшитгэх утгыг төвд тохируулснаар текстийг элемент дээр хэвтээ байдлаар голлуулна. Жишээлбэл, догол мөрийг голлуулахын тулд бид үүнийг шошгон дотор ороож болно
HTML хэл дээрх текстийг төвлөрүүлэх өөр нэг нийтлэг арга бол "дээр үзэх" CSS шинж чанарыг "flex" болон "align-items" утгуудын хамт ашиглах явдал юм. Эдгээр утгыг саванд хэрэглэснээр бид доторх текстийг босоо болон хэвтээ байдлаар голлон байрлуулж болно. Элементүүдийн жагсаалт гэх мэт хувьсах хэмжээтэй элементүүд дээр текстийг голлуулах шаардлагатай үед энэ техник нь ялангуяа ашигтай байдаг. Үүнийг хийхийн тулд бид зүгээр л шошго нэмнэ
- мөн бид харгалзах CSS загварыг ашигладаг.
Эдгээр хоёр дурьдсан техник, автомат маржин ашиглах эсвэл уян хатан хайрцагны блокуудыг хэрэгжүүлэх зэрэг бусад сонголтуудын хамт вэб хөгжүүлэгчид HTML хэл дээрх текстийг төвлөрүүлэх янз бүрийн хэрэгслүүдтэй байдаг. Эдгээр техникийг туршиж, загвар бүрийн онцлог хэрэгцээнд нийцүүлэн тохируулах нь чухал юм. Эцсийн эцэст текстийг төвлөрүүлэх зорилго нь унших чадвар, визуал танилцуулгыг сайжруулах явдал гэдгийг санаарай. вэбсайт.
Текстийг HTML дээр төвлөрсөн үед хандах хандалтын талаар анхаарах зүйлс
Текстийг HTML хэл дээр төвлөрүүлэхийн тулд бүх хэрэглэгчдэд хамгийн оновчтой үзэх боломжийг хангахын тулд хүртээмжтэй байдлыг харгалзан үзэх нь чухал юм. Харааны бэрхшээлтэй хэрэглэгчийн туршлагыг алдагдуулахгүйгээр зөв төвлөрөлд хүрэх зарим техник, аргуудыг доор харуулав.
1. Утга зүйн хаягууд болон шинж чанаруудыг ашиглах: HTML хэл дээрх текстийг голлуулахдаа семантик хаягуудыг ашиглах нь зүйтэй.
босоо болон хэвтээ төвлөрлийг бий болгохын тулд "зохицуулах" эсвэл "загвар" гэх мэт шинж чанарууд. Эдгээр шошго болон шинж чанарууд нь дэлгэцийн уншигчдад агуулгын бүтцийг зөв тайлбарлахад тусалдаг.
2. Текстийг голлуулахын тулд зөвхөн зураг ашиглахаас зайлсхий: Хэдийгээр харааны анхаарлыг татахуйц төвлөрсөн болгохын тулд зургийг дэвсгэр болгон ашиглах нь сонирхолтой байж болох ч энэ нь харааны бэрхшээлтэй хүмүүст уншихад хэцүү болгодог. Үүний оронд төвлөрсөн хэв маягийг ямар ч хамааралгүйгээр ашиглахын тулд CSS-ийг ашиглана уу зурагнаас.
3. Текстийг гаргацтай эсэхийг шалгаарай: Текстийг голд оруулахдаа, ялангуяа харааны бэрхшээлтэй хүмүүст гаргацтай байх нь чухал. Тохиромжтой үсгийн хэмжээг ашиглаж, текст болон дэвсгэрийн хооронд хангалттай тодосгогч байгаа эсэхийг шалгаарай. Мөн уншихад хүндрэл учруулж болзошгүй тул том үсгээр болон доогуур зураасыг хэт их хэрэглэхээс зайлсхийхийг зөвлөж байна.
Хөдөлгөөнт төхөөрөмж дээр текст төвлөрлийг оновчтой болгох зөвлөмжүүд
Хөдөлгөөнт төхөөрөмжид зориулсан вэбсайтыг зохион бүтээхэд анхаарах нэг чухал зүйл бол текстийг зөв төвлөрүүлэх явдал юм. Төвлөрлийг оновчтой болгосноор агуулгыг зөв харуулж, жижиг дэлгэц дээр уншихад хялбар болгодог. Хөдөлгөөнт төхөөрөмж дээр текстийг үр дүнтэй төвлөрүүлэхэд тань туслах хэдэн зөвлөмж, арга техникийг энд оруулав.
1. CSS-д “text-align” атрибутыг ашиглана уу: Энэхүү атрибутын тусламжтайгаар та HTML элемент дэх текстийн зэрэгцүүлэлтийг зааж өгч болно. Текстийг хэвтээ байдлаар голлуулахын тулд "text-align: center"-ийг ашиглана уу. Энэ нь текстийг автоматаар голд нь оруулахыг баталгаажуулна дэлгэцээс гар утасны төхөөрөмжүүд дээр.
2. Тогтмол өргөнийг ашиглахаас зайлсхий: HTML элементүүдийн тогтмол өргөнийг тодорхойлох нь нийтлэг алдаа юм. Энэ нь текстийг халих эсвэл жижиг дэлгэцэн дээр таслахад хүргэдэг. Үүний оронд агуулгыг дасан зохицох байдлаар тохируулахын тулд шингэний өргөн эсвэл хувийн жинг ашиглана уу. өөр өөр төхөөрөмжүүд.
3. "Мөрийн өндөр" шинж чанарыг ашиглана уу: "Мөрийн өндөр" шинж чанар нь гар утасны төхөөрөмж дээрх текстийг унших чадварыг сайжруулахад тусална. 1.5 эсвэл 2 гэх мэт шугамын өндрийн утгыг бага зэрэг нэмэгдүүлснээр мөр хоорондын босоо зайг ихэсгэж, агуулгыг уншихад хялбар болгоно. Өөрийнхөө загварт хамгийн сайн тохирохыг олох хүртлээ өөр өөр утгуудыг туршиж үзээрэй.
Текстийн төвлөрөл нь бүх дэлгэц дээр тууштай, гаргацтай хэвээр байгаа эсэхийг шалгахын тулд өөр өөр хөдөлгөөнт төхөөрөмж дээр туршилт хийхээ үргэлж санаарай. Эдгээр зөвлөмж, арга техникийг ашигласнаар та гар утасны төхөөрөмж дээр текст төвлөрлийг хялбархан оновчтой болгож, гар утасны төхөөрөмж дээр хэрэглэгчийн сайжруулсан туршлагыг өгөх боломжтой. таны вэбсайт.
HTML-д текстийг голлуулахад нийтлэг тохиолддог асуудлуудыг засах
HTML хэл дээрх текстийг голлуулахтай холбоотой нийтлэг бэрхшээлүүдийн нэг нь заримдаа текстийг зөв голлуулаагүй байдаг. Энэ нь CSS шинж чанарыг буруугаар ашиглах эсвэл HTML баримт бичгийн бүтэц хэрхэн ажилладаг талаар ойлголтгүй байх зэрэг янз бүрийн шалтгааны улмаас тохиолдож болно. Гэсэн хэдий ч энэ асуудлыг шийдвэрлэхэд ашиглаж болох арга техник, аргууд байдаг.
HTML хэл дээрх текстийг голлуулах нэг арга бол CSS `text-align: center;` шинж чанарыг ашиглах явдал юм. Энэ шинж чанарыг агуулгыг, энэ тохиолдолд текстийг контейнерын төв хэсэгт тэгшлэхэд ашигладаг. Энэ техникийг ашиглахын тулд та дараах кодыг өөрийн мөрөнд нэмэх хэрэгтэй css файл эсвэл тохирох HTML тагны загварын шинж чанарт:
"`html
Энэ бол төвлөрсөн текстийн жишээ юм.
«`
Өөр нэг түгээмэл хэрэглэгддэг арга бол HTML ` шошго ашиглах явдал юм.
"`html
«`
Нэмж дурдахад, хэрэв та текстийг бүх хуудсанд голлуулахыг хүсвэл "margin" CSS шинж чанарыг "auto" утгуудын хамт ашиглаж болно. Жишээлбэл:
"`html
Энэ бол бүтэн хуудсан дээр төвлөрсөн текстийн жишээ юм.
«`
Эдгээр аргуудыг дагаж, тохирох CSS шинж чанаруудыг ашигласнаар та HTML хэл дээрх текстийг төвлөрүүлэхтэй холбоотой нийтлэг асуудлуудыг шийдэж чадна. Төслийнхөө хэрэгцээнд нийцүүлэн хэв маягийг туршиж, тохируулахаа үргэлж санаарай.
HTML текстийг төвлөрүүлэхэд хэрэгтэй хэрэгсэл, нөөц
Вэб контентыг боловсруулахдаа текстийг төвлөрүүлэх нь нүдэнд харагдахуйц үзэмжийг бий болгох үндсэн ажил юм. Энэ нийтлэлд бид танд хэд хэдэн арга техник, үр дүнтэй аргуудыг танилцуулах болно, ингэснээр та тэдгээрийг төсөлдөө хэрэгжүүлэх боломжтой болно.
HTML дээр текстийг голлуулах хамгийн хялбар аргуудын нэг бол шошгыг ашиглах явдал юм
Текстийг голлуулах өөр нэг сонголт бол CSS ашиглах явдал юм. Та HTML элементийн текстийг голлуулахын тулд CSS дүрмийн "төв" гэсэн утгатай text-align шинж чанарыг ашиглаж болно. Нэмж дурдахад, та хүссэн үр дүнд хүрэхийн тулд төвлөрсөн текстийн эргэн тойрон дахь зайг тохируулахын тулд захын зай, дэвсгэр зэрэг бусад CSS шинж чанаруудын давуу талыг ашиглаж болно. Зөв синтакс ашиглахаа үргэлж санаж, эдгээр дүрмийг голлохыг хүсч буй тодорхой HTML элементэд хэрэглээрэй.
Дүгнэж хэлэхэд, HTML хэл дээрх текстийг төвлөрүүлэх нь контентыг танилцуулахдаа цэвэр, мэргэжлийн дизайн хийхэд янз бүрийн аргаар хэрэгжиж болох үндсэн техник юм. вэб дээр. CSS text-align шинж чанарыг ашиглах эсвэл өөр өөр хэв маягийг хослуулах эсэхээс үл хамааран текстийн төвлөрлийг тус бүрийн хэрэгцээнд тохируулан өөрчилж болно. вэбсайт. Энэ нийтлэлд танилцуулсан үндсэн арга техникийг ойлгосноор хөгжүүлэгчид өөрсдийн төсөлд текстийн зөв, гоо зүйн байрлалыг баталгаажуулж чадна. Энэ мэдээлэл хэрэг болсон гэж найдаж байгаа бөгөөд вэб дээрх текстийнхээ танилцуулгыг сайжруулахын тулд эдгээр арга техникийг хэрэгжүүлэхийг урьж байна. Эдгээр текст төвлөрөх аргуудыг судалж, туршиж үзээд HTML загвараа дараагийн түвшинд аваачаарай!
Би Себастьян Видал, компьютерийн инженер технологи, өөрийн гараар хийх сонирхолтой. Цаашилбал, би бүтээгч нь tecnobits.com, би технологийг хүн бүрт илүү хүртээмжтэй, ойлгомжтой болгох хичээлүүдийг хуваалцдаг.