CSS

De la Viquipèdia, l'enciclopèdia lliure.
Saltar a la navegació Saltar a la cerca
Nota de desambiguació.svg Desambiguació : si busqueu altres significats, consulteu CSS (desambiguació) .
Fulls d'estil en cascada
Logotip CSS3 i wordmark.svg
Extensió .css
Tipus MIME text/css
Desenvolupat per W3C
1a publicació 17 de desembre de 1996
Lloc web www.w3.org/TR/CSS

El CSS (abreviatura de Fulls d'estil en cascada en fulls d'estil en cascada italians ), en informàtica , és un llenguatge utilitzat per definir el format de documents HTML , XHTML i XML , com ara llocs web i pàgines web relacionades. Les regles per composar el CSS es troben en un conjunt de directives ( Recomanacions ) emeses des del 1996 pel W3C .

La introducció de la CSS va ser necessari separar el contingut de les pàgines HTML de la formatació o la disposició i permetre més clar i més fàcil d'usar la programació , tant per als autors de les pròpies pàgines i per als usuaris, alhora que garanteix la reutilització de codi i el seu manteniment més fàcil.

Història

Icona de la lupa mgx2.svg El mateix tema en detall: tipografia web i format de text .

Per permetre que els autors poguessin configurar lliurement l’aspecte de les pàgines web , a partir de 1993 Netscape Navigator i Internet Explorer , els dos programes de navegació que els usuaris van discutir en la coneguda guerra dels navegadors , van presentar etiquetes propietàries , és a dir, que no s’adhereixen a les normes. compatible amb navegadors de la competència. Un exemple d’aquestes etiquetes va ser <font> que definia el tipus de lletra dels caràcters.

Aquestes etiquetes de format propietari eren l'única manera per als autors de definir el format, de manera que el seu ús es va fer molt intensiu. Tot i això, aquestes etiquetes tenien tres problemes:

  1. El primer problema és la longitud de les etiquetes. En comparació amb una pàgina que adopta el llenguatge CSS, una pàgina que no l’adopta sol ser més pesada (en termes de bits ) en una proporció que sovint arriba al 0,2%. [Es necessita una cita ] A més, les instruccions CSS es poden recollir en un fitxer extern que s'emmagatzema a la memòria cau del navegador, reduint encara més la quantitat de dades que el servidor ha de transmetre.
  2. El segon problema és la manca de lògica en el codi HTML (X). De fet, un codi que no compleixi, redundant i confús implica molta feina addicional per als navegadors, que han d’intentar corregir i interpretar (quan sigui possible) directrius arbitràries.
  3. El tercer problema és la manca de compatibilitat amb ordinadors i telèfons intel·ligents de mà . De fet, aquestes pàgines estan dissenyades per a pantalles amb una resolució mínima de 800 × 600 píxels. Per tant, els dispositius com els PDA (o tauletes més modernes) que poden tenir una resolució més baixa i una forma de pantalla molt diferent de la proporció 4: 3 dels monitors d’ ordinador no poden mostrar la pàgina correctament amb el resultat que l’usuari trobarà pàgina confusa i incòmoda de llegir.

Un altre problema va ser, en pàgines web no estàndard, l’ús de l’etiqueta <table> (les taules ) per crear el disseny de les pàgines web. Els puristes consideren que el disseny tabular és menyspreable, ja que les taules estan dissenyades per dissenyar dades tabulars i no dissenys web. A més, l’ús de taules també té desavantatges pràctics: augmentar el pes de les pàgines, com ja s’ha indicat al problema 1, i empitjorar l’accessibilitat, ja que és possible que s’hagi de sacrificar l’ordre lògic de les dades per motius de disseny.

Una altra manera de crear llocs web als anys 90 i 2000 (fins al seu abandó el 31 de desembre de 2020 per Adobe [1] ) va ser Adobe Flash que va permetre (de forma vectorial) crear animacions, transformacions i, en general, una visió molt més cridanera que HTML i CSS. A més, permetia integrar qualsevol tipus de lletra encara que l'usuari no el tingués al seu dispositiu. Aquests problemes es van resoldre amb HTML5 i CSS3.

Un altre problema va ser crear format de pàgina HTML incrustant els estils a les etiquetes i la tipografia a l'etiqueta (ara obsoleta) "font". Això feia que el codi fos complicat i sovint desordenat. Per exemple:

 < p style = "color: blue; font-size: 46px;" >
La Viquipèdia és una enciclopèdia
</ p >

CSS

Per intentar solucionar aquesta situació, el 1996 el W3C va emetre l'especificació CSS ​​1. CSS 1 era una manera interessant de separar el contingut del format . De fet, la base d’aquest llenguatge consistia en el fet que el contingut sempre estaria definit pel codi HTML (X), mentre que el format es transferiria a un codi completament separat , el CSS. Les referències entre els dos codis es van fer a través de dos atributs particulars: classe i identificador . Aquestes especificacions:

  1. Van ser una solució eficaç al primer problema (excloent el problema de l’etiqueta <table> ) perquè reduïen molt la mida de les pàgines.
  2. Van resoldre parcialment el segon perquè permetien que el codi HTML (X) tornés en gran mesura senzill i essencial, però tenien algunes deficiències que obligaven a utilitzar etiquetes HTML.
  3. No obstant això, no van tenir en compte el tercer problema, ja que el 1996 les PDA (portàtils) eren escassament esteses.

CSS va desenvolupar una idea senzilla però eficaç, però, tot i el seu gran potencial, van fracassar a causa de la manca de navegadors capaços de suportar-los.

CSS 2 i CSS 2.1

Per incloure les noves funcions i fer de CSS un llenguatge ben suportat, el 1998 el W3C va publicar l’especificació CSS ​​2. El 2004 es va començar a treballar en l’especificació CSS ​​2.1 actualitzada que es va convertir en una recomanació oficial el 7 de juny de 2011. CSS 2 és el evolució natural de CSS 1 i ofereixen solucions potents per resoldre sobretot el tercer problema, amb la possibilitat de crear fulls d’estil separats per a dispositius portàtils. Fins i tot el segon problema ara es pot resoldre totalment, escrivint una pàgina HTML (X) adreçada exclusivament a l’estructura i al contingut i després manipulant-la exclusivament amb CSS per dissenyar-la.

Començant per Internet Explorer 5 , Firefox i Opera 7 , CSS 2 ha estat capaç d’utilitzar navegadors capaços d’interpretar-los i, per tant, s’ha convertit en part del codi de molts llocs web.

Es van començar a crear els primers tipus de dissenys sense taules (generalment una, dues o tres columnes) [2] [3] :

  • disseny fix: tenia una mida estàndard en tots els dispositius.
  • disseny fluid-elàstic: l’amplada variava a mesura que variava l’amplada de la finestra del navegador, però en el cas de les pantalles molt grans els textos s’ampliaven molt i el disseny presentava línies de text molt llargues i molestes per llegir.

CSS 3

Icona de la lupa mgx2.svg El mateix tema en detall: Animacions CSS .

A diferència de l'especificació CSS ​​2, que consisteix en una única especificació, l'especificació CSS3 consta de seccions separades anomenades "mòduls". A causa d'aquesta modularització, les especificacions CSS3 tenen diferents estats de progrés i estabilitat. [4] Al novembre de 2014, el W3C va publicar formalment cinc mòduls com a recomanacions :

HTML i CSS3 constitueixen un llenguatge complet de turing [5] [6] , una condició suficient perquè un llenguatge sigui considerat un llenguatge de programació .

CSS3 presenta noves possibilitats i propietats en comparació amb CSS2 [7] [8] . Els més importants són:

  • la possibilitat d'utilitzar codi CSS en lloc d'imatges (jpg, png ...) per crear transparències, vores arrodonides i ombres
  • la possibilitat de crear animacions , transformacions i escales com es va poder fer amb Adobe Flash
  • nous selectors i classes
  • la possibilitat d'adaptar el disseny de les pàgines web a diversos dispositius i suports ja no utilitza diversos fulls d'estil per a cada dispositiu, sinó només un que adapta la pàgina a tots.
  • la possibilitat de substituir JavaScript per crear consells d’informació , galeries d’imatges i molt més [9] [10] [11] .
PROPIETATS CSS3 TIPUS EXEMPLE
Selectors
Selectors bàsics
  • Selector universal
  • Selecciona els tipus
  • Selectors de classes
  • Selectors d'identificació
* {color: vermell}

h1 {color: red}

.title {color: red}

#title {color: red}

Selectors combinatoris o de relació
  • Selector de descendents
  • Selector infantil
  • Selector de germans adjacents
  • Selector general de germans
div # contenidor p {color: red}

cos> p {color: vermell}

h1 + h2 {color: red}

h1 ~ h2 {color: red}

Selectors d'atributs
  • E [atribut]
  • E [atribut = valor]
  • E [atribut ~ = valor]
  • E [atribut | = valor]
  • E [atribut ^ = valor]
  • E [atribut $ = valor]
  • E [atribut * = valor]
un [títol] {color: blue}

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-classes estructurals i pseudo-classes
  • E: arrel
  • E: nth-child ()
  • E: nth-last-child ()
  • E: últim fill
  • E: fill únic
  • E: enèsima de tipus ()
  • E: enèsim-últim-de-tipus ()
  • E: primer de tipus
  • E: últim tipus
  • E: només de tipus
  • E: buit
: arrel {background-color: red}
Altres pseudo-classes
  • Pseudo-classe :target
  • Pseudo-classe :not
  • Pseudo-classes dels estats dels elements de la IU (User Interface):
    • E:enabled
    • E:disabled
    • E:checked
div: target {border: 3px}

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

entrada: activada {color: red}

Pseudo-classes per validar
  • : per defecte
  • : vàlid
  • : invàlid
  • : dins del rang
  • : fora de rang
  • : obligatori
  • : opcional
  • : Llegeix només
  • : llegir escriure
: predeterminat {background: red}
Pseudoelements
  • ::first-letter
  • ::first-line
  • ::before
  • ::after
:: primera lletra {color: red}
Color
Opacitat opacitat div {fons: blanc; color: negre; opacitat: 0,5}
Color RGBa rgb

rgba

cos {background-color: rgb (100%, 100%, 100%)}

_____________________

cos {fons-color: rgb (255, 255, 255)}

_____________________

cos {fons-color: rgba (255, 255, 255, 0,5)}

Color HSLa hsl

hsla

cos {background-color: hsl (0, 100%, 50%)}

______________________

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

Vores
Cantonades arrodonides
  • vora-superior-esquerre-radi
  • radi-vora superior-dret
  • límit-radi-inferior-dret
  • vora-baix-radi esquerre
  • radi de frontera
# box1 {border-top-left-radius: 20px}
Vores decorades imatge-vora #border {border-image: url (border.png) 27 27 27 27 round round; }
Ombres dels contenidors ombra de caixa caixa-ombra: 5px 5px 10px 2px # 333333;
Antecedents
Diversos fons URL ( primera imatge ), URL ( segona imatge ), ... imatge de fons: url (image1.png), url (image2.png);
Tall de la imatge de fons
  • border-box
  • padding-box
  • content-box
#box {background-clip: border-box}

#box {background-clip: padding-box}

#box {background-clip: content-box}

Posició de la imatge de fons
  • border-box
  • padding-box
  • content-box
fons-origen: padding-box;
Mida del fons
  • mida expressada en percentatge;
  • dimensió expressada amb una unitat de mesura;
  • cover propietat;
  • contain propietats.
mida de fons: 50% 50%;

mida de fons: 200 px 50 px;

mida de fons: portada;

mida de fons: contenir;

Gradients com a imatges de fons gradient lineal imatge de fons: gradient lineal (superior dret, #FFFFFF 0%, #AACFEF 100%);
Text i tipus de lletra
Tipus de lletra web

(alternativa als tipus de lletra de Google )

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

}

Salt de text l'ajust de línia: #box {word-wrap: break-word; }
Ombra sota el text ombra de text: p {text-shadow: 2px 2px 3px # 333;}
Personatges especials contingut: " caràcter especial "; h1: després de {
 contingut: '\ 00A7';

}

Direcció del text horitzontal-tb;

vertical-rl;

pàg. contingut1 {
 mode d'escriptura: horizontal-tb; 

}

Esquema de text amplada:

color:

h1 {traç de text: 1 px negre;}
Maquetació i model de caixa
Excedent desbordament-x:

desbordament-y:

# box2 {overflow-x: hidden; }
Ubicació dels contenidors mida de caixa: # box1 {box-sizing: content-box; }
Disseny de diverses columnes
  • Propietats bàsiques:
    • amplada de columna
    • recompte de columnes
    • espai-columna
    • columna-regla
  • Per a pàgines impreses:
    • break-before
    • break-after
    • break-inside
  • Gestió de columnes
    • extensió de columna
    • omplir columna
#container {width: 750px; marge: 20 px automàtic; amplada de columna: 350 px; espai-columna: 25 px; }
Disseny de caixa flexible
  • Visualització: caixa
  • Orientació de les caixes
  • Direcció i ordre dels pous
  • Alineació i espai-box-align box-pack Caixes flexibles
visualització: caixa;

orientar capsa: vertical;

box-align: centre;

pack-box: justificar;

caixa-flex: 1;

Mitjana de consultes
  • all : CSS s'aplica a tots els dispositius de visualització;
  • screen : screen ordinador;
  • print : pàgina impresa;
  • projection : presentacions i projeccions;
  • speech : dispositius de síntesi de speech ;
  • braille : suports basats en l'ús del braille;
  • embossed : impressores braille;
  • handheld : dispositius mòbils amb pantalles petites i navegadors amb capacitats gràfiques limitades;
  • tty : dispositius de caràcters fixos com ara terminals;
  • tv : visualització a les pantalles de televisió
Pantalla @media i (color) { regles css }
Transicions, transformacions i animacions
Transicions
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
div {transition-property: color de fons; durada de la transició: 2 s; }
Transformacions
  • transformar i transformar-origen
  • matriu
  • traduir
  • escales
  • girar
  • esbiaixar
  • múltiples transformacions
transformar: girar (40 graus);

transformar-origen: part inferior esquerra;

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

transformar: traduir (10 px, 10 px);

transformar: escala (0,5);

transformar: girar (180 graus);

transformar: esbiaixar (15 graus, 20 graus);

transformar: rotar (180 graus) esbiaixa (20 graus, 30 graus) escala (2);

Animacions @ clauframe
  • nom-animació
  • animació-durada
  • recompte-iteració d'animació
  • funció-temporització-animació
  1. facilitat;
  2. lineal;
  3. facilitat;
  4. facilitat;
  5. facilitat d’entrada-sortida;
  6. cúbic-bezier.
@keyframes 'pulse' {de {background-color: red; opacitat: 1,0; -transforma: escala (1.0) gira (0 graus); }
Gràfics
Filtres filtre: cap | difuminar () | brillantor () | contrast () | ombra () | escala de grisos () | tonalitat-rotació () | invertir () | opacitat () | saturat () | sèpia () | url (); img {
 filtre: desenfocament (5 px);

}

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

Característiques

Un fitxer CSS extern pot formatar un nombre infinit de pàgines HTML i, per tant, evita reescriure el mateix codi a totes les pàgines.
Un fitxer CSS extern pot formatar un nombre infinit de pàgines HTML i, per tant, evita reescriure el mateix codi a totes les pàgines.

Codi

La inserció de codi CSS a les pàgines web es pot fer de tres maneres diferents:

  • En inserir a l’etiqueta <head> de la pàgina en codi HTML un enllaç a un full d’estil extern, és a dir, un fitxer marcat amb l’extensió .css com en els exemples següents, mitjançant l’etiqueta d’ enllaç o mitjançant la directiva d’ importació , que també pot s'utilitzarà en els mateixos fitxers .css per enllaçar diversos fitxers:
 <Html>
 <Cap>
 < title > Exemple </ title >
 < link rel = "stylesheet" type = "text / css" href = "stylesheet.css" />
 </ cap >
o bé
 <Html>
 <Cap>
 < title > Exemple </ title >
 < style type = "text / css" >
 @ importar URL ( style_sheet . css ) ;
 </ style >
 </ cap >

aquesta solució garanteix la màxima reutilització possible de codi, ja que es pot convocar a cadascuna de les pàgines web HTML desitjades.

  • Inserint sempre les declaracions css dins de <head> entre les etiquetes <style> i </style> específiques.
 <Html>
 <Cap>
 < title > Exemple </ title >
 < style type = "text / css" >
   codi CSS
 </ style >
 </ cap >

Aquesta solució garanteix una menor reutilització de codi que l'anterior, ja que només es pot utilitzar a la pàgina HTML en què es declara.

  • En línia dins dels elements
 <tag style = "CSS declarations"> ... </tag>

Aquesta solució garanteix encara menys la reutilització del codi que l'anterior.

Normes

Un full d’estil CSS s’estructura sintàcticament com una seqüència de regles , que són parells que consisteixen en un selector i un bloc de declaracions , entre claudàtors arrissats. Un selector és un predicat que identifica certs elements del document HTML; una declaració, separada per un punt i coma de les altres, es compon al seu torn d’una propietat , és a dir, d’un traç d’estil (com el color del text) i d’un valor que s’ha d’assignar a aquest últim (per exemple, blau). separats per dos punts.

 selector1 {
  propietat1 : valor1 ;
  propietat2 : valor2 ;
}
selector2 {
  propietat3 : valor3
}

Selectors

A continuació es descriuen alguns dels principals tipus de selectors.

Selecciona els tipus

Els selectors de tipus apliquen la regla a tots els elements de la pàgina del tipus donat. Exemples:

 cos {
 [...]
 }

o bé

 p {
 [...]
 }

Selectors de classes

Les classes apliquen la regla a tots els elements de la pàgina que tinguin la class="nome_classe" . La sintaxi CSS és la següent:

 . nom_classe {
 [...]
 }

Selectors d'identificadors

Els identificadors (normalment identificadors ) apliquen la regla a aquell element de pàgina que té la propietat id="nome_identificatore" . Els identificadors distingeixen elements únics . La sintaxi CSS és la següent:

 # nom_identificador {
 [...]
 }

Selectors de pseudo-classe

Les pseudoclasses identifiquen elements en funció de les seves propietats.

  • first-child coincideix amb un element només si és el primer fill de l'element pare. Llavors
 p : primer fill {
 [...]
 }

només trobarà el primer paràgraf del codi HTML (X) següent.

 <Codi>
  < p > Lorem ipsum </ p >
  < p > Lorem ipsum </ p >
  < p > Lorem ipsum </ p >
 </ Body>
  • enllaç i visitat s'apliquen als enllaços. El primer identifica els enllaços no visitats, el segon els visitats. La sintaxi CSS és:
 a : enllaçar {
 [...]
 }
  • actiu , enfoca i passa el cursor identificant elements només en condicions particulars, el primer si l'element està actiu, el segon si està seleccionat, el tercer si el cursor del ratolí està a sobre. Per tant
 p : passeu el cursor {
 [...]
 }

només s'aplicarà si el punter del ratolí passa per sobre d'un paràgraf i només durant el temps que romandrà allà.

  • lang s'utilitza per identificar elements d'un idioma determinat, però el seu suport és limitat.

Selectors de pseudoelements

Els pseudoelements només identifiquen una part d’un element, sense la necessitat d’utilitzar (X) etiquetatge HTML.

  • la primera línia només troba la primera línia d'un paràgraf. Si la finestra del navegador canvia de mida, s'adaptarà automàticament a la nova mida de línia. La sintaxi CSS és la següent:
 p :: primera línia {
 [...]
 }
  • la primera lletra només coincideix amb el primer caràcter d'un element.
  • abans i després són dues pseudoclasses que s’utilitzen en la creació del contingut generat . No identifiquen cap element, sinó un lloc on crear el contingut. S’utilitzen poc, donada la manca de suport a Internet Explorer.

Selectors de jerarquia

Només identifiquen elements que es troben en una relació particular derivada de l’estructura d’arbre del document (X) HTML, com ara descendència, descendència, germanor.

  • El selector descendent identifica només els elements continguts en altres elements. Com això
 p span {
 [...]
 }

identifica només els elements <span> continguts als elements <p> .

  • El selector infantil, en canvi, només identifica els elements que es troben directament a l’element pare. Com això
 div > p {
 [...]
 }

només troba <p> contingut directament en un <div> .

  • El selector de germans identifica el primer element immediatament posterior a un altre amb el qual comparteix el mateix pare. Com això
 h1 + p {
 [...]
 }

trobeu només el primer germà <p> de <h1>

Selectors d'atributs

El selector d’atributs permet, mitjançant la sintaxi següent, identificar elements (X) HTML en funció dels seus atributs.

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

Aquesta regla només s'aplica als <a> elements que tenen l'atribut title="Esempio" . Els selectors d’atributs són molts i permetrien un control excel·lent de la pàgina, però Internet Explorer no els admet i, per tant, el seu ús és molt limitat.

Exemple de quadrícula CSS
Exemple de quadrícula CSS

Graelles CSS

Les quadrícules CSS són un sistema de disseny bidimensional, és a dir, que pot gestionar columnes i files, a diferència de flexbox, que és en gran part un sistema unidimensional. Les regles CSS s'apliquen tant a un element pare (que es converteix en el contenidor de quadrícula) com als fills d'aquest element (que es converteix en elements de quadrícula) [12] .

 CSS
.grid-container {
  visualització: quadrícula;
  grid-template-columns: auto auto auto;
  color de fons: # 2196F3;
  encoixinat: 10 px;
}
.grid-item {
  color de fons: rgba (255, 255, 255, 0,8);
  vora: 1px sòlid rgba (0, 0, 0, 0,8);
  encoixinat: 20 px;
  mida de la lletra: 30 px;
  text-align: centre;
}
---------------------------------------
HTML
< div class = "grid-container" >
  < div class = "grid-item" > 1 </ div >
  < div class = "grid-item" > 2 </ div >
</ div >

Colors

Icona de la lupa mgx2.svg El mateix tema en detall: Colors web .

Els colors web són colors que s’utilitzen en la visualització de pàgines web a la World Wide Web i en els mètodes per descriure i especificar aquests colors. Els colors es poden especificar com a triplet RGB o en format hexadecimal (un triplet hexadecimal ) o, en alguns casos, pels seus noms anglesos comuns. Sovint s’utilitza una eina de selecció de colors o un altre programari gràfic per generar valors de color. Un exemple: #0099CC (un tipus de blau que també es pot #0099CC Pacific Blue ).

Canvi de nom de colors

CSS3 us permet canviar el nom dels colors com vulgueu i recuperar-los més tard [13] :

 $ color- danube : # 668DD1 ;

/ * RECORD *
$ color-alpha : $ color-danube ;

Creació de variables

Icona de la lupa mgx2.svg El mateix tema en detall: Sass and Less .

Sass (S yntactically Un wesome S tyle S heets) és una extensió de l'llenguatge CSS que li permet utilitzar les variables , crear funcions i organitzar el full d'estil en múltiples arxius .

Less ( LESS ) és un preprocessador CSS que amplia el llenguatge CSS normal permetent (a més de la sintaxi normal dels fulls d'estil) també l'ús de funcions , operadors i variables , el nidificació d'instruccions, la creació de "mixins" i molts altres funcions que faciliten l’escriptura, el manteniment i la comprensió del codi.

Propietat

Les propietats CSS són nombroses. Els més utilitzats són:

  • amplada i alçada. Aquestes propietats s’utilitzen per definir l’alçada i l’amplada d’un element concret.
  • antecedents . Defineix el fons d'un element. Es tracta d'una propietat abreujada per a adjunt de fons, color de fons, imatge de fons, posició de fons i repetició de fons .
  • frontera . Defineix la vora d'un element. És una propietat abreujada de color de vora, estil de vora i amplada de vora .
  • color . Defineix el color del text d'un element. La propietat de fons s’utilitza per definir el fons .
  • posició . Defineix el tipus de mètode de posicionament utilitzat per a un element (estàtic, relatiu, fix, absolut o enganxós).
  • índex z . Especifica l'ordre d'un element posicionat i els seus descendents (per sobre o per sota dels altres de la pàgina).
  • flotar . Aquesta propietat defineix un bloc flotant , és a dir, permet la disposició d'altres elements als seus costats.
  • font-family . Defineix les propietats del tipus de lletra. Es tracta d'una propietat abreujada de font-family , font-size i font-weight .
  • marge i encoixinat . Defineixen l’espai que envolta els elements. El primer és l’espai exterior a les vores, el segon l’espai interior.
  • alinear text . Defineix l'alineació d'elements, inclòs el text.
  • ! important. Fa prevaler una regla CSS sobre les altres
  • amplada mínima i amplada màxima . Permeten fer aparèixer i desaparèixer un element en funció de la mida del dispositiu
  • clar. Evita que apareguin altres elements flotats al costat d’un element

Valors

Si no s'especifica, una propietat assumeix els valors predeterminats de cada navegador o, en segon lloc, l'estil d'usuari escollit; en cas contrari, pot assumir un dels següents:

  • heretar
  • cotxe
  • número
  • percentatge
  • color
  • URI
  • Font
  • altres valors típics de cada propietat

La cadena inherit especifica que la propietat ha d’heretar el valor dels elements dels quals descendeix l’element. La cadena automàtica té significats molt diferents segons la propietat a la qual estigui assignada.

Si els números es marquen amb una unitat de mesura, aquesta unitat s’ha d’expressar (excepte en el cas de zero). No hi ha d'haver espais entre el número i la unitat, com en l'exemple següent:

 p {
 marge : 5 px ;
 vora : 1 em ;
 encoixinat : 0 ;
 }

Els colors es poden indicar amb més d’un sistema. Per exemple, el color taronja es pot indicar amb:

 taronja / * color per defecte * /
 rgb ( 255 , 165 , 0 ) / * format rgb de 0 a 255 * /
 rgb ( 100 %, 64 %, 0 %) / * podeu utilitzar percentatges * /
 rgba ( 255 , 165 , 0 , 1 ) / * podeu especificar l'alfa de 0 a 1 * /
 hsl ( 39 , 100 %, 50 %) / * notació de lleugeresa de saturació de tons * /
 hsla ( 39 , 100 %, 50 %, 1 ) / * es pot especificar alfa * /
 # ffa600 / * Format hexadecimal RRGGBB * /
 # ffa600ff / * format hexadecimal RRGGBBAA * /
 # fa0 / * Aproximació en format hexagonal RGB del valor inicial * /
 # fa0f / * Aproximació al format hexadecimal RGBA del valor inicial * /

L’ URL s’indica als formularis

 url ( http : // exemple . it / file . html )
 url ( "http://example.it/file.html" )

CSS li permet indicar més d'una font, o una família de fonts (sans serif i) a la propietat font-family. D'aquesta manera, el navegador utilitzarà el primer que trobarà instal·lat al sistema operatiu . La declaració utilitza aquesta sintaxi:

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

CSS per a SVG

Podeu utilitzar CSS per modificar els estils de SVG (part del llenguatge HTML5) [14] . Exemple:

 svg {
  color de fons : beix ;
}

CSS per a llenç HTML5

<! DOCTYPE html>
<Html>
    <Cap>
    < title > Mida de l'element del llenç: 600 x 300,
    Mida de la superfície del dibuix del llenç: 300 x 150 </ title >
    < estil >
        cos {
            fons : #dddddd ;
        }
        # llenç {
            marge : 20 px ;
            encoixinat : 20 px ;
            fons : #ffffff ;
            vora : inserció prima #aaaaaa ;
            amplada : 600 px ;
            alçada : 300 px ;
        }
    </ style >
    </ cap >
    <Codi>
        < canvas id = "canvas" >
        No s’admet el llenç
        </ canvas >
    </ Body>
</ Html>

Creació automàtica de CSS

Amb programes d’ edició de gràfics i fotografies com Photshop és possible convertir capes en estils CSS [15] .

Utilització del 3D

CSS3 va introduir la propietat "Transformació 3D" que us permet crear algunes animacions i formes en 3D, però no pot equiparar les possibilitats de WebGL [16] [17] .

Suport per a navegadors i CSS

La llista següent és de motors de representació perquè se'ls assigna la tasca de formatar la pàgina segons les instruccions CSS.

Gecko ( Mozilla Firefox i Netscape Navigator )
Gecko té un excel·lent suport per a CSS 1,2 i 3 i, per tant, s'utilitza sovint per comprovar el rendiment de les pàgines web. Gecko i Mozilla Firefox són programes lliures . Netscape Navigator (obsolet a l'1 de març de 2008 [18] ) també es va distribuir amb una llicència gratuïta .
Trident ( Internet Explorer i AOL Explorer )
Internet Explorer (obsolet des de l’agost de 2020 [19] a favor de Edge ), des de la versió 9 donava suport a CSS 3. Una particularitat d’Internet Explorer eren els anomenats comentaris condicionals que permetien aplicar regles CSS només a una versió determinada d’Internet. Explorador. Aquesta característica es va utilitzar àmpliament quan es va suposar que un usuari que encara utilitzava versions antigues d'Internet Explorer i, per tant, sovint requeria algunes regles CSS addicionals per a la visualització correcta de la pàgina web. [20] En molts casos, era necessari utilitzar regles d'estil CSS ad-hoc exclusivament per a Internet Explorer a causa de diferències substancials en la manera en què algunes versions d'Internet Explorer es desvien dels estàndards, com el " box model no estàndard" utilitzat per alguns versions d’Internet Explorer i que diferien substancialment de les imposades pels estàndards del World Wide Web Consortium. [21] [22] La sintaxi dels comentaris condicionals era la següent:
 <! - '' '[si IE]>' ''
"Regles CSS ad hoc per a Internet Explorer"
'' '<! [endif]' '' ->
ja que <!-- normalment introduïa un comentari, els navegadors que no fossin Explorer 5.0 o versions posteriors no interpretaven el codi. Els comentaris condicionals us han permès especificar un full d'estil específic d'Internet Explorer de la següent manera:
 <! - [si IE]>
<link rel = "stylesheet" type = "text / css" href = "'' 'style_sheet_ad-hoc_for_IE.css' ''">
<! [endif] ->

Trident i Internet Explorer són programes propietaris .

Aviat ( Operapera )
Presto ofereix un excel·lent suport per a CSS 1,2 i 3. Opera també ofereix una opció que permet a l'usuari desactivar els fulls d'estil o utilitzar els seus propis. Presto i Opera són programes propietaris .
KHTML i WebKit ( Safari , Google Chrome i Konqueror )
Actualment, KHTML és el motor que ofereix més suport a CSS, oferint una interpretació gairebé total de CSS 3. KHTML i WebKit són programes lliures ; 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