Conversia și stilizarea textului
1. Transformarea textului text-transform
Prin utilizarea a acestei proprietati puteți converti textul în partea de sus și literă mică s, sau transformați primele litere ale fiecărui cuvânt care erau majuscule (majuscule) în minuscule. Mostenit.
Sintaxă
H2 (transformare text: niciunul;) h2 (transformare text: cu majuscule;) h2 (transformare text: majuscule;) h2 (transformare text: minuscule;) 
Orez. 1. Transformarea textului folosind proprietatea text-transform
2. Direcția de scriere a textului
Proprietatea specifică direcția în care este scris textul, direcția în care este plasată o coloană de tabel, direcția în care blocul umple conținutul pe orizontală și poziția ultimei linii a unui element justificat. Recomandat pentru utilizare cu proprietate unicode-bidi. Mostenit.
Sintaxă
P (direcția: ltr;) p (direcția: rtl;)
3. Direcția scrierii cuvintelor în text unicode-bidi
Proprietatea este utilizată împreună cu proprietatea direcție pentru a sprijini scrierea cuvintelor în text bidirecțional. Nu moștenit.
Sintaxă
P (unicode-bidi: normal;) p (unicode-bidi: încorporat;) p (unicode-bidi: bidi-override;)
4. Decorare text text-decor
Proprietatea decorează textul. De asemenea, elimină sublinierea linkului. Nu moștenit.
Sintaxă
A (decor text: niciunul;) span (decor text: subliniat;) span (decor text: supraliniu;) span (decor text: linie;) Fig. 2. Decorarea textului folosind proprietatea text-decorare
5. Formatarea primei litere și a primului rând al unui paragraf
CSS face posibilă formatarea unui paragraf folosind pseudo-elemente:first-letter și:first-line . De exemplu, puteți evidenția primul caracter al fiecărui paragraf, imitând o capsulă, sau puteți adăuga o formatare specială la prima propoziție a unui paragraf. Fundalul pentru:prima-litera poate fi, de asemenea, setat la o umplere cu gradient.
/*primul paragraf*/ p:prima literă ( dimensiunea fontului: 2em; margine-dreapta: 2px; culoare: #EE9966; greutatea fontului: bold; text-shadow: -1px -1px 1px alb, 1px 1px 1px # 9E9D99; ) p:prima linie (culoare: #EE9966; ) /*al doilea paragraf*/ p:prima literă (dimensiunea fontului: 1.2em; umplutură: 5px 10px; margine-dreapta: 5px; fundal: #EE9966; culoare: #FAF4F4; float: stânga; chenar-rază: 50% 0; font-weight: bold; ) /*al treilea paragraf*/ p:prima literă ( font-size: 1.2em; padding: 5px 10px; margin- dreapta: 5px; margine-jos: 2px; fundal: #EE9966; culoare: #FAF4F4; float: stânga; greutate font: bold; ) /*al patrulea paragraf*/ p:prima literă (dimensiunea fontului: 1.2em; umplutură: 3px 10px; margine-dreapta: 5px; fundal: #EE9966; culoare: #FAF4F4; float: stânga; greutate font: bold; chenar-rază: 50%; ) /*al cincilea paragraf*/ p:prima literă (dimensiunea fontului: 1.5em; umplutură: 2px 10px; margine-dreapta: 5px; fundal: #FAF4F4; chenar: 6px dublu; culoare: #EE9966; float: stânga; greutate font: bold; ) /*al șaselea paragraf* / p:prima-litera (dimensiunea fontului: 1..png); chenar: 2px solid #EE9966; culoare: #544E3E; plutește la stânga; greutatea fontului: bold; casetă-umbră: 1px 1px 1px #9E9D99; )
6. Formatarea ghilimelelor
Proprietatea specifică tipul de ghilimele folosite în document pentru ghilimele imbricate. În mod implicit, textul cuprins într-o etichetă este cuprins între ghilimele. . De asemenea, puteți genera citate folosind proprietatea conținut, dându-i valorile open-quote și close-quote . Se folosește valoarea specială caracter HTML sau caracter Unicode. Mostenit.
Sintaxă
P (ghilimele:""" """;) p (ghilimele: niciunul;)
| Descriere | Aspect | Număr Unicode | Cod HTML/mnemonici |
|---|---|---|---|
| Citat dublu | " | \0022 | " |
| Apostrof | " | \0027 | " |
| Deschiderea citatului unic | ‘ | \2018 | ‘ |
| Închidere ghilimele unice | ’ | \2019 | ’ |
| Închidere ghilimele duble | “ | \201C | “ |
| ghilimele duble corecte | ” | \201D | ” |
| ghilimele duble | ⹂ | \2E42 | ⹂ |
| Deschidere citat din stânga în oase | « | \00AB | « |
| Ghilimele de închidere în schemă dreapta | » | \00BB | » |
| Cotația de deschidere unică mai mică | ‚ | \201A | ‚ |
| Biletul unic de sus | ‛ | \201B | ‛ |
| Cota de deschidere dublă mai mică | „ | \201E | „ |
| Bilet în spate dublu | ‟ | \201F | ‟ |
| Colț francez cu o singură deschidere (stânga). | ‹ | \2039 | ‹ |
| Un singur colț de închidere (dreapta) ghilimele franceze | › | \203A | › |
Textul acestui articol se concentrează pe diferite moduri Formatare CSS, care este diferit de diferitele moduri de organizare a CSS. În esență, aceste concepte sunt similare între ele, dar personal mi se pare că organizarea CSS este mai responsabilă de modul în care lucrurile sunt grupate și ordonate. Elemente CSS, care vă permite să găsiți și să editați rapid și convenabil pasajele necesare.
Formatarea nu are nimic de-a face cu Funcții CSS. Acest lucru este doar pentru a da codului un aspect atractiv din punct de vedere estetic. Adevărat, asta nu înseamnă că formatarea nu este deloc importantă. Este același lucru cu a spune că nu are nicio diferență pentru un artist pe ce pânză pictează. Acest lucru afectează confortul la scrierea codului CSS, ușurința de a vizualiza codul și de a-l edita în continuare.
Deoarece există atât de multe moduri diferite de a formata CSS, nu există reguli stricte și rapide cu privire la spațiere și întreruperi de linie. De exemplu:
Div (lățime: 50 px)
Acesta este la fel ca:
Div(lățime: 50px)
Ca:
}
Formatare multilinie
Navigation_rss_icon (
poziție: absolută;
stânga: 940px;
jos: 0px;
}
#navigation_rss (
poziție: absolută;
stânga: 720px;
text-transform: majuscule;
culoare: #897567;
înălțimea liniei: 2,5 em;
}
#navigation_rss li (
display: inline;
}
culoare: #fffffe;
text-decor: niciuna;
umplutură: 0px 2px;
spațiere între litere: -0,05 em;
}
#navigation_rss li a:hover (
culoare: #eed2a1;
text-decor: niciuna;
}
Pun pariu că aceasta este cea mai folosită opțiune. Este foarte ușor de citit deoarece este prezentat în pasaje scurte, motiv pentru care articolele predate sunt cel mai adesea formatate în acest fel. În exemplul oferit mai sus, nr linie goalăîntre paranteza de închidere și pasajul următor, iar acesta este de fapt folosit cel mai des.
Formatare multilinie cu paragrafe
Navigation_rss_icon (
poziție: absolută;
stânga: 940px;
jos: 0px;
}
#navigation_rss (
poziție: absolută;
stânga: 720px;
familie de fonturi: Verdana, Arial, Helvetica, sans-serif;
text-transform: majuscule;
culoare: #897567;
înălțimea liniei: 2,5 em;
}
#navigation_rss li (
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited (
culoare: #fffffe;
text-decor: niciuna;
umplutură: 0px 2px;
spațiere între litere: -0,05 em;
}
#navigation_rss li a:hover (
culoare: #eed2a1;
text-decor: niciuna;
}
Un bloc evidențiat înseamnă că acest pasaj este oarecum specific și important decât pasajele anterioare și, de asemenea, afișează elemente copil.
Formatare pe o linie
Div.wrapper ( margine: 0 automat; padding: 200px 0 0 0; lățime: 960px; z-index: 2 )
ul.nav (poziție:absolut; sus:0; stânga:430px; padding:120px 0 0 0 )
ul.nav li ( display:inline; margin:0 10px 0 0 )
div.column ( float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px )
div.post_wrapper ( background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) jos centru fără repetare; margine:0 0 40px 0; padding:0 0 40px 0 )
div.wrapper img, div.wrapper a img, div.article_illustration_mini ( background:#d3d4cb; padding:10px; border:1px solid #999 )
div.wrapper a:hover img ( background:#fff )
Aceasta este probabil cea mai economică opțiune, deoarece tot codul este comprimat într-un singur text continuu, fără spații sau linii noi. Adevărat, această metodă va necesita derulare constantă, atât pe verticală, cât și pe orizontală, dacă doriți să editați codul. În plus, această metodă arată destul de urât, iar dacă trebuie să editați codul în viitor, probabil că vă va fi extrem de dificil să găsiți pasajul dorit.
Formatare cu o singură linie cu file
p, li, dd ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margine: 0 0 15px 0; culoare: #5e5d5d; )
td, th ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; )
Formatare pe o linie cu paragrafe
O bucată de cod evidențiată indică faptul că conține informații care sunt un copil al informațiilor din paragraful anterior.
Formatare normală pe o singură linie
În general, prefer formatarea pe o singură linie, dar folosesc întreruperi de linie editor de text, astfel încât aceste rânduri lungi să nu continue pentru totdeauna, ci să se încadreze în fereastra editorului. Cu toate acestea, pentru rânduri deosebit de lungi cu multe pasaje diferite, folosesc transfer greu linii la care să comutați linie nouă cu atribute.
H1, h2, h3 ( font: 24px Helvetica, Sans-Serif; margine: 0 0 10px 0; )
h1 (dimensiunea fontului: 36px; )
h2 (dimensiunea fontului: 30px; )
h2 a, h2 a:visited (culoare: #2e2e2e; )
h2 a:hover (culoare: #fe4902; chenar-jos: 1px punctat #2e2e2e; )
p, li, dd ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
marja: 0 0 15px 0; culoare: #5e5d5d; )
td, th ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
text-align: stânga; )
Variante
Formatarea unei linii se poate face cu deschidere usoara urmată de o paranteză pe aceeași linie, care este adesea văzută și în codul PHP:
Div
{
umplutură: 10px;
}
În formatarea pe mai multe linii cu file, puteți vedea paranteza de deschidere ca un delimitator:
#conținut-zonă ol (marja: 15px 0 0 25px; stil listă: zecimal; )
#content-zona ol ol (list-style: low-alpha; )
#content-zona ul ( margine: 0 0 0 5px; list-style: none; )
#content-area ul li ( padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; )
#content-area ul ul ( margine: 15px 0 0 25px; list-style: disc; )
#content-area ul ul li ( fundal: niciunul; umplutură: 0; )
Combinaţie
Combinarea formatării pe mai multe rânduri și pe o singură linie poate duce la gruparea atributelor similare pe aceeași linie:
Navigation_rss_icon (
poziție: absolută;
sus: 10px; stânga: 10px; jos: 10px; dreapta: 10px;
dimensiunea fontului: 12px; greutate font: bold;
}
Lizibilitate vs. Derulare
Alegerea opțiunii de formatare ar trebui să se bazeze pe lizibilitatea codului. Trebuie să navigați rapid și convenabil prin cod pentru a corecta urgent acest sau acel segment. Dacă simțiți că formatarea pe o singură linie este prea dificilă pentru ochi și vă face dificil să înțelegeți ce se întâmplă unde se află în cod, atunci, desigur, cel mai bine este să evitați această opțiune.
În general, cred că opțiunea de formatare pe mai multe linii este ușor de găsit pentru o anumită bucată de cod, dar linie cu linie un astfel de document ocupă mult mai mult spațiu, de 5-8 ori. Dar, în general, găsesc aceste documente mai puțin lizibile, deoarece există acea defilare verticală enervantă și trebuie să te grăbești de la o bucată de cod la alta. În timp ce formatarea pe o singură linie este uneori chiar mult mai convenabilă datorită faptului că cea mai mare parte a codului este în vizorul dumneavoastră.
Cea mai bună opțiune de formatare pentru dvs. este considerată a fi cea care oferă o mai mare lizibilitate și mai puțină defilare. În general, uită-te la propriile sentimente de confort.
În acest articol vom vorbi despre modul în care textul este formatat în CSS, vom analiza tehnicile de aliniere a textului, cum să folosiți CSS pentru a face o linie roșie, cum să setați spațierea dintre rânduri și spațierea cuvintelor, cum să decorați textul, cum să convertiți textul în litere mari sau mici și cum să creați majuscule de font.
În timpul aspectului site-ului, va trebui să vă schimbați constant aspect pagini web. Una dintre primele sarcini atunci când lucrați cu text pe o pagină este nevoia de a-l alinia.
Alinierea textului
Să ne uităm la un exemplu de lucru cu alinierea textului:
patru) clase care definesc diverse opțiuni alinierea textului. Pentru toate elementele
Rezultatul exemplului nostru:
Primul rând liniuță
Dacă deschideți aproape orice carte care conține informații text, este posibil să observați că primul rând al fiecărui paragraf este de obicei indentat (linie roșie).
Dacă trebuie să oferiți documentului dvs. un aspect similar cu o publicație tipărită, atunci utilizați aceasta proprietate CSS m, ca text-indent .
Le poți aplica unități relative măsurătorile pe care le utilizați în documentul dvs., fie că sunt pixeli sau valori de care depind dimensiunea bazei font (cum ar fi ei).
Vă rugăm să rețineți că în unele situații poate fi necesar să utilizați o indentare negativă a primei linii; proprietatea text-indent permite utilizarea valorilor negative, caz în care linia este deplasată în direcția opusă.
Să ne uităm la un exemplu de utilizare a acestei proprietăți:
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
ÎN în acest exemplu am creat 4 ( patru) stil și le-a aplicat unul câte unul la patru paragrafe. Pentru primul paragraf setat la valoarea implicită de indentare ( 0 ), Pentru al doilea setați indentarea 40 pixeli, Pentru al treilea indentare negativă indicată ( -20px), ca urmare, paragraful s-a mutat în afara ferestrei browserului și pentru Al patrulea paragraf indentat egal cu 50% .
Vă rugăm să rețineți că, dacă utilizați valori procentuale, indentarea depinde de lățime element părinte, care conține paragraful.
Rezultatul exemplului nostru:
Orez. 61 Exemplu de utilizare a proprietății text-indent (linia roșie).
Setarea distanței dintre linii
Când lucrați cu text, este adesea nevoie să poziționați liniile unui paragraf mai aproape unele de altele sau invers - să le întindeți. Distanța dintre liniile de bază ale liniilor adiacente se numește conducere sau spațiere între linii .
În CSS, proprietatea line-height este responsabilă pentru spațierea liniilor (interlină). Cu cât valoarea acestei proprietăți este mai mare, cu atât spațiul dintre linii este mai mare.
Vă rugăm să rețineți că atunci când setați valoarea înălțimii liniei folosind unități de pixeli, dimensiunea spațiere între linii, va depinde direct de dimensiunea fontului, adică va fi ajustată automat proporțional cu modificarea proprietății font-size (dimensiunea fontului), discutată în articolul anterior.
De regulă, în toate browsere moderne înălțimea implicită a liniei este de 120%.
Distanța dintre linii se calculează după cum urmează:
Inaltimea liniei ( inaltimea liniei) minus înălțimea fontului ( marimea fontului)
De exemplu, dimensiunea fontului este 20 pixeli, și înălțimea liniei 150% (30 pixeli). Astfel rezulta:
Inaltimea liniei ( 150% sau 30px) minus înălțimea fontului ( 20px) = 10px
Este posibil să setați dimensiunea înălțimii rândului folosind o valoare numerică. Anunțul arată astfel:
selector(înălțimea liniei: 1,5;)După cum puteți vedea, unitățile de măsură nu sunt indicate, iar numărul acționează ca un multiplicator. Folosind valori numerice Distanța dintre linii se calculează după cum urmează:
Valoare numerică * dimensiunea fontului
De exemplu, fontul de paragraf este setat la 2em, iar înălțimea liniei este dată ca 1.5 :
p(dimensiunea fontului: 2em; înălțimea liniei: 1,5;)Valoarea calculată a distanței dintre linii în cazul nostru va fi 3em:
Valoare numerica( 1.5 ) * marimea fontului( 2em) = 3em
În cele mai multe cazuri, utilizarea unui multiplicator este foarte convenabilă, deoarece elementele moștenesc valorile spațierii dintre linii ale elementului părinte. inaltimea liniei:
Un paragraf în care înălțimea liniei: 10px
Un paragraf în care înălțimea liniei: normal
Un paragraf în care înălțimea liniei: 150%
Un paragraf în care înălțimea liniei: 2
În acest exemplu, am analizat modalități de a specifica înălțimea liniei în pixeli, procente și folosind un multiplicator.
Rezultatul exemplului nostru:
Orez. 62 Exemplu de utilizare a proprietății line-height (setarea spațierii liniilor).
Spațierea dintre cuvinte și caractere
Când proiectați pagini pe un site web, trebuie să ajustați distanța nu numai între linii, ci și între cuvinte sau caractere individuale. De exemplu, reducerea spațierii dintre caractere va face un titlu lung mai compact, sau invers, creșterea spațierii îi va oferi un aspect mai întins.
Pentru a seta o anumită spațiere între caractere, trebuie să utilizați proprietatea CSS de spațiere între litere. Când lucrați cu o proprietate, utilizați unități relative Dimensiuni CSS (ei, rem, pxși așa mai departe). Sunt permise atât valorile pozitive, cât și cele negative. Valorile pozitive cresc în consecință distanța dintre caractere, iar valorile negative le scad, până la stratificarea literelor și simbolurilor una peste alta.
Să ne uităm la un exemplu de utilizare a proprietății letter-spacing:
În acest exemplu, am analizat modalități de a specifica distanța dintre caractere din text în pixeli (atât pozitive, cât și sens negativ) și unități em.
Rezultatul exemplului nostru:
Puteți seta distanța dintre cuvintele individuale folosind o proprietate CSS cu un nume similar - spațierea cuvintelor. Similar cu proprietatea de spațiere între litere, utilizați unități relative CSS ( ei, rem, pxși așa mai departe). Sunt permise atât valorile pozitive, cât și cele negative. Valorile pozitive măresc în mod corespunzător intervalul dintre cuvinte, iar valorile negative îl micșorează, chiar și până la punctul de a pune cuvinte în straturi unele peste altele.
Să ne uităm la un exemplu de utilizare a proprietății de spațiere a cuvintelor:
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
În acest exemplu, am analizat modalități de a specifica distanța dintre cuvintele din text în pixeli (valoare negativă) și unități em.Rezultatul exemplului nostru:
Decorare text
Proprietatea CSS text-decoration ne oferă posibilitatea de a adăuga astfel de tipuri de decor textului, cum ar fi:
- subliniere
- tricând
- rând deasupra textului
Cu toate acestea, una dintre cele mai frecvente utilizări ale acestei proprietăți este anularea decorațiunii și trebuie să utilizați cuvântul cheie none cu proprietatea text-decoration:
A { /* folosiți selectorul de tip pentru a selecta toate hyperlinkurile */ text-decor: niciuna; /* eliminați decorarea textului */ }În acest exemplu, am eliminat decorul (sublinierea) din toate hyperlinkurile. Lista plina Cuvinte cheie Proprietățile de decor text sunt enumerate în acest tabel:
Vă rugăm să rețineți că majoritatea utilizatorilor asociază textul subliniat cu un hyperlink și textul tăiat cu textul șters, așa că folosiți decorarea atunci când este cu adevărat necesar.
Puteți utiliza mai multe valori într-o singură declarație:
text-decor: subliniere linie-through ; /* definește o linie sub text și o linie prin text */Să ne uităm la un exemplu de utilizare a proprietății text-decoration pe text:
Text-decor: subliniat;
Text-decor: overline;
Text-decor: line-through;
Text-decor: subliniat supraliniu;
În acest exemplu am creat patru stiluri diferite și le-a aplicat pe rând fiecărui paragraf. ÎN primul Decorarea textului a fost adăugată la paragraf - o linie de jos (valoarea sublinierii), în al doilea decor text - linie deasupra (valoare supraliniată), în al treilea decorul textului este în linie și în Al patrulea decor text dublu - o linie în partea de sus și de jos (subliniați valorile supraliniare).
Rezultatul exemplului nostru:
Orez. 65 Un exemplu de utilizare a proprietății text-decoration (decorarea textului în CSS).
Majuscule și minuscule
CSS oferă posibilitatea de a converti orice text în majuscule sau minuscule și de a converti prima literă a fiecărui cuvânt în majuscule. Proprietatea text-transform controlează cazul textului; tabelul de mai jos arată toate valorile acestuia:
Să ne uităm la un exemplu de utilizare a proprietății text-transform pe text:
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai. Mai mâncați câteva din aceste chifle franțuzești moi și bea puțin ceai.
În acest exemplu, am creat trei stiluri diferite și le-am aplicat fiecărui paragraf unul câte unul. În primul paragraf, primele caractere ale fiecărui cuvânt au fost convertite în majuscule (valoare cu majuscule), în al doilea toate caracterele au fost convertite în majuscule (valoare majuscule), iar în al treilea în litere mici (valoare cu minuscule).
Orez. 66 Un exemplu de utilizare a proprietății text-transform (schimbarea majusculei textului).
Capitalele în CSS
Capitale mici sau majuscule (engleză) litere mici) - un stil de font în care caracterele mici arată ca majuscule reduse. Pentru a crea un astfel de stil, utilizați proprietatea CSS font-variant cu următoarea sintaxă:
selector(varianta fontului: majuscule mici; /* setează majusculă fontului */ }Să ne uităm la un exemplu de utilizare:
Paragraful este afișat cu font normal.
Literele mici sunt setate la litere mari mai mici.
În acest exemplu, primul paragraf este lăsat neschimbat, iar proprietatea font-variant cu valoarea small-caps este aplicată celui de-al doilea, datorită căruia textul va fi afișat cu majuscule mici ( literă mică sunt stabilite ca majuscule de dimensiuni reduse).
Uneori, codul nostru nu este întotdeauna perfect. Și îmi doresc foarte mult să fie nu numai funcțional, ci și frumos proiectat și formatat. Timpul este al nostru inamic principal, rareori ne permite să respectăm regulile de formatare a codului. Încercăm să terminăm rapid aspectul sau să descriem o duzină de stiluri CSS și facem acest lucru în detrimentul lizibilității. În acest articol, vă voi oferi o listă de servicii care vă vor ajuta să vă formatați codul, astfel încât să fie plăcut de privit.
Ar trebui să ai încredere în program sau să faci totul manual?
Cu siguranță aveți o întrebare: cum să faceți codul lizibil? Poate un program să aranjeze corect toate indentările și rupturile de rând, astfel încât ochiul uman să primească doar plăcere estetică de la vizualizarea codului? Bineînțeles că se poate! Nu vă înșelați că, deoarece un robot face în esență treaba pentru dvs., acesta va fi „murdar”. Serviciile care vor fi prezentate în articolul de mai jos m-au salvat de mai multe ori. De exemplu, în situațiile în care a fost necesar să copiați același lucru cod html de pe alt site, iar atunci când au fost introduse, etichetele s-au dovedit a fi pur și simplu aranjate într-o ordine haotică de-a lungul liniilor: o mulțime de file, întreruperi de linie nelogice, absolut nicio imbricare este vizibilă! Acest lucru este probabil familiar pentru mulți. Și îmi doresc foarte mult ca site-ul tău să arate diferit: îngrijit și ușor de citit. La urma urmei, în primul rând, facem acest lucru pentru noi înșine, pentru comoditatea suportului suplimentar al unui cod sau al unuia.
Să formatăm codul
Vorbește mai puțin, lucrează mai mult. După cum a arătat practica, formatarea codului online este destul de simplă. Tot ce trebuie să faceți este să copiați codul murdar și să-l inserați în special câmpuri de text pe unul dintre site-urile specificate. Apoi apăsați butonul, așteptați puțin și - voila! Obțineți un cod frumos, formatat și ușor de citit.
Iată o listă cu toate „purificatoarele” de cod pe care le cunosc pentru diferite limbi.
