Litere mari HTML și spațiere între litere CSS. Crearea stilurilor css cu majuscule folosind pseudo-elemente Css toate literele sunt majuscule

Bună ziua, tocilari care construiesc site-uri. Publicația de astăzi va discuta subiectul proiectării conținutului textului. De aceea, veți învăța cum să setați majuscule folosind instrumente CSS, să vă familiarizați cu mai multe opțiuni pentru a crea un drop cap și, desigur, veți putea încerca totul în practică. Ei bine, acum să trecem la partea distractivă!

Să transformăm textul

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. Aceasta este transformarea textului.

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.

Corpul transformării textului ( text-align: center; ) h1 ( text-transform: majuscule; ) h3 ( text-transform: capitalize; ) Atenție! !Mâine se face reducere la toate produsele cosmetice!

Promoția este valabilă în toate sucursalele situate în orașul dumneavoastră.

Crearea unui plafon

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 o inițială) este prima literă a unui capitol, care diferă de restul prin marime mare, culoare și, în unele cazuri, chiar design de font. Î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, un simbol este evidențiat cu o etichetă de limbaj de marcare și apoi anumite proprietăți sunt specificate î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ă.

P inițial proeminent (dimensiunea fontului: 26px; familia de fonturi: fantezie; ) P:prima literă ( /*prescrie reguli de stil pentru prima literă a unui paragraf*/ familia de font: sant-serif; greutatea fontului: 900 ; culoare: transparent; fundal: url(http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); dimensiunea fundalului: 99%; dimensiunea fontului: 119px; -webkit-background- clip: text ;)

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 este 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

Adesea se grăbește atunci când adaugă materiale pe un site sau, de exemplu, creează subiect nou pe forum, utilizatorul poate începe să scrie o propoziție (titlu) cu o literă mică (minuscule). Aceasta este într-o oarecare măsură o greșeală.

Voi arăta mai multe opțiuni pentru rezolvarea acestei probleme: PHP și CSS sunt mai potrivite pentru materialele deja publicate, când jQuery poate corecta situația înainte de publicare.

Prima literă a șirului în majusculeîn PHP

În PHP există o funcție numită „ucfirst”, care doar convertește primul caracter al unei linii în majuscule, dar dezavantajul său este că nu funcționează destul de corect cu chirilic.

Pentru a face acest lucru, vom scrie propria noastră funcție mică. Implementarea ar arăta astfel:

În această versiune, vom primi o propoziție care începe cu o literă mare, care, de fapt, este ceea ce avem nevoie.

Prima literă majusculă a unui șir în CSS

Această metodă este vizuală (adică în cod sursa propunerile de site vor apărea ca atare) convertește și primul caracter în majuscule.

Utilizarea este după cum urmează:

prima propoziție

a doua teză

a treia teză

a patra teză

#conținut p:prima-litera (text-transform: majuscule; )

Folosind pseudo-elementul „prima literă” și proprietatea „transformare text”, setăm designul pentru fiecare primă literă a paragrafului.

Prima literă a unui șir cu majuscule în jQuery

După cum am spus mai devreme, această metodă de conversie este cea mai potrivită pentru materialele care urmează să fie încă publicate.

De exemplu, vom lua un câmp de text (va acționa ca un câmp pentru introducerea unui titlu) și vom scrie un mic script pentru acesta, care, atunci când introduceți o propoziție cu literă mică, o face să o scrie cu majuscule:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text); )); ));

Scriptul funcționează atât atunci când scrieți text, cât și când îl introduceți pur și simplu. Nu uitați că pentru ca scripturile să funcționeze pe site-ul dvs., trebuie să aveți biblioteca jQuery activată.

Salutare cititori ai acestui blog. Astăzi voi vorbi despre cum puteți face toate majusculele folosind CSS. Desigur, pentru a face acest lucru, puteți activa Caps Lock și puteți scrie textul dorit, dar aceasta este o metodă destul de primitivă. Dar dacă trebuie să evidențiați un paragraf separat într-un articol terminat?

Faceți toate literele majuscule în css

Există o proprietate text-transform pentru aceasta, care, după cum probabil ați ghicit, transformă textul. Are urmatoarele valori:

• litere mici – tot textul este afișat cu litere mici
• majuscule – toate cuvintele sunt afișate cu majuscule (de ce avem nevoie)
• capitalize – prima literă a fiecărui cuvânt este scrisă cu majuscule

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?

Cum se ajunge la elementul dorit?

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ă(
Text-transformare: majuscule;
}

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 cu folosind css cu litere mari. 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)(
Text-transform: majuscule
}

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.

Capulă (o șapcă încorporată în text) este prima literă a unui paragraf, mai mare decât restul, și plasată astfel încât partea superioară a acesteia 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?

Vești bune: 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.

Tag Span

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

Pseudo-element: prima literă

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 a majusculelor folosind CSS.

În html, dimensiunea fontului joacă un rol important. Vă permite să atrageți atenția utilizatorului asupra Informații importante, postat pe pagina site-ului. Deși nu numai dimensiunea literelor este importantă, ci și culoarea, grosimea și chiar familia lor.

Etichete și atribute atunci când lucrați cu fonturi html

Limbajul hipertext are o gamă largă de instrumente pentru lucrul cu fonturile. La urma urmei, formatarea textului este sarcina principală a html.

Motivul creației limbaj HTML A apărut o problemă cu browserele care afișează regulile de formatare a textului.

Să ne uităm la etichetele care sunt folosite pentru a lucra cu fonturile în HTML și la atributele acestora. Principala este eticheta. Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:

• culoare – setează culoarea textului;
• dimensiune – dimensiunea fontului în unități convenționale.

Sunt acceptate valorile atributelor pozitive de la 1 la 7.

• față – folosit pentru a seta familia de fonturi de text care va fi folosită în interiorul . Sunt acceptate mai multe valori, separate prin virgule.

Doar textul situat între părți este formatat pereche de etichete font. Restul textului este afișat în fontul standard standard.

De asemenea, în html există o serie de etichete pereche care specifică o singură regulă de formatare. Acestea includ:

• - se setează în html font aldine. Eticheta de acțiune este similară cu cea anterioară;
• — dimensiunea este mai mare decât cea implicită;
• — dimensiune mai mică a fontului;
• — text italic (italic). Etichetă similară ;
• — text cu subliniere;
• - tăiat;
• — afișarea textului numai cu litere mici;
• - cu litere mari.

Text simplu

Miniatură

Miniatură

Mai mult decât de obicei

Mai puțin decât de obicei

Cursive

Cursive

Cu subliniere

Barat

Capacitățile atributelor de stil

Pe lângă etichetele descrise, există mai multe moduri de a schimba fontul în html. Una dintre ele este utilizarea atributului stil generic. Folosind valorile proprietăților sale, puteți seta stilul de afișare al fonturilor:

1) font-family – proprietatea stabilește familia de fonturi. Este posibil să enumerați mai multe valori.
Schimbarea fontului în html în următoarea valoare se va întâmpla dacă familia anterioară nu este stabilită sistem de operare utilizator .

Sintaxa de scriere:

familia-font: font-name [, font-name[, ...]]

2) dimensiunea fontului – dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în HTML.
Sintaxa de scriere:

font-size: dimensiune absolută | dimensiune relativă | sens | interes | moşteni

De asemenea, puteți seta dimensiunea fontului:

• În pixeli;
• În valoare absolută (xx-mic, x-mic, mic, mediu, mare);
• În procente;
• În puncte (pt).

Dimensiunea fontului: 7

Dimensiunea fontului: 24px

Dimensiunea fontului: x-mare

Dimensiunea fontului: 200%

Dimensiunea fontului: 24 pt

3) font-style – setează stilul de scriere a fontului. Sintaxă:

stil font: normal | cursiv | oblic | moşteni

Valori:

• normal – ortografie normală;
• italic – italic;
• oblic – font înclinat spre dreapta;
• inherit – moștenește ortografia elementului părinte.

Un exemplu despre cum să schimbați fontul în html folosind această proprietate:

font-style:moștenire

stil font: cursiv

stil font: normal

stil font: oblic

4) font-variant – convertește toate majusculele în majuscule. Sintaxă:

font-variant: normal | cu majuscule mici | moşteni

Un exemplu despre cum să schimbați fontul în html cu această proprietate:

font-variant:moștenire

font-variant:normal

font-variant:small-caps

5) font-weight – vă permite să setați grosimea textului (saturație). Sintaxă:

greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Valori:

• bold – setează fontul html la bold;
• bolder – mai îndrăzneț față de normal;
• mai ușoară – mai puțin saturată față de normal;
• normal – ortografie normală;
• 100-900 – setează grosimea fontului în echivalent numeric.

greutate font: bold

greutatea fontului: mai îndrăzneață

greutate font: mai ușor

greutate font: normal

greutate font: 900

greutate font: 100

Proprietatea fontului HTML și culoarea fontului

Fontul este o altă proprietate a containerului. În interiorul său, a combinat valorile mai multor proprietăți destinate schimbării fonturilor. sintaxa fontului:

font: font-size font-family | moşteni

Valoarea poate fi setată și la fonturile utilizate de sistem în etichetele de pe diferite controale:

• legenda – pentru butoane;
• pictogramă – pentru icoane;
• meniu - meniu;
• mesaj-box – pentru casete de dialog;
• small-caption – pentru controale mici;
• status-bar – font bara de stare.

font:pictogramă

font:legendă

font:meniu

font: caseta de mesaje

subtitrare

font:bara de stare

font: italic 50px bold „Times New Roman”, Times, serif

Pentru a seta culoarea fontului în HTML, puteți utiliza proprietatea culoare. Vă permite să setați culoarea folosind cuvânt cheie, si in format rgb. Și, de asemenea, în cod hexazecimal.