Crearea de litere mari folosind CSS. Crearea stilurilor CSS cu majuscule folosind pseudo-elemente eticheta cu majuscule
CSS litere mari ajuta la spargerea monotoniei aceluiași tip de design, ale cărui texte arată la fel de la început până la sfârșit.
Scrisorile inițiale de atunci și acum
Cronicarii au folosit majuscule în manuscrisele scrise de mână, unele dintre ele datând din secolul al V-lea. Literele majuscule au continuat să fie folosite din secolele al VIII-lea până în secolele al XV-lea, când tipografiile au permis aducerea tiparului la un nivel industrial. Atât literele inițiale scrise de mână, cât și cele tipărite au fost plasate la începutul textului. Ele erau adesea decorate cu un model decorativ care era situat în jurul literei.
Literele ridicate și aruncate sunt folosite și astăzi. Ele pot fi găsite în ziare, reviste și cărți, precum și în tipărirea digitală. Tipul ridicat este uneori numit tip alungit. Ele sunt plasate la nivel cu partea de jos a textului care le urmează. Literele aruncate sunt plasate la același nivel cu partea de sus a textului, uneori într-un strat în spatele corpului conținutului textului, sau restul textului se înfășoară în jurul lor.
Literele mari sunt mult mai ușor de definit, deoarece sunt la același nivel cu restul textului și, de obicei, nu este nevoie să schimbați întinderea în jurul marginilor exterioare. Literele omise necesită mai mult reglaj fin. Vă va fi mai ușor să înțelegeți acest lucru dacă înțelegeți mai întâi cum sunt tratate caracterele în relief.
Folosirea claselor
Designerii care au deja o înțelegere a CSS știu că trebuie să creeze o clasă CSS separată pentru prima literă majusculă.
Codul CSS pentru elementul paragraf și clasa care creează scrisoarea 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:
Ce ne oferă:
Pare prea ușor? De fapt, va trebui să faceți ajustări în funcție de literele specifice ridicate, deoarece fiecare literă majusculă necesită kerning special. După ce ați ales un font pentru literele ridicate și pentru textul corpului, trebuie să creați clase separate pentru fiecare literă ridicată. În cele de mai jos clasă-css.myinitialcapsi marginea din dreapta este negativă pentru a reduce distanța dintre I și n.
Myinitialcapsi (dimensiunea fontului: 48px; familia de fonturi: Didot; marginea dreapta:-1px;)
În acest caz, există un spațiu suplimentar între „I” și „n”.
inclusiv o nouă clasă cu o marjă negativă o trage mai aproape.
În funcție de rezoluția ecranului din exemplul de mai sus, I și n pot arăta ca și cum ar fi neclare împreună. Acest lucru se datorează serifurilor de la sfârșitul literelor. Prin urmare, înainte de a alege stilurile CSS finale, testați site-ul diverse dispozitive pentru a vedea cum arată textul cu majuscule CSS pe ele.
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 mai mare de ghilimele care vor apărea lângă literă. În cazul nostru, nici o clasă de litere cu dimensiunea de 48 și nici o clasă de text de 20 de pixeli nu este potrivită pentru ghilimele. Mai degrabă, va fi ceva între - 30 de pixeli. Vom muta ghilimele în jos cu 4 pixeli pentru a le alinia optic cu I:
Myinitialcapsq (dimensiunea fontului: 30px; familia de fonturi: Didot; float:left; margin-top:4px;)
incluzând” o nouă clasă cu o marjă negativă o trage mai aproape.
Trebuie să fii foarte atent la setarea fiecărei majuscule CSS împreună cu ghilimele, astfel încât kerningul și alinierea lor să se potrivească cu marcajul din jur. De exemplu, litera T va trebui mutată spre stânga, puțin dincolo de marginea paragrafului, astfel încât linia sa transversală să se potrivească vizual în aspect. Va trebui să faceți același lucru cu literele rotunde, cum ar fi C, G, O și Q. Acest exemplu utilizează dimensiuni de font de 20, 30 și 48. Dar va trebui să selectați dimensiunile pe baza fonturilor specifice pe care le alegeți. La fel și dimensiunile și rezoluțiile ecranelor pe care va fi vizualizat site-ul.
Pseudo-elemente și pseudo-clase
Folosind pseudo-elementul CSS, puteți crea cu ușurință o literă ridicată adăugând ::prima literă la un element de paragraf. Utilizați :prima-litera ( cu un colon) pentru browserele vechi:
p ( dimensiunea fontului: 1.2em; familia de fonturi: Georgia, „Times New Roman”, Times, serif; înălțimea liniei: 2em;padding-bottom:1.2em;) p::prima literă ( dimensiunea fontului: 3.6em; text-transform: majuscule; font-family: „Monotype Bernard Condensed”, serif; margin-right:0.03em;).initialb (margin-right:-0.1em;).initialn (margin-dreapta:-0.15); ei ;)
Codul HTML care conține clase CSS care iau în considerare kerningul literelor N și B ar arăta așa...
O literă inițială, prima literă fiind o literă mare.
Cu o întrerupere de linie, următoarea linie nu are limita inițială.
n Observați în sursa HTML cum prima literă, nu o literă majusculă din HTML, este dimensionată la dimensiunea inițială a capacului de 3,6 em. Îngrijit, nu?
B dar cu o întoarcere grea și un nou paragraf a început, întotdeauna se creează un alt plafon inițial. S-ar putea să te întrebi, Cum voi da socoteală pentru asta? 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 neapărat să arate așa?
Prima literă majusculă a paragrafului este convertită într-o literă.
Prima literă după o întrerupere de rând nu va fi convertită în majuscule.
O Vă rugăm să rețineți că în cod sursa HTML prima literă nu este scrisă cu majuscule, dar este convertită într-un caracter de 3,6 em.
DESPRE Cu toate acestea, chiar și după o întrerupere de linie forțată și la începutul fiecărui paragraf nou, se creează întotdeauna o literă. Vă puteți întreba: Cum ar trebui să țin cont de asta? Trebuie să adaug litere pentru toate aceste cazuri? Ei bine, poți. Dar este acest lucru necesar?
Chiar și cu beneficiile pe care pseudo-elementele le oferă, a trebuit să adăugăm o mulțime de cod pentru a defini clase separate pentru a gestiona problemele de kerning și umplutură. Dar această metodă transformă prima literă a fiecărui paragraf nou într-o literă majusculă CSS. Pentru unii, poate să nu fie potrivit pentru că nu trebuie să transforme prima literă a fiecărui 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 ( dimensiunea fontului: 1.2em; familia de fonturi: Georgia, „Times New Roman”, Times, serif; înălțimea liniei: 2em;padding-bottom:0.5em;) p:primul copil::prima literă ( dimensiunea fontului: 3.6em; transformarea textului: majuscule; familia de fonturi: „Monotype Bernard Condensed”, serif; margine-dreapta: 0.03em;)
Combinând acest cod cu HTML:
Prima literă care este definită ca primul copil este singura literă care este convertită într-o limită ridicată prin această metodă.
Deoarece este convertită numai litera definită ca primul copil, rețineți că acest exemplu este diferit de cel precedent, fără primul copil. În plus, nu convertim primele litere după începutul unui paragraf și după o întrerupere de linie forțată. Acesta pare mai elegant decât aspectul când am convertit toate primele litere ale paragrafelor.
Avantajul utilizării pseudoclaselor este capacitatea de a gestiona diverse cazuri speciale. Dar dezavantajele? Există multe pseudo-clase diferite și pot fi combinate în atât de multe moduri încât vă poate face capul să se învârtă. De exemplu, pseudoclasele :first-child și :first-of-type pot produce aceleași rezultate. De asemenea, puteți aplica o pseudo-clasă nu numai unui paragraf, ci și elementelor secțiune ( dimensiunea fontului: 1.2em; familia de fonturi: Georgia, „Times New Roman”, Times, serif; înălțimea liniei: 3em;) secțiune>p:first-child:first-litera (dimensiunea fontului: 4em; text-transform: majuscule; font-family:Didot, serif; margin-right:5px;) Și împreună cu HTML: La începutul secțiunii, pentru prima literă este specificat un plafon ridicat. Și un nou paragraf... Dacă vă simțiți experimental, puteți explora diferite metode pe lângă :first-child și :first-of-type . De exemplu, cum ar fi :nth-of-type sau :nth-of-child pentru a vedea cum aceste sau alte tipuri de pseudo-clase pot fi utilizate pentru textul CSS cu majuscule. Indiferent dacă urmați principiile evidențiate în acest articol sau începeți să sapi mai profund, odată ce înveți cum să lucrezi cu pseudoclasele CSS first-child , :first-of-type și :first-letter , vei putea aplica corect la elementele HTML. Capulă (o șapcă încorporată în text) este prima literă a unui paragraf care are marime mai mare decât restul și așezat astfel încât vârful său să fie la nivelul primului rând al paragrafului. În imagine puteți vedea un exemplu de un drop cap încorporat în text. Apropo, WordPress are un plugin special (wordpress.org/extend/plugins/drop-caps) care vă permite să creați automat text încorporat (și deplasat în jos) litere mari. Uimitor! Cu toate acestea, ce se întâmplă dacă nu doriți să utilizați un plugin (sunt sigur că nu o faceți) și trebuie doar să creați o limită pentru mai multe postări și poate într-o anumită locație? Vestea bună este că nu aveți nevoie de un plugin pentru a crea majuscule, tot ce aveți nevoie este un mic css și o etichetă span. Deschideți fișierul CSS și adăugați următorul cod: Span.dropcaps ( font-family:Georgia, serif; culoare: #ccc; font-size: 46px; float: stânga; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09em; poziție: relativă; ) Ceva de genul. Desigur, veți avea nevoie de un stil care să se potrivească cu designul și textul dvs. De exemplu, valorile proprietății: dimensiunea fontului , marginile și înălțimea liniei vor trebui selectate pe baza designului și textului dvs. Pentru ca stilul să fie aplicat litera majusculă a textului, trebuie să „împachetați” litera majusculă într-o etichetă span și să specificați clasa corespunzătoare.
A De asemenea, puteți stila primul caracter din text folosind pseudo-elementul: prima literă . Cu toate acestea, un număr limitat de proprietăți poate fi aplicat pseudo-elementului:first-litera: acestea sunt proprietăți legate de font, culoare, fundal, margini, margini și umplutură. Un alt lucru de remarcat este că pseudo-element:prima-litera nu va funcționa în browserele mai vechi. P:prima literă (familie de fonturi:Georgia, serif; culoare: #ccc; dimensiunea fontului: 46px; float: stânga; greutatea fontului: 400; înălțimea liniei: 1em; marginea inferioară: -0.4em; marginea -dreapta: 0.09em; poziție: relativă; ) Iată, de fapt, câteva metode de editare litere mari Cu folosind CSS. Controlează dacă textul elementului este convertit în caractere majuscule sau majuscule. Când valoarea este alta decât none , se va modifica literul textului sursă. capitalize Primul caracter al fiecărui cuvânt dintr-o propoziție va fi scris cu majuscule. Simbolurile rămase nu își schimbă aspectul. minuscule Toate caracterele textului devin minuscule (minuscule). majuscule Toate caracterele textului devin majuscule (majuscule). none Nu schimbă literele caracterelor. Winnie the Pooh nu s-a împotrivit întotdeauna la o mică răcoritoare, mai ales la unsprezece dimineața, pentru că la acea oră micul dejun se terminase de mult, iar prânzul încă nu începuse. Și, bineînțeles, a fost teribil de bucuros să vadă că Iepurele scoate cești și farfurii. div (text-transform: capitalize; )
Ținutul Amazonian este nemoderat în transportul mic de pisici și câini, iar Hajos Bahia este renumit pentru vinurile sale roșii. Rezultatul acestui exemplu este prezentat în Fig. 1. Orez. 1. Aplicarea proprietății text-transform Un obiect.style.textTransform Fiecare specificație trece prin mai multe etape de aprobare. Bună ziua, tocilari care construiesc site-uri. Publicația de astăzi va discuta subiectul proiectării conținutului textului. Acesta este motivul pentru care veți învăța cum să setați majuscule literele css- înseamnă, familiarizați-vă cu mai multe opțiuni pentru a crea un drop cap și, desigur, puteți încerca totul în practică. Ei bine, acum să trecem la partea distractivă! Datorită foilor de stil în cascadă, puteți modifica atât primul caracter al unui bloc, cât și întregul text. Îți voi spune cum le poți face pe amândouă. Mai mult, toate instrumentele menționate în acest articol sunt acceptate în trei nivele de limbaj: css1, css2, css2.1 și css3. Voi începe cu o proprietate interesantă care modifică tot conținutul text din fișierul selectat. Acest text-transformare. Elementul numit poate converti caracterele în majuscule, litere mici și, de asemenea, poate seta fiecare prim caracter al unui cuvânt la o literă mare. Am scris mai multe despre valorile din tabel. Acum, pentru a consolida materialul teoretic, priviți un exemplu.
Promoția este valabilă în toate sucursalele situate în orașul dumneavoastră. Dacă nu știți ce înseamnă termenul „drop cap”, atunci acum este momentul să aflați, deoarece are legătură directă cu subiectul curent. O literă mare (sau uneori se spune și o inițială) este prima literă a unui capitol, care diferă de restul prin dimensiunea mare, culoarea și, în unele cazuri, chiar și prin designul fontului. În viața reală, un exemplu de astfel de scrisoare poate fi găsit în manuscrise și cărți vechi. Există mai multe moduri de a crea o inițială. Adesea simbolul este evidențiat cu o etichetă de limbaj de marcare iar apoi anumite proprietăţi sunt prescrise în stilurile care îl modifică. Aceasta este o modalitate bună, dar această publicație vorbește despre mecanismele CSS (care, după părerea mea, sunt mult mai logice și mai convenabile de utilizat în acest caz). Pentru a rezolva această problemă, puteți utiliza un instrument precum. Deci, în acest caz folosim:first-litera. Ca toate pseudo-elementele, este atribuit unui selector folosind două puncte. După toate regulile foilor de stil, sunt indicate proprietățile. Cu toate acestea, puteți aplica numai acele proprietăți care se referă la editarea fonturilor, indentărilor, culorilor, fundal, câmpuri și granițe. Vă sugerez să luați în considerare exemplu concret. Când am implementat programul mic prezentat, am decis să nu fac doar o literă inițială colorată, ci să o umplu cu flori. Pentru a face acest lucru, trebuie să folosiți câteva trucuri complicate, setând culoarea fontului la transparent și umplând litera cu imaginea selectată.
Acest paragraf conține o propoziție cu conținut foarte interesant. Să continuăm povestea interesantă în paragraful următor. Rezultatul rezultat pare foarte atractiv și neobișnuit, ceea ce este o soluție ideală pentru. După cum puteți vedea Acest subiect foarte simplu. Puteți utiliza cu ușurință codul programului pe care l-am furnizat pentru resursele dvs. web, modificându-l și personalizându-l pentru a se potrivi stilului dvs. Dacă materialul prezentat v-a fost util, atunci abonați-vă la actualizările blogului meu și nu uitați să împărtășiți cunoștințele acumulate (și bineînțeles linkul către blogul meu) prietenilor tăi. Noroc! Pa! Pa! Cu stima, Roman Chueshov Salutare cititori ai acestui blog. Astăzi voi vorbi despre cum puteți face toate majusculele folosind CSS. Desigur, puteți activa acest lucru Majusculeși scrieți textul necesar, dar aceasta este o metodă destul de primitivă. Dar dacă trebuie să evidențiați un paragraf separat într-un articol terminat? Există o proprietate text-transform pentru aceasta, care, după cum probabil ați ghicit, transformă textul. Are urmatoarele valori: Asta e practic tot ce trebuie să știi. Tot ce rămâne este să vă dați seama cum să accesați elementul dorit. Să ne imaginăm acest exemplu: trebuie să faceți al cincilea paragraf dintr-un articol cu majuscule. Și cum poate fi implementat acest lucru? După cum știți, un paragraf este creat folosind o etichetă html asociată, întregul conținut al căruia devine un paragraf. Tot ce rămâne este să definiți o nouă clasă de stil pentru aceasta:
Acum avem posibilitatea de a accesa acest paragraf specific prin limbajul CSS fără a afecta restul. O poți face astfel: Majusculă( Această metodă este potrivită atunci când trebuie să evidențiați un fragment dintr-un anumit articol. Dacă toate paginile ar trebui să aibă un anumit text cu majuscule. În acest caz, este mai bine să plasați blocul într-un fișier șablon pentru a nu-l scrie de fiecare dată. Sau poate trebuie să evidențiați al doilea paragraf din fiecare articol folosind CSS cu majuscule. Atunci o altă opțiune ți se va potrivi. Găsiți blocul în care apare articolul și accesați al doilea paragraf folosind pseudoclasa a n-a-copil. ÎN în acest exemplu Blocul nostru de articole are clasa de articole. Articolul p:nth-child(2)( După cum puteți vedea, există o soluție diferită pentru fiecare caz specific. Cel mai important lucru este să vă amintiți despre proprietatea text-transform, care schimbă majusculele literelor. În general, nu se recomandă afișarea textului în acest fel, deoarece îi afectează foarte mult percepția, dar pot fi evidențiate unele fragmente deosebit de importante. Astăzi ne-am uitat la proprietatea text-transform. Abonați-vă la blog pentru a primi articole noi.Tag Span
Pseudo-element: prima literă
informatie scurta
Denumiri
×
Descriere Exemplu
<тип>
Indică tipul valorii. <размер>
A && B Valorile trebuie să fie afișate în ordinea specificată. <размер> && <цвет>
A | B Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B). normal | litere mici
A || B Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine. lățime || numara
Grupează valori. [ recolta || cruce ]
*
Repetați de zero sau de mai multe ori. [,<время>]*
+
Repetați una sau mai multe ori. <число>+
?
Tipul, cuvântul sau grupul specificat este opțional. medalion?
(A, B) Repetați cel puțin A, dar nu mai mult de B ori. <радиус>{1,4}
#
Repetați o dată sau de mai multe ori, separate prin virgule. <время>#
Valori
Cutie cu nisip
Exemplu
Monument cultural al Evului Mediu
Model obiect
Specificație
×
Să transformăm textul
Atenţie!
!Mâine se face reducere la toate produsele cosmetice!
Crearea unui plafon
Toate literele majuscule în css
Cum se ajunge la elementul dorit?
Text-transformare: majuscule;
}
Text-transform: majuscule
}