Bună ziua cititorilor acestui blog. Astăzi voi vorbi despre cum puteți face toate majusculele prin css. Desigur, pentru aceasta puteți include Majusculeși scrieți textul dorit, dar aceasta este o metodă destul de primitivă. Dar dacă trebuie să evidențiați un paragraf separat într-un articol deja terminat?

Scrieți cu majuscule toate literele în CSS

Există o proprietate de transformare a textului, care, ați ghicit-o, transformă textul. Are următoarele valori:

• minuscule - tot textul este afișat cu litere mici
• majuscule - toate cuvintele sunt afișate cu majuscule (de asta avem nevoie)
• cu majuscule - prima literă a fiecărui cuvânt este cu majusculă

Acesta este, de fapt, tot ce trebuie să știți. Rămâne doar să ne dăm seama cum să ne referim la elementul dorit. Să ne imaginăm acest exemplu: trebuie să valorificați al cincilea paragraf al articolului. Și cum se poate face acest lucru?

Cum se ajunge la elementul dorit?

După cum știți, un paragraf este creat folosind o etichetă html asociată, al cărei conținut întreg devine un paragraf. Nu mai rămâne decât să setezi o nouă clasă de stil pentru aceasta:

Acum putem face referire la acest paragraf special prin css fără a afecta restul. Puteți face acest lucru:

Majusculă (
Transformare text: majuscule;
}

Această metodă este potrivită atunci când trebuie să selectați un fragment într-un articol separat. Dar dacă toate paginile trebuie să aibă un anumit text cu majuscule. În acest caz, este mai bine să plasați blocul în fișierul șablon, astfel încât să nu trebuie să-l scrieți de fiecare dată.

Sau poate că trebuie să valorificați al doilea paragraf din fiecare articol folosind css. Apoi vi se va potrivi o altă opțiune. Găsiți blocul în care este afișat articolul și consultați al doilea paragraf folosind pseudo-clasa a n-a copil. V acest exemplu blocul nostru de articole are clasa articolelor.

Articolul p: al nouălea copil (2) (
Transformare text: majuscule
}

După cum puteți vedea, pentru fiecare caz specific, soluția sa este potrivită. Cel mai important lucru este să ne amintim despre proprietatea text-transform, care schimbă majusculele și minusculele.

În general, nu este recomandat să utilizați afișarea textului astfel, deoarece îi afectează foarte mult percepția, dar pot fi evidențiate unele fragmente deosebit de importante.

Astăzi am aruncat o privire asupra proprietății text-transform. Abonați-vă la blog pentru a primi articole noi.

Majuscule CSS ajută la ruperea monotoniei unui design uniform, ale cărui texte arată la fel de la început până la sfârșit.

Mai devreme și acum scapă capacele

Cronicarii foloseau majuscule în manuscrise scrise de mână, dintre care unele datează din secolul al V-lea. Literele majuscule au continuat să fie folosite din secolele VIII-XV, când tipografia a adus tipărirea la un nivel industrial. Ambele capace scrise de mână și cele tipărite au fost plasate la începutul textului. Ele erau adesea decorate cu un model decorativ care era plasat în jurul literei.

Literele ridicate și coborâte sunt încă în uz astăzi. Acestea pot fi găsite în ziare, reviste și cărți, precum și în tipărirea digitală. Literele ridicate sunt uneori numite extinse. Acestea sunt plasate la același nivel cu partea de jos a textului care le urmează. Literele omise sunt la fel cu partea de sus a textului, uneori într-un strat din spatele corpului principal al conținutului textului, sau restul textului curge în jurul lor.

Literele ridicate sunt mult mai ușor de definit, deoarece sunt la fel cu restul textului și, de obicei, nu este nevoie să schimbați fluxul în jurul marginilor exterioare pentru a face acest lucru. Literele omise necesită o mai bună reglare. Vă va fi mai ușor să rezolvați acest lucru dacă înțelegeți mai întâi modul în care sunt tratate personajele crescute.

Folosirea orelor

Designerii care sunt deja familiarizați cu CSS știu să creeze o clasă CSS separată pentru prima literă mare.

CSS pentru elementul de paragraf și clasa care creează litera ar arăta astfel:

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

Și codul HTML va arăta astfel:

Ceea ce ne oferă:

Pare prea ușor? De fapt, va trebui să faceți ajustări pe baza literelor specifice ridicate, deoarece fiecare literă majusculă necesită o creștere specială. După alegerea unui font pentru literele ridicate și pentru textul corpului, trebuie să creați clase separate pentru fiecare literă ridicată. În cele de mai jos CSS class.myinitialcapsi caseta din dreapta este negativă pentru a micșora distanța dintre I și n.

Myinitialcapsi (font-size: 48px; font-family: Didot; margin-right: -1px;)

Eu n acest caz, există un spațiu suplimentar între „eu” și „n”.

Eu ncluderea unei clase noi cu o marjă negativă o atrage mai aproape.

În funcție de rezoluția ecranului, în exemplul de mai sus, I și n pot părea că s-au îmbinat împreună. Acest lucru se datorează serifelor de la capetele literelor. Prin urmare, înainte de a alege versiunea finală Stiluri CSS, testați site-ul pe diferite dispozitive pentru a vedea cum arată textul pe ele în toate majusculele CSS.

Citate și alte cazuri speciale

Puteți mări nu numai literele de la începutul textului. Puteți implementa o altă clasă pentru a crea o versiune supradimensionată a ghilimelelor care apar lângă literă. În cazul nostru, nici clasa de 48 de litere, nici clasa de text de 20 de pixeli nu sunt potrivite pentru ghilimele. Mai degrabă, va fi ceva între - 30 de pixeli. Vom muta ghilimelele în jos cu 4 pixeli pentru a le alinia optic cu I:

Myinitialcapsq (font-size: 30px; font-family: Didot; float: left; margin-top: 4px;)

“Eu nclusiv ”o nouă clasă cu o marjă negativă o atrage mai aproape.

Trebuie să fiți foarte atenți la specificarea fiecăruia dintre majusculele CSS, împreună cu ghilimelele, astfel încât kernarea și alinierea lor să se potrivească cu marcajul înconjurător. De exemplu, litera T va trebui deplasată spre stânga, ușor dincolo de marginea paragrafului, astfel încât linia sa transversală să se potrivească vizual cu aspectul. Va trebui să faceți același lucru cu litere rotunde precum C, G, O și Q. În acest exemplu, dimensiunile fonturilor utilizate sunt 20, 30 și 48. Dar va trebui să alegeți dimensiunile în funcție de specificul fonturilor pe care le-ați ales. Precum și dimensiunile și rezoluțiile ecranelor pe care va fi vizualizat site-ul.

Pseudo-elemente și pseudo-clase

Cu un pseudo-element CSS, puteți crea cu ușurință o literă ridicată adăugând :: prima literă la elementul de paragraf. Utilizare: prima literă ( cu un singur colon) pentru browsere învechite:

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 1.2em;) p :: first-letter (font-size: 3.6em; text-transform: majuscule; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0.15 em;)

Codul HTML care conține clasele CSS care iau în considerare creșterea literelor N și B va arăta astfel ...

O literă inițială, prima literă fiind o majusculă.
Cu o întrerupere de linie, următoarea linie nu are limită inițială.

n observă în sursa HTML cum prima literă, nu o literă majusculă în HTML, se dimensionează la dimensiunea inițială a capacului de 3.6em. Frumos, nu?

B cu o revenire grea și un nou paragraf a început, se creează întotdeauna un alt limbaj inițial. S-ar putea să vă întrebați, Cum voi explica acest lucru? Ar trebui să am o limită inițială la începutul unui paragraf foarte nou? Ei bine, ai putea. Dar, vrei să arate așa și trebuie să arate așa?

Prima literă majusculă a paragrafului este convertită într-o literă.
Prima literă după o întrerupere de linie nu va fi capitalizată.

O Vă rugăm să rețineți că în cod sursa HTML prima literă nu este scrisă cu majuscule, dar este convertită la un caracter 3.6em.

O Cu toate acestea, chiar și după o întrerupere forțată a liniei și la începutul fiecărui paragraf nou, se creează întotdeauna o literă. S-ar putea să vă întrebați: Cum pot lua în considerare acest lucru? Trebuie să adaug litere pentru toate aceste cazuri? Ei bine, poți. Dar este necesar?

Chiar și cu beneficiile pe care le oferă pseudo-elementele, a trebuit să adăugăm o mulțime de cod pentru a defini clase separate pentru a trata problemele de kerning și indentare. Dar această metodă convertește prima literă a fiecărui nou paragraf în CSS o literă mare. Pentru unii, este posibil să nu funcționeze, deoarece nu este nevoie să transformați prima literă din fiecare paragraf.

Combinând pseudo-clase și pseudo-elemente pentru a crea un aspect inteligent

Adăugarea pseudo-clasei first-child ajută la rezolvarea problemei conversiei inutile a primelor litere:

p (font-size: 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: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;)

Combinând acest cod cu HTML:

Prima literă, care este definită ca primul copil, este singura literă care este convertită într-un capac ridicat în această metodă.

Deoarece numai litera definită ca primul copil este convertită, rețineți că acest exemplu diferă de cel anterior, fără primul copil. În plus, nu convertim primele litere după începutul unui paragraf și după o întrerupere forțată de linie. Acest aspect pare mai elegant în comparație cu aspectul aspectului atunci când am convertit toate primele litere ale paragrafelor.

Avantajul utilizării pseudo-claselor este capacitatea de a gestiona diferite cazuri speciale. Dar dezavantajele? Există multe pseudo-clase diferite și pot fi combinate în atât de multe moduri încât vă pot face să vă rotiți capul. De exemplu, pseudo-clasele: first-child și: first-of-type pot da aceleași rezultate. Puteți aplica pseudo-clasa nu numai la paragraf, ci și la elemente