UNIVERSIDAD AUTÓNOMA METROPOLITANA UNIDAD CUAJIMALPA
Cascading Style Sheets (CSS) Programación de Web Estático
Dr. Carlos Roberto Jaimez González
Introducción
CSS: Cascading Style Sheets
Hojas de estilo en cascada
Los estilos definen cómo desplegar elementos HTML
Los estilos fueron añadidos a HTML versión 4.0 para
resolver el problema de presentación y contenido.
Las hojas de estilo externas pueden ahorrar mucho
trabajo, ya que pueden ser aplicadas a más de un
documento HTML. Son guardadas en archivos con
extensión CSS.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Introducción
HTML no fue diseñado para contener tags para
formatear un documento.
HTML fue creado para definir el contenido de un
documento, con tags tales como:
<h1>Este es un encabezado</h1>
<p>Este es un parrafo</p>
Cuando los tags como <font> fueron añadidos a la
especificación de HTML 3.2, comenzó una pesadilla para
los desarrolladores web.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
World Wide Web Consortium
El desarrollo de sitios web grandes empezó a ser un
proceso caro, largo y tedioso, ya que toda la información
del tipo de letra y los colores tenían que ser añadidos a
cada página del sitio web.
Para resolver este problema, el World Wide Web
Consortium (W3C) creó CSS.
En HTML 4.0 toda la presentación puede ser
eliminada del documento HTML, para ser guardada en
un archivo CSS. En la actualidad todos los browsers
soportan CSS.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Hojas de estilo externas
CSS define cómo serán desplegados o presentados los
elementos HTML.
Los estilos son normalmente guardados en archivos
externos con extensión CSS.
Las hojas de estilo externas permiten cambiar la
apariencia de todas las páginas en un sitio web,
solamente editando un solo archivo.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Reglas CSS
Una regla CSS tiene dos partes principales: un selector, y
una o más declaraciones.
selector declaración declaración
body { background-color:yellow; text-align:center; }
atributo valor atributo valor
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Selector y Declaración CSS
El selector es normalmente el elemento HTML que se
desea modificar.
Cada declaración consiste de una propiedad y un valor.
La propiedad es el atributo que se desea modificar del
elemento HTML.
Cada propiedad tiene un valor.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Declaraciones CSS
Las declaraciones CSS siempre terminan con ; y todas las
declaraciones que pertenecen a un selector están rodeadas
por los paréntesis { y }. Ejemplo:
body { background-color:yellow; text-align:center; }
Para hacer más entendible el contenido de un archivo
CSS, se acostumbra escribir una declaración por línea.
body
{
background-color:yellow;
text-align:center;
}
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Ejemplo CSS
En nuestro ejemplo se está modificando al elemento
HTML <body>. El color de fondo (background-color)
será cambiado a amarillo (yellow), y la alineación del
texto (text-align) será cambiada al centro (center).
body
{
background-color:yellow;
text-align:center;
}
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Ejemplo CSS
El siguiente ejemplo modifica algunos atributos del
elemento HTML <h2>. El color de fondo (background-
color) será cambiado a verde (green): el color del texto
será cambiado a blanco (white); y la alineación del texto
(text-align) será cambiada al centro (center).
h2
{
background-color:green;
color:white;
text-align:center;
}
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
Comentarios CSS
Los comentarios CSS son utilizados para explicar el
código, y pueden ayudar cuando se modifica el archivo
CSS posteriormente. Los comentarios CSS son ignorados
por el browser.
/*Atributos de modificación para el body*/
body
{
/*Color de fondo*/
background-color:yellow;
/*Alineación del texto*/
text-align:center;
}
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-color
Existen atributos CSS que son aplicables a muchos
elementos HTML. Uno de ellos es el atributo
background-color, el cual permite modificar el color de
fondo del elemento HTML al cual se le aplica.
body
{
background-color:yellow;
}
El código CSS anterior afectará el color de fondo de la
página y lo cambiará a amarillo.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-color
El color puede ser especificado de tres formas
diferentes.
- Nombre del color:
background-color:red;
- Número hexadecimal que representa al color:
background-color:#ff0000;
- Código RGB (Red, Green, Blue) del color:
background-color:rgb(255,0,0);
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image
También puede especificarse una imagen de fondo
para la página web, de la siguiente forma:
body
{
background-image:url('perro.jpg');
}
Esto ocasionará que la imagen 'perro.jpg' sea
desplegada de fondo, y repetida tantas veces como sea
necesario para llenar la página web, como se muestra
en la siguiente diapositiva.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image y background-repeat
Para evitar que la imagen de fondo sea repetida tantas
veces, es necesario añadir el atributo background-repeat
con el valor no-repeat, como se muestra abajo.
body
{
background-image:url('perro.jpg');
background-repeat:no-repeat;
}
Esto ocasionará que la imagen 'perro.jpg' sea
desplegada de fondo solamente una vez, como se
muestra en la siguiente diapositiva.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image y background-repeat
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image y background-repeat
Si solamente se desea que la imagen sea repetida en
el eje “x” o en el eje “y” se debe de utilizar el valor
repeat-x o repeat-y para el atributo background-
repeat, como se muestra a continuación:
body
{
background-image:url('perro.jpg');
background-repeat:repeat-x;
}
La imagen 'perro.jpg' será desplegada de fondo, y
repetida únicamente en el eje “x”, como a continuación.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image y background-repeat
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image y background-repeat
Otro ejemplo con background-repeat,
en el cual repetimos en el eje “x” la
imagen 'cielo.png'.
body
{
background-image:url('cielo.png');
background-repeat:repeat-x;
}
Esto ocasionará que la imagen 'cielo.png' sea
desplegada de fondo, y repetida únicamente en el eje
“x”, como se muestra en la siguiente diapositiva.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image y background-repeat
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
background-image y background-position
background-position determina la posición en donde
será desplegada la imagen de fondo.
body
{
background-image:url('perro.jpg');
background-repeat:no-repeat;
background-position:left top;
background-attachment:fixed;
}
Esto ocasionará que la imagen 'p.jpg' sea desplegada
de fondo, y repetida únicamente en el eje “x”, como se
muestra en la siguiente diapositiva.
Universidad Autónoma Metropolitana – Cuajimalpa Dr. Carlos Roberto Jaimez González
