Lucrul cu text în Proprietăți css textului și fonturile în exemplele css
CSS oferă oportunități ample pentru manipularea stilul de text. Ea poate afecta fontul, culoarea, dimensiunea și alte proprietăți ale textului.
Deoarece această pagină este concepută pentru începători, trebuie să vă amintiți mai întâi sintaxa CSS de bază și terminologia utilizată.
Fiecare regulă CSS constă dintr-un selector și definiții. Selector - de obicei, o etichetă, la care vom aplica stilul și determinarea noastră - este display-ul foarte stilistic. Definiția constă într-o proprietate și valoarea sa. De exemplu: proprietatea - valoarea de culoare - roșu.
Sintaxa CSS este după cum urmează:
Exemplu de reguli CSS:
În acest exemplu, regula este tag-ul
textul afișat în albastru. Un selector poate specifica mai multe perechi (de proprietate. Valoare).
În acest exemplu, regula este tag-ul
textul afișat în albastru și dimensiunea 10pt. Asta este, aici avem două perechi (proprietatea. Valoare) aplicată unui selector una, în acest caz, la alineatul tag-ul
.
Mai târziu, când textul discursului se va întâlni proprietatea și valoarea va fi în vedere este definiția pentru selectorul în regula CSS.
proprietăți de fonturi
Setează fontul din lista
Dacă nu specificați această proprietate în CSS, browser-ul va afișa textul fontului implicit. De obicei, acest lucru este Times New Roman.
o listă de fonturi din valoarea font-family poate include unul sau mai multe nume, separate prin virgulă. Dacă numele fontului conține spații, de exemplu, Trebuchet MS, acesta trebuie să fie închise în ghilimele, simple sau duble.
Browser-ul verifică pentru fonturi alternativ din lista de pe calculatorul utilizatorului. În cazul în care este, este utilizat primul font pe listă, în caz contrar browser-ul verifică pentru al doilea font din listă. Dacă există orice, este fontul implicit. La sfârșitul listei este de obicei prescris cuvânt cheie care descrie tipul de font dorit - serif, sans-serif, fantezie, cursiv sau monospace.
familii de fonturi generice:
- Serif - antikvennye fonturi (fonturi serif), de tip Times;
- sans-serif - font sans-serif (sans serif sau Grotesca), un reprezentant tipic - Arial;
- monospace - fonturi proporționale, lățimea fiecărui simbol din aceeași familie (font Courier).
- fantezie - o familie de fonturi decorative;
- fonturi cursive familiale - cursivă;
Exemplu folosind:
font normal
cursiv
italice
Exemplu de cod, în acest exemplu încorpora stiluri de etichete folosind atributul style.
Este evident că cursul font oblice arată diferit.
Setează capacele mici (cu litere mici) singular
Capital - așa-numitul text tipografie în care apar cazuri de caractere mai mici ca de capital redus. Este necesar să se facă distincția între capital și un capital de litere mici. Mici-capace cu litere mici sunt puțin mai mari și au, de regulă, proporție ușor îmbunătățită.
grăsime normală
mark luminoase
îndrăzneț
gras
100 - Font Light
900 - mai gras
proprietate font-weight stabilește greutatea fontului. Pentru a face acest lucru, în sensul folosit cuvinte cheie: bold - normală bold, - marca normală. Valoarea poate fi setată în intervalul 100-900, în trepte de câte 100. marca suzeranitate, care poate afișa browser-ul are o valoare de 100, și Ultrabold - 900. stilul normal font (normal, care este implicit) corespunde cu 400 de text cu caractere aldine standard bold - valoarea de 700.
Browserele de obicei, nu se poate arăta cu exactitate greutatea fontului dorit, astfel încât comutarea între valorile aldine. normal sau mai ușoare. În practică marca în cele mai multe browsere de obicei limitată la doar două variante: font normal și se confruntă cu caractere aldine.
Valori mai ușoare și mai îndrăznețe schimbarea fontului de saturație de grăsime în raport cu societatea-mamă, respectiv, într-o mai mică și o mare petrecere.
Proprietatea font-size - definește dimensiunea fontului elementului. Dimensiunea fontului poate fi setat în mai multe moduri.
font-size: normală
font-size: 11pt
font-size: 11px
font-size: 110%
Mărimea absolută a dimensiunii punctului de font poate fi specificat folosind cuvinte cheie: xx-small (foarte mic), mici (scăzut), medie (medie, valoarea implicită), mare (ridicat), x-mare (foarte mare), xx-mare ( foarte mare). Dimensiunile absolute font în funcție de setările de browser și sistemul de operare, astfel încât acestea nu sunt destul de absolut.
Pentru a schimba dimensiunea textului în raport cu societatea-mamă utilizează un set diferit de constante (mai mari - mărește dimensiunea în raport cu societatea-mamă, mai mici - reduce dimensiunea).
proprietățile textului
În plus față de lucrul cu fonturi, CSS oferă o serie de instrumente pentru a lucra cu proprietățile textului propriu-zis.
Luați în considerare prima proprietate:
Line spacing (de conducere)
line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
Raportul spațierea Instalarea vine de la fontul de bază. În mod implicit, distanța dintre linii de text depinde de tipul și dimensiunea fontului și este determinată de browser-ul în mod automat. Valoarea negativă a de conducere nu este permisă.
Atunci când este luat record de interes pentru 100% din înălțimea fontului.
Eliminați toate design-
subliniere
Linia de text
strikethrough
text clipitor
Prin determinarea
Proprietatea text-transforma - controlează afișarea de caractere, puteți instala litere mari sau mici, în funcție de valoarea selectată.
Eliminați toate efectele
Cu un capital
MAJUSCULE
litere mici
Comparați textul care este conținută într-un cod html cu textul din fereastra browser-ului.
Proprietatea text-align - utilizat pentru a alinia textul orizontal fereastra browser-ului sau container, care este un bloc de text.
Descrierea detaliată a valorilor:
- centru - textul este centrat.
- justifică - o justificare, de fapt, este aliniat la dreapta și pe partea stângă, în același timp, textul între cuvintele sunt formate spațiu gol care umple spațiul browser-ului.
- stânga - margine levopu aliniere. Această valoare este folosită în mod implicit.
- dreapta - dreapta-aliniat.
Un exemplu de utilizare a acestei proprietăți este combinată cu exemplul proprietății următoare.
Proprietatea text-liniuță - este folosit pentru a crea indentarea primei linii a blocului de text (de exemplu, pentru un paragraf
).
Această proprietate permite o valoare negativă, în acest caz, o proiecție a primului rând.
indentarea pentru primul rând
text-liniuță: 15px;
text-liniuță: 10%
Unele proprietăți CSS