Гэр / Интернет дээр ажиллах / Та i тэмдэглэгээг ашиглаж болно. Хэрхэн html дээр сайхан фонт хийх вэ: хэмжээ, өнгө, html үсгийн шошгууд. Блоклох. Хамгийн энгийн хуудасны бүтэц

Та i тэмдэглэгээг ашиглаж болно. Хэрхэн html дээр сайхан фонт хийх вэ: хэмжээ, өнгө, html үсгийн шошгууд. Блоклох. Хамгийн энгийн хуудасны бүтэц

Тодорхойлолт

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

Синтакс

Текст

Хаалтын шошго

Шаардлагатай.

Атрибутууд

CSS аналог

Жишээ. Тагийн хэрэглээ

Таг I

Lorem ipsum dolor sit amet

Лорем ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ут wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Анхаарна уу

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

Тодорхойлолт?

Тодорхойлолт

Тодорхойлолт бүр нь хэд хэдэн батлах үе шатыг дамждаг.

  • Зөвлөмж (Зөвлөмж) - тодорхойлолтыг W3C-ээр баталж, стандарт болгон санал болгож байна.
  • Нэр дэвшигчийн зөвлөмж ( Боломжит зөвлөмж) - стандартыг хариуцдаг бүлэг нь зорилгодоо нийцэж байгаа гэдэгт сэтгэл хангалуун байгаа боловч стандартыг хэрэгжүүлэхэд хөгжлийн нийгэмлэгийн дэмжлэг шаардлагатай.
  • Санал болгож буй зөвлөмж ( Санал болгож буй зөвлөмж) - энэ үе шатанд баримт бичгийг эцсийн батлахаар W3C-ийн Зөвлөх зөвлөлд хүргүүлнэ.
  • Ажлын төсөл - Хэлэлцүүлэг, нэмэлт өөрчлөлтийн дараа илүү боловсронгуй болсон төсөл.
  • Редакторын төсөл ( Редакцийн төсөл) нь төслийн засварлагчид өөрчлөлт оруулсны дараа стандартын ноорог хувилбар юм.
  • ноорог ( Тодорхойлолтын төсөл) нь стандартын анхны ноорог хувилбар юм.

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

Хөтөч: Desktop Mobile ?

Internet ExplorerChromeДуурьсафариFirefox
2 1 2 1 1
AndroidFirefox MobileOpera MobileSafari Mobile
1 1 6 1

Сайн байна уу эрхэм блог уншигчид! Энэ нийтлэлийн талаар ярих болно текст форматлах шошгууд. Гол жишээ нь текстийг тод эсвэл налуу болгох явдал юм. Мөн бид сайтын дотоод оновчлолд зарим шошгоны нөлөөлөл, тэдгээрийг бичих дүрмийг авч үзэх болно. Та энэ тухай доорх нийтлэлээс уншиж болно. Дашрамд хэлэхэд, та ижил төстэй текстийн дизайны элементүүдийг олон текст засварлагч, жишээлбэл Word програмаас олж болно.

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

Шошго бичих дүрэм, дараалал

Та нээх, хаах шошго гэж юу болохыг аль хэдийн мэддэг болсон. Хэрэв тийм биш бол энэ материалын эхэнд байгаа нийтлэлийг уншина уу. Товчхондоо, хоёр төрлийн шошго байдаг: дан (жишээ нь, шилжүүлэх шинэ мөр
) болон сав (хосолсон). Тиймээс, бүх текст форматлах шошгууд байна хосолсон. Энэ нь аливаа элемент нь нээх, хаах шошготой бөгөөд тэдгээрийн хооронд тодруулагчийг байрлуулах ёстой гэсэн үг юм. Жишээлбэл, зөв сонголтхэллэг иймэрхүү харагдах болно: Сонголт

Хөтөч энэ фрагментийг боловсруулах үед та дараах текстийг харах болно. Сонгосон фрагмент.Дашрамд хэлэхэд, бүх шошго RSS тэжээлд харагдахгүй байна ().

Таг бичихдээ гол зүйл бол хаахаа мартаж болохгүй. Үгүй бол хуудсан дээрх бүх текст тод өнгөтэй болно (шошготой жишээнд ). Гэхдээ тодорхой фрагментийг тод, налуу үсгээр нэгэн зэрэг сонгох шаардлагатай тохиолдол байдаг. Гэхдээ энэ үйлдлийг гүйцэтгэдэг шошго байхгүй байна. Энэ байдлаас гарах цорын ганц арга зам бий: хоёр шошгыг нэгэн зэрэг ашиглах. Та тэдгээрийг ямар дарааллаар ашиглах нь хамаагүй. Тиймээс текстийг дараах шошготой бичнэ үү.

Сонголт

эсвэл үүнтэй адил:

Сонголт

Та одоо ч гэсэн авдаг Сонголт нэгэн зэрэг налуу болон тод. Гэсэн хэдий ч эхний сонголтыг ашиглах нь илүү дээр юм, учир нь эхэндээ энэ нь цорын ганц бөгөөд зөв байсан юм. Түүнчлэн, тохиргооноос хамааран хөтөч бүр шошгыг өөр өөрөөр боловсруулах боломжтой гэдгийг бүү мартаарай. Одоо өөрсдөө форматлах хаягууд руу шилжье.

Текстийг тод, налуу болгох - шошго , , болон

Хамгийн алдартай текст форматлах шошгууд - үүнийг тодруулах зоригтойболон налуу үсгээр. Ихэвчлэн тэдгээрийг ямар ч фрагментэд ач холбогдол өгөхөд ашигладаг. Эхний тохиолдол нь агуулсан фрагментийг сонгоход үйлчилдэг хэрэгтэй мэдээлэлэсвэл түлхүүр үгс. Налуу үсэг нь тод бичвэртэй ижил зорилготой боловч налуу үсэг нь тод тексттэй харьцуулахад үндсэн текстийн дэвсгэр дээр бага харагддаг тул мэдээлэл нь тийм ч чухал биш юм.

-ээс эхэлье текстийг тод болгох. Энэ үйлдэлд ашигласан хоёр шошго байна - болон . Ялгаанууд Гадаад төрхүгүй. Хэдийгээр хөтөч бүр элемент бүрийг өөр өөрөөр тайлбарлаж чаддаг тул зарим ялгааг олж харах боломжтой байх ёстой. Шошго дээрх текст иймэрхүү харагдаж байна болон Хөтөчөөр аль хэдийн боловсруулсан хэлбэрээр:

Хүчтэй шошготой текст

b шошгон дээрх текст

Энэ хоёр мөр нь хуудасны эх кодонд хэрхэн харагдахыг энд харуулав.

Хүчтэй шошготой текст b шошгон дээрх текст

Энэ тохиолдолд бид ижил нөхцөл байдлыг ажиглаж болно налуу шошгууд болон . Хоёр жишээний ялгааг олохыг хичээ:

Эм таг дахь текст

Таг дахь текст I

Мөн энд эх код байна:

Эм таг дахь текст Таг дахь текст I

Тиймээс, тод, налуу үсгээр бичсэн сонгон шалгаруулах шошгууд нь үнэндээ ялгаатай биш боловч яагаад бидэнд, жишээлбэл, шошго хэрэгтэй байна вэ? хэрэв байгаа бол ? Эцсийн эцэст, сүүлийнх нь зөвхөн нэг тэмдэгт агуулдаг (хаалтанд тооцохгүй) тул бичихэд хялбар байдаг. Тэгээд гол зүйл бол шошго юм болон нөлөөлөх. Хэрэв та эдгээр шошготой түлхүүр үгсийг хүрээлвэл энэ нь сайтын сурталчилгаанд эерэгээр нөлөөлнө.Гол нь үүнийг хэтрүүлж болохгүй - текст нь шошгон дээр дээд тал нь 5% тод тексттэй байх ёстой. , мөн шошгонд ижил хэмжээний налуу байна .

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

Текстийн ташуу зураасыг тодруулна - , болон

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

Өөр хоёр ижил төстэй шошго - болон . Аль аль нь зураасан бичвэрийн үүргийг гүйцэтгэдэг. Та энэ шошгыг ямар ч нөхцөлд ашиглаж болно: хэрэв та баримт бичгийг (эсвэл түүний нэг хэсгийг) шинэчилж байгаа бол хуучныг нь хасаад шинийг нэмж болно; хэрэв та материалын сэдвээс гажсан зүйл бичих гэж байгаа бол; ёс суртахуун, ёс зүйн хэм хэмжээнд нийцэхгүй зүйл.

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

Tag ба шинж чанарууд - текст үсгийн тохиргоо

Одоо шинж чанаргүйгээр ашиглагддаггүй шошгыг авч үзье. Үүний тусламжтайгаар та текстийн тодорхой хэсэгт параметрүүдийг тохируулах боломжтой. Ерөнхийдөө, одоо ашиглах нь илүү дээр юм (загварын каскадын хуудас), учир нь Тэдгээрийг ашигласнаар та хуудасны HTML кодыг бүхэлд нь багасгах боломжтой. Тиймээс ижил шошгыг анхаарч үзээрэй . Түүний хувьд бүх зүйл бий гурван шинж чанар:

  • нүүр- фонт өөрөө. Жишээлбэл, Arial, Courier эсвэл Verdana. Та хэд хэдэн зүйлийг жагсааж болно, учир нь. бүх хэрэглэгчид өргөн хүрээний фонттой байдаггүй бөгөөд нүүрний шинж чанарт хэд хэдэн бичвэл хөтөч нь алийг нь ашиглах, эс тэгвээс системд аль нь байгааг сонгох боломжтой болно;
  • хэмжээнь текстийн хэмжээг зааж өгөх шинж чанар юм. Үүнийг дурын нэгж болон пикселээр илэрхийлж болно;
  • өнгө- текстийн өнгө. Энэ шинж чанарыг HTML өнгөт код болон аман хэлбэрээр ашиглаж болно. Эхнийх нь #FFFFFF шиг харагддаг (F нь А-аас F хүртэлх дурын тоо эсвэл үсэг), харин сүүлийнх нь бичигдсэн байдаг. энгийн үгээр(жишээлбэл, улаан - улаан).

Таг дээрх текст иймэрхүү харагдаж байна шинж чанар бүрийг ашиглан:

Энэ текст нь 6px байна


Энэ текст улаан байна

Энэ текстийг Arial фонтоор бичсэн болно

Энэ текст улаан, 5px хэмжээтэй байна.

Бичсэн кодыг боловсруулсны дараа та дараах зүйлийг харах болно.

Блок текстийн дизайны элементүүд - Гарчиг

-

, догол мөр

Эцэст нь бид бараг бүх баримт бичигт хэрэглэгддэг блок элементүүдийг авч үзэх болно. Эдгээр нь гарчиг ба догол мөрийн шошго юм. Эхнийхийг авч үзье. Гарчиг нь 6 төрөлтэй бөгөөд тус бүр өөрийн гэсэн шошготой. Төрөл бүр нь зөвхөн өөрийн серийн дугаартай бөгөөд шошго ашиглан бүртгэгддэг.

,

,...,

. Боловсруулсны дараа бүх толгойнууд дараах байдалтай байна:

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

Одоо догол мөр сонгох шошгоны талаар ярилцъя

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

Ногоон тэгш өнцөгт нь нэг догол мөрийг, улаан тэгш өнцөгт нь өөр нэг догол мөрийг агуулна. Хөтөчөөр боловсруулсны дараа энэ код хэрхэн харагдахыг энд харуулав (сум нь хоосон мөрийг заадаг):

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

Энэ тухай өгүүллийн төгсгөл юм баримт бичгийн форматын шошго. Энэ нийтлэлд миний тайлбарласнаас олон зүйл бий. Зүгээр л заримыг нь маш их хэлэх хэрэгтэй бөгөөд үүний үр дүнд бүрэн тойм бүхий тусдаа нийтлэлүүдийг тэдэнд зориулах болно.!

Налуу фонт нь текстийн хэсгийг тодруулж, түүнд тодорхой ач холбогдол өгөх хамгийн түгээмэл аргуудын нэг юм. Энэ нь ишлэл, зүүлт тайлбар, гарчиг, зохих нэрэнд тохиромжтой. HTML-д налуу үсгээр харуулах хоёр тусгай шошго байдаг. CSS-д налуу нь үсгийн маягийн шинж чанараар хянагддаг.

Налуу эсвэл налуу фонт уу?

Ижил фонтыг налуу үсгээр харуулах нь өөр байж болно.

Зураг нь ижил Playfair Display фонтоор гурван блок текстийг харуулж байна. Эхнийх нь ердийн роман хэв маягтай, хоёр дахь, гурав дахь нь налуу байна. Тэд ижил хөтөч дээр нээлттэй байна Гүүгл Кромгэхдээ тэд огт өөр харагдаж байна.

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

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

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

HTML курсив

HTML хэл дээр налуу бичвэрт зориулсан хоёр тусгай шошго байдаг: i (налуу гэсэн үгнээс) болон em. Эдгээр тодорхойлогчдын аль нэгэнд хавсаргасан текстийн фрагментийн хэв маяг ижил байх болно.

Ялгаа нь логик хуваарилалтад оршдог. em tag нь фрагментийн онцгой ач холбогдлыг илэрхийлдэг. Энэ нь хайлтын роботууд болон дэлгэц уншигчдад чухал ач холбогдолтой бөгөөд энэ нь аялгууг ашиглан заасан текстийг тодруулах болно.

үсгийн маягийн шинж чанар

CSS-д налууг үсгийн маягийн хэллэгээр удирддаг. Энэ нь гурван үндсэн утгын аль нэгийг авч болно:

  • хэвийн - ердийн фонт;
  • налуу - налуу хэв маяг;
  • ташуу - ташуу хэв маяг.

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

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

Эм тагнаас ялгаатай нь онцолсон фрагментэд онцгой ач холбогдол өгдөггүй, харин i тодорхойлогчтой тохирдог.

Жишээ

Ишлэлийг ихэвчлэн налуу үсгээр тодруулдаг. Үүнийг сайхан харагдуулахыг хичээцгээе.

Ишлэл (фонтын хэв маяг: налуу; хүрээ-зүүн: 5px хатуу ягаан; дэвсгэр-зүүн: 20px; )

Баруун талын гоёл чимэглэлийн хүрээ болон дэвсгэрээс гадна ишлэлийн блок нь налуу утгатай үсгийн маягийн дүрэмтэй.

Энэ нь налуу CSS-ийг тохируулдаг.