Çox vaxt bir sayta material əlavə edərkən və ya məsələn, forumda yeni mövzu yaratarkən tələsik istifadəçi kiçik (kiçik hərf) hərflə cümlə (başlıq) yazmağa başlaya bilər. Bu müəyyən dərəcədə səhvdir.

Mən bu problemin həlli üçün bir neçə variant göstərəcəyəm: PHP və CSS artıq dərc edilmiş materiallar üçün daha uyğundur, o zaman jQuery nəşrdən əvvəl vəziyyəti düzəldə bilər.

PHP-də böyük hərflə yazılmış sətirin ilk hərfi

PHP-də sətrin ilk simvolunu böyük hərfə çevirən “ucfirst” adlı funksiya var, lakin onun mənfi cəhəti onun kiril əlifbası ilə tam düzgün işləməməsidir.

Bunun üçün öz kiçik funksiyamızı yazacağıq. Tətbiq belə görünəcək:

Bu versiyada biz böyük hərflə başlayan bir cümlə alacağıq, əslində bu, bizə lazım olan şeydir.

CSS-də sətirin böyük hərfi

Bu üsul vizualdır (yəni mənbə kodu sayt təklifləri olduğu kimi görünəcək) həm də birinci simvolu böyük hərfə çevirir.

İstifadəsi aşağıdakı kimidir:

ilk cümlə

ikinci cümlə

üçüncü cümlə

dördüncü cümlə

#content p:birinci hərf ( mətni çevirmək: böyük hərf; )

“Birinci hərf” psevdo-elementindən və “text-transform” xassəsindən istifadə edərək, abzasın hər birinci hərfi üçün dizaynı təyin etdik.

jQuery-də böyük hərflə yazılmış sətirin ilk hərfi

Daha əvvəl dediyim kimi, bu çevirmə üsulu hələ dərc edilməmiş materiallar üçün ən uyğundur.

Məsələn, mətn sahəsini götürəcəyik (başlıq daxil etmək üçün sahə rolunu oynayacaq) və onun üçün kiçik hərflə bir cümlə daxil edərkən onu böyük hərflə yazan kiçik bir skript yazacağıq:

$(sənəd).ready(funksiya() ( $(".məzmun").on("keyup", funksiya() ( var mətn = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1) $(bu).val(yeni_mətn ));

Skript həm mətn yazarkən, həm də sadəcə onu daxil edərkən işləyir. Unutmayın ki, skriptlərin saytınızda işləməsi üçün sizdə jQuery kitabxanası aktiv olmalıdır.

Mətn hərflərinin hərflərini dəyişməyə imkan verir.

Defolt dəyər heç biri olaraq təyin edilib və bu, mətnə ​​heç bir təsiri yoxdur. Mətnin vəziyyəti eyni olaraq qalır. Böyük və kiçik hərf dəyərləri simvolları müvafiq olaraq böyük və kiçik hərflərə çevirir. Böyük hərflə qeyd etsəniz, hər sözün yalnız ilk simvolları böyük hərflə yazılacaq. Miras valideynin dəyərini miras alır.

Nümunə h3 ( mətni çevirmək: böyük hərf; ) .kiçik hərf ( mətni çevirmək: kiçik hərf; ) .capitalize ( mətni çevirmək: böyük hərf; ) mətni çevirmək Bu başlıqdır. O, dəyəri böyük hərflə ona tətbiq olunan mətn çevirmə xassəsinə malikdir. Bütün simvollar böyük hərflə yazılacaq.

Bu paraqrafa Dəyəri Kiçik hərflə Mətn-çevirmə Xüsusiyyəti tətbiq edilir, yəni bütün hərflər kiçik hərflərlə yazılacaq.

Və bu axırıncı abzasa BÖYÜK YAZMA xassəsi ilə mətni çevirmə xassəsi tətbiq olunur. Hər sözün ilk hərfləri böyük hərflə yazılacaq və yalnız o.

Nəticə

Ancaq hər şey o qədər də sadə deyil. Bəzi nüanslar var. Yuxarıdakı misalın ikinci abzasına baxsanız, böyük hərf sözünün abzasa mətni çevirmə xüsusiyyətinin böyük hərf dəyəri ilə tətbiq edilməsinə baxmayaraq, mənbə mətninə uyğun gələn tamamilə böyük hərflərlə göstərildiyini görəcəksiniz. Bu, böyük hərflərin göstərilən dəyəri ilə sözlərin yalnız ilk hərflərinin yoxlanılması, qalanlarının isə ilkin vəziyyətindən asılı olmayaraq dəyişməz qalması ilə izah olunur.
Görünən sadəliyinə baxmayaraq, mətni çevirmə xüsusiyyəti çox faydalı ola bilər. Məsələn, saytınızın bütün H1 başlıqlarının mətnini böyük hərf etmək üçün stil cədvəlinə sadəcə bir xüsusiyyət əlavə etməlisiniz.

H1 (mətn çevrilməsi: böyük hərf;)

və problem həll olunacaq. Çox, çox ola biləcək bütün başlıqları əl ilə dəyişməyə ehtiyacınız olmayacaq.

və ya hərflər və HTML CSS formatı haqqında ətraflı

Fəsildə Hypertext Markup sahəsindən hərflərin formatlaşdırılması nümunələri var.

Soldakı menyuda müasir və çox ətraflı HTML dərslikləri tapa bilərsiniz.

Onlar sizə veb saytınızı sıfırdan yaratmağa imkan verəcək, lakin hələlik bir az aşağı baxın.

Bu maraqlı ola bilər.

dövr informasiya cəmiyyəti

Bəşəriyyət öz inkişafının yeni dövrünə qədəm qoymuşdur, bu dövrdə informasiya və şəbəkə texnologiyaları son dərəcə mühüm rol oynayır. Biz informasiya və telekommunikasiya texnologiyalarının sürətli inkişafı ilə xarakterizə olunan informasiya cəmiyyəti dövründə yaşayırıq. Kompüter və İnternetin meydana gəlməsi ilə çox böyük dəyişikliklər başladı. Kompüter və internet cəmiyyəti yeni davranış normaları, qaydalar və ideallar yaratmağa sövq edir. Televiziya əvvəlki nəsil üçün necə idisə, internet də yeni nəsil üçün odur. Amma Qlobal şəbəkə televiziyadan çox daha funksional, çünki alış, satış, ünsiyyət və təklif etmə imkanı verir müxtəlif yollarlaşəxsi internet səhifələrinin və veb-saytlarının yaradılması kimi özünüifadə.

HTML hərfləri: böyük hərflər

Məktub formatı nümunəsi:

Formatlaşdırma nəticəsi:

Böyük hərflərlə yazılmış sərbəst mətn nümunəsi

Böyük hərflərlə yazılmış sərbəst mətn nümunəsi

Etiketlər - müəyyən edin böyük hərflər(bu teqlər HTML 5-də dəstəklənmir).

CSS code style="text-transform:upppercase" - müəyyən edir böyük hərflər.

Başqa sözlə, böyük hərflər ilə müəyyən edilir CSS istifadə edərək atributlar.

HTML hərfləri və aralarındakı CSS boşluğu

Məktub formatı nümunəsi:

Formatlaşdırma nəticəsi:

Özbaşına HTML mətni və hərflər arasındakı CSS məsafəsi 2 pikseldir

Atributların və dəyərlərin təsviri:

CSS kodu style="letter-spacing:2px" - müəyyən edir CSS hərf aralığı.

Sol tərəfdəki menyuda oxşar formatlaşdırma nümunələrini axtarın. Diqqətiniz üçün təşəkkür edirik.

Böyük hərf, tərifə görə, demək olar ki, bütün dillərdə bir cümlə böyük hərflə başlayan mətn elementidir. Və abzasın başlanğıcını görkəmli böyük hərflə tərtib etmək mətni strukturlaşdırmağa imkan verir və onun qavranılmasını asanlaşdırır. İnternet səhifəsi tərtib edildikdə, mətn müəllifin üstünlüklərinə və rus dilinin qaydalarına uyğun olaraq yazıla bilər. Siz həmçinin css uzantısı olan bir fayla - üslub cədvəli - müəyyən "əmrləri" daxil etməklə onun dizaynını "avtomatlaşdıra" və ya əlavə edə bilərsiniz. html faylıüslub bölməsi. CSS adətən mətn boyu bəzi dizayn elementlərini bir anda dəyişmək üçün html-ə əlavə olaraq öyrənilir.

Bu, xüsusən saytın yüzlərlə səhifəsi varsa və onların hər birinə dəyişiklik etmək çox əmək tələb edən bir prosesdirsə doğrudur.

Əgər css tətbiq etsəniz, hər paraqrafın əvvəlindəki böyük hərflər xüsusi görünə bilər. Məsələn, html-də mötərizəsiz daxil edilən aşağıdakı kod “p” teqi ilə formatlanmış mətnin böyük hərfi - ilk hərfi - daha böyük - standart ölçüdən 220%, sarı - rəng dəyərini sarı etmək üçün imkan verir. onu mətnin qalan hissəsindən fərqli şriftlə yazın - Georgia vs. batangche.

()

p: birinci hərf (şrift ailəsi: Georgia; şrift ölçüsü: 220%; rəng: sarı;)

()

Şəkillər şəklində öz şriftinizi yaratsanız, gözəl böyük hərflər əldə edə bilərsiniz - hər hərf üçün ayrıca bir şəkil var, məsələn, Köhnə Rus və ya Gothic üslubunda. Onlar çəkilə bilər Sonra, tələb olunan yerlərdə, böyük hərfin yerinə, mötərizəsiz kodu daxil edə bilərsiniz (). Əlavə atributlar hündürlük və genişlik olacaq - mətnin qalan hissəsi ilə ahəngdar birləşmə üçün piksellərlə təyin edilə bilən təsvirin eni və hündürlüyü. Misal: (). Ətrafdakı mötərizələr< и >çıxarırıq.

Əlifbanı özünüz çəkmək imkanınız yoxdursa, böyük hərf yerləşdirilən şriftlərdən istifadə etməklə tərtib edilə bilər. pulsuz giriş Google (Şriftlər bölməsi) və ya digər axtarış sistemləri və resurslarında. Bunun üçün yuxarıdakı kodu aşağıdakı kimi formatlaşdırmaq lazımdır:

()

p (şrift ailəsi: batangche; şrift ölçüsü: 93%;)

p: birinci hərf (şrift ailəsi: Kelly+Slab; şrift ölçüsü: 220%; rəng: mavi;)

()

().

Google xidməti birini və ya digərini seçməyə imkan verir və html və ya css-ə daxil etmək üçün hazır keçidlər təqdim edir. Diqqətinizi ona cəlb edirik ki, şrift qrupunu seçmək lazımdır - latın və ya kiril, çünki... Rusdilli mətni formatlayarkən demək olar ki, bütün latın şriftləri işləmir. Aktiv hal-hazırda Axtarış sistemi 40-a yaxın növü pulsuz təqdim edir.

Böyük hərf və ya onun böyük antipodu istifadə edərək üslub edilə bilər CSS xüsusiyyətləri mətn çevrilməsi. Stil cədvəlində heç biri mətn çevrilməsi dəyərini təyin etsəniz, mətn onu yazdığınız kimi görünəcək. Bütün hərfləri kiçik hərflərə çevirmək üçün dəyər mətninin çevrilməsini təyin etməlisiniz: kiçik hərf, iki nöqtə ilə ayrılmış və böyük hərf üçün - böyük hərf. Xassənin mətn transformasiyası: böyük hərflə təyin edilməsi onu elə edəcək ki, hər sözün əvvəlində böyük hərf olsun.

CSS qapaqları mətnin başdan sona eyni göründüyü ümumi dizaynın monotonluğunu pozmağa kömək edir.

O vaxt və indi ilk hərflər

Salnaməçilər əlyazma əlyazmalarında böyük hərflərdən istifadə edirdilər, onlardan bəziləri 5-ci əsrə aiddir. Böyük hərflərdən istifadə 8-15-ci əsrlərdə davam etdi, mətbəələr çapı sənaye səviyyəsinə çatdırmağa imkan verdi. Mətnin əvvəlində həm əl ilə yazılmış, həm də çap olunmuş ilk hərflər yerləşdirilmişdir. Onlar tez-tez məktubun ətrafında yerləşən dekorativ naxışla bəzədilmişdir.

Yüksəltilmiş və endirilmiş hərflər bu gün də istifadə olunur. Onları qəzetlərdə, jurnallarda və kitablarda, həmçinin rəqəmsal çapda tapmaq olar. Yüksəltilmiş tip bəzən uzanmış tip adlanır. Onlar onlardan sonra gələn mətnin aşağı hissəsi ilə eyni yerdə yerləşdirilir. Düşmüş hərflər mətnin yuxarı hissəsi ilə eyni yerdə, bəzən mətn məzmununun gövdəsinin arxasındakı təbəqədə yerləşdirilir və ya mətnin qalan hissəsi onların ətrafına bükülür.

Qaldırılmış hərfləri müəyyən etmək daha asandır, çünki onlar mətnin qalan hissəsi ilə eynidir və adətən xarici kənarların ətrafını dəyişməyə ehtiyac yoxdur. Buraxılmış hərflər daha çox tələb edir incə sazlama. Əvvəlcə yüksəlmiş simvolların necə idarə olunduğunu anlasanız, bunu başa düşmək sizin üçün daha asan olacaq.

Dərslərdən istifadə

Artıq CSS anlayışına malik olan dizaynerlər bilirlər ki, birinci baş hərf üçün ayrıca CSS sinfi yaratmalıdırlar.

Paraqraf elementi və məktubu yaradan sinif üçün CSS kodu belə görünür:

p (font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;).myinitialcaps (font-size:48px; font-family: Didot;)

Və HTML kodu belə görünəcək:

Bizə nə verir:

Çox asan görünür? Siz əslində qaldırılmış xüsusi hərflərdən asılı olaraq düzəlişlər etməli olacaqsınız, çünki hər böyük hərf xüsusi kernq tələb edir. Qaldırılmış hərflər və əsas mətn üçün şrift seçdikdən sonra hər qaldırılmış hərf üçün ayrıca siniflər yaratmalısınız. Aşağıdakı CSS class.myinitialcapsi-də I və n arasındakı məsafəni azaltmaq üçün sağdakı kənar kənar mənfi qiymətə təyin edilmişdir.

Myinitialcapsi (şrift ölçüsü: 48px; şrift ailəsi: Didot; kənar-sağ:-1px;)

Bu halda, "I" və "n" arasında əlavə boşluq var.

Mənfi marja ilə yeni bir sinfin daxil edilməsi onu daha da yaxınlaşdırır.

Yuxarıdakı misaldakı ekran ayırdetmə qabiliyyətindən asılı olaraq, I və n birlikdə bulanıq görünə bilər. Bu, hərflərin sonundakı seriflərlə bağlıdır. Buna görə də, son CSS üslublarını seçməzdən əvvəl saytı sınaqdan keçirin müxtəlif cihazlar CSS baş hərflərindəki mətnin onlara necə göründüyünü görmək üçün.

Sitatlar və digər xüsusi hallar

Yalnız mətnin əvvəlindəki hərfləri böyüdə bilməzsiniz. Məktubun yanında görünəcək dırnaq işarələrinin daha böyük versiyasını yaratmaq üçün başqa bir sinif tətbiq edə bilərsiniz. Bizim vəziyyətimizdə dırnaq işarələri üçün nə ölçüsü 48 olan hərf sinfi, nə də 20 piksellik mətn sinfi uyğun deyil. Əksinə, bu, arasında bir şey olacaq - 30 piksel. Sitatları optik olaraq I ilə uyğunlaşdırmaq üçün onları 4 piksel aşağı aparacağıq:

Myinitialcapsq (şrift ölçüsü: 30px; şrift ailəsi: Didot; float: sol; kənar-yuxarı: 4px;)

Mənfi marja ilə yeni bir sinfin "daxil edilməsi" onu daha da yaxınlaşdırır.

CSS hərflərinin hər birini sitatlarla birlikdə təyin edərkən çox diqqətli olmalısınız ki, onların kerning və düzülməsi ətrafdakı işarələrə uyğun olsun. Məsələn, T hərfi sola, paraqrafın kənarından bir qədər kənara köçürülməlidir ki, onun eninə xətti vizual olaraq tərtibata uyğun olsun. C, G, O və Q kimi dəyirmi hərflərlə də eyni şeyi etməlisiniz. Bu nümunə 20, 30 və 48 şrift ölçülərindən istifadə edir. Lakin siz seçdiyiniz xüsusi şriftlərə əsasən ölçüləri seçməlisiniz. Eləcə də sayta baxılacaq ekranların ölçüləri və qətnamələri.

Pseudoelementlər və psevdosinflər

CSS psevdo-elementindən istifadə edərək, paraqraf elementinə ::birinci hərf əlavə etməklə asanlıqla qaldırılmış hərf yarada bilərsiniz. Köhnə brauzerlər üçün :birinci hərfdən (bir iki nöqtə ilə) istifadə edin:

p ( şrift ölçüsü: 1.2em; şrift ailəsi: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-alt:1.2em;) p::first-letter ( font-size: 3.6em; mətn-transform: böyük hərf; şrift-ailə: "Monotype Bernard Condensed", serif; em;)

N və B hərflərinin kernqini nəzərə alan CSS siniflərini ehtiva edən HTML kodu belə görünür...

İlk hərf, ilk hərf böyük hərfdir.
Sətir fasiləsi ilə növbəti sətirin başlanğıc qapağı yoxdur.

HTML mənbəyində qeyd edin ki, HTML-də baş hərf deyil, ilk hərf 3.6em ilkin qapaq ölçüsünə qədər ölçülür. Səliqəli, hə?

Ancaq çətin bir dönüş və yeni bir paraqrafın başlaması ilə həmişə başqa bir ilkin qapaq yaradılır. Özünüzə sual verə bilərsiniz, mən bunun hesabını necə verəcəyəm? Çox yeni abzasın əvvəlində ilkin başlığım olmalıdır? Yaxşı, bilərdin. Bəs siz onun belə görünməsini istəyirsinizmi və mütləq belə görünməlidirmi?

Paraqrafın birinci böyük hərfi hərfə çevrilir.
Sətir kəsilməsindən sonrakı ilk hərf böyük hərfə çevrilməyəcək.

oQeyd edək ki, HTML mənbə kodunda ilk hərf böyük hərflə yazılmır, lakin o, 3.6em simvola çevrilir.

Bununla belə, məcburi sətir kəsildikdən sonra belə, hər yeni abzasın əvvəlində həmişə bir məktub yaradılır. Özünüzə sual verə bilərsiniz: Bunu necə nəzərə almalıyam? Bütün bu hallar üçün hərflər əlavə etməliyəmmi? Yaxşı, bilərsən. Amma bu lazımdırmı?

Pseudo-elementlərin təmin etdiyi üstünlüklərə baxmayaraq, kerning və doldurma məsələlərini həll etmək üçün ayrıca sinifləri müəyyən etmək üçün çoxlu kod əlavə etməli olduq. Lakin bu üsul hər yeni paraqrafın ilk hərfini CSS baş hərfinə çevirir. Bəziləri üçün uyğun olmaya bilər, çünki hər bir abzasın ilk hərfini çevirməyə ehtiyac yoxdur.

Ağıllı tərtibat yaratmaq üçün psevdo-sinifləri və psevdo-elementləri birləşdirmək

:first-child psevdo-sinifinin əlavə edilməsi ilk hərflərin lazımsız çevrilməsi problemini həll etməyə kömək edir:

p ( şrift ölçüsü: 1.2em; şrift ailəsi: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-alt:0.5em;) p:first-child::first-letter ( font-size: 3.6em; text-transform: font-family: "Monotype Bernard Condensed", margin-right: 0.03em;)

Bu kodu HTML ilə birləşdirmək:

Birinci uşaq olaraq təyin olunan ilk hərf bu üsulla qaldırılmış damcı qapağına çevrilən yeganə hərfdir.

Yalnız birinci uşaq olaraq təyin olunan hərf çevrildiyi üçün bu nümunənin birinci uşaq olmadan əvvəlkindən fərqli olduğunu nəzərə alın. Bundan əlavə, biz paraqrafın əvvəlindən sonra və məcburi sətir kəsilməsindən sonra ilk hərfləri çevirmirik. Bu, paraqrafların bütün ilk hərflərini çevirdiyimiz zaman tərtibatın necə göründüyündən daha zərif görünür.

Pseudo-sinflərdən istifadənin üstünlüyü müxtəlif xüsusi halları idarə etmək bacarığıdır. Bəs mənfi tərəflər? Bir çox fərqli psevdo-siniflər var və onlar başınızı fırlatmaq üçün bir çox yollarla birləşdirilə bilər. Məsələn, psevdo-sinflər :first-child və :first-of-type eyni nəticələr verə bilər. Siz həmçinin psevdo-sinifi təkcə paraqrafa deyil, həm də elementlərə tətbiq edə bilərsiniz. Məsələn, Didot şriftində aşağıda qaldırılmış hərf nümunəsində göstərildiyi kimi. Margin atributunun A-nın sağına necə əlavə edildiyinə diqqət yetirin. Əks halda, bölmənin əvvəlində s hərfi ilə "yapışdıracaq":

bölmə ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; mətn-transform: böyük hərf-family:Didot, margin-sağ:5px;)

Və HTML ilə birlikdə:

Bölmənin əvvəlində, birinci hərf üçün qaldırılmış damcı qapağı göstərilir.

Və yeni paraqraf...

Əgər özünüzü eksperimental hiss edirsinizsə, :first-child və :first-of-type ilə yanaşı, müxtəlif üsulları araşdıra bilərsiniz. Məsələn, :nth-of-type və ya :nth-of-child kimi bu və ya digər psevdo-siniflərin CSS böyük hərf mətni üçün necə istifadə oluna biləcəyini görmək. Bu məqalədə qeyd olunan prinsiplərə əməl etsəniz və ya daha dərindən qazmağa başlasanız, birinci uşaq , :birinci tip və :birinci məktub CSS psevdo-sinifləri ilə necə işləməyi öyrəndikdən sonra müraciət edə biləcəksiniz. onları HTML elementlərinə düzgün uyğunlaşdırın.