Текстийн гол цэгүүдийг тодруулахын тулд html дээр босоо шугамыг хэрхэн яаж хийх вэ. html болон css ашиглан хэвтээ ба босоо шугамууд Босоо шугамыг css болгоно

Хэвтээ шугамуудхослогдоогүй (хаалтын шошго шаардлагагүй) хаягаар үүсгэгдсэн

мөн нэлээд өвөрмөц дизайны элементүүд байж болно. Хэвтээ HTML мөрүүдийг нэмсэн текстийг форматлах нь тухайн хуудсанд текстийг танилцуулах тодорхой логикийг өгөх бөгөөд уншигчдад дараалан судлах шаардлагатай мэдээллийн блокуудыг тодруулахад хялбар болгоно. Tag
янз бүрийн өнгө, зузаан, урттай хэвтээ шугам үүсгэж болно. Доорх жишээн дээр үзүүлсэн шиг үүнийг хийхэд маш энгийн.

Дашрамд хэлэхэд, та блок загварын шинж чанарыг бас ашиглаж болно

Тэгээд
шугам үүсгэх зориулалттай
тодорхой байршилд. Үнэн, энэ сонголт үргэлж тохиромжтой байдаггүй, жишээлбэл, зураг зурах нь заримдаа үр дүнгээ өгдөггүй, гэхдээ олон тохиолдолд ийм байдлаар асуудлыг шийдэх боломжтой байдаг. Жишээлбэл, үүссэн шугамын дотор шошго
та текст оруулах боломжгүй. Гэхдээ блок дотор энэ нь боломжтой бөгөөд байнга дадлага хийдэг. Тиймээс та дизайны шаардлагаас хамааран сонголтоо сонгох хэрэгтэй.

HTML дээрх босоо шугамууд.

А босоо шугамуудҮнэндээ ижил блокуудад үүсдэг

Тэгээд
.
Цорын ганц таагүй зүйл бол шошго нь бүх хөтөч дээр байдаггүй.
адилхан ажилладаг, гэхдээ та хичээх хэрэгтэй
болон хуудсыг тохируулах, эсвэл шинэчлэгдсэн хөтчүүдийг ашиглах.

Хэвтээ шугам үүсэх:

Tag
хуудсан дээр хэвтээ шугам оруулах ба дараах шинж чанаруудтай:

Шошгоны синтакс
:

HTML дээрх хэвтээ шугамуудын жишээ:

HTML дээрх босоо шугамуудын жишээ:

Зүүн талд байгаа улаан босоо шугамын жишээ энд байна.

Баруун талд байгаа улаан босоо шугамын жишээ энд байна.

Дээд талд байгаа хэвтээ улаан шугамын жишээ энд байна.

Доорх улаан өнгийн хэвтээ шугамын жишээ энд байна.

Энд хэвтээ ба босоо шугамын жишээ байна.

HTML дээрх босоо болон хэвтээ шугамын жишээнүүдийн синтакс:

хэв маягийн шинж чанарт анхаарлаа хандуулаарай
хил - зүүн(-баруун): 4px хатуу #FF0000;:

Таг ашиглан тойрог үүсгэв

Зүүн талд байгаа улаан босоо шугамын жишээ энд байна.

Баруун талд байгаа улаан босоо шугамын жишээ энд байна.

Доорх улаан өнгийн хэвтээ шугамын жишээ энд байна.

Энд хэвтээ ба босоо шугамын жишээ байна.

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

Гэхдээ энэ бүхэн төсөөлөл, хүсэлтээс хамаарна. Тиймээс сонгож, хэлбэржүүлээрэй.

Сайн байна уу, миний сургалтын сайтын үнэнч захиалагчид, мөн блогын зочид. Та вэб нөөцийн хуудсууд дээр html дээрх босоо шугам зарим мэдээллийг тусгаарлаж байгааг анзаарсан уу? Тиймээс энэ нь маш энгийн, гэхдээ үр дүнтэй аргаагуулгын хүссэн хэсэгт уншигчдын анхаарлыг татах.

Тийм ч учраас энэ хэвлэлБи босоо шугамыг тохируулах хэрэгсэл, шошго судлахад өөрийгөө зориулахыг хүсч байна, мөн энэ техникийг өөр хаана ашиглаж болохыг танд хэлэхийг хүсч байна. Одоо эхэлцгээе!

Босоо текст тусгаарлалтыг юунд ашигладаг вэ?

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

Ихэнх тохиолдолд өргөлтийг хуудасны текстийн агуулгад байрлуулдаг. Үүний тулд бид ашигладаг:

  • тусгай шошго, жишээлбэл, < хүчтэй>, < i>, < том>мөн бусад;
  • текстийг догол мөр болгон хувааж, янз бүрийн түвшний гарчиг оруулах;
  • төрөл бүрийн ашиглан объект сонгох;
  • үсгийн хэв маягийг өөрчлөх;
  • агуулгад хүрээний хүрээг оруулах гэх мэт.

Сүүлийн цэгийг авч үзье.

Хүрээнь тодорхой объектуудыг бөөнөөр нь салгах, онцлох, вэб контентыг зүгээр л зохион бүтээх нийтлэг механизм юм. Тэдгээрийг үл хөдлөх хөрөнгө ашиглан бүтээдэг хил.

Энэхүү CSS хэлний элемент нь маш уян хатан бөгөөд сонгосон объектын бүх тал дээр эсвэл зөвхөн нэг талд хүрээ байрлуулж болно. Би хүснэгтэд чухал шинж чанаруудыг жагсаасан.

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

Хил хязгаар нь шулуун шугамаас илүү харагдах боломжтой гэдгийг тэмдэглэхийг хүсч байна. Тэд бас гарч ирж болно:

  • цэг(цэгтэй)
  • цэгтэй(тасархай)
  • шугаман(хатуу)
  • давхар(давхар)
  • эзэлхүүнтэй(ховил, оруулга, нуруу ба гаралт) хүрээ
  • эсвэл ашиглан өвөг дээдсийн хэв маягийн тохиргоог давт түлхүүр үгөвлөн авах.

Заримдаа надад “Хилийг дүрс хэлбэрээр дүрсэлж болох уу, яаж хийх вэ?” гэх мэт асуултуудтай тулгардаг. Хариулт нь тийм. Мөн үүнийг маш энгийнээр хийдэг.

Үүний тулд CSS-ийг бүтээгчид элементийг өгсөн хилийн зураг, үүнд та зурганд хүрэх замыг зааж, хилийн тал бүрийн зузааныг дүрслэх хэрэгтэй.

Практик хэсэг

Миний бодлоор онолыг шалгах цаг болсон. Таны даалгавар бол текстийн үндсэн хэсгийг бичиж, гол цэгүүд эсвэл ишлэлүүдийг босоо шугамаар тусгаарлах явдал юм. Жишээ кодыг доор үзүүлэв.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Босоо шугам

Энэ текст нь маш чухал юм.

Босоо шугам

Эхний догол мөр. Зүүн хүрээг ашиглах

Эхний догол мөрөнд текстийн гол цэгийг зүүн давхар ягаан шугамаар тодруулна.

Энэ текст нь маш чухал юм.

Хоёр дахь догол мөр. хилийн дүрсийг ашиглах

Хоёр дахь догол мөрөнд бид текстийн гол цэгийг зүүн талын босоо шугамаар дүрс хэлбэрээр тодруулна.

Энэ текст нь маш чухал юм.

Таны анзаарсанчлан материал нь маш хөнгөн боловч олон янзын асуудлыг шийдвэрлэхэд тустай байж болно. Үүгээр би чамтай баяртай гэж хэлье. Манай найрсаг хамт олонд бүртгүүлж, найзуудаа урихаа бүү мартаарай. Баяртай!

Хүндэтгэсэн, Роман Чуешов

Сайтын зарим чухал элементүүдийг онцлон тэмдэглэхийн тулд бүх төрлийн CSS хэв маяг, шинж чанаруудыг ашиглах нь гэмтээхгүй байх болно. Мэдээжийн хэрэг, та текстийн талаар хэт их санаа зовох хэрэггүй бөгөөд үүнийг тод эсвэл налуу үсгээр тодруулах, арын дэвсгэрийг өөрчлөх эсвэл текстийн эргэн тойронд хүрээ хийх шаардлагагүй. Гэхдээ танилцуулсан аргуудын нэг нь үргэлж тохиромжтой байдаггүй. Танд семантик ачааллын онцлогоос шалтгаалан хуваах шаардлагатай текст байна гэж бодъё. Энд HTML болон CSS шинж чанарууд аврах ажилд ирдэг.

CSS ашиглан текстэнд хэрхэн мөр гаргах вэ

Төлөвлөгөөгөө хэрэгжүүлэхийн тулд бид холбоо барих хэрэгтэй болно style.css файл, түүнд харгалзах өмчийг бичсэн хил. Энэ нь текстийн дээр, доор эсвэл тодорхой талд мөр гарч ирэхэд хүргэнэ. Хариуд нь мөрийг харуулах үүрэгтэй хэд хэдэн шинж чанарууд байдаг, тухайлбал:

- хилийн дээд– текстийн дээр байрлах хэвтээ шугам;

- хилийн баруун– текстийн баруун талд байрлах босоо шугам;

- хилийн доод– текстийн доор байрлах хэвтээ шугам;

- хил-зүүн– зүүн талд байрлах босоо шугам.

Хэрхэн html дээр мөр хийх вэ

Ашиглаж байна CSS шинж чанарууд HTML кодыг засварлах замаар шаардлагатай бүх утгыг оруулах боломжтой. Үүнийг хийхийн тулд та сайтын захиргааны хэсэг рүү очих хэрэгтэй. Нийтлэгдсэн материалуудаас аль нэгийг нь сонгоод солино уу текст засварлагч HTML кодыг засварлах горимд шилжүүлж, CSS шинж чанаруудыг нэмнэ үү. Доорх жишээг харж болно.



Цэгтэй эсвэл шулуун шугамыг хэрхэн яаж хийх вэ?



Эдгээр шинж чанаруудыг зааж өгснөөр та танилцуулж буй материал, догол мөр эсвэл гарчгийн ач холбогдлыг онцолж чадах уу?


Командуудын товч тайлбар

- өргөн- шугамын урт;

- хатуу- хатуу шугам;

- цэгтэй- тасархай шугам.

Загварын талаар илүү гүнзгий ойлголттой болохын тулд би үүнийг уншихыг зөвлөж байна.

Сайтын кодонд өөрчлөлт оруулах явцад шугамын төрөл, түүний зузаан, өнгийг тодорхойлдог шинж чанаруудыг зайгаар тусгаарлаж жагсаасан гэдгийг ойлгох шаардлагатай.

Энэ арга нь хэд хэдэн давуу талтай:

Бараг ямар ч шугам хийх боломжтой өргөн хүрээний боломжууд.

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

HTML таг ашиглан шулуун хэвтээ шугамыг хэрхэн хийх вэ

Би та бүхний анхаарлыг татахыг хүсч буй хамгийн эхний зүйл бол html-ийн бүх нарийн чанар, зарчмуудыг үл харгалзан энэхүү шошго нь хаах таггүй байна. Үүнийг хаана ч ашиглаж болно html код, шошго хооронд Тэгээд.

Шинж чанаруудыг тэмдэглэх

- өргөн– шугамын уртыг хариуцна. Хувиар эсвэл пикселээр зааж өгч болно.

- хэмжээ- шугамын зузаан. Пиксээр тодорхойлогдсон.

- өнгө– шугамын өнгийг тодорхойлно.

- тэгшлэх– шугамын зэрэглэлийг хариуцах шинж чанар. Хариуд нь баг нь түүнтэй холбоотой байдаг.

Сайн уу! Өнөөдөр би та нарт html ашиглан хэвтээ шугам хэрхэн хийхийг танд хэлэх болно.

Үнэн хэрэгтээ хэвтээ шугам хийх хэрэгцээ, жишээлбэл, текстийн нэг хэсгийг нөгөөгөөс нь салгах шаардлагатай үед ихэвчлэн үүсдэг.

Css ашиглан хэвтээ ба босоо шугамууд

Та үүнийг хийж болно css ашиглан. Үүнийг хийхийн тулд би текстийн шаардлагатай хэсгийг div таг ашиглан блок дотор хавсаргаж, дараа нь style.css файл эсвэл html кодын шууд дээд эсвэл доод хүрээний хил дээр border-top болон ашиглан энэ блокийн шинж чанаруудыг бичдэг. хилийн доод. Энд нэг жишээ байна:

Босоо HTML шугам

Css ашиглан хэвтээ шугам.

Энэ тохиолдолд би html кодоос шууд css ашиглан хэв маягийг тохируулж, дээд хүрээг хатуу, доод талыг нь хийсэн. тасархай шугам.

Энэ нь хуудсан дээр иймэрхүү харагдах болно:

Css ашиглан хэвтээ шугам.

Энэ арга нь давуу талтай:

  • Бараг бүх төрлийн шугамыг тохируулах боломжийг олгодог өргөн хүрээний тохиргоо;
  • Та хэвтээ болон босоо шугамыг үүсгэж болно. Босоо шугам гаргахын тулд хүрээ-дээд хэсгийг хил-зүүн, хүрээ-доод хэсгийг хил-баруун болгон өөрчлөх хэрэгтэй.

Сул талууд нь кодын харьцангуй төвөгтэй байдлыг агуулдаг.

Гэсэн хэдий ч, та html ашиглан текстэнд хэвтээ шугам оруулах боломжтой болсон. Үүний зэрэгцээ та CSS руу орох шаардлагагүй болно. Үүний тулд шошгыг ашигладаг

.

HTML таг ашиглан хэвтээ шугам

Энэ шошгоны эхний онцлог нь хосолсон хаалтын таг байхгүй байна. Үүнийг хаягуудын хооронд html кодын хаана ч ашиглаж болно Тэгээд.

Энэ шошго нь дараах шинж чанаруудтай:

  • Өргөн– бидний хэвтээ шугамын уртыг пикселээр эсвэл хувиар тодорхойлдог;
  • Өнгө- шугамын өнгийг тодорхойлдог;
  • Зохицуулах– шугамын тэгшилгээг баруун ирмэг рүү – баруун тийш, зүүн зах руу – зүүн тийш, голд – төв рүү тохируулна;
  • Хэмжээ– шугамын зузааныг пикселээр илэрхийлнэ.

Энд жишээ html- код:

Мөн энэ нь иймэрхүү харагдах болно:

Өөрөө харж байгаа байх, энэ аргасул талуудтай:

  • Цөөн шугамын тохиргоо;
  • Та босоо шугам хийж болохгүй.

Гэхдээ энэ арга нь хамаагүй хялбар юм.

Одоо та вэбсайт дээрээ босоо болон хэвтээ шугамыг хэрхэн яаж үүсгэхээ мэддэг болсон. Та асуултаа коммент хэсэгт асууж болно. Мөн бүртгүүлэхээ бүү мартаарай