Per què utilitzar CSS?

This translation is incomplete. Please help translate this article from English.

Aquesta segona secció del tutorial CSS Getting Started explica la relació entre la CSS i els documents. En l'exercici aprendreu com afegir un full d'estil CSS en el document d'exemple que vam crear en la primera secció.

Informació: Per què utilitzar CSS?

S'utilitza CSS per definir estils en els documents, incloent el disseny, la disposició i les variacions en la imatge per als diferents dispositius i mides de pantalla. Podeu posar el CSS en el <head> d'un document amb un full d'estils incrustat, o adjuntar un arxiu separat que defineix els estils amb un full d'estils extern. Per enllaçar un full d'estils extern al document, se li afegeix simplement un enllaç al full d'estils en el <head> del document.

Un full d'estil extern té molts avantatges. Mantenir els estils separats del seu contingut HTML:

  • Ajuda a evitar la duplicació
  • Facilita el manteniment
  • Permet fer un canvi de tot el lloc en un sol lloc
Exemple

L'ús de CSS, permet emmagatzemar la informació d'estil en arxius comuns que comparteixen totes les pàgines. Per exemple, quan els documents enllaçan amb el mateix full d'estil que defineix el color de les capçaleres h2, es pot aplicar l'estil de les etiquetes de capçalera h2 globalment, canviant un atribut css.

Quan un usuari visualitza una pàgina web, el navegador de l'usuari carrega la informació d'estil juntament amb el contingut de la pàgina.

Quan un usuari imprimeix una pàgina web, pot proporcionar informació de diferent estil que fa que la pàgina impresa sigui fàcil de llegir.

Com fer que HTML i CSS treballin junts? En general, s'utilitza HTML per descriure el contingut del document, no el seu estil. CSS s'utilitza per especificar l'estil del document, no el seu contingut. Més endavant en aquest tutorial, veureu algunes excepcions a aquesta disposició.

Més detalls

Un llenguatge de marcatge com l'HTML també proporciona algunes formes d'establir estil.

Per exemple, en HTML es pot utilitzar una etiqueta <b> per fer el text en negreta, i establir el color de fons d'una pàgina en la seva etiqueta <body>.
 

Quan s'utilitza CSS, normalment s'evita l'ús d'aquestes característiques del llenguatge de marcat, de manera que tota la informació d'estil del document està en un sol lloc.

Acció: Crear un full d'estil

  1. Creeu un altre arxiu de text en el mateix directori que el document doc1.html que vau crear en la primera secció.
  2. Guardeu el document com: style1.css. Aquest fitxer serà el full d'estil.
  3. A l'arxiu CSS, copieu i enganxeu aquesta línia, a continuació, deseu el fitxer:
    strong {color: red;}
    

Vincular el document al full d'estils

  1. Per enllaçar el document al full d'estils, editar l'arxiu HTML. Afegiu-hi la línia ressaltada aquí:
    <!DOCTYPE html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  2. Deseu el fitxer i refrescar la pantalla del navegador. El full d'estil fa que les lletres inicials siguin de color vermell, com aixó:

View above Demo

Repte

A més de vermell, CSS permet a alguns altres noms de colors.

Sense buscar una referència, trobar cinc noms més de colors que treballin en el full d'estil.

Possible solution

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

Hide solution
Veure la solució per el repte

I ara què?

Ara teniu un document de mostra vinculat a un full d'estil separat, ja esteu llestos per aprendre més sobre com el navegador les combina quan es mostra el document.

Document Tags and Contributors

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