Web-codare: CSS:
Deci ce este asta - CSS?
Deci ce este asta - CSS? Foi de stil cascadă (foi de stil cascadă) este o limbă care conține un set de proprietăți pentru a descrie aspectul oricăror documente HTML. Cu aceasta, designerul are control complet asupra stilului și aspectului fiecărui element al paginii web, care este mai simplu și mult mai funcțional decât utilizarea setului obișnuit de etichete HTML. Voi da un exemplu: Trebuie să creați un text îndrăzneț roșu subliniat.
Structura și regulile
Orice element HTML este un posibil selector CSS. Proprietățile selectorului determină stilul elementului pentru care este definit.
EXEMPLU:
H1
Toate elementele H1 din document vor fi roșii, cu 20 de puncte (pt, punct).
Selectorii de clasă:
CLASS este un atribut al unui element în HTML care definește clasa sa. În CSS, puteți descrie propriile stiluri pentru diferite clase ale acelorași elemente.
Toate elementele H1 cu atributul CLASS = "albastru" vor deveni albastre.
Clasele pot fi descrise, de asemenea, fără a le obliga explicit la anumite elemente.
În acest caz, toate elementele cu atributul CLASS = "verde" vor deveni verzi.
Selectori de ID:
ID-ul este un stil denumit individual. Cu aceasta, puteți crea excepții stilistice printre elementele unei clase.
Indicatorii sunt utilizați în principal pentru a da unul sau mai multe elemente ale unei clase de proprietăți individuale. Să presupunem că ați creat o clasă albastră - un italic albastru. Dar ai nevoie de un text îndrăzneț subliniat cu caractere cursive albastre. Desigur, puteți crea o nouă clasă, dar de ce? Este mai ușor să descrii ID-ul. De exemplu, "boldunderline". Și toate elementele din clasa albastră cu valoarea ID "boldunderline" vor deveni subliniate cu litere albe în italic. Va exista o sinteză a proprietăților clasei albastre și a boldunderlinei identificatorului.
<
Bună ziua, aceasta este pagina mea de pornire.
Este încă în dezvoltare.
. Dar curând se va deschide
După cum puteți vedea din exemplu, atributul ID poate fi folosit fără a specifica clasa (ultimul paragraf al exemplului, atunci paragraful va avea numai proprietățile ID-ului "boldunderline" (în exemplar, textul îngroșat, subliniat).
Selectori contextuali:
Selectorii de context sunt combinații ale mai multor selectori obișnuiți. Stilul este dat numai elementelor dintr-o secvență dată, în funcție de ordinea în cascadă.
În acest exemplu, toate elementele EM din elementele P vor avea stilul specificat.
Oferind mai multe elemente aceleași proprietăți:
Să presupunem că trebuie să dați mai multe elemente ale paginii dvs. web aceleași proprietăți. În acest caz, când se definesc selectorii, ele sunt enumerate cu virgule separate înainte de blocul de proprietăți.
h1, h2, h3, p, puternic
Toate elementele h1, h2, h3, p și puternic vor fi verzi.
Pseudo-clase și pseudo-elemente.
sintaxa:
selector: pseudo-clasă <свойства>
selector.class: pseudo-clasă <свойства>
selector: pseudo-element <свойства>
selector.class: pseudo-element <свойства>
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 întreg.
Lista de pseudo-clase și pseudo-elemente.
Primul rând Pseudo-element - prima linie. Acest pseudo-element poate fi folosit cu elemente de nivel de bloc (p, h1, etc.). Modifică stilul primei linii a acestor elemente.
Prima literă Pseudo-element - prima literă. Arată ca prima linie, dar nu afectează întreaga linie, ci doar primul personaj.
În acest exemplu, toate elementele Anchor (link-uri) 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.
Notă. descrierile mai multor proprietăți pentru un selector, selector contextual, clasă, stil individual sau grup de selectori fuzionați sunt separate unul de altul printr-un punct și virgulă ";".
Foi de stil interne
După cum sa menționat deja, utilizarea stilului interior nu este mult diferită de utilizarea etichetelor HTML convenționale. Ele fixează stilul la un singur element al documentului utilizând atributul STYLE din eticheta HTML.
Înainte către viitor
EXEMPLU FIȘĂ DE STYLE INLINE:
Înainte către viitor
După cum puteți vedea, foaia de stil inliniată este mai mult decât HTML. Prin urmare, ISS ar trebui să fie utilizat numai dacă doriți să specificați un element specific al stilului dvs. individual care există în clasificarea CSS și nu este implementat în HTML. Sau, dacă este necesar, poziționează absolut acest element.
Foi de stil globale