CSS

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare
Notă despre dezambiguizare.svg Dezambiguizare - Dacă sunteți în căutarea altor semnificații, consultați CSS (dezambiguizare) .
Foi de stil în cascadă
Logo CSS3 și wordmark.svg
Extensie .css
Tip MIME text/css
Dezvoltat de W3C
Prima publicație 17 decembrie 1996
Site-ul web www.w3.org/TR/CSS

CSS (abrevierea pentru foi de stil în cascadă în foi de stil în cascadă italiene ), în informatică , este un limbaj folosit pentru a defini formatarea documentelor HTML , XHTML și XML , cum ar fi site-uri web și pagini web conexe. Regulile pentru compunerea CSS sunt cuprinse într-un set de directive ( Recomandări ) emise din 1996 de către W3C .

Introducerea CSS a fost necesară pentru a separa conținutul paginilor HTML de formatare sau aspect și pentru a permite o programare mai clară și mai ușor de utilizat, atât pentru autorii paginilor, cât și pentru utilizatori, garantând totodată reutilizarea codului și întreținerea sa mai ușoară.

Istorie

Pictogramă lupă mgx2.svg Același subiect în detaliu: Tipografie web și formatare text .

Pentru a permite autorilor să poată modela în mod liber aspectul paginilor web , începând cu 1993, Netscape Navigator și Internet Explorer , cele două programe de navigare pe care utilizatorii le-au contestat în binecunoscutul război al browserului , au prezentat etichete proprietare , adică neaderând la standarde. compatibil cu browserele concurente. Un exemplu al acestor etichete a fost <font> care a definit fontul caracterelor.

Aceste etichete de formatare proprietare au fost singura modalitate prin care autorii pot defini formatarea, astfel încât utilizarea lor a devenit foarte intensă. Cu toate acestea, aceste etichete au avut trei probleme:

  1. Prima problemă este lungimea etichetelor. În comparație cu o pagină care adoptă limbajul CSS, o pagină care nu o adoptă este de obicei mai grea (în termeni de biți ) într-un raport care ajunge adesea la 0,2%. [ Citație necesară ] În plus, instrucțiunile CSS pot fi colectate într-un fișier în afara care este stocat în memoria cache a browserului, reducând în continuare cantitatea de date pe care serverul trebuie să le transmită.
  2. A doua problemă este lipsa logicii în codul HTML (X). De fapt, un cod neconform, redundant și confuz presupune multă muncă suplimentară pentru browsere, care trebuie să încerce să corecteze și să interpreteze (atunci când este posibil) directivele arbitrare.
  3. A treia problemă este lipsa de compatibilitate cu computerele portabile și smartphone-urile . Aceste pagini sunt de fapt concepute pentru ecrane cu o rezoluție minimă de 800 × 600 pixeli. Dispozitivele, cum ar fi PDA-urile (sau tabletele mai moderne), care pot avea o rezoluție mai mică și o formă a ecranului foarte diferită de raportul 4: 3 al monitoarelor computerului , sunt, prin urmare, incapabile să afișeze pagina corect, rezultând că utilizatorul va găsi un pagină confuză și incomodă de citit.

O altă problemă a fost, în paginile web non-standard, utilizarea etichetei <table> ( tabelele ) pentru a crea aspectul paginilor web. Aspectul tabelar este considerat de dispreț de către puristi, deoarece tabelele sunt concepute pentru a aranja datele tabulare și nu aspectele web. În plus, utilizarea tabelelor prezintă și dezavantaje practice: creșterea greutății paginilor, așa cum s-a indicat deja în problema 1 și agravarea accesibilității, deoarece ordinea logică a datelor poate fi sacrificată din motive de aspect.

Un alt mod de a crea site-uri web în anii 90 și 2000 (până la abandonarea sa la 31 decembrie 2020 de către Adobe [1] ) a fost Adobe Flash care a permis (într-un mod vectorial) să creeze animații, transformări și, în general, un aspect mult mai atrăgător decât HTML și CSS. Mai mult, a permis integrarea oricărui font chiar dacă utilizatorul nu îl avea pe dispozitivul său. Aceste probleme au fost rezolvate cu HTML5 și CSS3.

O altă problemă a fost crearea formatării paginii HTML prin încorporarea stilurilor în etichete și a tiparului în eticheta (acum depășită) „font”. Acest lucru a făcut codul complicat și adesea dezordonat. De exemplu:

 < p style = "color: blue; font-size: 46px;" >
Wikipedia este o enciclopedie
</ p >

CSS

Pentru a încerca să rezolve această situație, în 1996 W3C a emis specificația CSS 1. CSS 1 a fost un mod interesant de a separa conținutul de formatare . Baza acestui limbaj, de fapt, a constat în faptul că conținutul va fi întotdeauna definit de codul (X) HTML, în timp ce formatarea va fi transferată într-un cod complet separat , CSS. Referințele dintre cele două coduri au fost făcute prin două atribute particulare: clasă și ID . Aceste specificații:

  1. Au fost o soluție eficientă la prima problemă (excluzând problema etichetei <table> ), deoarece au redus foarte mult dimensiunea paginilor.
  2. Au rezolvat-o pe cea de-a doua parțial, deoarece au permis codului HTML (X) să revină în mare parte simplu și esențial, dar au avut unele neajunsuri care au forțat utilizarea etichetelor HTML.
  3. Cu toate acestea, ei nu au luat în considerare a treia problemă, dat fiind că în 1996 PDA-urile (handheld- urile ) erau abia răspândite.

CSS a dezvoltat o idee simplă, dar eficientă, dar, în ciuda potențialului lor mare, nu au reușit din cauza lipsei browserelor capabile să le susțină.

CSS 2 și CSS 2.1

Pentru a include noile caracteristici și a face din CSS un limbaj bine acceptat, în 1998 W3C a publicat specificația CSS 2. În 2004, a început lucrarea la specificația CSS 2.1 actualizată, care a devenit o recomandare oficială pe 7 iunie 2011. CSS 2 este evoluția naturală a CSS 1 și oferă soluții puternice pentru a rezolva mai presus de toate a treia problemă, cu posibilitatea de a crea foi de stil separate pentru dispozitive portabile. Chiar și a doua problemă este acum complet rezolvabilă, scriind o pagină HTML (X) adresată exclusiv structurii și conținutului și apoi manipulând-o exclusiv cu CSS pentru a o aranja.

Începând cu Internet Explorer 5 , Firefox și Opera 7 , CSS 2 a reușit să utilizeze browsere capabile să le interpreteze și, prin urmare, au devenit parte a codului multor site-uri web.

Primele tipuri de machete fără tabele (de obicei una, două sau trei coloane) au început să fie create [2] [3] :

  • aspect fix: avea o dimensiune standard pe toate dispozitivele.
  • aspect fluid-elastic: lățimea a variat pe măsură ce lățimea ferestrei browserului a variat, dar în cazul ecranelor foarte mari, textele s-au extins foarte mult, iar aspectul a prezentat linii de text foarte lungi și enervante de citit.

CSS 3

Pictogramă lupă mgx2.svg Același subiect în detaliu: animații CSS .

Spre deosebire de specificația CSS 2, care constă dintr-o singură specificație, specificația CSS3 constă din secțiuni separate numite „module”. Datorită acestei modularizări, specificațiile CSS3 au diferite stări de progres și stabilitate. [4] În noiembrie 2014, cinci module au fost publicate oficial de către W3C ca recomandări :

HTML și CSS3 constituie un limbaj complet de turing [5] [6] , o condiție suficientă pentru ca un limbaj să fie considerat un limbaj de programare .

CSS3 prezintă noi posibilități și proprietăți în comparație cu CSS2 [7] [8] . Cele mai importante sunt:

  • posibilitatea de a utiliza cod CSS în loc de imagini (jpg, png ...) pentru a crea transparențe, margini rotunjite și umbre
  • capacitatea de a crea animații , transformări și scale, așa cum a fost posibil să se facă cu Adobe Flash
  • selectori și clase noi
  • abilitatea de a adapta aspectul paginilor web la diferite dispozitive și suporturi media nu mai utilizează mai multe foi de stil pentru fiecare dispozitiv, ci doar una care adaptează pagina la toate.
  • posibilitatea de a înlocui JavaScript pentru a crea sfaturi de instrumente , galerii de imagini și multe altele [9] [10] [11] .
PROPRIETĂȚI CSS3 TIPURI EXEMPLU
Selectoare
Selectoare de bază
  • Selector universal
  • Tastați selectoarele
  • Selectoare de clasă
  • Selectoare ID
* {culoarea rosie}

h1 {culoare: roșie}

.title {color: red}

#title {color: red}

Selectoare combinatorii sau de relații
  • Selector descendent
  • Selector de copii
  • Selector de frate adiacent
  • Selector general al fraților
div # container p {culoare: roșie}

corp> p {culoare: roșie}

h1 + h2 {culoare: roșie}

h1 ~ h2 {culoare: roșie}

Selectoare de atribute
  • E [atribut]
  • E [atribut = valoare]
  • E [atribut ~ = valoare]
  • E [atribut | = valoare]
  • E [atribut ^ = valoare]
  • E [atribut $ = valoare]
  • E [atribut * = valoare]
un [titlu] {culoare: albastru}

a [title = "Lorem"] {color: blue}

a [title ~ = "dolor"] {color: blue}

a [title ^ = "Lorem"] {color: blue}

a [title $ = "amet"] {color: blue}

a [title * = "dolor"] {color: blue}

Pseudo-clase structurale și pseudo-clase
  • E: rădăcină
  • E: al n-lea copil ()
  • E: nth-last-child ()
  • E: ultimul copil
  • E: singurul copil
  • E: al n-lea de tip ()
  • E: n-ultimul-de-tip ()
  • E: primul de tip
  • E: ultimul tip
  • E: numai de tip
  • E: gol
: rădăcină {background-color: red}
Alte pseudo-clase
  • Pseudo-clasă :target
  • Pseudo-clasa :not
  • Pseudo-clase ale stărilor elementelor UI (User Interface):
    • E:enabled
    • E:disabled
    • E:checked
div: target {border: 3px}

div: not (.black) {color: red}

input: activat {color: red}

Pseudo-clase pentru validare
  • : Mod implicit
  • : valabil
  • : invalid
  • : în raza de acțiune
  • : în afara intervalului
  • : necesar
  • : opțional
  • : numai în citire
  • : Citeste, scrie
: implicit {background: red}
Pseudo-elemente
  • ::first-letter
  • ::first-line
  • ::before
  • ::after
:: prima literă {culoare: roșie}
Culoare
Opacitate opacitate div {fundal: alb; culoarea neagra; opacitate: 0,5}
Culoare RGBa rgb

rgba

corp {fundal-culoare: rgb (100%, 100%, 100%)}

_____________________

corp {fundal-culoare: rgb (255, 255, 255)}

_____________________

corp {fundal-culoare: rgba (255, 255, 255, 0,5)}

Culoare HSLa hsl

hsla

corp {fundal-culoare: hsl (0, 100%, 50%)}

______________________

# box1 {background-color: hsla (0,100%, 100%, 0,5); }

Margini
Colturi rotunjite
  • chenar-sus-stânga-rază
  • chenar-sus-dreapta-rază
  • chenar-jos-dreapta-rază
  • bordura-jos-raza stanga
  • frontieră-rază
# box1 {border-top-left-radius: 20px}
Marginile decorate border-image #border {border-image: url (border.png) 27 27 27 27 round round; }
Umbrele containerelor cutie-umbră cutie-umbră: 5px 5px 10px 2px # 333333;
Fundaluri
Fundaluri multiple url ( prima imagine ), url (a doua imagine ), ... imagine de fundal: url (image1.png), url (image2.png);
Tăierea imaginii de fundal
  • border-box
  • padding-box
  • content-box
#box {background-clip: border-box}

#box {background-clip: padding-box}

#box {background-clip: content-box}

Poziția imaginii de fundal
  • border-box
  • padding-box
  • content-box
fundal-origine: cutie de umplutură;
Dimensiunea fundalului
  • dimensiunea exprimată în procente;
  • dimensiunea exprimată cu o unitate de măsură;
  • cover proprietății;
  • contain proprietăți.
dimensiunea fundalului: 50% 50%;

fundal-dimensiune: 200px 50px;

fundal-dimensiune: coperta;

background-size: conține;

Gradiente ca imagini de fundal gradient liniar imagine de fundal: gradient liniar (dreapta sus, #FFFFFF 0%, #AACFEF 100%);
Text și font
Fonturi web

(alternativă la fonturile Google )

@ font-face @ font-face {
 font-family: myFirstFont;
src: url (sansation_light.woff);

}

Pauză de text word-wrap: #box {word-wrap: break-word; }
Umbra sub text text-umbră: p {text-shadow: 2px 2px 3px # 333;}
Personaje speciale conținut: „ personaj special ”; h1: după {
 conținut: „\ 00A7”;

}

Direcția textului orizontal-tb;

vertical-rl;

p. content1 {
 modul de scriere: orizontal-tb; 

}

Schiță text lăţime:

culoare:

h1 {text-stroke: 1px negru;}
Aspect și model de cutie
Surplus overflow-x:

overflow-y:

# box2 {overflow-x: ascuns; }
Amplasarea containerelor dimensionare cutie: # box1 {box-sizing: content-box; }
Aspect cu mai multe coloane
  • Proprietăți de bază:
    • lățimea coloanei
    • număr de coloane
    • coloană-gol
    • coloana-regula
  • Pentru paginile tipărite:
    • break-before
    • break-after
    • break-inside
  • Managementul coloanelor
    • coloană
    • umplere coloană
#container {width: 750px; margine: 20px auto; lățimea coloanei: 350 px; coloană-gol: 25 px; }
Aspect flexibil al cutiei
  • Afișaj: cutie
  • Orientarea cutiilor
  • Direcția și ordinea gropilor
  • Aliniere și spațiu box-align box-pack Cutii flexibile
display: cutie;

box-orient: vertical;

box-align: centru;

box-pack: justifica;

box-flex: 1;

Interogări medii
  • all : CSS se aplică tuturor dispozitivelor de afișare;
  • screen : screen computer;
  • print : pagina tipărită;
  • projection : prezentări și proiecții;
  • speech : dispozitive de sinteză a speech ;
  • braille : suporturi bazate pe utilizarea braille-ului;
  • embossed : imprimante braille;
  • handheld : dispozitive mobile cu ecrane mici și browsere cu capacități grafice limitate;
  • tty : dispozitive cu caracter fix, cum ar fi terminale;
  • tv : afișare pe ecranele televizorului
@media ecran și (culoare) { reguli CSS }
Tranziții, transformări și animații
Tranziții
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
div {transition-property: background-color; durata tranziției: 2s; }
Transformări
  • transformă și transformă-origine
  • matrice
  • Traduceți
  • scări
  • roti
  • oblic
  • transformări multiple
transforma: roti (40deg);

transform-origine: partea stângă jos;

matrice (a, b, c, d, tx, ty);

transforma: traduce (10px, 10px);

transformare: scară (0,5);

transformare: rotire (180deg);

transformare: înclinare (15deg, 20deg);

transformare: rotire (180deg) înclinare (20deg, 30deg) scară (2);

Animații @keyframe
  • nume-animație
  • animație-durată
  • animație-iterație-număr
  • funcția de temporizare-animație
  1. uşura;
  2. liniar;
  3. ușurință;
  4. relaxare;
  5. ușurință în intrare;
  6. cubic-bezier.
@keyframes 'puls' {din {background-color: red; opacitate: 1,0; -transform: scala (1.0) rotire (0deg); }
Grafică
Filtre filtru: nici unul | blur () | luminozitate () | contrast () | drop-shadow () | în tonuri de gri () | nuanță-rotire () | invert () | opacitate () | saturat () | sepia () | url (); img {
 filtru: neclaritate (5 px);

}

Măști
  • mask-clip
  • mask-composite
  • mask-image
  • mask-mode
  • mask-origin
  • mask-position
  • mask-repeat
  • mask-size
mask: url(masks.svg#star) luminance;

Caracteristici

Un fișier CSS extern poate formata un număr infinit de pagini HTML și astfel evită rescrierea aceluiași cod pe toate paginile.
Un fișier CSS extern poate formata un număr infinit de pagini HTML și astfel evită rescrierea aceluiași cod pe toate paginile.

Cod

Introducerea codului CSS în paginile web se poate face în trei moduri diferite:

  • Prin inserarea în eticheta <head> a paginii în cod HTML un link către o foaie de stil externă, adică un fișier marcat cu extensia .css ca în exemplele următoare, prin eticheta link sau prin directiva de import , care poate, de asemenea, să fie utilizat în aceleași fișiere .css pentru a lega mai multe fișiere împreună:
 <Html>
 <Cap>
 < title > Exemplu </ title >
 < link rel = "stylesheet" type = "text / css" href = "stylesheet.css" />
 </ head >
sau
 <Html>
 <Cap>
 < title > Exemplu </ title >
 < style type = "text / css" >
 @ import URL ( style_sheet . css ) ;
 </ style >
 </ head >

această soluție garantează reutilizarea maximă posibilă a codului, deoarece poate fi apelat în fiecare dintre paginile web HTML dorite.

  • Inserați întotdeauna declarațiile CSS în <head> între etichetele <style> și </style> .
 <Html>
 <Cap>
 < title > Exemplu </ title >
 < style type = "text / css" >
   cod CSS
 </ style >
 </ head >

Această soluție garantează mai puțină reutilizare a codului decât cea anterioară, deoarece poate fi utilizată numai în pagina HTML în care este declarată.

  • Inline în interiorul elementelor
 <tag style = "CSS declarations"> ... </tag>

Această soluție garantează reutilizarea codului chiar mai mică decât cea precedentă.

Reguli

O foaie de stil CSS este structurată sintactic ca o succesiune de reguli , care sunt perechi formate dintr-un selector și un bloc de declarații , încadrate între paranteze. Un selector este un predicat care identifică anumite elemente ale documentului HTML; o declarație, separată printr-un punct și virgulă de celelalte, este la rândul ei alcătuită dintr-o proprietate , adică o linie de stil (cum ar fi culoarea textului) și o valoare care trebuie atribuită acesteia din urmă (de exemplu albastru). separate printr-un colon.

 selector1 {
  proprietate1 : valoare1 ;
  proprietate2 : valoare2 ;
}
selector2 {
  proprietate3 : valoare3
}

Selectoare

Unele dintre principalele tipuri de selectoare sunt descrise mai jos.

Tastați selectoarele

Selectoarele de tip aplică regula tuturor elementelor de pagină ale tipului dat. Exemple:

 corp {
 [...]
 }

sau

 p {
 [...]
 }

Selectoare de clasă

Clasele aplică regula tuturor elementelor de pe pagină care au proprietatea class="nome_classe" . Sintaxa CSS este după cum urmează:

 . nume_clasă {
 [...]
 }

Selectoare de identificare

Identificatorii (de obicei ID-uri ) aplică regula acelui element de pagină care are proprietatea id="nome_identificatore" . ID-urile disting elemente unice . Sintaxa CSS este după cum urmează:

 # nume_identificator {
 [...]
 }

Selectoare pseudo-clase

Pseudoclasele identifică elemente pe baza proprietăților lor.

  • primul copil se potrivește cu un element numai dacă este primul copil al elementului părinte. Deci
 p : primul copil {
 [...]
 }

va găsi doar primul paragraf din codul HTML (X) de mai jos.

 <Corp>
  < p > Lorem ipsum </ p >
  < p > Lorem ipsum </ p >
  < p > Lorem ipsum </ p >
 </ Corp>
  • linkul și vizitatul se aplică linkurilor. Primul identifică linkurile ne vizitate, al doilea cele vizitate. Sintaxa CSS este:
 către : link {
 [...]
 }
  • activ , focalizare și deplasare identifică elementele numai în anumite condiții, primul dacă elementul este activ, al doilea dacă este selectat, al treilea dacă cursorul mouse-ului este deasupra acestuia. Prin urmare
 p : hover {
 [...]
 }

se va aplica numai dacă indicatorul mouse-ului trece peste un paragraf și numai pentru timpul care va rămâne acolo.

  • lang este folosit pentru a identifica elemente ale unui anumit limbaj, dar suportul său este limitat.

Selectoare pseudo-elemente

Pseudo-elementele identifică doar o parte a unui element, fără a fi nevoie să utilizați marcaj HTML (X).

  • prima linie găsește doar prima linie a unui paragraf. Dacă fereastra browserului modifică dimensiunea, aceasta se va adapta automat la noua dimensiune a liniei. Sintaxa CSS este după cum urmează:
 p :: prima linie {
 [...]
 }
  • prima literă se potrivește numai cu primul caracter al unui element.
  • înainte și după sunt două pseudoclase utilizate la crearea conținutului generat . Ei nu identifică un element, ci un loc pentru a crea conținutul. Sunt puțin folosite, având în vedere lipsa de suport pentru Internet Explorer.

Selectorii ierarhiei

Ele identifică doar elemente care se găsesc într-o anumită relație care derivă din structura arborelui documentului (X) HTML, cum ar fi descendența, descendenții, frăția.

  • Selectorul descendent identifică numai elementele conținute în alte elemente. Asa
 p span {
 [...]
 }

identifică numai elementele <span> conținute în elementele <p> .

  • Selectorul pentru copii, pe de altă parte, identifică numai elementele care sunt conținute direct în elementul părinte. Asa
 div > p {
 [...]
 }

găsește doar <p> conținut direct într-un <div> .

  • Selectorul de frați identifică primul element imediat după altul cu care împarte același părinte. Asa
 h1 + p {
 [...]
 }

găsiți numai primul <p> frate al <h1>

Selectoare de atribute

Selectorul de atribute permite, prin următoarea sintaxă, să identifice (X) elemente HTML pe baza atributelor lor.

 a [ title = Exemplu ] {
 [...]
 }

Această regulă se aplică numai <a> elementelor care au atributul title="Esempio" . Selectorii de atribute sunt numeroși și ar permite un control excelent al paginii, dar Internet Explorer nu le acceptă și, prin urmare, utilizarea lor este foarte limitată.

Exemplu de grilă CSS
Exemplu de grilă CSS

Grile CSS

Grilele CSS sunt un sistem de aspect bidimensional, ceea ce înseamnă că poate gestiona atât coloane, cât și rânduri, spre deosebire de flexbox, care este în mare parte un sistem unidimensional. Regulile CSS se aplică atât unui element părinte (care devine Grid Container), cât și copiilor acelui element (care devine Grid Items) [12] .

 CSS
.grid-container {
  afișaj: grilă;
  grilă-șablon-coloane: auto auto auto;
  culoare de fundal: # 2196F3;
  umplutură: 10 px;
}
.grid-item {
  culoare de fundal: rgba (255, 255, 255, 0,8);
  chenar: 1px solid rgba (0, 0, 0, 0,8);
  umplutură: 20 px;
  dimensiunea fontului: 30 px;
  text-align: centru;
}
---------------------------------------
HTML
< div class = "grid-container" >
  < div class = "grid-item" > 1 </ div >
  < div class = "grid-item" > 2 </ div >
</ div >

Culori

Pictogramă lupă mgx2.svg Același subiect în detaliu: Culori web .

Culorile web sunt culori utilizate în afișarea paginilor web pe World Wide Web și în metodele de descriere și specificare a acelor culori. Culorile pot fi specificate ca un triplet RGB sau în format hexagonal (un triplet hexagonal ) sau, în unele cazuri, după numele lor comune în limba engleză. Un instrument de selectare a culorilor sau alt software grafic este adesea folosit pentru a genera valori de culoare. Un exemplu: #0099CC (un tip de albastru care poate fi #0099CC Pacific Blue ).

Schimbarea numelui culorilor

CSS3 vă permite să redenumiți culorile după cum doriți și să le amintiți mai târziu [13] :

 $ color- dunăre : # 668DD1 ;

/ * RECALL * /
$ color-alfa : $ color-dunăre ;

Crearea variabilelor

Pictogramă lupă mgx2.svg Același subiect în detaliu: Sass și Less .

Sass (S yntactically A wesome S tyle S heets) este o extensie a limbajului CSS care vă permite să utilizați variabile , de a crea funcții și de a organiza foaia de stil în mai multe fișiere .

Less ( LESS ) este un preprocesor CSS care extinde limbajul CSS normal permițând (pe lângă sintaxa normală a foilor de stil) și utilizarea funcțiilor , operatorilor și variabilelor , cuibărirea instrucțiunilor, crearea „mixinelor” și numeroase alte caracteristici care fac codul mai ușor de scris, întreținut și înțeles.

Proprietate

Proprietățile CSS sunt numeroase. Cele mai utilizate sunt:

  • latime si inaltime. Aceste proprietăți sunt utilizate pentru a seta înălțimea și lățimea unui anumit element.
  • fundal . Definește fundalul unui element. Este o proprietate scurtă pentru atașarea fundalului, culoarea fundalului, imaginea de fundal, poziția fundalului și repetarea fundalului .
  • frontieră . Definește marginea unui element. Este o proprietate scurtă pentru culoarea chenarului, stilul chenarului și lățimea chenarului .
  • culoare . Definește culoarea textului unui element. Proprietatea de fundal este utilizată pentru a defini fundalul .
  • poziție . Definește tipul metodei de poziționare utilizate pentru un element (static, relativ, fix, absolut sau lipicios).
  • indexul z . Specifică ordinea unui element poziționat și a descendenților acestuia (deasupra sau dedesubtul celorlalte din pagină).
  • plutitor . Această proprietate definește un bloc plutitor , adică permite aranjarea altor elemente pe laturile sale.
  • font-family . Definește proprietățile fontului. Este o proprietate scurtă pentru font-family , font-size și font-weight .
  • marginea și căptușeala . Ele definesc spațiul care înconjoară elementele. Primul este spațiul exterior de la margini, al doilea spațiul interior.
  • aliniază textul . Definește alinierea elementelor, inclusiv a textului.
  • ! important. Face ca o regulă CSS să prevaleze asupra celorlalte
  • lățimea min și lățimea maximă . Acestea vă permit să faceți să apară și să dispară un element în funcție de dimensiunea dispozitivului
  • clar. Împiedică alte elemente plutitoare să apară lângă un element

Valori

Dacă nu este specificat, o proprietate își asumă valorile implicite ale fiecărui browser sau, în al doilea rând, stilul de utilizator ales, altfel poate presupune una dintre următoarele:

  • moşteni
  • mașină
  • număr
  • procent
  • culoare
  • URI
  • font
  • alte valori tipice ale fiecărei proprietăți

Șirul de moștenire specifică faptul că proprietatea trebuie să moștenească valoarea din elementele din care descinde elementul. Șirul automat are semnificații foarte diferite în funcție de proprietatea căreia i se atribuie.

Dacă numerele sunt marcate cu o unitate de măsură, această unitate trebuie exprimată (cu excepția cazului zero). Nu trebuie să existe spații între număr și unitate, ca în exemplul următor:

 p {
 marja : 5 px ;
 frontieră : 1 em ;
 umplutură : 0 ;
 }

Culorile pot fi indicate cu mai multe sisteme. De exemplu, culoarea portocalie poate fi indicată cu:

 portocaliu / * culoare implicită * /
 rgb ( 255 , 165 , 0 ) / * format rgb de la 0 la 255 * /
 rgb ( 100 %, 64 %, 0 %) / * puteți folosi procente * /
 rgba ( 255 , 165 , 0 , 1 ) / * puteți specifica alfa de la 0 la 1 * /
 hsl ( 39 , 100 %, 50 %) / * notație de lumină de saturație a nuanței * /
 hsla ( 39 , 100 %, 50 %, 1 ) / * alfa poate fi specificat * /
 # ffa600 / * format hexazecimal RRGGBB * /
 # ffa600ff / * format hexazecimal RRGGBBAA * /
 # fa0 / * Aproximarea formatului hexagonal RGB al valorii inițiale * /
 # fa0f / * Aproximare format hexazecimal RGBA a valorii inițiale * /

Adresa URL este indicată în formulare

 url ( http : // exemplu . it / file . html )
 url ( „http://example.it/file.html” )

CSS vă permite să indicați mai multe fonturi sau o familie de fonturi (serif și sans) în proprietatea font-family . În acest fel, browserul îl va folosi pe primul pe care îl va găsi instalat pe sistemul de operare . Declarația utilizează această sintaxă:

 p {
 font-family : "Arial" , "Verdana" , serif ; 
}

CSS pentru SVG

Puteți utiliza CSS pentru a modifica stilurile SVG (parte a limbajului HTML5) [14] . Exemplu:

 svg {
  culoare de fundal : bej ;
}

CSS pentru HTML5 Canvas

<! DOCTYPE html>
<Html>
    <Cap>
    < title > Dimensiune element pânză: 600 x 300,
    Dimensiunea suprafeței desenului pe pânză: 300 x 150 </ title >
    < stil >
        corp {
            fundal : #dddddd ;
        }
        # pânză {
            marja : 20 px ;
            căptușeală : 20 px ;
            fundal : #ffffff ;
            border : insert subțire #aaaaaa ;
            lățime : 600 px ;
            inaltime : 300 px ;
        }
    </ style >
    </ head >
    <Corp>
        < canvas id = "canvas" >
        Pânza nu este acceptată
        </ canvas >
    </ Corp>
</ Html>

Crearea automată a CSS

Cu programe de editare grafică și foto , cum ar fi Photshop, este posibilă conversia straturilor în stiluri CSS [15] .

Folosind 3D

CSS3 a introdus proprietatea „Transformare 3D” care vă permite să creați unele animații și forme în 3D, dar nu poate echivala posibilitățile WebGL [16] [17] .

Suport pentru browser și CSS

Următoarea listă este de motoare de redare, deoarece li se atribuie sarcina de formatare a paginii conform instrucțiunilor CSS.

Gecko ( Mozilla Firefox și Netscape Navigator )
Gecko are un suport excelent pentru CSS 1,2 și 3 și, prin urmare, este adesea folosit pentru a verifica performanța paginilor web. Gecko și Mozilla Firefox sunt programe gratuite . Netscape Navigator (învechit de la 1 martie 2008 [18] ) a fost, de asemenea, distribuit sub o licență gratuită .
Trident ( Internet Explorer și AOL Explorer )
Internet Explorer (învechit din august 2020 [19] în favoarea Edge ), din versiunea 9 a acceptat CSS 3. O particularitate a Internet Explorer au fost așa-numitele comentarii condiționale care v-au permis să aplicați regulile CSS doar unei anumite versiuni de Internet Explorator. Această caracteristică a fost utilizată pe scară largă acolo unde s-a presupus că un utilizator care încă folosea versiuni vechi ale Internet Explorer și, prin urmare, a necesitat frecvent câteva reguli CSS suplimentare pentru afișarea corectă a paginii web. [20] În multe cazuri, a fost necesar să se utilizeze reguli de stil CSS ad-hoc exclusiv pentru Internet Explorer din cauza diferențelor substanțiale în modul în care unele versiuni ale Internet Explorer se abat de la standarde, cum ar fi „ box model non-standard” utilizat de unii versiunile Internet Explorer și care difereau substanțial de cele impuse de standardele World Wide Web Consortium. [21] [22] Sintaxa comentariilor condiționate a fost următoarea:
 <! - '' '[dacă IE]>' ''
„reguli CSS ad-hoc pentru Internet Explorer”
'' '<! [endif]' '' ->
deoarece <!-- introdus în mod normal un comentariu, alte browsere decât Explorer 5.0 sau o versiune ulterioară nu au interpretat codul. Comentariile condiționate v-au permis să specificați o foaie de stil specifică Internet Explorer, după cum urmează:
 <! - [dacă IE]>
<link rel = "stylesheet" type = "text / css" href = "'' 'style_sheet_ad-hoc_for_IE.css' ''">
<! [endif] ->

Trident și Internet Explorer sunt software proprietar .

În curând ( Opera )
Presto oferă suport excelent pentru CSS 1,2 și 3. Opera oferă, de asemenea, o opțiune care permite utilizatorului să dezactiveze foile de stil sau să le folosească pe ale lor. Presto și Opera sunt software proprietar .
KHTML și WebKit ( Safari , Google Chrome și Konqueror )
KHTML este în prezent motorul care oferă cel mai mare suport CSS, oferind o interpretare aproape totală a CSS 3. KHTML și WebKit sunt programe gratuite ; Safari e Google Chrome sono software proprietari (mantenuti rispettivamente da Apple e Google ), mentre Konqueror è software libero (sotto licenza GPL , mantenuto dalla community di KDE ).

Oltre alle differenze di compatibilità, ogni motore di rendering aggiunge ai CSS standard alcuni nuovi elementi o nuove proprietà.

Normalmente tali proprietà iniziano con un prefisso che cambia in base al browser, per esempio -webkit indica che la proprietà riguarda il motore di rendering WebKit, ad esempio -webkit-appearance . Tutte queste proprietà però dovrebbero essere utilizzate esclusivamente quando si desidera solo utilizzare quel browser con quel determinato motore di rendering poiché tutte queste proprietà sono caratteristiche aggiuntive valide solo per quel determinato motore di rendering e non sono proprietà standard definite dal World Wide Web Consortium.

Edge HTML ( Microsoft Edge )

EdgeHTML supporta bene i CSS, compresi i CSS3. EdgeHTML e Microsoft Edge sono software proprietario .

Utilizzo su diversi dispositivi

Prima dell'arrivo dei CSS3, con i CSS2 si facevano più file CSS per lo stesso sito web che caricava il file CSS corrispondente al dispositivo utilizzato dall'utente. In HTML si specificava la seguente sintassi:

 <link rel="stylesheet" type="text/css" href="foglio.css" media="screen" />

Il codice precedente associa il foglio di stile solo ai browser standard per computer desktop e portatili. I valori dell'attributo "media" sono gli stessi della regola CSS " media queries ". Sebbene sia ancora possibile creare più fogli di stile per diversi media e specificarlo nel tag "link rel", da quando le media queries sono supportati da tutti i moderni browser la maggior parte degli sviluppatori utilizza esse poiché consentono in un solo foglio CSS di adattare la relativa pagina HTML a tutti i dispositivi utilizzando molte meno righe di codice [23] .

Riduzione delle chiamate al server

Esempio di uso di uno sprite in CSS
Esempio di uso di uno sprite in CSS

Ogni richiesta del server separata ( time to first byte o TTFB) influisce sulla velocità di essa (quando si richiamano nel codice immagini, font, video, elementi JS...). Con i CSS si possono aumentare notevolmente le prestazioni di una pagina riducendo quel numero di richieste.

Immagini

Utilizzare i CSS3 per evitare di utilizzare le immagini (jpg, png,...) ad esempio per gli angoli arrotondati, le ombre, i gradienti e le trasparenze.

Sprite

Magnifying glass icon mgx2.svg Lo stesso argomento in dettaglio: Sprite (informatica) .
Un singolo sprite di Pixel Dungeon realizzato con 147 sotto-immagini
Un singolo sprite di Pixel Dungeon realizzato con 147 sotto-immagini

Utilizzare i CSS Sprite , attuando una sola chiamata al server utilizzando una sola immagine che ne contiene molte per più parti della pagina web (o dell'intero sito web).

Minify

Comprimere i file CSS con il metodo " minify " per ridurre il peso del file CSS e quindi la banda utilizzata per richiamare tale file dal server. Si può fare anche con pagine HTML e JavaScript [24] . In questo modo però il codice sarà privo di spazi e la modifica risulterà più complessa.

Inoltre ci sono più modi di arrivare allo stesso risultato con i CSS. Il metodo che si dovrebbe scegliere è quello che consente di scrivere meno codice possibile per ridurre al minimo il peso del file ".css". Ad esempio:

 . foo { color : #ff0000 ; }
. bar { color : rgba ( 255 , 0 , 0 , 1 ); }

/* EQUIVALE A */ 

. bar , . foo { color : red }

Font

Non usare troppi font incorporati ( @font-face e Google Fonts ).

Numero di file

Ridurre al minimo il numero di file CSS e il numero di file in generale. Adattare ad esempio il layout delle pagine web a vari dispositivi e media non utilizzando più fogli di stile per ogni dispositivo ma uno solo che adatta la pagina a tutti attraverso le media queries . In questo modo il server avrà la chiamata per un solo foglio CSS.

Javascript

Sostituire JavaScript con i CSS per creare tooltip , gallerie d'immagine e altro [9] [10] [11] . I CSS richiedono infatti meno risorse di JS.

Fogli di stile preferiti e alternativi

Come descritto, ad ogni pagina si possono collegare più fogli di stile. Tuttavia è anche possibile far scegliere all'utente quali applicare. Per farlo si definiscono innanzitutto i fogli di stile permanenti, cioè non disattivabili, secondo la sintassi già vista. Poi si definiscono i fogli preferiti, cioè attivi al caricamento della pagina, ma disattivabili, aggiungendo l'attributo <title> come nell'esempio che segue:

 <link rel="stylesheet" type="text/css" href="foglio_preferito.css" title="Esempio1" />

A questo punto si possono specificare fogli di stile alternativi cioè non attivi al caricamento, ma attivabili dall'utente, come nell'esempio che segue:

 <link rel=" alternate stylesheet" type="text/css" href="foglio_alternativo.css" title="Esempio2" />

Per attivare e disattivare i fogli di stile l'utente può ricorrere all'apposito menu del suo browser, tuttavia Internet Explorer non offriva questa possibilità quindi era necessario creare uno script JavaScript che svolgesse la funzione di sostituire i fogli. Il codice era stato pubblicato la prima volta su ( EN ) A List Apart . Tuttavia se questo script era facile da mettere in opera per gli sviluppatori, richiedeva un browser aggiornato con un buon supporto del DOM , oltre che avere attivati sia JavaScript ei cookie . Un sistema più complesso ma molto più robusto poteva essere uno script lato server come PHP . Un esempio è disponibile sempre sullo stesso sito .

Pattern

Pattern CSS
Pattern CSS

I pattern sono figure modulari che si ripetono all'infinito che solitamente fanno da sfondo a elementi HTML come contenitori DIV, bottoni, il background della pagina web, paragrafi. Si possono creare direttamente in CSS, con le immagini o fondendo entrambi i metodi ossia creando un'immagine base e ripetendola con la regola background-repeat [25] . In questi tre casi non c'è bisogno di realizzare un'immagine di sfondo della grandezza del contenitore che peserebbe molto di più.

Acid3

Magnifying glass icon mgx2.svg Lo stesso argomento in dettaglio: Acid3 .

Acid3 è un test con cui è possibile verificare l'aderenza di un browser a determinati standard web compresi i CSS3 [26] .

Stylus

Stylus è un linguaggio per preprocessore di fogli di stile dinamico compilato in Cascading Style Sheets (CSS). Il suo design è influenzato da Sass e LESS . È considerata la quarta sintassi del preprocessore CSS più utilizzata [27] . È stato creato da TJ Holowaychuk, un ex programmatore di Node.js e creatore del linguaggio Luna. È scritto in JADE e Node.js .

Selettori

A differenza del CSS, che utilizza le parentesi graffe per aprire e chiudere i blocchi di dichiarazione, viene utilizzata l'indentazione. Inoltre, i punti e virgola (;) vengono facoltativamente omessi. Quindi, il seguente CSS:

 body
  color : white ;
}

può essere abbreviato in:

 body
  color : white ;

Inoltre, anche i due punti (:) e le virgole (,) sono facoltativi; ciò significa che quanto sopra può essere scritto come segue:

 body
  color white

Variabili

Stylus consente di definire variabili, tuttavia, a differenza di LESS e Sass, non utilizza un simbolo per definire le variabili. Inoltre, l'assegnazione delle variabili viene eseguita automaticamente separando la proprietà e le parole chiave. In questo modo, le variabili sono simili alle variabili in Python.

 messaggio = 'Hello, World!'
div :: before
  content messaggio
  color # ffffff

Il compilatore Stylus tradurrebbe l'esempio sopra in:

 div :: before {
   content : "Hello, World!" ;
   color : #ffffff ;
}

Mixin e funzioni

Sia i mixin che le funzioni sono definiti nello stesso modo, ma vengono applicati in modi diversi.

Ad esempio:

 border-radius ( n ) 
   -webkit-border-radius n 
   -moz-border-radius n 
   border-radius n

quindi, per includerlo come mixin:

 div . rettangolo
   border-radius ( 10px )

che verrebbe compilato in:

 div . rettangolo {
   -webkit- border-radius : 10 px ;
   -moz- border-radius : 10 px ;
   border-radius : 10 px ;
}

Interpolazione

Per includere variabili negli argomenti e negli identificatori, le parentesi graffe circondano le variabili. Per esempio,

 -webkit- { 'border' + '-radius' }

corrisponde a

 -webkit-border-radius

CSS dinamici

Dynamic CSS, o DCSS, è un termine che comprende un insieme di tecnologie utilizzate assieme per creare fogli di stile dinamici, utilizzando una combinazione di qualsiasi linguaggio di programmazione per i lato server (come ad esempio PHP / ASP / Perl / JSP ) e CSS) [28] . L'idea iniziale del DCSS è stata scritta nel luglio 2002 da Jori Koolstra , un programmatore olandese [29] .

DCSS permette di lavorare con variabili in CSS e con la riscrittura dinamica del codice sorgente CSS. Molti CMS hanno creato moduli aggiuntivi, per esempio Drupal .

Esempio:

 $persistent = [
'bgmast' => 'bbd9ee' , /* elenco */
'fgmast' => '4d4d4d' ,
'bgmenu' => 'e7e4d3' , /* menu */
'fgmenu' => '444' ,
'bgcont' => 'fff' , /* contenuto */
'fgcont' => '444'
];

Modifica del cursore con i CSS

Magnifying glass icon mgx2.svg Lo stesso argomento in dettaglio: Cursore .

I CSS possono generare una serie di diversi cursori del mouse che l'utente vedrà appena arrivato sulla pagina HTML che li contiene [30] [31] :

Esempi di CSS3

Standardizzazione

Frameworks

I framework CSS sono librerie pre-preparate che hanno lo scopo di consentire uno stile più semplice e conforme agli standard delle pagine Web utilizzando il linguaggio Cascading Style Sheets. I framework CSS includono Blueprint, Bootstrap , Cascade Framework, Foundation, MDBootstrap e Materialise. Come le librerie di linguaggi di programmazione e scripting, i framework CSS sono solitamente incorporati come fogli .css esterni a cui si fa riferimento nell'HTML <head>. Forniscono una serie di opzioni già pronte per la progettazione e il layout della pagina web. Sebbene molti di questi framework siano stati pubblicati, alcuni autori li usano principalmente per la prototipazione rapida, o per imparare da, e preferiscono 'creare manualmente' CSS appropriato per ogni sito pubblicato senza il sovraccarico di progettazione, manutenzione e download dovuto a molte funzionalità inutilizzate nello stile del sito.

Metodologie di progettazione

Con l'aumentare della dimensione delle risorse CSS utilizzate in un progetto, un team di sviluppo deve spesso decidere una metodologia di progettazione comune per mantenerle organizzate. Gli obiettivi sono la facilità di sviluppo, la facilità di collaborazione durante lo sviluppo e le prestazioni dei fogli di stile distribuiti nel browser. Le metodologie popolari includono OOCSS (CSS orientato agli oggetti), ACSS (CSS atomico), oCSS (foglio di stile Cascade organico), SMACSS (architettura scalabile e modulare per CSS) e BEM (blocco, elemento, modificatore)

Note

  1. ^ Flash & The Future of Interactive Content | Adobe Blog , su web.archive.org , 2 dicembre 2017. URL consultato il 27 gennaio 2021 (archiviato dall' url originale il 2 dicembre 2017) .
  2. ^ Alessandro Fulciniti, I più comuni layout table-less , su HTML.it . URL consultato il 2 febbraio 2021 .
  3. ^ ( EN ) Fixed vs. Fluid vs. Elastic Layout: What's The Right One For You? , su Smashing Magazine , 2 giugno 2009. URL consultato il 2 febbraio 2021 .
  4. ^ CSS current work , su w3.org .
  5. ^ Stupid Machines - rule 110 , su github.com .
  6. ^ Rule 110 OnLine Demonstration , su eli.fox-epste.in .
  7. ^ CSS3: guida completa , su HTML.it . URL consultato il 27 gennaio 2021 .
  8. ^ W3Schools Online Web Tutorials , su www.w3schools.com . URL consultato il 28 gennaio 2021 .
  9. ^ a b ( EN ) 5 things you can do with CSS instead of JavaScript , su LogRocket Blog , 29 ottobre 2019. URL consultato il 28 gennaio 2021 .
  10. ^ a b ( EN ) Creating beautiful tooltips with only CSS , su LogRocket Blog , 29 giugno 2020. URL consultato il 28 gennaio 2021 .
  11. ^ a b ( EN ) 49 CSS Galleries , su Free Frontend . URL consultato il 28 gennaio 2021 .
  12. ^ ( EN ) A Complete Guide to Grid , su CSS-Tricks . URL consultato il 2 febbraio 2021 .
  13. ^ ( EN ) What do you name color variables? , su CSS-Tricks , 7 dicembre 2018. URL consultato il 4 febbraio 2021 .
  14. ^ SVG and CSS - SVG: Scalable Vector Graphics | MDN , su developer.mozilla.org . URL consultato il 28 gennaio 2021 .
  15. ^ ( EN ) Exporting CSS From Photoshop When Building From A PSD File , su Square Internet , 11 agosto 2019. URL consultato il 28 gennaio 2021 .
  16. ^ Guida per il 3D nei browser – WebGL Contro CSS 3D Transforms , su WE RAD , 5 maggio 2017. URL consultato il 29 gennaio 2021 .
  17. ^ ( EN ) Pratik, 10+ CSS 3D Transforms Example With Code Snippets , su OnAirCode , 27 marzo 2018. URL consultato il 29 gennaio 2021 .
  18. ^ End of Support for Netscape web browsers - The Netscape Blog , su web.archive.org , 29 dicembre 2007. URL consultato il 27 gennaio 2021 (archiviato dall' url originale il 29 dicembre 2007) .
  19. ^ ( EN ) Internet Explorer Web Browser End of Support - Microsoft 365 , su www.microsoft.com . URL consultato il 27 gennaio 2021 .
  20. ^ ( EN ) CSS Conditional comments , su quirksmode.org . URL consultato il 10 giugno 2014 .
    «Older IE versions frequently need some extra CSS in order to show your pages right. Conditional comments are the best way to add this CSS, since the system is explicitly designed for this use case» .
  21. ^ ( EN ) Internet Explorer and the CSS box model , su 456bereastreet.com . URL consultato il 10 giugno 2014 .
    «Internet Explorer's non-standard way of calculating box dimensions» .
  22. ^ ( EN ) CSS2 Box model , su w3.org , W3C.
  23. ^ CSS @media Rule , su www.w3schools.com . URL consultato il 28 gennaio 2021 .
  24. ^ CSS Minifier , su cssminifier.com . URL consultato il 27 gennaio 2021 .
  25. ^ ( EN ) 51 CSS Background Patterns , su Free Frontend . URL consultato il 5 febbraio 2021 .
  26. ^ The Acid3 Test , su acid3.acidtests.org . URL consultato il 3 febbraio 2021 .
  27. ^ Poll Results: Popularity of CSS Preprocessors
  28. ^ ( EN ) Generating Dynamic CSS with PHP - Digital Web , in Digital Web , 24 gennaio 2014. URL consultato il 17 febbraio 2021 .
  29. ^ Wayback Machine ( TXT ), su web.archive.org , 19 agosto 2010. URL consultato il 17 febbraio 2021 (archiviato dall' url originale il 19 agosto 2010) .
  30. ^ cursor - CSS | MDN , su developer.mozilla.org . URL consultato il 17 febbraio 2021 .
  31. ^ CSS cursor property , su www.w3schools.com . URL consultato il 17 febbraio 2021 .

Bibliografia

Voci correlate

Altri progetti

Collegamenti esterni

Controllo di autorità LCCN ( EN ) sh2001004461 · GND ( DE ) 4467617-7 · BNF ( FR ) cb13739222f (data) · BNE ( ES ) XX550325 (data)
Internet Portale Internet : accedi alle voci di Wikipedia che trattano di internet