Bazele css - 20 cele mai multe stiluri chastoispolzuemyh

În activitatea sa cu privire la aspectul de site-uri, folosesc doar un total de 20 de stiluri CSS de bază. Știind-le, va fi capabil de a impune un aspect destul de complexă a site-ului.

Lasă-mă să te prezint la ei.

Stiluri utilizate pentru formatarea textului

Acest stil este folosit pentru a specifica setul de caractere. Numele listelor de fonturi, separate prin virgulă, în cazul în care numele este format din mai mult de un cuvânt trebuie să utilizați ghilimele.

Un exemplu de utilizare stiluri:

font-family: (sans serif), Arial, Helvetica, sans-serif;

font-family: (un font serif), "Times New Roman", Times, serif;

font-family: (font monospațiat), "Courier New", Courier, monospațiat;

Pentru a lista fonturile utilizate trebuie să fie, în această ordine. Pentru o mai bună înțelegere a fundamentelor de tipografie web sugerăm să citiți articolul Web tipografie astăzi.

Acest stil definește culoarea textului. Pentru a seta culoarea poate fi utilizată ca o valoare de culoare hex (culoare: #fff), și un număr de cuvinte cheie (de culoare: negru, culoare: red.)

Acest stil stabilește alinierea textului în cadrul unității mamă. Poate avea valorile din stânga, dreapta, centru.

Există o valoare stil perversă - justifică, care aliniază textul pe lățimea unității mamă. Printre stil de designeri web justifica forma rea ​​luata in considerare deoarece alinierea pe lățimea unității mamă conduce la decalaje de diferite lungimi, ceea ce afectează în mare măsură chitabilnost.

Am act de faptul că proprietatea de aliniere dat text-align, se aplică și elementelor grafice din interiorul unității.

Acest stil setează distanța dintre liniile într-o casetă de text (sau, cu alte cuvinte, modificați înălțimea unei linii de text, chiar și pentru un inteligent, aceasta se numește „Leading“). Uneori, fontul este mult mai plăcut să se uite la creșterea valorii liniei de înălțime. implicit.

Valoarea acestei proprietăți este definită ca procent, Factorul (1 - lider implicit, 1,5 - a crescut cu jumătate) (100%, 150%.) (. 10px, 1,5 em) sau valoarea exactă a pixelului.

spațiere Inter caractere. Valoarea acestei proprietăți indică în unități de lungime (pixeli inches, PT) sau unități relative - em.

Dacă se dorește, face bloc de text bold - stil utilizare font-weight: bold. Pe de altă parte, dacă doriți să eliminați Bold - totul este simplu font-greutate: normala

elemente de poziționare

Această proprietate trage unitate (aplicată este o proprietate necesară pentru a bloca div) din fluxul normal al unei pagini. Și unitate suplimentară este poziționată în raport cu colțul de sus al browser-ului prin specificarea proprietăților din stânga și sus procent sau pixeli.

flux normal - acest lucru este atunci când blocurile sunt pe pagină, unul câte unul, și anume, div div sub-lea. În cazul poziției proprietăți: bloc absolut suprapus pe partea de sus a altor blocuri de fluxul normal.

Folosind poziționarea absolută, pentru a evita circumstanțe neprevăzute, este necesar să se precizeze lățimea și înălțimea blocului în pixeli (proprietăți lățime și înălțime).

specii de poziționare absolută. În acest caz, blocul este deplasat la stânga prin specificarea valorilor și de top pe locul poziției sale normale. Cu alte cuvinte, unitatea de ieșire, în cazul în care ar trebui să fie în fluxul normal și se trece la valoarea specificată.

Dacă unitatea de bază Setați poziția de stil: relativă. blocul nested cu poziția stil spus: absolută fi deplasat în raport cu colțul din stânga sus al unității mamă.

Dacă div două blocuri într-o singură linie ar trebui să fie plasate unul după altul, în primul bloc indică stilul float: left (aceasta înseamnă că granița din stânga a blocului trebuie să rămânem la blocul anterior în fluxul). Primul bloc este apăsat, de exemplu, la marginea din stânga a ferestrei de browser. În cazul în care blocul următor în flux pentru a specifica aceeași valoare în stilurile, cele două unități vor fi afișate pe aceeași linie. Primul bloc va lipi de marginea din stânga a ecranului, și în al doilea rând, limita de stânga la limita din dreapta a blocului precedent.

În cazul în care a doua unitate a valorilor float stilul specificat: dreapta. cele două unități în continuare vor fi pe aceeași linie, dar acum primul bloc se va lipi de marginea din stânga a ferestrei browser-ului, iar în dreapta - partea dreaptă față de marginea din dreapta a ferestrei browser-ului.

Rețineți că unitățile vor fi afișate pe o singură linie numai în cazul în care lățimea totală a acestora să nu depășească lățimea ferestrei browser-ului.

Ca rezultat, browser-ul ne va trage doar o astfel de imagine.

Listarea CSS, trebuie observat stilul *. Acest stil elimină capitonarea, a cerut în browser-ul implicit. Vă sfătuiesc să înceapă să scrie un fișier CSS pentru site-ul dvs. de la acest stil.

Această proprietate face indentare într-un bloc (valoare pixeli)

Specifică indentarea limitelor bloc

Asta ar da imagine mai clară:

Ce este padding și marja

În fundal, puteți seta Kartika: background-image; sau pur și simplu pune o culoare de fundal: culoare de fundal.

Model poate fi repetată (în axa X sau Y) - background-repeat.

Și, ca fundal poate fi deplasată - background-position.

Asta-i toate stilurile utilizate în mod obișnuit. Pentru mai multe detalii despre fiecare dintre ele poate fi citit pe site-ul htmlbook.ru