CSS llegible

Go to Previous Section:
SelectorsAquesta és la 6th secció del tutorial CSS Getting Started; s'analitza l'estil i la gramàtica del propi llenguatge CSS. Es canvia la forma en què  es veu el vostre arxiu CSS d'exemple, perquè sigui més llegible.

Informació: CSS Llegible

Podeu afegir espais en blanc i comentaris en les fulles d'estil perquè siguin més llegibles. També es poden agrupar selectors, quan les mateixes regles d'estil s'apliquen als elements seleccionats de diferents maneres.

Espai en blanc

L'espai en blanc vol dir espais reals, tabuladors i noves línies. Podeu afegir espais en blanc per fer les fulles d'estil més llegible.

En el context del disseny de la pàgina i composició, l'espai en blanc és la part de la pàgina que es deixa sense marcar: marges, separacions, i l'espai entre columnes i línies de text.

El arxiu CSS d'exemple actualment té una regla per línia, i gairebé el mínim d'espai en blanc. En un full d'estil complex aquesta disposició seria difícil de llegir, de manera que difilcutaria el seu manteniment.

El disseny escullit sol ser una preferència personal, però si els fulls d'estil són part de projectes compartits, aquests projectes podrian tenir les seves pròpies convencions.

.carrot {color: orange; text-decoration: underline; font-style: italic;}

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

.vegetable         { color: green; min-height:  5px; min-width:  5px }
.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

Hi ha qui utilitza tabulacions per al disseny. Hi ha qui només utilitza espais.

Comentaris

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

Podeu utilitzar els comentaris per fer comentaris reals en el full d'estil, i també per comentar parts d'ell temporalment per a propòsits de prova.

Per comentar part d'un full d'estil, col·locar aquesta part en un comentari perquè el navegador ho ignori. Aneu amb compte on s'inicia i acaba el comentari. La resta del full d'estil ha de tenir una sintaxi correcta.

/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Selectors agrupats

Quan molts elements tenen el mateix estil, podeu especificar un grup de selectors, separant-los per comes. La declaració és vàlida per a tots els elements seleccionats.

En una altra part del full d'estils es poden especificar els mateixos selectors de nou de forma individual, per aplicar les regles d'estil individuals a ells.

/* color for headings */
h1, h2, h3 {color: navy;}

Acció: Afegir comentaris i millorar el disseny

1. Editeu l'arxiu CSS, i assegurar-se que té aquestes regles (en qualsevol ordre):

   strong {color: red;}
   .carrot {color: orange;}
   .spinach {color: green;}
   #first {font-style: italic;}
   p {color: blue;}
   

2. Feu que sigui més llegible reordenant-ho d'una manera que ho trobeu lògic, i mitjançant l'afegit d'espais en blanc i comentaris de la millor manera que us sembli.
3. Deseu el fitxer i refresqueu la pantalla del navegador, per assegurar-se que els canvis no afectin el funcionament de la fulla d'estil:

   Cascading Style Sheets

   Cascading Style Sheets

/*.carrot {
  color: orange;
}*/

I ara què?

Go to Next Section:
Estil de textEn el estil d'exemple s'ha utilitzat el text en cursiva i subratllat. La pàgina següent descriu més formes d'especificar l'aspecte del text en el document.