Sintaxi CSS

This translation is in progress.

A continuació, ens submergirem en la sintaxi CSS en molt més detall, mirant com les propietats i els seus valors es formen en les declaracions, les declaracions múltiples es formen en els blocs de declaracions, i els blocs de declaracions i selectors es formen en les regles CSS completes. Arrodonirem l'article veient altres característiques de la sintaxi CSS, com els comentaris i espais en blanc.

Requisits Previs: Coneixements bàsics d'informàtica, instal.lació del programati bàsic, coneixement bàsic del treball amb arxius, HTML bàsic (estudi Introducció a HTML), i una idea de Com funciona CSS.
Objectiu: Aprendre les estructures sintàctiques fonamentals de CSS en detall.

Nota: CSS és un llenguatge declaratiu, el que fa que la seva sintaxi sigui bastant fàcil i senzilla d'entendre. A més, també compta amb un sistema de recuperació d'errors molt agradable que permet cometre errors sense trencar tot - per exemple, les declaracions que no s'entenen generalment són simplement ignorades. El desavantatge és que pot ser més difícil d'entendre d'on vénen els errors. Seguiu llegint, i tot s'anirà aclarint amb el temps.

Un toc de vocabulari

En el seu nivell més bàsic, CSS consta de dos components bàsics:

  • Propietats: Identificadors llegibles per humans que indiquen quines característiques estilístiques (per exemple, la font, l'ample, el color de fons) es volem canviar.
  • Valors: Cada propietat especificada se li dóna un valor, que indica la forma en què es volem canviar les característiques estilístiques (per exemple, es vol canviar la font, l'ample o color de fons)

Una propietat associada a un valor es denomina declaració CSS. Les declaracions CSS es col·loquen dins dels blocs de declaració CSS. I finalment, els blocs de declaració CSS s'aparellen amb selectors per produir conjunts de regles CSS (o regles CSS).

Abans d'aprofundir massa en la teoria i en l'explicació escrita, vegem un exemple concret (vam veure alguna cosa molt similar en el nostre article anterior).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

I l'arxiu CSS:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

La combinació d'aquests dos ens dóna el següent resultat:

Vegem la sintaxi amb més detall.

Declaracions CSS

La definició de les propietats CSS per a valors específics és la funció bàsica del llenguatge CSS. El motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir adequadament la posició i l'estil. El que és important recordar és que tant les propietats i valors distingeixen mayusculas de minusculas en CSS. La propietat i el valor de cada parell estan separats per dos punts (:).

Hi ha més de 300 propietats diferents en CSS i gairebé un nombre infinit de diferents valors. No es permeten tots els parells de propietats i valors; cada propietat té una llista específica de valors vàlids que se li assignen.

Important: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat donada, la declaració es considera no vàlida i es completament ignorada pel motor de CSS del navegador.

Important: En CSS (i altres estàndards web), l'ortografia dels EUA s'ha acordat com l'estàndard per adherir-se a on sorgeixi la incertesa. Per exemple, el color (com es veu en el codi anterior) sempre s'ha d'escriure color.colour no funcionarà.

Aprenentatge actiu: Detectar les declaracions

En l'exemple anterior, hi ha cinc declaracions CSS separades. Pot identificar la declaració invàlida i esbrinar per què és invàlid

Blocks de declaració CSS

Les declaracions s'agrupen en blocs, cada conjunt de declaracions es envoltada per una clau d'obertura, ({) i una tancament (}).

Cada declaració continguda dins d'un bloc de declaració ha de ser separada per un punt i coma (;), altrament el codi no funcionarà (o almenys donarà resultats inesperats). L'última declaració d'un bloc no necessita se acabada en un punt i coma, tot i que es considera, sovint, un bon estil fer-ho, ja que evita l'oblit d'afegir-lo a l'estendre el bloc amb una altra declaració.

Nota: Els blocs de vegades es poden niar; en aquests casos les claus d'obertura i de tancament han de ser lògicament niades, de la mateixa manera que les etiquetes dels elements HTML niades. L'exemple més comú que ens trobarem son @-rules, que són blocs que comencen amb un identificador @ com @media, @font-face, etc. (Vegeu les declaracions CSS a continuació).

Nota: Un bloc de declaració pot estar buit - això és perfectament vàlid.

Aprenentatge actiu: On són els blocs de declaració?

En l'exemple anterior, heu estat capaços d'identificar els tres blocs de declaracions CSS independents?

Selectors i regles CSS

Ens falta una part del trencaclosques - hem de discutir com dir-li als nostres blocs de declaració a quins elements s'han d'aplicar. Això es fa prefixant cada bloc de declaració amb un selector - un patró que coincideix amb alguns elements de la pàgina. Les declaracions associades s'aplicaran unicament a aquells elements. El selector més el bloc de declaració s'anomena un conjunt de regles, o sovint simplement una regla.

Els selectors poden ser molt complicats - es pot fer que una regla sigui coincident amb múltiples elements incloent múltiples selectors separats per comes (un grup), i els selectors poden ser encadenats junts, per exemple, desitjo seleccionar qualsevol element amb una classe "blah", però només si és dins d'un element <article>, i només mentre el punter del ratolí estigui per sobre d'ell. No es preocupeu - les coses s'aniran aclarint a mesura que adquiriu més experiència amb CSS, i explicarem els selectors amb gran detall en el proper article,, Selectors.

Un element pot ser aparellat per diversos selectors, per tant, diverses regles poden establir una propietat administrada de forma repetida. CSS defineix qui té preferència davant dels altres i ha de ser aplicat: això es diu algoritme de cascada, i aprendreu més sobre com funciona en Cascada i herència.

Important: Si un sol selector bàsic en una cadena o grup no és vàlid, igual que quan s'utilitza un pseudo-element desconegut o pseudo-classe, tot el grup de selectors no és vàlid i per tant tota la regla és no vàlida i ignorada.

Aprenentatge actiu: Localitzar el grup de selectors

En el nostre exemple, heu estat capaços d'identificar la regla que s'aplicarà a dos tipus diferents d'element?

Declaracions CSS

Les regles CSS són els principals blocs de construcció d'una fulla d'estil - és el bloc més comú que veurem en CSS. Però hi ha altres tipus de bloc que trobarem de tant en tant - les regles CSS són un tipus dels anomenats declaracions CSS. Els altres tipus són els següents:

  • At-rules (regles arrova) s'utilitzen en CSS per transmetre les metadades, informació condicional, o una altra informació descriptiva. Comencen amb una signe arrova (@), seguit d'un identificador que diu quin tipus de regla és, llavors un bloc de sintaxi d'algun tipus, que acaba amb un punt i coma (;). Cada tipus d'at-rule, (regles arrova), definit per l'identificador, tindrà la seva pròpia sintaxi i semàntica interna. Els exemples inclouen: Exemple de sintaxi específica:
    @import 'custom.css';
    Aquesta at-rule (regla arrova) importa altre arxiu CSS en el CSS actual.
  • Les declaracions niades són un subconjunt específic d'at-rule, la sintaxi dels quals és un bloc niat de regles CSS que només s'aplicaran al document si es compleix una condició específica.
    • L'at-rule @media s'aplica el contingut només quan el dispositiu que executa el navegador coincideix amb la condició expressada;
    • El contingut d'at-rule @supports s'aplica només si el  navegador es en realitat compatible amb la funció a prova;
    • El contingut d'at-rule @document s'aplica només si la pàgina actual coincideix amb algunes condicions.
    Exemple de sintaxi específica:
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    La declaració niada anterior només s'aplica la regla niada quan l'ample de la pàgina supera 800 píxels.

Aprendrem més sobre alguns tipus d'at-rules/declaracions niades en els llocs adequats en el curs.

Important: Qualsevol declaració que no és un conjunt de regles, un at-rule o una declaració niada no és vàlida i per tant és ignorada.

Més enllà de la sintaxi: fer llegible CSS

Com es pot veure, la sintaxi CSS no és tan difícil d'escriure: escriviu algunes regles i si el que heu escrit està malament, només serà ignorat. No obstant això, fins i tot si funciona, hi ha algunes pràctiques recomanades que val la pena conèixer perquè el codi CSS sigui més fàcil d'usar i mantenir.

Espai en blanc

L'espai en blanc vol dir espais reals, tabulacions i noves línies. Es poden afegir espais en blanc per fer que les fulles d'estil siguin més llegible.

De la mateixa manera que HTML, el navegador tendeix a ignorar la major part dels espais en blanc dins del CSS; molts dels espais en blanc són només allà per facilitar la lectura. En el primer exemple de sota tenim cada declaració (i regla d'inici/final) en la seva pròpia línia - això és sens dubte una bona manera d'escriure CSS, ja que fa que sigui fàcil de mantenir i entendre:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Es podria escriure exactament la mateixa CSS com a tal, amb la major part de l'espai en blanc eliminat - això és funcionalment idèntic al primer exemple, però estic segur, que estarem d'acord, que és una mica més difícil de llegir:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

El codi de disseny que es triï és en general una preferència personal, encara que quan es comença a treballar en equip, és possible que l'equip existent tingui la seva pròpia guia d'estil que especifica un conveni acordat a seguir.

L'espai en blanc que cal anar amb compte en el CSS és l'espai en blanc al voltant de les propietats i els seus valors. Per exemple, la següent CSS és vàlid:

margin: 0 auto;
padding-left: 10px;

Però el següent no és vàlid:

margin: 0auto;
padding- left: 10px;

A causa de que  0auto no es reconeix com un valor vàlid per a la propietat margin (0 i auto són dos valors separats,) i el navegador no reconeix padding- com una propietat vàlida. Sempre ens hem d'assegurar de separar els diferents valors entre si per almenys un espai, però mantenir els noms/valors de la propietat com una sola cadena ininterrompuda.

Comentaris

Igual que amb HTML, se us anima a fer comentaris al CSS, per ajudar a entendre com funciona el codi en tornar a ell després de diversos mesos, i per ajudar els altres que ho entenguin. Els comentaris també són útils per comentar temporalment certes parts del codi per a propòsits de prova, per exemple, si s'està tractant de trobar quina part del codi està causant un error.

Els comentaris en CSS comencen amb /* i acaben amb */.

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

Abreujat

Algunes propietats com font, background, padding, border, i margin s'anomenen propietats abreujades - això es deu al fet que permeten establir diversos valors de la propietat en una sola línia, estalviant temps i fer el codi més net en el procés.

Per exemple, aquesta línia:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left. There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

Fa el mateix que totes aquestes:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

Mentre que aquesta línia:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Fa el mateix que totes aquestes:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

No  tractarem d'ensenyar a aquests de manera exhaustiva - ens trobarem amb molts exemples més endavant en el curs, i és aconsellable per buscar els noms de les propietats abreujades la nostra referència CSS per a més informació..

Que segueix

En aquest punt, s'hauria de comprendre els fonaments de la sintaxi CSS necessari per escriure una fulla d'estil de treball que sigui fàcil de mantenir en el temps. En el següent article aprofundirem en els selectors CSS, mirant als diferents disponibles i com funcionen.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,