Style Sheets css

De ce sunt foile de stil?

CSS (Cascading Style Sheets) - o limbă pentru gestionarea stilului paginilor Web.
Utilizarea CSS poate reduce în mod semnificativ cantitatea de documente HTML, mai ales dacă aveți multe pagini cu același stil și, în același timp, simplificați lucrarea de creare și adăugare de noi documente.





Salvați descrierea diferitelor stiluri în fișiere separate, puteți manipula cu ușurință stilurile.

Descrierea CSS

În acest caz, puteți utiliza aceste stiluri pentru elementele care se află în pagina WEB. Asta este, toate elementele de text din interiorul etichetelor,

Acest stil se aplică numai acestei legende

Această opțiune nu este cea mai bună, deoarece duce la o creștere a dimensiunii codului paginii și la pierderea separării stilurilor separate și a datelor separate ale paginilor.

Acum, luați în considerare cazul în care doriți să atribuiți stiluri nu tuturor acelorași elemente ale paginii, dar numai pentru unele - pentru aceasta utilizați parametrul CLASS = "nume de clasă" sau ID = "element name". care pot fi atribuite oricărui element al paginii (paragraf, tabel etc.).
Parametrul CLASS este utilizat dacă doriți să creați același stil pentru mai multe, dar nu toate elementele de pagină (aceleași sau diferite).
De exemplu, specificați în descrierea stilului:

Puteți să vă asigurați că numai unele celule din tabel sunt afișate cu caractere cursive aldine. Pentru a face acest lucru le atribuim stilul de clasa bi:

Atenție vă rog! Numele de clase sunt case-sensitive.

Styling cu ID-uri este folosit atunci când numai un element de pe pagină corespunde acestui identificator. Dacă există mai multe elemente care trebuie să fie atribuite acestui stil, atunci acesta este deja o clasă.

Pseudo-clase și pseudo-elemente:

Pseudo-clasele și pseudo-elementele sunt clase speciale și elemente inerente în CSS și definite automat de browserele cu CSS.
Pseudo-clasele disting între diferitele tipuri de elemente, creând propriile stiluri pentru fiecare dintre ele.
Pseudo-elementele sunt părți ale altor elemente, dând acestor părți un stil diferit față de întregul element.

sintaxa:
selector: pseudo-clasă <свойства>
selector.class: pseudo-clasă <свойства>
selector: pseudo-element <свойства>
selector.class: pseudo-element <свойства>

Lista de pseudo-clase și pseudo-elemente:

În acest exemplu, toate linkurile vor fi albastre. Când este apăsat (în starea activă), schimbați culoarea în roșu. Și când mutați cursorul mouse-ului, sublinierea dispare.

Scurta descriere a limbajului CSS

Font Properties • font-family Această proprietate definește fontul utilizat de element. Dacă specificați o adresă URL, fontul va fi instalat automat pe computerul utilizatorului
EXEMPLU: font-family: Arial Black URL ("arialblack.ttf") • stil font (normal, italic) Stilul elementului. Italic sau obișnuit
EXEMPLU: font-style: italic • font-variant (normal-normal, small-caps-înlocuiește toate literele mici cu majuscule) Opțiunile de afișare pentru font. Netscape nu acceptă această proprietate
EXEMPLU: font-variant: mic-capace • font-greutate (normal-normal bold-gras, bolder-foarte gras, brichetă subțire, instalare 1-900-precisa) Izolarea de celule (grăsime)
EXEMPLU: greutate font: bold • dimensiune font (XX%, XXpt, XXpx) Dimensiune font
EXEMPLU: font-size: 30pt • font (familie, stil, variantă, greutate, dimensiune) Combină toate proprietățile de mai sus.
EXEMPLU: font: italic îndrăzneț Arial 12pt Proprietăți text. • Decorarea textului (nici una, subliniere-subliniată, depășită, cruce, intermitentă) Stil text
EXEMPLU: Decorarea textului: linia prin spațierea cu litere (XX) Spațiu între litere
EXEMPLU: letter spațiere: 100 • vertical-align (linia de bază, sub, super, top-text, de sus, de mijloc, de jos, de jos în text, procente) Dispunerea elementelor în raport cu alte elemente în picioare într-un singur rând.
Exemplu: aliniere verticală: text de vârf • text-transform (capitalizare - fiecare cuvânt începe cu o literă mare, UPPERCASE - fiecare literă a textului devine majusculă, mică - fiecare literă a textului devine mică.
EXEMPLU: text-transform: capitalizare • text-align (stânga, dreapta, centru, justifica) Alinierea textului.
EXEMPLU: text-aliniere: dreapta • text-indent (lungime unitate sau procentaj) Text indent.
EXEMPLU: text-liniuță: 30 em • înălțimea liniei (lungimea sau procentul unității)
EXEMPLU: înălțimea liniei: 100% proprietăți de culoare. • culoare (#RRGGBB) Culoarea elementului
EXEMPLU: culoare: # f00000 • backgroung-color (#RRGGBB) Culoarea fundalului elementului
EXEMPLU: culoarea de fundal: # f00000 • imaginea de fundal (URL) Imaginea de fundal
Exemplu: background-image: URL ( "img.gif") • background-repeat (repeta - multiplică imaginea de fundal în toate direcțiile, repetați-x - multiplică imaginea de fundal pe orizontală, repetați-y - multiplică imaginea de fundal pe verticală, fără repetare - nu repetați imaginea) Repetați imaginea de fundal
EXEMPLU: repetare fundal: fără repetare • atașament de fundal (defilare-derularea imaginii de fundal cu documentul, fixarea fixă ​​a imaginii de fundal) Modul de derulare a imaginii de fundal.
EXEMPLU: atașare pe fundal: poziție fixă ​​pe fundal (% din lățime +% înălțime; vârf, mijloc, fund; stânga, centru; dreapta; distanța față de marginea din stânga + distanța de la marginea superioară) Poziția imaginii de fundal
EXEMPLU: poziția fundalului: 50% 0% • fundal (culoare, imagine, poziție, atașare, repetare) Combină toate proprietățile de mai sus.
EXEMPLU: fundal: fixare negru repetată 50% 0% Proprietăți la graniță. • marginea superioară (lungime, procentaj, auto)
EXEMPLU: margin-top: 100 • margin-right (lungime, procent, auto) Indent dreapta
EXEMPLU: margin-dreapta: 100% • margin-bottom (lungime, procent, auto) Marginea inferioară
EXEMPLU: marginea inferioară: 100 mm • Marginea stângă (lungimea, procentajul, auto) Linia stângă
EXEMPLU: margin-left: margine 100pt (sus, dreapta, stânga, partea de jos) Combină toate proprietățile de mai sus.
EXEMPLU: fundal: 100pt • umplutură de sus (lungime, procentaj) Indentă de la marginea de sus
EXEMPLU: pad-top: 100pt • padding-right (lungime, procentaj) Indent de la marginea din dreapta "
EXEMPLU: umplutură-dreapta: 100% • partea inferioară a căptușelii (lungime, procent) Deplasarea de la marginea inferioară
EXEMPLU: partea inferioară a căptușelii: 100 mm • stânga (lungime, procentaj) Indent de la marginea din stânga "
EXEMPLU: pad-top: 100 • padding (stanga, dreapta, sus, jos) Combina toate proprietatile de mai sus. Puteți specifica simultan mai multe valori (până la patru) pentru diferite laturi. Dacă este setată o valoare - o singură liniuță este setată pentru toate laturile, dacă două - apoi linii diferite sunt setate pentru laturile adiacente, iar dacă patru - atunci indenturile sunt setate pentru toate laturile.
EXEMPLU: umplutură: 100 pixeli • lățimea maximă a marginii (lungime, subțire, medie, grosime) grosimea marginii superioare
EXEMPLU: lățimea maximă a graniței: 100pt • grosimea marginii drepte (lungime, subțire, medie, grosime) a marginii drepte "
EXEMPLU: lățimea marginii-dreapta: grosimea marginii de jos a marginii (lungime, subțire, medie, grosime)
EXEMPLU: lățimea marginii de fund: 100 mm • grosimea marginii stângi (lungime, subțire, medie, groasă) a marginii din stânga "
EXEMPLU: lățime la stânga-limită: mediu • lățime de margine (lățime maximă, lățime dreaptă, lățime stângă, lățime inferioară) Combină toate proprietățile de mai sus. Puteți specifica mai multe valori în același timp (până la patru) pentru diferite frontiere. Dacă se stabilește o valoare - o grosime uniformă este stabilită pentru toate laturile, dacă două - atunci este stabilită o grosime diferită pentru laturile adiacente și, dacă patru - pentru a stabili grosimea individuală pentru toate laturile
EXEMPLU: lățimea marginii: 15pt • culoarea frontală (culoarea) Culoarea frontierei.
EXEMPLU: culoarea frontală: verde • stil de frontieră Stilul frontierei. Puteți specifica mai multe valori în același timp (până la patru) pentru diferite frontiere. Dacă este setată o valoare - un stil uniform este setat pentru toate părțile, dacă două - atunci stiluri diferite sunt stabilite pentru laturile adiacente, iar dacă patru - atunci stilurile individuale sunt setate pentru toate părțile
EXEMPLU: stil de frontieră: canelură punctată • margine de sus (lățime, stil, culoare) Combină toate proprietățile de mai sus pentru marginea superioară.
EXEMPLU: margine superioară: canelură roșie 100 mm • margine dreaptă (lățime, stil, culoare) Combină toate proprietățile de mai sus pentru marginea dreaptă.
EXEMPLU: margine dreaptă: 5pt magenta solid • margine stânga (lățime, stil, culoare) Combină toate proprietățile de mai sus pentru marginea din stânga.
EXEMPLU: margine-stânga: inserție de coral de 15 centimetri • partea de jos a marginii (lățime, stil, culoare) Combină toate proprietățile de mai sus pentru marginea din stânga.
EXEMPLU: partea de jos a frontierei: 30 margine portocalie • margine (lățime, stil, culoare) Combină toate proprietățile de mai sus.
EXEMPLU: margine: • lățime dublă (lungime, procente) Lățimea elementului
EXEMPLU: lățime: 10% • înălțime (lungime, procent) Înălțimea elementului
EXEMPLU: înălțime: 100pt • float (stânga, dreapta) Locația elementului
EXEMPLU: float: dreapta • clar (stânga, dreapta, ambele) Aranjarea altor elemente în jurul acestuia
EXEMPLU: clar: ambele clasificări. • Afișaj (nici unul-nu este afișat, bloc-line pauze înainte și după elementul, inline-nu rupe linia. Linia Lista-item-string rupe înainte și după elementul + adaugă un marker în lista elementelor) Determină modul în care elementul listă afișată
EXEMPLU: display: none • alb-spațiu (normal - "strange" mai multe goluri consecutive într-o singură, pre - capabil să afișeze lacune consecutive neskolkolkih, nowrap - nu permite linia de transfer, fără tag-ul
) Setează cum vor fi afișate spațiile dintre elemente
EXEMPLU: white-space: nowrap • list-style-type (disc, cerc, pătrat, decimal, inferior-roman, superior-roman, inferior alfa sau superior alfa) determină tipul de marcator element de listă.
EXEMPLU: tipul de tip listă: alfa-inferior • lista-stil-imagine (URL) specifică tipul marcatorului de element listă ca imagine
EXEMPLU: list-style-image: URL (cool.gif) • list-style-position (interior, exterior) Definește poziția markerului în funcție de elementul listă
EXEMPLU: listă-stil-poziție: interior • stil-listă (tip, poziție, imagine) Combină toate proprietățile de mai sus.
EXEMPLU: stil de listă: interior

Suplimente

Mărimea lungimii (Sintaxă: "+" / "-" XX unitate)
EXEMPLU. -566pt em - ems element de font înălțime ex utilizat - lățime x înălțime a literei "x" utilizat element de font pixeli px în inci mm milimetri cm centimetri punct pt (1pt = 1 / 72in) pc picas (1buc = 12pt) măsoară Interes
EXEMPLU. -566% - / +% XX Scădere / creștere în procente. Culoarea Nume culoare EXEMPLU. magenta • #rrggbb Culoare în RGB, unde rr, gg, bb este un număr hexazecimal.
EXEMPLU. # 00cc00 • rgb (x, x, x) Culoare în RGB, unde "x" este un număr zecimal de la 0 la 255.
EXEMPLU. rgb (0,204,0) • #rgb Culoare în RGB, unde r, g, b este un număr hexazecimal.
EXEMPLU. # 0c0 • rgb (x%, x%, x%) Culoare în RGB, unde "x%" este un număr de la 0.0 la 100.0.
EXEMPLU. rgb (0%, 80%, 0%)

Unele trucuri de gestionare a stilurilor