CSS

  • Título: Introducción a CSS
  • Autor: Javier Eguíluz Pérez
  • Páginas: 223
  • Dirigido a: Programadores web y diseñadores web sin experiencia con CSS
  • Requisitos: Conocimientos básicos de HTML

Descargar PDF desde página del autor.

  • Título: CSS avanzado
  • Autor: Javier Eguíluz Pérez
  • Páginas:
  • Dirigido a: Diseñadores web con experiencia en CSS
  • Requisitos: Conocimientos de HTML y CSS

Descargar PDF desde página del autor.

 

Incluir Estilos CSS para un sitio Web:

Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.

Veamos ahora todo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es un poco distinta que la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML en este archivo: etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Enlazamos la página web con la hoja de estilos

Para ello vamos a colocar la etiqueta <LINK> con los atributos
rel=”STYLESHEET” indicando que el enlace es con una hoja de estilo.
type=”text/css” porque el archivo es de texto, en sintaxis CSS.
href=”estilos.css” indica el nombre del fichero fuente de los estilos.
Veamos una página web entera que enlaza con la declaración de estilos anterior:

<html>
<head>
<link rel=”STYLESHEET” type=”text/css” href=”estilos.css”>
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
</p>
</body>
</html>

Un pensamiento en “CSS

  1. Marina Entero en dijo:

    Muy buenos apuntes.
    Espero que os ayuden.
    Marina

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: