Engadir estilos a un documento con CSS

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda
La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

Pódense aplicar regras de estilo a un documento de tres xeitos distintos: Incluír estilos en liña, como elementos de estilo incrustados na parte superior do documento e como arquivos externos que poden vincúlarse ou importarse ó documento.

  • Estilos en liña.
Pódese engadir información de estilo a un elemento concreto empregando o atributo style na etiqueta HTML dese elemento. Vexamos un par de exemplos:
<h1 style="color: red">Esta cabeceira é de cor bermella</h1>
<p style="font-size: 12px; font-family: 'Trebuchet MS', sans-serif"> 
  Este texto ten un tamaño de 12px e de tipo de letra Trebuchet MS</p>
Aínda que este é un uso perfectamente válido da información de estilo, os estilos en liña equivalen á extensión font de HTML pois, como estes, tamén contaminan o documento con información de presentación. O mellor é empregar os estilos en liña moi ocasionalmente para ignorar regras de nivel mais alto. De feito, o atributo style foi depreciado en XHTML 1.1 e non aparece en outras linguaxes XML.
  • Follas de estilo incrustadas.
Un método mais compacto para engadir follas de estilo é incrustar un bloque de estilo na parte superior do documento HTML empregando o elemento style.
O seguinte exemplo mostra unhas regras incrustadas nun documento XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html>
   <head>
    <style type="text/css">
      h1 {color: #666666}
      p {font-size: 90%; font-family: Verdana, sans-serif; }
    </style>
    <title>A miña primeira páxina web con estilo</title>
   </head>
...
  </html>
O elemento style debe colocarse na cabeceira do documento. É obrigatorio empregar o atributo type nos documentos HTML e XHTML, ademais, de momento, o único estilo viable é text/css. Tamén existe outro atributo, media, que permite seleccionar o medio (pantalla, impresión, dispositivo móbil, etc.) ó que se lle debería aplicar a folla de estilo. Este atributo verémolo mais adiante.
  • Follas de estilo externas.
O modo mais potente de utilizar CSS é reunir todas as regras de estilo nun documento de texto independente e crear vínculos a ese documento dende todas as páxinas dun sitio. Deste modo pódense facer cambios no estilo dun xeito homoxéneo en todo o sitio editando a información de estilo dun único documento.