Introducere în ceea ce css css
Partea I. Ce este CSS
Un pic despre CSS
CSS Cascading Style Sheets (foi de stil în cascadă) - o limbă care conține un set de proprietăți pentru a descrie apariția oricărui document HTML. Cu ajutorul designerului are control complet asupra stilului și locația fiecărui element de pagină Web care este utilizarea mai simplă și mai funcțională a setului obișnuit de tag-uri HTML. Iată un exemplu: Ai nevoie pentru a crea caractere aldine roșu text subliniat.
Exemplu HTML:
unele texte
Și dacă acest stil ar trebui să fie utilizat mai mult de o dată? Prin primeru10-20? Acolo putem ajuta și CSS. Există trei tipuri de foi de stil:
Structura și normele
Orice element HTML - este posibil selector CSS. Proprietățile selectorului determină elementul de stil pentru care este definit.
Toate elementele din documentul va H2 de culoare roșie, dimensiunea de 30 de puncte (pt, puncte).
selectoare de clasă (clasa Căutători):
CLASA - atribut element HTML, determină clasa sa. În CSS, puteți descrie propriile stiluri pentru diferite clase de aceleași elemente.
Toate elementele de H2 atribut class = „albastru“ sunt albastre.
Clasele pot fi, de asemenea, descrise, fără a le lega în mod explicit la anumite elemente.
În acest caz, toate elementele cu atributul class = „verde“ va deveni verde.
selectori ID (ID Căutători):
ID-ul - numit în mod individual stil. C Acesta vă poate ajuta să creați o excepție citi cu atenție elemente stilistice din aceeași clasă.
Indifikatory utilizate în principal pentru a conferi unul sau mai multe elemente ale unei clase de proprietăți individuale. Să presupunem că ați creat o clasă de albastru - albastru cursive. Dar, veți avea nevoie de un bold, text subliniat cu caractere cursive albastre. Desigur, puteți crea o nouă clasă, dar de ce? Pur și simplu descrie ID-ul. De exemplu, „boldunderline“. Și toate elementele unei clase albastru cu valoarea ID-ul „boldunderline“ va fi subliniate cu caractere cursive aldine albastre. Vor fi, așa cum au fost sinteza și proprietățile unui identificator boldunderline albastru clasă.
Bună ziua, aceasta este pagina mea de start.
Acesta este încă în curs de dezvoltare.
. Dar în curând deschis
După cum se poate observa din exemplul, un atribut ID-ul poate fi utilizat fără a specifica o clasă (ultimul paragraf din exemplul Atunci paragraf va avea numai proprietăți ID-ul „boldunderline“ (în acest exemplu -. Bold, textul subliniat).
selectori contextuali (contextuală Căutători):
selectoare contextuală - este o combinație a mai multor selectoare obișnuite. Style elemetnam dat numai într-o secvență predeterminată în funcție de ordinea de cascadă.
În acest exemplu, toate elementele din cadrul elementelor P, EM va avea un stil predeterminat.
Dând mai multe elemente proprietăți identice:
Să presupunem că aveți nevoie pentru a injecta mai multe elemente ale proprietăților de pagini web identice. În acest caz, atunci când se determină selectorii perechislyautsya virgulă, înainte de proprietățile bloc.
Toate elementele H1, H2, H3, p și puternic va fi verde.
Pseudo-clase și pseudo-elementele.
sintaxa:
selector: pseudo <свойства>
selektor.klass: pseudo <свойства>
selector: pseudo <свойства>
selektor.klass: pseudo <свойства>
Pseudo-clase și pseudo - sunt clase speciale și elemente inerente în CSS și browsere podderzhiveyuschimi CSS determinate automat. Pseudo-clase distinge diferite tipuri de un singur element în determinarea crearea de stiluri personalizate pentru fiecare dintre ele. pseudo-elementele sunt părți ale altor elemente solicitând acestor altele decât elementul ca un întreg stil de părți.
Listă pseudo și pseudo.
Prima linie Pseudo-Element - prima linie. Acest pseudo poate fi utilizat cu un element de nivel bloc (p, h1, etc.). Se schimbă stilul primului rând al acestor elemente.
Scrisoarea întâi Pseudo-elementul - prima literă. Similar cu prima linie, dar nu afectează întreaga linie, dar numai primul caracter.
În acest exemplu, toate elementele de ancorare (link-uri) sunt albastre. Când apăsați (activ) se va schimba culoarea în roșu. Și în insumarea cursorul mouse-ului dispare sublinia.
Notă. descrie mai multe proprietăți pentru un selector, clasa contextuală selector, numit în mod individual stilul sau de grup selectorii omnibuz sunt separate prin punct și virgulă „;“.
Style Sheets interne
După cum sa menționat deja, utilizarea de stil inline nu este cu mult diferit de tag-uri folosind HTML normale. Acestea definesc stilul unui element al documentului folosind atributul STYLE în tag-ul HTML.
înainte
Exemplu INLINE FISA STIL:
înainte
După cum puteți vedea, inline cod foaie de stil pentru a obține mai mult decât HTML. Prin urmare, SSI ar trebui să fie utilizate numai dacă doriți să specificați un anumit element propriul stil individual, care există în clasificarea CSS și nerealizat în HTML. Sau, dacă este necesar, absolut pozitsionirovt acest element.
Style Sheets globale
Stiluri globale stabilit tipul elementelor întregului document. Se folosește tag-ul
aici ea cuvânt - albastru, o ea - grăsime.