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.
Hi ha qui els agrada el disseny compacte que hem estat utilitzant, i només divideixen una línia quan es fa molt llarga:
.carrot {color: orange; text-decoration: underline; font-style: italic;}
Hi ha qui prefereix una propietat-valor per línia:
.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}
Hi ha qui utilitza la sagnia de dos espais, quatre espais, o una tabulació són comuns:
.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
Hi ha qui els agrada que tot estigui alienat verticalment (però un disseny com aquest és difícil de mantenir):
.carrot
{
color : orange;
text-decoration : underline;
font-style : italic;
}
Hi ha qui fa servir espais en blanc mixtes per millorar la lectura.
.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.
Acció: Afegir comentaris i millorar el disseny
- 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;}
- 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.
- 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
Comenteu una part de la fulla d'estils, sense canviar res més, perquè la primera lletra del document sigui vermella:
Cascading Style Sheets |
Cascading Style Sheets |
(Hi ha més d'una manera de fer això.)
.carrot
:
/*.carrot {
color: orange;
}*/
Hide solutionI 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.