Böyük hərflər css. Pseudo elementlərdən istifadə edərək böyük hərflərin CSS üslublarının yaradılması

25.08.2023

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 siz 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 qoyub, 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ə internet 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.

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, valideyninin 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ə xüsusiyyətinə 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ərflə yazın sözünün paraqrafa tətbiq edilən mətni çevirmək üçün təyin edilmiş xüsusiyyətinə baxmayaraq, orijinal mətnə ​​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.

Elementin mətninin böyük və ya böyük hərflərə çevrilməsinə nəzarət edir. Dəyər heç birindən fərqli olduqda, mənbə mətnin hərfi dəyişdiriləcək.

Qısa məlumat Qeydlər Təsvir Misal
Dəyərin növünü göstərir.
A && BDəyərlər göstərilən ardıcıllıqla çıxmalıdır. &&
A | BTəklif olunanlardan (A və ya B) yalnız bir dəyər seçməyiniz lazım olduğunu göstərir.normal | kiçik qapaqlar
A || BHər bir dəyər müstəqil və ya başqaları ilə birlikdə istənilən qaydada istifadə edilə bilər.eni || saymaq
Qrup dəyərləri.[ məhsul || xaç]
* Sıfır və ya daha çox dəfə təkrarlayın.[,]*
+ Bir və ya bir neçə dəfə təkrarlayın.+
? Göstərilən növ, söz və ya qrup isteğe bağlıdır.daxil?
(A, B)Ən azı A təkrarlayın, lakin B dəfədən çox deyil.{1,4}
# Vergüllə ayrılmış bir və ya bir neçə dəfə təkrarlayın.#
× Dəyərlər

böyük hərf Cümlədəki hər sözün ilk simvolu böyük hərflə yazılacaq. Qalan simvollar görünüşünü dəyişmir. kiçik hərf Bütün mətn simvolları kiçik (kiçik hərf) olur. böyük hərf Bütün mətn simvolları böyük hərf olur (böyük hərf). heç biri Simvolların hərfini dəyişmir.

Sandbox

Vinni Pux həmişə bir az təravət içməyə qarşı deyildi, xüsusən də səhər saat on birdə, çünki o vaxt səhər yeməyi çoxdan bitmişdi və nahar hələ başlamamışdı. Və təbii ki, o, Dovşanın fincan və boşqab çıxardığını görüb çox sevindi.

div (mətn çevirmək: böyük hərf; )

Misal

text-transform h1 ( text-transform: böyük hərf; /* Baş hərflər */ ) p ( text-transform: kapitallaşdırmaq; /* Hər söz böyük hərflə başlayır */ ) Orta əsrlərin mədəniyyət abidəsi

Amazon ovalığı pişik və itlərin kiçik daşınmasında qeyri-müəyyəndir və Hajos Bahia qırmızı şərabları ilə məşhurdur.

Nəticə bu misalŞəkildə göstərilmişdir. 1.

düyü. 1. Text-transform xassəsinin tətbiqi

Obyekt modeli

Obyekt.style.textTransform

Spesifikasiya

Hər bir spesifikasiya bir neçə təsdiq mərhələsindən keçir.

  • Tövsiyə - Spesifikasiya W3C tərəfindən təsdiq edilmişdir və standart olaraq tövsiyə olunur.
  • Namizəd Tövsiyəsi - Standarta cavabdeh olan qrup onun məqsədlərinə cavab verdiyinə əmindir, lakin standartın tətbiqi üçün inkişaf cəmiyyətindən kömək tələb edir.
  • Təklif olunan Tövsiyə - Bu mərhələdə sənəd yekun təsdiq üçün W3C Məsləhət Şurasına təqdim edilir.
  • İşçi Layihə - Müzakirə edilmiş və icmanın nəzərdən keçirilməsi üçün düzəliş edilmiş layihənin daha yetkin versiyası.
  • Redaktor layihəsi (Redaktor layihəsi) - layihə redaktorları tərəfindən düzəlişlər edildikdən sonra standartın qaralama variantı.
  • Qaralama (Draft spesifikasiyası) - standartın ilk qaralama versiyası.
×

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 fayla - üslub cədvəlinə müəyyən "əmrlər" 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.

Ç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ərflərə çevirən “ucfirst” adlı funksiya var, lakin onun dezavantajı 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ə “mətn-çevir” 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.