Css том үсэг. CSS ашиглан том үсэг үүсгэх. HTML үсэг ба тэдгээрийн хоорондох CSS зай

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

Тэр үеийн болон одоо эхний үсэг

Шастир бичигчид гараар бичсэн гар бичмэлүүдэд том үсгийг ашигладаг байсан бөгөөд тэдгээрийн зарим нь 5-р зууны үеэс эхэлдэг. 8-15-р зууны үед хэвлэх машин нь хэвлэх ажлыг үйлдвэрлэлийн түвшинд хүргэх боломжийг олгосон үед том үсгийг үргэлжлүүлэн ашигладаг. Гараар бичсэн болон хэвлэсэн эхний үсгийг текстийн эхэнд байрлуулсан. Тэдгээр нь ихэвчлэн захидлын эргэн тойронд байрлах гоёл чимэглэлийн хээгээр чимэглэгддэг байв.

Өсгөсөн, буулгасан үсгийг өнөөг хүртэл хэрэглэсээр байна. Тэдгээрийг сонин, сэтгүүл, номноос, мөн дижитал хэвлэлтээс олж болно. Өргөгдсөн төрлийг заримдаа сунасан төрөл гэж нэрлэдэг. Тэдгээрийг дагасан текстийн ёроолтой зэрэгцүүлэн байрлуулна. Унасан үсгүүдийг текстийн дээд хэсэгтэй зэрэгцүүлэн байрлуулж, заримдаа текстийн агуулгын үндсэн хэсгийн ард давхаргад байрлуулна, эсвэл текстийн үлдсэн хэсэг нь тэдгээрийг тойрон эргэлддэг.

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

Ангиудыг ашиглах

CSS-ийн талаар аль хэдийн ойлголттой болсон дизайнерууд эхний том үсгийн хувьд тусдаа CSS анги үүсгэх хэрэгтэй гэдгийг мэддэг.

Догол мөрийн элемент болон үсгийг үүсгэх ангийн CSS код дараах байдалтай байна.

p (фонт-хэмжээ:20px; фонт-бүлэг: Жоржиа, "Times New Roman", Times, serif;).myinitialcaps (фонтын хэмжээ:48px; үсгийн гэр бүл: Didot;)

Мөн HTML код нь дараах байдлаар харагдах болно.

Бидэнд юу өгдөг вэ:

Хэт амархан юм шиг санагдаж байна уу? Том үсэг болгонд тусгай тэмдэг шаардлагатай тул та том үсгүүдээс хамаарч тохируулга хийх хэрэгтэй болно. Өргөгдсөн үсэг болон үндсэн текстийн фонтыг сонгосны дараа та өргөгдсөн үсэг бүрт тусдаа анги үүсгэх хэрэгтэй. Доорх хэсэгт css-class.myinitialcapsi I ба n-ийн хоорондох зайг багасгахын тулд баруун талын зах нь сөрөг байна.

Myinitialcapsi (фонтын хэмжээ: 48px; фонт-гэр бүл: Didot; баруун захын зай:-1px;)

IЭнэ тохиолдолд "I" болон "n" хоёрын хооронд нэмэлт зай байна.

Iсөрөг зөрүүтэй шинэ анги зэрэг нь түүнийг ойртуулна.

Дээрх жишээн дээрх дэлгэцийн нягтралаас хамааран I болон n нь хамтдаа бүдэгэрсэн мэт харагдаж болно. Энэ нь үсгийн төгсгөлд байгаа серифтэй холбоотой юм. Тиймээс та CSS-ийн эцсийн загвараа шийдэхээсээ өмнө өөр өөр төхөөрөмж дээр CSS-ийн тагтай текст хэрхэн харагдахыг харахын тулд сайтаа туршиж үзээрэй.

Ишлэл болон бусад онцгой тохиолдлууд

Та зөвхөн текстийн эхэнд байгаа үсгүүдийг томруулж болно. Та үсгийн хажууд гарч ирэх хашилтын том хувилбарыг үүсгэхийн тулд өөр анги хэрэгжүүлж болно. Манай тохиолдолд 48 хэмжээтэй үсгийн анги ч, 20 пикселийн текстийн анги ч хашилтанд тохирохгүй. Үүний оронд энэ нь 30 пикселийн хооронд байх болно. Бид ишлэлүүдийг I-тэй оптик байдлаар зэрэгцүүлэхийн тулд 4 пикселээр доошлуулна:

Myinitialcapsq (фонтын хэмжээ:30px; фонт-гэр бүл: Didot; хөвөх:зүүн; захын дээд:4px;)

“Iүүн дотор” сөрөг зөрүүтэй шинэ анги түүнийг ойртуулна.

Та CSS-ийн том үсгийг хашилтын хамт тохируулахдаа маш болгоомжтой байх хэрэгтэй бөгөөд ингэснээр тэдгээрийн тэмдэгт болон зэрэгцүүлэл нь эргэн тойрны тэмдэглэгээтэй тохирч байх ёстой. Жишээлбэл, T үсгийг зүүн тийш, догол мөрний ирмэгээс арай цааш зөөх шаардлагатай бөгөөд ингэснээр түүний хөндлөн шугам нь зураг төсөлд тохирох болно. Та C, G, O, Q гэх мэт дугуй үсгээр ижил зүйлийг хийх хэрэгтэй болно. Энэ жишээнд 20, 30, 48 үсгийн хэмжээг ашигладаг. Гэхдээ та сонгосон фонтдоо тулгуурлан хэмжээг сонгох хэрэгтэй болно. Мөн сайтыг үзэх дэлгэцийн хэмжээ, нарийвчлал.

Псевдо элементүүд ба псевдо ангиуд

CSS псевдо-элементийг ашиглан догол мөрийн элементэд ::эхний үсгийг нэмж хялбархан өргөгдсөн үсэг үүсгэж болно. Ашиглах: эхний үсэг ( нэг хоёр цэгтэй) хуучин хөтчүүдэд:

p (фонтын хэмжээ: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;) p::first-letter (фонтын хэмжээ: 3.6em;текст-хувиргах: том үсгээр; фонт-гэр бүл: "Монотип Бернард хураангуй", serif; баруун захын:0.03em;).initialb (баруун захын:-0.1em;).initialn (баруун захын:-0.15) эм ;)

N ба B үсгийн тэмдэгтийг харгалзан CSS ангиллыг агуулсан HTML код нь иймэрхүү харагдах болно...

Эхний үсэг, эхний үсэг нь том үсэг.
Мөр тасалсан тохиолдолд дараагийн мөрөнд эхний таг байхгүй.

n HTML-ийн том үсэг биш эхний үсэг нь 3.6em хэмжээтэй анхны том үсгийн хэмжээтэй болж байгааг HTML эх сурвалжаас харж болно. Цэвэрхэн, тийм үү?

Бхатуу өгөөжтэй ut, мөн шинэ догол мөр эхэлсэн, өөр эхний cap үргэлж бий болдог. Та өөрөөсөө асууж магадгүй, Би үүнийг яаж тооцох вэ? Би маш шинэ догол мөрийн эхэнд анхны дээд хязгаартай байх ёстой гэж үү?За, чи чадна. Гэхдээ та үүнийг ийм байдлаар харагдуулахыг хүсч байна уу, мөн энэ нь үнэхээр ийм харагдах ёстой юу?

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

О HTML эх кодын эхний үсгийг томоор бичээгүй, харин 3.6 эм тэмдэгт болгон хувиргасан болохыг анхаарна уу.

ТУХАЙГэсэн хэдий ч албадан мөр тасалсны дараа, шинэ догол мөр бүрийн эхэнд үргэлж үсэг үүсдэг. Та өөрөөсөө асууж болно: Би үүнийг хэрхэн анхаарч үзэх ёстой вэ? Би эдгээр бүх тохиолдлуудад үсэг нэмэх шаардлагатай юу?За, чи чадна. Гэхдээ энэ шаардлагатай юу?

Псевдо-элементүүдийн өгдөг давуу талуудтай ч гэсэн бид kerning болон padding асуудлыг шийдвэрлэхийн тулд тусдаа ангиудыг тодорхойлохын тулд маш олон код нэмэх шаардлагатай болсон. Гэхдээ энэ арга нь шинэ догол мөр бүрийн эхний үсгийг CSS том үсэг болгон хувиргадаг. Зарим хүмүүсийн хувьд энэ нь догол мөр бүрийн эхний үсгийг хувиргах шаардлагагүй тул тохиромжгүй байж магадгүй юм.

Ухаалаг зохион байгуулалтыг бий болгохын тулд псевдо анги ба псевдо элементүүдийг хослуулсан

:first-child псевдо анги нэмэх нь эхний үсгүүдийг шаардлагагүй хөрвүүлэх асуудлыг шийдвэрлэхэд тусална.

p (фонт-хэмжээ: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;) p:first-child::first-letter ( үсгийн хэмжээ: 3.6 эм; текст хувиргах: том үсгээр; үсгийн гэр бүл: "Монотип Бернард хураангуй", serif; захын баруун: 0.03 эм;)

Энэ кодыг HTML-тэй хослуулах нь:

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

Зөвхөн эхний хүүхэд гэж тодорхойлсон үсгийг хөрвүүлдэг тул энэ жишээ нь эхний хүүхэдгүйгээр өмнөхөөсөө ялгаатай болохыг анхаарна уу. Нэмж дурдахад, бид догол мөрийн эхэн болон албадан мөр тасалсны дараа эхний үсгийг хөрвүүлдэггүй. Энэ нь догол мөрийн бүх эхний үсгийг хөрвүүлэхэд бүтэц хэрхэн харагдахаас илүү гоёмсог харагдаж байна.

Псевдо ангиудыг ашиглахын давуу тал нь янз бүрийн онцгой тохиолдлуудыг шийдвэрлэх чадвар юм. Сөрөг талуудын талаар юу хэлэх вэ? Олон янзын псевдо ангиуд байдаг бөгөөд тэдгээрийг маш олон аргаар нэгтгэж чаддаг тул таны толгойг эргүүлж чаддаг. Жишээлбэл, :first-child ба :first-of-type псевдо ангиуд ижил үр дүнг гаргаж чадна. Та мөн псевдо ангиллыг зөвхөн догол мөрөнд төдийгүй элементүүдэд хэрэглэж болно

эсвэл

. Жишээ нь, Didot фонтын доорх өргөгдсөн үсгийн жишээнд үзүүлсэн шиг. A-ийн баруун талд маржин атрибут хэрхэн нэмэгдсэнийг анхаарна уу. Үгүй бол энэ хэсгийн эхэнд s үсгээр "наадаг" болно:

хэсэг ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; текст хувиргах: том үсгээр; үсгийн гэр бүл: Дидот, сериф; баруун захын зай: 5px;)

Мөн HTML-тэй хамт:

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

Мөн шинэ догол мөр ...

Хэрэв та туршилт хийж байгаа бол :first-child болон :first-of-type-ээс гадна өөр өөр аргуудыг судалж болно. Жишээлбэл, :nth-of-type эсвэл :nth-of-child гэх мэт эдгээр болон бусад төрлийн псевдо ангиудыг CSS том үсгээр бичихэд хэрхэн ашиглаж болохыг харна уу. Та энэ нийтлэлд дурдсан зарчмуудыг дагаж мөрдөж байгаа эсэхээс үл хамааран CSS-ийн псевдо ангиллын first-child , :first-of-type болон :first-letter-тэй хэрхэн ажиллах талаар сурсны дараа та өргөдөл гаргах боломжтой болно. тэдгээрийг HTML элементүүдэд зөв оруулах.

Өдрийн мэнд, сайт бүтээгч залуусаа. Өнөөдрийн нийтлэл нь текстийн контентыг зохион бүтээх сэдвийг хэлэлцэх болно. Тийм ч учраас та CSS хэрэглүүрийг ашиглан том үсгийг хэрхэн тохируулахыг сурч, уналтын таг үүсгэх хэд хэдэн сонголттой танилцаж, мэдээжийн хэрэг та бүх зүйлийг практик дээр туршиж үзэх боломжтой болно. За, одоо хөгжилтэй хэсэг рүүгээ орцгооё!

Текстийг өөрчилье

Загварын хуудсуудын каскадын ачаар та блокийн эхний тэмдэгт болон текстийг бүхэлд нь өөрчлөх боломжтой. Та хоёрыг яаж хийхийг би танд хэлье. Түүнчлэн, энэ нийтлэлд дурдсан бүх хэрэгслийг css1, css2, css2.1 болон css3 гэсэн гурван хэлний түвшинд дэмждэг.

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

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

Одоо онолын материалыг бататгахын тулд жишээг харна уу.

Текстийг хувиргах

Анхаар!

!Маргааш бүх гоо сайхны бүтээгдэхүүн хямдралтай байна!

Урамшуулал танай хотод байрлах бүх салбарт хүчинтэй.

Уналтын таг үүсгэх

Хэрэв та "drop cap" гэдэг нэр томьёо ямар утгатай болохыг мэдэхгүй байгаа бол яг одоо яригдаж буй сэдэвтэй шууд холбоотой тул үүнийг олж мэдэх цаг болжээ.

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

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

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

Тиймээс, энэ тохиолдолд бид ашигладаг: эхний үсэг. Бүх псевдо-элементүүдийн нэгэн адил энэ нь хоёр цэг ашиглан сонгогчдод хуваарилагдана. Загварын хуудасны бүх дүрмийн дараа шинж чанаруудыг зааж өгсөн болно. Гэхдээ та зөвхөн фонт, дэвсгэр, өнгө, дэвсгэр, захын зай, хүрээг засахтай холбоотой шинж чанаруудыг ашиглах боломжтой.

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

Өргөгдсөн эх

Энэ догол мөрөнд маш сонирхолтой агуулга бүхий өгүүлбэр багтсан болно.

Дараагийн догол мөрөнд сонирхолтой түүхийг үргэлжлүүлье.

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

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

Хэрэв танилцуулсан материал танд хэрэгтэй байсан бол миний блогын шинэчлэлд бүртгүүлж, олж авсан мэдлэгээ (мэдээж миний блогын холбоос) найзуудтайгаа хуваалцахаа бүү мартаарай. Амжилт хүсье!

Баяртай!

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

Текст үсгүүдийн том үсгийг өөрчлөх боломжийг танд олгоно.

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

Жишээ

h3 (текст хувиргах: том үсгээр; ) . жижиг үсгээр ( текстийг хувиргах: жижиг үсгээр; ) . том үсгээр бичих ( текстийг хувиргах: том үсгээр бичих; ) текст хувиргах

Энэ бол гарчиг юм. Энэ нь том үсгээр бичсэн текст хувиргах шинж чанартай. Бүх тэмдэгтүүд том үсгээр бичигдэнэ.

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

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

Үр дүн

Гэсэн хэдий ч бүх зүйл тийм ч энгийн биш юм. Зарим нюансууд байдаг. Хэрэв та дээрх жишээний хоёр дахь догол мөрийг харвал том үсгээр бичих гэсэн үг хэдийгээр догол мөрөнд том үсгээр бичихээр тохируулагдсан боловч эх бичвэртэй тохирч байгаа нь бүхэлдээ том үсгээр харагдаж байгааг та анзаарах болно. Үүнийг том үсгээр бичсэн үгийн зөвхөн эхний үсгийг шалгаж, бусад нь анхны төлөвөөс үл хамааран өөрчлөгдөөгүй хэвээр байгаатай холбон тайлбарлаж байна.
Хэдийгээр энгийн мэт боловч текст хувиргах шинж чанар нь маш ашигтай байж болох юм. Жишээлбэл, сайтынхаа бүх H1 гарчгийн текстийг том үсгээр бичихийн тулд загварын хүснэгтэд нэг өмч нэмэхэд л хангалттай.

H1 (текст хувиргах: том үсгээр;)

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

Элементийн текстийг том эсвэл том үсэг болгон хувиргах эсэхийг хянадаг. Утга нь none -ээс өөр байвал эх текстийн том том жижиг үсэг өөрчлөгдөнө.

товч мэдээлэл

Тэмдэглэл

	Тодорхойлолт	Жишээ
<тип>	Утгын төрлийг заана.	<размер>
A & B	Утга нь заасан дарааллаар гарах ёстой.	<размер> && <цвет>
А \| Б	Санал болгож буй утгуудаас (A эсвэл B) зөвхөн нэг утгыг сонгох шаардлагатайг харуулж байна.	хэвийн \| жижиг малгай
A \|\| Б	Утга бүрийг бие даан эсвэл бусадтай хамт дурын дарааллаар ашиглаж болно.	өргөн \|\| тоолох
	Бүлгийн үнэ цэнэ.	[ тайрах \|\| загалмай]
*	Тэг буюу түүнээс олон удаа давтана.	[,<время>]*
+	Нэг буюу хэд хэдэн удаа давтана.	<число>+
?	Заасан төрөл, үг эсвэл бүлэг нь сонголттой.	оруулах уу?
(А, Б)	А-аас багагүй давтана, гэхдээ В-ээс илүүгүй.	<радиус>{1,4}
#	Таслалаар тусгаарласан нэг буюу хэд хэдэн удаа давтана.	<время>#

Үнэ цэнэ

Том үсгээр бичих Өгүүлбэр дэх үг бүрийн эхний тэмдэгтийг томоор бичнэ. Үлдсэн тэмдгүүд нь гадаад төрхийг нь өөрчлөхгүй. жижиг үсэг Бүх текстийн тэмдэгтүүд жижиг үсгээр (жижиг үсэг) болно. том үсгээр Бүх текстийн тэмдэгтүүд том үсгээр (том үсгээр) болно. аль нь ч Тэмдэгтийн том үсгийг өөрчлөхгүй.

Sandbox

Винни Пух үргэлж бага зэрэг сэнгэнэдэггүй байсан, ялангуяа өглөөний арван нэгэн цагт, учир нь тэр үед өглөөний цай дуусч, үдийн хоол хараахан эхлээгүй байв. Тэгээд мэдээж тэр Туулай аяга, таваг гаргаж байгааг хараад үнэхээр их баярласан.

div (текст хувиргах: томоор бичих; )

Жишээ

текст хувиргах

Дундад зууны үеийн соёлын дурсгалт газар

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

Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 1.

Цагаан будаа. 1. Текст хувиргах шинж чанарыг ашиглах

Объект загвар

Объект.style.textTransform

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

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

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

Сайн байна уу энэ блогын уншигчид. Өнөөдөр би CSS ашиглан бүх том үсгийг хэрхэн яаж хийх талаар ярих болно. Мэдээжийн хэрэг, үүнийг хийхийн тулд та Caps Lock-ийг асааж, хүссэн текстээ бичиж болно, гэхдээ энэ нь маш энгийн арга юм. Гэхдээ дууссан нийтлэлд тусдаа догол мөрийг тодруулах шаардлагатай бол яах вэ?

css дээр бүх үсгийг том болгох

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

жижиг үсгээр - бүх текст жижиг үсгээр харагдана
том үсгээр - бүх үгсийг том үсгээр харуулсан (бидэнд хэрэгтэй зүйл)
томоор бичих - үг бүрийн эхний үсгийг томоор бичнэ

Энэ бол үндсэндээ таны мэдэх ёстой зүйл юм. Үлдсэн зүйл бол хүссэн элементэд хэрхэн хандахыг олж мэдэх явдал юм. Энэ жишээг төсөөлөөд үз дээ: та өгүүллийн тав дахь догол мөрийг бүх том үсгээр бичих хэрэгтэй. Мөн үүнийг хэрхэн хэрэгжүүлэх вэ?

Хүссэн элементэд хэрхэн хүрэх вэ?

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

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

Том үсэг(
Текст хувиргах: том үсгээр;
}

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

Эсвэл та нийтлэл бүрийн хоёр дахь догол мөрийг CSS ашиглан том үсгээр тодруулах хэрэгтэй. Дараа нь өөр сонголт танд тохирох болно. Өгүүллийн харагдах хэсгийг олоод nth-child псевдо-анги ашиглан хоёр дахь догол мөр рүү нэвтэрнэ үү. Энэ жишээнд нийтлэл бүхий манай блок нийтлэлийн ангитай.

Нийтлэл p:nth-хүүхэд(2)(
Текст хувиргах: том үсгээр
}

Таны харж байгаагаар тодорхой тохиолдол бүрт өөр өөр шийдэл байдаг. Хамгийн чухал зүйл бол үсгийн хэмжээг өөрчилдөг text-transform шинж чанарыг санах явдал юм.

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

Өнөөдөр бид текст хувиргах шинж чанарыг харлаа. Шинэ нийтлэлүүдийг хүлээн авахын тулд блогт бүртгүүлнэ үү.