Css жижиг үсэг. Псевдо элементүүдийг ашиглан том үсгээр CSS загвар гаргах

25.08.2023

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

Би энэ асуудлыг шийдэх хэд хэдэн сонголтыг харуулах болно: PHP болон CSS нь аль хэдийн хэвлэгдсэн материалд илүү тохиромжтой, jQuery хэвлэхээс өмнө нөхцөл байдлыг засах боломжтой.

РНР дээр том үсгээр бичсэн мөрийн эхний үсэг

РНР-д мөрийн эхний тэмдэгтийг том үсгээр хөрвүүлдэг "ucfirst" хэмээх функц байдаг ч сул тал нь кирилл үсгээр тийм ч зөв ажилладаггүй.

Үүнийг хийхийн тулд бид өөрсдийн жижиг функцийг бичих болно. Хэрэгжилт нь дараах байдлаар харагдах болно.

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

CSS дахь мөрийн эхний том үсэг

Энэ арга нь харааны (өөрөөр хэлбэл эх кодсайтын саналууд байгаагаар харагдах болно) мөн эхний тэмдэгтийг том үсгээр хөрвүүлдэг.

Хэрэглээ нь дараах байдалтай байна.

эхний өгүүлбэр

хоёр дахь өгүүлбэр

гурав дахь өгүүлбэр

дөрөв дэх өгүүлбэр

#контент p:эхний үсэг (текст хувиргах: том үсэг; )

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

jQuery дээр том үсгээр бичсэн мөрийн эхний үсэг

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

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

$(баримт бичиг).бэлэн(функц() ( $(".агуулга").on("түлхүүр", функц() ( var текст = $(энэ).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1) $(энэ).val(new_text ));

Энэ скрипт нь текст бичих болон зүгээр л оруулах үед хоёуланд нь ажилладаг. Таны сайт дээр скриптүүд ажиллахын тулд та jQuery номын санг идэвхжүүлсэн байх ёстой гэдгийг бүү мартаарай.

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

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

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

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

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

Үр дүн

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

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

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

эсвэл үсэг болон HTML CSS форматын талаар дэлгэрэнгүй

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

Зүүн талд байгаа цэснээс та орчин үеийн, маш дэлгэрэнгүй HTML хичээлүүдийг олох болно.

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

Энэ сонирхолтой байж магадгүй юм.

эрин үе мэдээллийн нийгэм

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

HTML үсэг: том үсэг

Үсгийг форматлах жишээ:

Форматлах үр дүн:

Том үсгээр бичсэн чөлөөт текстийн жишээ

Том үсгээр бичсэн чөлөөт текстийн жишээ

Шошго - тодорхойлох том үсэгнүүд(Эдгээр шошгуудыг HTML 5-д дэмждэггүй).

CSS code style="text-transform:upppercase" - тодорхойлдог том үсэгнүүд.

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

HTML үсэг ба тэдгээрийн хоорондох CSS зай

Үсгийг форматлах жишээ:

Форматлах үр дүн:

Дурын HTML текстүсэг хоорондын CSS зай нь 2 пиксел байна

Шинж чанар ба утгын тодорхойлолт:

CSS кодын style="letter-spacing:2px" - тодорхойлдог CSS үсэг хоорондын зай.

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

Том үсэг нь том үсгээр эхэлдэг бөгөөд бараг бүх хэл дээр том үсгээр эхэлдэг. Мөн догол мөрний эхлэлийг тод томруунаар бичих нь текстийн бүтцийг бий болгож, ойлгоход хялбар болгодог. Интернет хуудас зохиохдоо текстийг зохиогчийн сонголт, орос хэлний дүрмийн дагуу бичиж болно. Та мөн css өргөтгөл - загварын хуудас бүхий файлд тодорхой "команд" оруулснаар дизайныг "автоматжуулах" эсвэл нэмэлт болгож болно. html файлзагварын хэсэг. Текстийн зарим дизайны элементүүдийг нэг дор хурдан өөрчлөхийн тулд CSS-ийг ихэвчлэн html-ээс гадна судалдаг.

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

Хэрэв та css ашигладаг бол догол мөр бүрийн эхэнд байгаа том үсгүүд онцгой харагдах болно. Жишээлбэл, доорх код нь html-д хаалтгүйгээр оруулсан бөгөөд текстийг "p" шошготой болгож том үсгээр - эхний үсэг - том үсгээр - стандарт хэмжээнээс 220%, шар - өнгөний утга шар, мөн бусад бичвэрээс өөр фонтоор бичнэ үү - Georgia vs. batangche.

()

p: эхний үсэг (фонт-гэр бүл: Гүрж; үсгийн хэмжээ: 220%; өнгө: шар;)

()

Зургийн хэлбэрээр өөрийн фонтыг бий болгосноор та үзэсгэлэнтэй том үсгүүдийг авах боломжтой - үсэг бүрийн хувьд тусдаа зураг, жишээлбэл, Хуучин Орос эсвэл Готик хэв маягаар байдаг. Тэдгээрийг зурж болно Дараа нь шаардлагатай газруудад том үсгийн оронд кодыг хаалтгүйгээр оруулж болно (). Нэмэлт шинж чанарууд нь өндөр ба өргөн байх болно - зургийн өргөн ба өндөр нь текстийн бусад хэсгүүдтэй нийцтэй байхын тулд пикселээр тохируулж болно. Жишээ нь: (). Ойролцоох хаалт< и >бид устгана.

Хэрэв танд цагаан толгойгоо өөрөө зурах боломж байхгүй бол том үсгийг энд байрлуулсан фонт ашиглан хийж болно. үнэгүй нэвтрэх Google (фонтын хэсэг) эсвэл бусад хайлтын систем болон нөөцүүд дээр. Үүнийг хийхийн тулд дээрх кодыг дараах байдлаар форматлах шаардлагатай.

()

p (фонт-гэр бүл: batangche; үсгийн хэмжээ: 93%;)

p: эхний үсэг (фонт-гэр бүл: Kelly+Slab; үсгийн хэмжээ: 220%; өнгө: цэнхэр;)

()

().

Google үйлчилгээ нь танд аль нэгийг нь сонгох боломжийг олгодог бөгөөд html эсвэл css-д оруулахад бэлэн холбоосоор хангадаг. Латин эсвэл кирилл үсгийн бүлгийг сонгох шаардлагатай байгаа тул бид таны анхаарлыг хандуулж байна. Орос хэл дээрх текстийг форматлахад бараг бүх латин фонтууд ажиллахгүй. Асаалттай Энэ мөчХайлтын систем нь 40 орчим төрлийг үнэ төлбөргүй өгдөг.

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

CSS-ийн таг нь эхнээсээ дуустал текст нь ижилхэн харагдах ерөнхий дизайны нэгэн хэвийн байдлыг арилгахад тусалдаг.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сөрөг зөрүүтэй шинэ анги "оролцуулах" нь түүнийг ойртуулна.

Та 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; text-transform: том үсэг; "Monotype Bernard Condensed", serif; margin-right:-0.1em;). эм ;)

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

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

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

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

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

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

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

Псевдо-элементүүдийн өгдөг давуу талуудтай ч гэсэн бид 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 ( font-size: 3.6em; text-transform: font-family: "Monotype Bernard Condensed", margin-right: 0.03em;)

Энэ кодыг 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; text-transform: font-family:Didot, margin-right:5px;)

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

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

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

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