Separata Paginas Web CSS 01

HOJAS DE ESTILOS
¿Qué es CSS? ¿Para qué se utiliza?

Veremos ejemplos sencillos y prácticos de
este lenguaje para entender su utilidad
dentro de Internet en el diseño y
programación de páginas Web.
Diseño Web
CSS
Hojas de Estilo en Cascada - CascadingStyle Sheets (CSS) es un
lenguaje de estilo usado para describir la presentación de las páginas web.
CSS permite la separación del contenido del documento de la presentación
del documento (disposición, colores, fuentes, etcétera).
El uso de CSS es la manera más adecuada de diseñar un sitio Web, ya que
nos permite mucho más flexibilidad a la hora de realizar cambios en el sitio.
Nos proporcionan el control sobre la creatividad de la presentacion y el
diseño de nuestras paginas Web. Mediante su utilizacion podemos adornar el
texto con encabezados atractivos, mayusculas y bordes, igual que en las
revistas de moda. Tambien se pueden organizar las imagenes en el texto
con precision, crear columnas y mensajes publicitarios, y resaltar los
vinculos de texto con efectos dinamocos.
Esencialmente un estilo CSS es solo una regla que le dice al navegador como desplegar un elemento
concreto de una pagina que ha sido colocado con html. Por ejemplo se puede crear una regla CSS para
que todas las directivas etiquetadas con <h1> aparezcan con altura de 36 pixeles, en fuente Verdana y
con color naranja. CSS puede resaltar tambien contenidos, añadiendo bordes, cambiando margenes e
incluso controlando la posicion exacta de cada elemento de la pagina. Un estilo es, de hecho, la
combinacion de dos elementos: la pagina web elemental que formatea el buscador (el selector) y las
instrucciones de formato reales (el bloque de declaracion). Por ejemplo un selector puede ser un
encabezamiento, un parrafo de texto, una foto, etc. El bloque de declaracion puede cambiarlo a texto
azul, añadir un borde rojo en torno a un parrafo, poner la foto en el centro de la página: las
posibilidades son infinitas.
Breve historia de CSS
Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año
1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera
aplicar de forma consistente diferentes estilos a los documentos electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el
crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra
de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de
documentos con la misma apariencia en diferentes navegadores.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares
relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el
lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta
fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales
de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada
propuesta y lo llamaron CSS (Cascading Style Sheets).
A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1". A
principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo
de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS. El 12 de Mayo de
1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como "CSS
nivel 2" cuya mejora continua hasta el 2009 con CSS 2.1 pero paralelamente se va desarrolando la
recomendación CSS3 desde 1998 hasta que es estandarizada en el 2012.
El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que
utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el soporte
de CSS en cada uno de los navegadores más utilizados del mercado.
Internamente los navegadores están divididos en varios componentes. La parte del navegador que se
encarga de interpretar el código HTML y CSS para mostrar las páginas se denomina motor. Desde el
punto de vista del diseñador CSS, la versión de un motor es mucho más importante que la versión
del propio navegador. Ka recomendación mas adecuada es probar nustra pagina y estilos en los
distintos navegadores.
Instituto de Diseño Publicitario

2
Diseño Web
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML
especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una
página HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la página</font></h1>
<p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el
tipo y el tamaño de letra de cada elemento de la página.
El problema de utilizar este método para definir el aspecto de los elementos se puede ver claramente
con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50
etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir
500.000 etiquetas <font>. Como cada etiqueta <font> tiene tres atributos, habría que definir 1.5
millones de atributos.
La solución que propone CSS es mucho mejor, permite separar los

contenidos de la página y la información sobre su aspecto. Utilizando
CSS, se pueden establecer los mismos estilos con menos esfuerzo y
sin ensuciar el código HTML de los contenidos con etiquetas <font>.
Como se verá más adelante, la etiqueta <style> crea una zona
especial donde se incluyen todas las reglas CSS que se aplican en la
página.
Sintaxis CSS
Las Reglas de CSS3
Nuestro código CSS3 no es más que una serie de reglas incluidas
en un fichero. La mejor forma de entender una regla es con un
ejemplo:
Selector {
declaracion [propiedad: valor; prop:sdfs; ]
}
Como puedes observar, una regla se compone de un selector y una

declaración que está encerrada entre {} de forma que
con la declaración decimos qué tiene que hacerse y es
el selector el encargado de indicar a qué elemento de
nuestro HTML se le debe aplicar la declaración.
La declaración es un conjunto de líneas separadas por;
(punto y coma) y cada línea (aunque pueden estar
todas seguidas) se compone de una propiedad y un
valor de forma que especificamos qué modificación
visual queremos realizar (propiedad) y en qué
medida (valor).

3
Diseño Web
Componentes del language css
 Selector:
El primer elemento a destacar es el selector de tipo,
que nos va a servir para especificar de una forma
concreta a qué etiquetas de las que componen el
documento, se va a aplicar el estilo.
El selector le dice al navegador web que directiva o
directivas de una paginactienen que someterse al estilo.
En la imagen el selector (h1) se refiere a la directiva
<h1>, que hace que los buscadores web en formato a
todas las etiquetas <h1> usando las direcciones de
formato recogidas en este estilo. Con el amplio margen
de selectores que ofrece CSS y un poco de creatividad se
puede ganar gran cotrol sobre el formato de las páginas.
 Bloque de declaracion:
Una declaración de estilo se va a definir entre
paréntesis y en ella se va a especificar el estilo
que van a tener las etiquetas seleccionadas.
Dentro de una declaración de estilo a su vez,
podemos encontrar dos estructuras o elementos
importantes:
El codigo que sigue al selector incluye todas las
opciones de formato que se puede aplicar al
selector. El bloque comienza con una llave de
apertura ({) y termina con una llave de cierre (}).
 Declaracion:
Entre las llaves de apertura y de cierre de la declaracion, se añade una o más declaraciones o
instrucciones de formato. Cada declaracion tiene dos partes: una propiedad y una valor, y ademas
acaban en un punto y coma.
 Propiedad:
Estas se van a delimitar con si designación por escrito y seguida de dos puntos “:”
A continuación, después de esta propiedad vamos a concretar o especificar los valores asociados a
dicha propiedad. Estos los vamos a concretar en valores entrecomillados y separados por coma si es
que hay más de uno. Por último al final de ellos colocaremos punto y coma “;”.
CSS ofrece un amplio rango de opciones de formato, que se llaman propriedades. Una propriedad es
una palabra que indican un cierto estilo de efecto. La mayoria de las propriedades tienen nombres
sencillos como font-size (tamaño de fuente), margin-top (margin superior), etc.
 Valor: Finalmente se puede expresar la creatividad asignando un valor a una propriedad CSS (como
hacer un fondo azul, por ejemplo). Las diferentes propriedades CSS requieren tipos especificos de
valores: un color (como rojo o #ff0000), una longitud (como 16px, o 5em), o una cclave especifica
(como top, center o bottom)

4
Diseño Web
Los Comentarios
CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que
el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran
por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar
de forma clara los archivos CSS complejos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica
mediante */, tal y como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un
comentario dentro de otro comentario:
/* Este es un
comentario CSS de varias
lineas */
Aunque los navegadores ignoran los comentarios, su contenido se envía junto con el resto de estilos,
por lo que no se debe incluir en ellos ninguna información sensible o confidencial.
La sintaxis de los comentarios CSS es muy diferente a la de los comentarios HTML, por lo que no deben
confundirse:



Cómo incluir CSS en un

documento HTML
Una de las principales características de CSS es su flexibilidad y las
diferentes opciones que ofrece para realizar una misma tarea. De
hecho, existen tres opciones para incluir CSS en un documento
HTML.
Cuando un navegador lee una hoja de estilos, este formatea el
documento de acuerdo a la misma.
Las formas de insertar una hoja de estilos son:
1. Como atributo de estilo (style=) en un elemento HTML

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas
situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.
Este método para incluir estilos CSS en documentos HTML es el mas simple, pero tambien el menos
utilizado, ya que tiene los mismos problemas que la utilización de las antriguas etiquetas como
<font>.
Su uso está dado por el atributo style que se encuentra en casi todas las etiquetas.
En este ejemplo aplicaremos un estilo (color rojo y un margen izquierdo de 30 pixels) a la etiqueta
<p>, la cual determina que todo el contenido de la misma será afectado.

5
Diseño Web
Código Resultado
<p style="color:red; margin-left:30px"> Este párrafo es de color rojo y se
Este párrafo es de color rojo y se encuentra a 30 encuentra a 30 pixels del margen
pixels del margen izquierdo. izquierdo.
</p>
2. Incluir CSS en el mismo documento HTML como etiqueta de estilo

<STYLE>
Los estilos se definen en una zona específica del
propio documento HTML. Se emplea la etiqueta
<style> de HTML y solamente se pueden incluir en la
cabecera del documento (sólo dentro de la sección
<head>).
Este método se emplea cuando se define un número
pequeño de estilos o cuando se quieren incluir estilos
específicos en una determinada página HTML que
completen los estilos que se incluyen por defecto en todas las páginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es
necesario modificar todas las páginas que incluyen el estilo que se va a modificar.
Los ejemplos mostrados en este curso utilizan este método para aplicar CSS al contenido HTML de
las páginas. De esta forma el código de los ejemplos es más conciso y se aprovecha mejor el
espacio.
Las hojas de estilo interna deben usarse cuando una sola página tiene un estilo único.
Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y
</head> ejemplo:
Código Resultado
Código Resultado
<head> Fuentes blancas sobre fondo azul
<title>Ejemplo de estilos CSS en el propio
documento</title>
<style type="text/css">
body {background-color:blue}
p {color:white}
</style>
</head>
<body>
<p>Fuentes blancas sobre fondo azul</p>
</body>
En este ejemplo se muestra que la etiqueta <style> con su atributo type que define una hoja de estilo
por medio del valor text/css.
En este ejemplo podemos observar que le hemos aplicado estilos a los siguientes elementos:
body : define el color de fondo de la página en azul.
p : define todas las fuentes de color blanco.
3. Definir estilos en un archivo externo *.CSS

En este caso, todos los estilos CSS se incluyen en un archivo de
tipo CSS que las páginas HTML enlazan mediante la etiqueta
<link>. Un archivo de tipo CSS no es más que un archivo simple
de texto cuya extensión es .css Se pueden crear todos los
archivos CSS que sean necesarios y cada página HTML puede
enlazar tantos archivos CSS como necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo
CSS externo, se deben seguir los siguientes pasos:

6
Diseño Web
1. Se crea un archivo de texto y se le añade solamente el siguiente contenido:

p { color: black; font-family: Verdana; }
1. Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a que el
archivo tenga extensión .css y no .txt
2. En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:
<!DOCTYPE html>
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
3. Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también
descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los
contenidos de la página.
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:
 rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS)
y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
 type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos
CSS su valor siempre es text/css
 href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa
o absoluta y puede apuntar a un recurso interno o externo al sitio web.
 media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se
explican en detalle los medios CSS y su funcionamiento.
De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia.
La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo
que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio
web.
Con este método, el mantenimiento del sitio web se
simplifica al máximo, ya que un solo cambio en un solo
archivo CSS permite variar de forma instantánea los
estilos de todas las páginas HTML que enlazan ese
archivo.
Esta es la forma ideal para cuando queremos definir
un sitio entero con una misma estructura y estilo.
Para ello definimos todos los estilos en un documento
en común que se utilizará para todas las páginas del
sitio Web.
Con realizar los cambios en ese documento, podemos cambiar el aspecto de todo el sitio Web.
Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la
cabecera del documento.
Ejemplo de un enlace a una hoja de estilo
<head>
<link rel="stylesheet" type="text/css" href="/estilos.css">
</head>
Las hojas de estilo también se pueden crear en un block de notas pero deben llevar la terminación
(.css).

7
Diseño Web
Ejemplo:
Todo este código en un block de notas p {
guardado como estilos.css font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1.5em;
line-height: 1.5;
font-family: Arial, sans-serif;
}
div {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 7px;
}
h1 {
background-color: #FFFFFF;
Aunque generalmente se emplea la background-image: url("imagenes/icono.png");
etiqueta <link> para enlazar los background-repeat: no-repeat;
archivos CSS externos, también se background-position: 10px 5px;
}
puede utilizar la etiqueta <style>. La
forma alternativa de incluir un archivo
CSS externo es:
<!DOCTYPE html>
<html">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
import '/css/estilos.css';
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una
regla especial de tipo import. Las reglas de tipo import siempre preceden a cualquier otra regla CSS
(con la única excepción de la regla charset).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples
o dobles o mediante la palabra reservada url(). De esta forma, las siguientes reglas import son
equivalentes:
import '/css/estilos.css';
import "/css/estilos.css";
import url('/css/estilos.css');
import url("/css/estilos.css");

8
Diseño Web
¿QUÉ TIPO DE CSS USAR?

En la siguiente tabla hacemos un resumen de las características de los distintos tipos de CSS que hemos
visto hasta el momento:
DECLARACIÓN CSS CSS SE APLICA A ARCHIVOS AFECTADOS

En línea Una línea de código. Uno, aquel donde se realiza la
declaración dentro del elemento HTML
con el atributo style
Interna Todos los elementos del archivo en Uno, aquel en cuya cabecera se realiza
los que resulte de aplicación el estilo la declaración con la etiqueta style
Externa Todos los elementos de los archivos Todos los archivos que invoquen el
afectados en que resulte de aplicación archivo css, que se puede linkear a
el estilo cunatas paginas lo necesiten.
¿Cuál de estas formas de aplicar CSS es mejor? ¿Cuál usar?

En primer lugar cabe hacer una reflexión sobre qué forma de aplicar CSS hará nuestros diseñadores web
más fácilmente mantenibles y aptos para ser modificados con poco esfuerzo. Parece claro que es la
declaración externa la que mejor independiza los estilos del contenido y la que menor número de
modificaciones implicará en general. Por ello es la forma de trabajar con CSS a la que debemos
acostumbrarnos. En ocasiones se opta por hacer modificaciones en línea porque se buscan
efectos puntuales que sólo se quieren aplicar en un punto concreto y en ningún otro. En
ocasiones se opta por hacer definiciones CSS internas porque se quiere afectar muy puntualmente a un
archivo html y a ningún otro. Y en otros casos, se usan los
estilos en línea o internos simplemente “por las prisas” o
“por ser lo más rápido”.
A efectos del navegador, una declaración en línea tiene
precedencia sobre una declaración interna, y a su
vez una declaración interna tiene precedencia sobre
una declaración externa. Por tanto podríamos tener
CSS sobreescrito varias veces: la declaración externa
puede ser sobreescrita por la interna, y ésta a su vez por
una en la en línea. El navegador aplicará el orden:
Declaración en línea > Declaración interna > Declaración externa
Podría ocurrir que los estilos que visualicemos en el navegador estén definidos “a trozos” de modo que
parte de lo que se visualiza se debe a las declaraciones CSS externas, parte a las declaraciones CSS
internas y parte a declaraciones en línea. Esto en general será indeseable, ya que hará difícil de
mantener el desarrollo web, no se sabrá con certeza cómo se generan los estilos y el desarrollo puede
terminar convirtiéndose en un caos difícil de mantener. También puede dar lugar a visualizaciones
incorrectas o erróneas.
A modo de resumen y como recomendación: mantén los estilos de forma externa, lo más
ordenadamente posible y sin utilizar redefiniciones internas ni en línea. Usa este tipo de definiciones
(interna o en línea) exclusivamente cuando resulte necesario y comenta adecuadamente el código.

9
Diseño Web
Los Selectores y propiedades

El selector es simplemente el elemento de HTML que está conectado a un estilo CSS en particular. Por
ejemplo, el selector:
Para P (del párrafo html). es P { text-indent: 3em }
Hasta ahora en los ejemplos hemos utilizado exclusivamente los llamados selectores de tipo o de
etiqueta y los selectores descendentes, sin embargo tenemos varios tipos de selectores los más
importantes son:
1. Selector universal
2. Selector de tipo o etiqueta
3. Selector descendente
4. Selector de clase
5. Selector de ID
6. Selector de hijos
7. Selector de atributos
8. Selector ascendente…
Las propiedades CSS son las que nos permiten personalizar los sitios, darles ciertas características
especiales, ajustar cada detalle de una página web. Son las posibilidades de diseño que nos permiten los
navegadores al interpretar este lenguaje de estilos. Estas propiedades las podemos clasificar en:
1. Colores y fondos
2. Textos y fuentes
3. Cajas y bordes
4. Margenes y rellenos
5. Dimensiones y ubicaciones
6. Listas y tablas
7. Efectos
8. Seudo clases y seudo elementos
9. Formatos…
Para definir la lista de valores de las propiedades se sigue un formato que es necesario detallar.
 Si el valor permitido se indica como una sucesión de palabras sin ningún carácter que las separe
(paréntesis, comas, barras, etc.) el valor de la propiedad se debe indicar tal y como se muestra y
con esas palabras en el mismo orden.
 Si el valor permitido se indica como una sucesión de valores separados por una barra el valor de la
propiedad debe tomar uno y sólo uno de los valores indicados. Por ejemplo, la notación
<porcentaje> |<medida> | inherit indica que la propiedad solamente puede tomar como valor
la palabra reservada inherit o un porcentaje o una medida.
 Si el valor permitido se indica como una sucesión de valores separados por una barra doble el valor
de la propiedad puede tomar uno o más valores de los indicados y en cualquier orden. Por ejemplo,
la notación <color> || <estilo> || <medida> indica que la propiedad puede tomar como valor
cualquier combinación de los valores indicados y en cualquier orden. Se podría establecer un color y
un estilo, solamente una medida o una medida y un estilo. Opcionalmente, se pueden utilizar
paréntesis para agrupar diferentes valores. Por último, en cada valor o agrupación de valores se
puede indicar el tipo de valor: opcional, obligatorio, múltiple o restringido.
 El carácter * indica que el valor ocurre cero o más veces; el carácter + indica que el valor ocurre
una o más veces; el carácter ? indica que el valor es opcional y por último, el carácter
{número_1, número_2} indica que el valor ocurre al menos tantas veces como el valor indicado
en número_1 y como máximo tantas veces como el valor indicado en número_2.
Por ejemplo, el valor [<family-name> , ]* indica que el valor de tipo <family_name> seguido por
una coma se puede incluir cero o más veces. El valor <url>? <color> significa que la URL es
opcional y el color obligatorio y en el orden indicado. Por último, el valor [<medida> | thick |
thin] {1,4} indica que se pueden escribir entre 1 y 4 veces un valor que sea o una medida o la
palabra thick o la palabra thin. No obstante, la mejor forma de entender la notación formal para las
propiedades de CSS es observar la definición de cada propiedad y volver a esta sección siempre que
sea necesario.
10
Diseño Web
 Selector universal (*)

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el
relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de
la regla CSS):
*{
margin: 0;
padding: 0;
}
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una
página. No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos
hacks muy utilizados, como se verá más adelante. Es muy poco utilizado, ya que aplicará el estilo a
todas las etiquetas del documento. Sin embargo, es muy interesante a la hora de establecer una serie
de valores básicos (como puede ser el color de la fuente, la familia y tamaño) de forma que se
garantice un estilo uniforme y sea en reglas más concretas dónde se apliquen los estilos específicos.
En el CSS de nuestro proyecto, podríamos utilizar el selector universal en la primera regla declarada,
por lo que en vez de:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub,
sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
Tendríamos:
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
 Propiedad Color
La propiedad color permite especificar el color de un elemento.
Sintaxis: color: #ff00ff;

Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si
Unidades de color
Un valor de color es una palabra clave o una especificación numérica RGB. Existen cinco formas de
plasmar estos valores:
 Un color RGB ó RGBA p.ej. rgb (255, 0, 0)
 Un color hexadecimal p.ej. #FF0000
 Un color HSL ó HSLA p.ej. hsl (0, 100%, 50%)
 Un color designado con nombre (p.ej. red)
 inherit (el color se heredará del elemento padre)
Los ejemplos de arriba especifican el mismo color.
11
Diseño Web
Algunos ejemplos de reglas de color:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las
propiedades background y color.
La tabla de colores
Web safe colors o Colores seguros para web nacen en la realidad de las limitaciones de los primeros
monitores a color y debido a la falta de ancho de banda, la paleta completa de colores en pantalla se
restringía sólo a 8-bits; esto quiere decir que en este entorno cada píxel sólo podía producir 256 colores
diferentes. Puedes verlos en esta página: http://cloford.com/resources/colours/websafe1.htm
Otra lista de colores más amplia y que es soportada por la gran mayoría de navegadores es la
siguiente:
Nombre Color
Color RGB Color
del color Hexadecimal
IndianRed #CD5C5C 205,92,92
LightCoral #F08080 240,128,128
Salmon #FA8072 250,128,114
DarkSalmon #E9967A 233,150,122
LightSalmon #FFA07A 255,160,122
Crimson #DC143C 220,20,60
Red #FF0000 255,0,0
FireBrick #B22222 178,34,34
DarkRed #8B0000 139,0,0
Pink #FFC0CB 255,192,203
LightPink #FFB6C1 255,182,193
HotPink #FF69B4 255,105,180
DeepPink #FF1493 255,20,147
MediumVioletRed #C71585 199,21,133
PaleVioletRed #DB7093 219,112,147
LightSalmon #FFA07A 255,160,122
Coral #FF7F50 255,127,80
Tomato #FF6347 255,99,71
OrangeRed #FF4500 255,69,0
DarkOrange #FF8C00 255,140,0
Orange #FFA500 255,165,0
Gold #FFD700 255,215,0
Yellow #FFFF00 255,255,0
LightYellow #FFFFE0 255,255,224
LemonChiffon #FFFACD 255,250,205
LightGoldenrodYellow #FAFAD2 250,250,210
PapayaWhip #FFEFD5 255,239,213
Moccasin #FFE4B5 255,228,181
PeachPuff #FFDAB9 255,218,185
PaleGoldenrod #EEE8AA 238,232,170
Khaki #F0E68C 240,230,140

12
Diseño Web
DarkKhaki #BDB76B 189,183,107

Lavender #E6E6FA 230,230,250
Thistle #D8BFD8 216,191,216
Plum #DDA0DD 221,160,221
Violet #EE82EE 238,130,238
Orchid #DA70D6 218,112,214
Fuchsia #FF00FF 255,0,255
Magenta #FF00FF 255,0,255
MediumOrchid #BA55D3 186,85,211
MediumPurple #9370DB 147,112,219
BlueViolet #8A2BE2 138,43,226
DarkViolet #9400D3 148,0,211
DarkOrchid #9932CC 153,50,204
DarkMagenta #8B008B 139,0,139
Purple #800080 128,0,128
Indigo #4B0082 75,0,130
SlateBlue #6A5ACD 106,90,205
DarkSlateBlue #483D8B 72,61,139
GreenYellow #ADFF2F 173,255,47
Chartreuse #7FFF00 127,255,0
LawnGreen #7CFC00 124,252,0
Lime #00FF00 0,255,0
LimeGreen #32CD32 50,205,50
PaleGreen #98FB98 152,251,152
LightGreen #90EE90 144,238,144
MediumSpringGreen #00FA9A 0,250,154
SpringGreen #00FF7F 0,255,127
MediumSeaGreen #3CB371 60,179,113
SeaGreen #2E8B57 46,139,87
ForestGreen #228B22 34,139,34
Green #008000 0,128,0
DarkGreen #006400 0,100,00
YellowGreen #9ACD32 154,205,50
OliveDrab #6B8E23 107,142,35
Olive #808000 128,128,0
DarkOliveGreen #556B2F
MediumAquamarine #66CDAA 102,205,170
DarkSeaGreen #8FBC8F 143,188,143
LightSeaGreen #20B2AA 32,178,170
DarkCyan #008B8B 0,139,139
Teal #008080 0,128,128
Aqua #00FFFF 0,255,255
Cyan #00FFFF 0,255,255

13
Diseño Web
LightCyan #E0FFFF 224,255,255

PaleTurquoise #AFEEEE 175,238,238
Aquamarine #7FFFD4 127,255,212
Turquoise #40E0D0 64,224,208
MediumTurquoise #48D1CC 72,209,204
DarkTurquoise #00CED1 0,206,209
CadetBlue #5F9EA0 95,158,160
SteelBlue #4682B4 70,130,180
LightSteelBlue #B0C4DE 176,196,222
PowderBlue #B0E0E6 176,224,230
LightBlue #ADD8E6 173,216,230
SkyBlue #87CEEB 135,206,235
LightSkyBlue #87CEFA 135,206,250
DeepSkyBlue #00BFFF 0,191,255
DodgerBlue #1E90FF 30,144,255
CornflowerBlue #6495ED 100,149,237
MediumSlateBlue #7B68EE 123,104,238
RoyalBlue #4169E1 65,105,225
Blue #0000FF 0,0,255
MediumBlue #0000CD 0,0,205
DarkBlue #00008B 0,0,139
Navy #000080 0,0,128
MidnightBlue #191970 25,25,112
Cornsilk #FFF8DC 255,248,220
BlanchedAlmond #FFEBCD 255,235,205
Bisque #FFE4C4 255,228,196
NavajoWhite #FFDEAD 255,222,173
Wheat #F5DEB3 245,222,179
BurlyWood #DEB887 222,184,135
Tan #D2B48C 210,180,140
RosyBrown #BC8F8F 188,143,143
SandyBrown #F4A460 244,164,96
Goldenrod #DAA520 218,165,32
DarkGoldenrod #B8860B 184,134,11
Peru #CD853F 205,133,63
Chocolate #D2691E 210,105,30
SaddleBrown #8B4513 139,69,19
Sienna #A0522D 160,82,45
Brown #A52A2A 165,42,42
Maroon #800000 128,0,0
White #FFFFFF 255,255,255
Snow #FFFAFA 255,250,250
Honeydew #F0FFF0 240,255,240

14
Diseño Web
MintCream #F5FFFA 245,255,250

Azure #F0FFFF 240,255,255
AliceBlue #F0F8FF 240,248,255
GhostWhite #F8F8FF 248,248,255
WhiteSmoke #F5F5F5 245,245,245
Seashell #FFF5EE 255,245,238
Beige #F5F5DC 245,245,220
OldLace #FDF5E6 253,245,230
FloralWhite #FFFAF0 255,250,240
Ivory #FFFFF0 255,255,240
AntiqueWhite #FAEBD7 250,235,215
Linen #FAF0E6 250,240,230
LavenderBlush #FFF0F5 255,240,245
MistyRose #FFE4E1 255,228,225
Gainsboro #DCDCDC 220,220,220
LightGrey #D3D3D3 211,211,211
Silver #C0C0C0 192,192,192
DarkGray #A9A9A9 169,169,169
Gray #808080 128,128,128
DimGray #696969 105,105,105
LightSlateGray #778899 119,136,153
SlateGray #708090 112,128,144
DarkSlateGray #2F4F4F 47,79,79
Black #000000 0,0,0
 Selector de tipo o etiqueta (b, p, h1, …)

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El
selector de etiqueta se utiliza para aplicar estilos directamenete a las etiquetas HTML. Es lo que hemos
estado realizando constantemente:
etiqueta_html {
propiedad: valor;
}
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los
caracteres < y >) correspondiente a los elementos que se quieren seleccionar.
El siguiente ejemplo selecciona todos los párrafos de la página:
p{
…
}
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores.
En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
15
Diseño Web
}
h3 {
color: #8A8E27;
}
En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector
múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es
que la siguiente regla CSS es equivalente a las tres reglas anteriores:
h1, h2, h3 {
color: #8A8E27;
}
En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en
una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El
siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y
tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:
h1, h2, h3 {
color: #8A8E27;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
 Propiedades background (Fondo)

Establece los fondos de una página o sus elementos y el comportamento que tendran dichos fondos.
Algunos ejemplos de declaraciones de background:
body { background: white url(http://www.htmlhelp.com/foo.gif) }

blockquote { background: #7fffd4 }
p { background: url(../fondos/peon.png) #f0f8ff fixed }
table { background: #0c0 url(hojas.jpg) no-repeat bottom right }
La propiedad background tiene una forma rápida para las propiedades más específicas relacionadas
con background. Un valor no especificado recibirá el valor inicial. Por ejemplo, en las tres primeras
reglas de arriba, la propiedad background-position será establecida a 0% 0%. Mientras que en la
ultima estará abajo a la derecha.
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las
propiedades background y color.
Sintaxis: background: #0c0 url(hojas.jpg) no-repeat bottom right

Valores posibles: <background-color> , <background-image>, <background-
repeat> , <background-attachment> , <background-position>
Valor inicial: No definido
Heredado: No
16
Diseño Web
background-color (Color de fondo)

La propiedad background-color establece el color del fondo de un elemento. Por ejemplo:
body { background-color: white }

h1 { background-color: #000080 }
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre que use background-
color debería especificarse background-image. En la mayoría de casos, background-image:
none es adecuado.
Los autores también pueden usar la foma rápida de la propiedad background, que está mejor
soportada que la propiedad background-color.
Sintaxis: background-color: red;

Valores posibles: colores , transparent , inherit,
Valor inicial: transparent
Heredado: No
p{
/* Para Navegadores que no soportan RGBa mostramos color sólido sin transparencia */
background: rgb(0, 0, 0);
/* Para navegadores que soportan RGBa mostramos el color sólido con un 50% de opacidad */
background: rgba(0, 0, 0, 0.5);
}
background-image (Imagen de fondo)

La propiedad background-image establece la imagen de fondo de un elemento. Por ejemplo:
BODY { background-image: url(/images/foo.gif) }
P { background-image: url(http://www.htmlhelp.com/bg.png) }
Cuando se define una imagen de fondo (background image), también debería definirse un background
color (color de fondo) similar para aquellos que no cargan las imágenes.
soportada que la propiedad background-image.
Sintaxis: background-image: url(/images/foo.gif)

Valores posibles: imágenes | none
Valor inicial: none
Heredado: No
Multiples imágenes de fondo

Una de las novedades más importantes de CSS3 es que podemos poner varias imágenes de fondo en un
mismo elemento empleando background separando éstas por una coma.
Cada una de estas imágenes podrá ser posicionada, repetida y dimensionada. Pudiendo aplicar a éstas
las mismas variaciones que cuando trabajamos con una sola imagen.
De una forma parecida a las capas con Photoshop.
Debemos tener mucho cuidado con los navegadores que no soportan este tipo de background, es muy
recomendable colocar un estilo background antes del de múltiples imágenes. De esta forma si el
navegador no reconoce background para varias imágenes habrá tomado el estilo definido una línea
arriba.
Ademas recuerda que podremos ver el efecto con imágenes con transparencia. La sintaxis para asignar
varios fondos es la siguiente:
div {
/*Para los navegadores que no soportan varias imágenes*/
17
Diseño Web
background:url(azulejo-pequeno.png);
/*En caso de soportar varias imágenes sustituye el estilo por este*/
background: url(foto1.png), url(foto2.png);
}
Como puedes ver, simplemente añadimos una coma al valor dado para incluir uno nuevo.
Si tomásemos dos imágenes como las de arriba y aplicásemos background-image al superponerlas

tienes un nuevo fondo.
Background-repeat (Repetir fondo)

La propiedad background-repeat determina como se repite la background image (imagen de
fondo) especificada. El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-
y repetirá la imagen verticalmente. Por ejemplo:
body { background: white url(candybar.gif);
background-repeat: repeat-x }
En el ejemplo de arriba, la imagen solo será organizada en mosaico horizontal.
soportada que la propiedad background-repeat.
Sintaxis: background-repeat: repeat-y;

Valores posibles: repeat , repeat-x , repeat-y , no-repeat , space , round
Valor inicial: repeat
Heredado: No
El css3 permite los siguientes valores de la propiedad background-repeat:
 space: la imagen se repite en horizontal y vertical, pero se añaden espacios entre las imágenes
para mostrar las imágenes completas y que no se corten en los bordes derecho o inferior.
 round: la imagen se repite en horizontal y vertical, pero las imágenes se deforman para
mostrarlas completas y que no se corten en los bordes derecho e inferior.
body {
background-image: url("circulo.jpg");
background-repeat: repeat;
}
body {
background-repeat: space;
}
body {
background-repeat: round;
}

18
Diseño Web
Background-attachment (Fijación de fondo)

La propiedad background-attachment determina si la background image (imagen de fondo)
especificada se desplazará con el contenido o será fija con respecto al lienzo. Por ejemplo, la línea
siguiente especifica una imagen de fondo fija:
BODY { background: white url(candybar.gif);
background-attachment: fixed }
Los diseñadores también pueden usar la foma rápida de la propiedad background, que está mejor
soportada que la propiedad background-attachment.
Sintaxis: background-attachment: fixed

Valores posibles: scroll , fixed
Valor inicial: scroll
Heredado: No
Background-position (Posición del fondo)

La propiedad background-position da la posición inicial del background image (imagen de
fondo) especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos
reemplazados. (Un elemento reemplazado es aquel del que solo se conocen las dimensiones
intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT,
y OBJECT.)
La forma más sencilla de asignar una ubicación de fondo es con palabras clave:
 Palabras clave horizontales (left, center, right)
 Palabras clave horizontales verticales (top, center, bottom)
También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los
porcentajes son relativos al tamaño del elemento. Aunque se permiten longitudes, no se recomiendan
debido a su inherente debilidad al tratar con diferentes resoluciones de pantalla.
Al usar porcentajes o longitudes, la posición horizontal se especifica primero, seguida de la posición
vertical. Un valor como 20% 65%especifica que la imagen se colocará 20% a la derecha y 65% abajo
del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se
colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento.
Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes
y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo,
porcentajes y longitudes no pueden combinarse con palabras clave.
Las palabras clave son interpretadas como sigue;
 top left = left top = 0% 0%
 top = top center = center top = 50% 0%
 right top = top right = 100% 0%
 left = left center = center left = 0% 50%
 center = center center = 50% 50%
 right = right center = center right = 100% 50%
 bottom left = left bottom = 0% 100%
 bottom = bottom center = center bottom = 50% 100%
 bottom right = right bottom = 100% 100%
Si la imagen de fondo está fija en relación al lienzo, la imagen es colocada en relación al lienzo y no al
elemento.
Los diseñadores también pueden usar la foma rápida de la propiedad background, que está mejor
soportada que la propiedad background-position.
Sintaxis: background-position: 20% 65%

Valores [<porcentaje> | <longitud>] {1,2} | [top | center | bottom] || [left | center |
posibles: right]
Valor inicial: 0% 0%
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No

19
Diseño Web
Utilizando CSS3 podemos colocar múltiples imágenes de fondo con position o clip a un elemento
de html podría ser un div. Antes para conseguir esto teníamos que crear una sola composición con todas
las imágenes o múltiples divs para conseguir este objetivo, con las nuevas y mejoradas propiedades de
background de css3 conseguiremos ajustarlos a la necesidad presentada. Miremos como funciona.
Bueno para entender esto bien, necesitamos conocer la sintaxis.
background-image: url(sol.jpg), url(vaca.png), url(paisaje.jpg);
La declaración de la propiedad es la misma de la anterior versión de css, solo que ahora añadimos
múltiples imágenes a la propiedad background-image y la separamos por medio de comas.
Podemos crear composiciones compuestas por varia imágenes y ubicarlas en diferentes posiciones para
lograr lo deseado. Ejemplo, vamos a ver un paisaje compuesto por 3 imágenes diferentes pero que
vamos a integrar en un solo div utilizando múltiples imágenes de fondos en css3.
<html>
<head>
<style text="text/css">
div{
height:400px;
width: 635px;
background-image: url(sol.png), url(vaca.png), url(paisaje.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Tenemos este resultado:
Las posiciones que asignamos a cada imagen dependerán del orden en que tengamos las imágenes,
desde la primera hasta la última. Podemos abreviar este código de css para aplicar múltiples fondos de
imágenes de la siguiente forma.
div{
background:
url(sol.png) left top no-repeat,
url(vaca.png) right bottom no-repeat,
url(paisaje.jpg) 0 0 no-repeat;

20
Diseño Web
y el resultado será el mismo.
Background-size (tamaño de imágenes de fondo)

Background-size es otra propiedad de CSS3 que viene con el titulo de interesante, por medio de esta
propiedad vamos a poder ajustar o escalar nuestro background o imagen de fondo de nuestro sitio web,
podemos ajustar el ancho y alto, podemos ajustarla y adaptarla a la resolución de la pantalla del
navegador o div contenedor.
Sintaxis: background-size: 200 px 300 px;

Valores posibles: contain, cover, valores numericos y porcentaje
Valor inicial: auto
Heredado: No
La propiedad background-size permite establecer el tamaño de la imagen de fondo.
background-size: 400px 635px;
En al caso anterior estamos aplicando un tamaño de 400px de ancho, y 635px de alto.

El tamaño también lo podemos definir por medio de porcentaje, longitud, cover y contain.
Porcentaje: Establecemos el tamaño de la imagen dependiendo de su del elemento padre. (50%).
Valores numéricos (porcentajes o distancias): el primer valor corresponde al tamaño horizontal y el
segundo al tamaño vertical, la imagen se deforma para ajustarse a esos valores.
Cover: Escala la imagen para el tamaño más pequeño de tal manera que su anchura y su altura puede
caber dentro del área de contenido.
Contain: Escala la imagen al tamaño más grande de tal manera que su anchura y su altura puede caber
dentro del área de contenido
div{
height:400px;
width: 635px;
background:url(foto.jpg) 0 0 no-repeat;
background-size: 50% 400px;
}
El resultado seria el siguiente:
Permite que la propiedad compuesta background defina imágenes de fondo múltiples, simplemente
separando entre comas las referencias a cada imagen.
div {
border: black 2px solid;
background: url("naranja.png") repeat-x bottom, url("azul.png");
}

21
Diseño Web
Proporcionando dimensiones
Utilizando el 100% del tamaño de la imagen vamos a tener la opción de que la imagen se redimensione
y se adapte al navegador o a la caja que contenga la imagen. Veamos:
div {
width:600px;
height:350px;
border: 5px solid hsla(30, 8%, 5%, .5);
background-image:url(foto.png);
/*Tamaño de la imagen 125 x 125*/
}
Como podemos observar la imagen de los azulejos no es múltiplo de

nuestro DIV y los azulejos son cortados en la parte inferior. Pudiendo
ser cortados también en la parte de la derecha.
Para evitar esto que nos ha sucedido, deberíamos emplear
Background-size asignándole dos valores, uno para el ancho y otro
para el alto. No podemos olvidar si queremos mantener las
proporciones en la imagen o ratio dar uno de los dos valores
auto y que se redimensione en función a su otro valor en px. Si
dejamos el segundo valor en blanco el navegador lo interpretará
como auto también.
De esta forma es mucho más sencillo adaptar nuestra imagen al tamaño del background.
div {
width:600px;
height:350px;
background-image:url(azulejo-pequeno.png);
background-size: 50px auto;
}
Como podemos observar la imagen de los azulejos se adaptó

perfectamente a nuestro DIV sin perder las proporciones y sin
que nuestra imagen haya sido cortada por ningún lado.
Como unidad de medida hemos utilizado en esta ocasión px
haciendo referencia al tamaño que queremos para nuestra
imagen de fondo. También podemos emplear tantos por ciento.
Éstos hacen referencia al tamaño del contendor. Lo
entenderemos con este ejemplo.
div {
width:600px;
height:350px;
background-image:url(azulejo-pequeno.png);
/*background-size: 50px auto;*/
background-size: 50% 100%;
}
Obviamente estas variaciones de tamaños pueden hacer que las proporciones o ratio de nuestra
imagen varíen.

22
Diseño Web
background-origin (posición de la imagen de fondo)

Esta propiedad nos permite posicionar el background o imagen de fondo a relación del contenido o area
de la caja contenedora, podemos hacer que sea relativa al padding de la caja por medio de padding-
box, también por medio de el borde de la caja por medio de border-box y también la podemos ubicar
relativamente al contenido de la caja por medio de content-box.
Sintaxis: background-origen: border-box;

Valores posibles: padding-box, border-box, content-box
Valor inicial: auto
Heredado: No
Podríamos decir que el atributo background-origin es una versión mejorada de background-position que
nos permite definir el origen de coordenadas desde el cual posicionamos la imagen.
border-box padding-box content-box.
div{
height:300px;
width: 435px;
background:url(sol.png) 0 0 no-repeat;
background-origin: content-box;
border: 5px solid #777;
padding: 15px;
}
Background-clip (enmascarar borde de fondo)

En ocasiones tendremos bordes con transparencias bajo los cuales no queremos que se muestre el
fondo, aunque la propiedad background-origin tenga el valor border-box. Para estos casos contamos con
el atributo background-clip que "enmascara" nuestro fondo tomando como referencia el borde, el
padding o el contenido. La propiedad background-clip permite definir la zona en la que aparece el fondo
(color o imagen).
Los posibles valores de la propiedad background-clip son:
 border-box: el fondo se extiende hasta el borde (borde incluido)
 padding-box: el fondo se extiende hasta el margen interior (el borde no se incluye)
 content-box: el fondo se limita al contenido (no se incluye ni el margen interior ni el borde)
Sintaxis: background-clip: border;

Valores posibles: Border, padding, content
Valor inicial: auto
Heredado: No

23
Diseño Web
Lo valores pueden ser:

 border. Es el valor por defecto. La imagen no sufre cambios.
 padding. Empieza a enmascarar a partir del inicio padding,
por lo que no se mostrará fondo bajo nuestro borde.
 content. Enmascara a partir del contenido, por lo que no se
muestra fondo en el borde ni en el padding.
Este es un ejemplo de como actúa el atributo con el valor

padding. Aunque el fondo se empieza a aplicar al comienzo del
borde, sólo se mostrará dentro del área de padding y content.
background-clip: padding;
linear-gradient gradacion lineal

Un gradiente lineal es una funcion de background se define a partir
de una línea de gradiente. La imagen se genera creando líneas cuyo
color va cambiando, perpendiculares a la línea de gradiente.
Esta función nos permite generar una imagen con un degradado de
colores con una dirección y colores especificados. Tener en cuenta
que linear-gradient no genera un color de fondo, sino una imagen sin
dimensiones especificadas, que se adaptará automáticamente para
cubrir todo el espacio disponible.
Esta función no es soportada por muchas de las versiones de
navegadores que no son recientes (o bien la soportan con sintaxis
específicas para cada navegador o versión), e incluso en algunos de los recientes todavía es posible que
se considere experimental. Esto obliga a que debamos pensar si conviene hacer uso de prefijos
específicos de navegador. Nosotros trabajaremos aquí sin estos prefijos porque la mayor parte de los
navegadores actuales ya la han introducido como estándar y no requieren de prefijo.
Sintaxis: background: linear-gradient (45deg, #008080, #FFEBCD);

Valores posibles: <to bottom, to top, to right, to left - deg> <colorInicial px %> <colores
intermedios px %> <colorFinall px %>
Valor inicial: no
Se aplica a: Todos los elementos de bloque
Heredado: No
La función se suele invocar normalmente como fondo cuando se usa la propiedad background-image o
cuando se usa la propiedad shortand background (aunque quizás a ti se te ocurran otros usos que
podrías también probar).
div {
background: linear-gradient(to top, black, white);
}
24
Diseño Web
Direccion angular
La especificación de dirección se puede hacer con una unidad angular o usando alguno de los siguientes
valores:
a) to bottom: indica que se comienza con el color inicial arriba (top) y se progresa hasta el color final
abajo (bottom). Equivale a un ángulo de 180deg.
b) to top: indica que se comienza con el color inicial abajo (bottom) y se progresa hasta el color final
arriba (top). Equivale a un ángulo de 0deg.
c) to right: indica que se comienza con el color inicial a la izquierda (left) y se progresa hasta el color
final a la derecha (right). Equivale a un ángulo de 90deg.
d) to left: indica que se comienza con el color inicial a la derecha (right) y se progresa hasta el color
final a la izquierda (left). Equivale a un ángulo de -90deg ó 270deg.
CSS tambien permite la especificación de un ángulo o

inclinación en unidades denominadas unidades angulares. Las
unidades admitidas son grados deg, grados grad, tantos por
uno de circunferencia turn y radianes. Como en CSS las
designaciones de orden siguen la definición top, right, bottom,
left, las unidades angulares consideran que el valor 0 se
corresponde con la vertical (es decir, no se sigue el mismo criterio que en matemáticas donde 0 grados
se corresponden con la horizontal). En la siguiente tabla vemos las unidades angulares y su significado
gráfico.
Visión gráfica Equivalencia Comentarios
Un valor positivo desplaza el ángulo en sentido

90deg = 100grad =
horario. Para linear-gradient 90deg equivale a to
0.25turn ≈ 1.5708rad
right (degradar desde la izquierda hacia la derecha).
180deg = 200grad = Un valor de 180deg para linear-gradient equivale a

0.5turn ≈ 3.1416rad to bottom (degradar desde arriba hacia abajo).
-90deg = -100grad = Un valor negativo desplaza el ángulo en sentido

-0.25turn ≈ - antihorario. -90deg con linear-gradient equivale a to
1.5708rad left (degradar desde la derecha hacia la izquierda)
Un valor 0deg equivale a la posición de partida. Con

0deg = 0grad = 0turn
linear-gradient equivale a to top (degradar desde
= 0rad
abajo hacia arriba).

25
Diseño Web
Paradas de color
Podemos definir tantos colores en nuestros degradados como queramos se puede especificar una lista
de colores separados por comas.
background: linear-gradient( 90deg, red, blue, yellow);
El número de colores puede ser el que se desee. Con esta sintaxis cada color ocupa una fracción del
espacio disponible. En el espacio anterior, se comienza con el rojo que se va degradando hasta
convertirse en azul, luego el azul se va degradando hasta convertirse en rojo y cada color ocupa un
tercio del espacio disponible por ser tres colores. Si fueran 5 colores, cada color ocuparía una quinta
parte del espacio disponible.
Otra posibilidad es especificar puntos de localización (stop points) de los colores, de forma que no se
distribuyan a partes iguales, sino como nosotros especifiquemos. La sintaxis es de tipo:
background: linear-gradient( 90deg, red, blue 20px, yellow);
Signfica que se comienza en el color rojo que se va degradando hasta convertirse en

azul a una distancia de 20px desde el inicio. A partir de esos 20px el azul se va
transformando en amarillo hasta ser completamente amarillo al final del degradado.
Pero ademas podemos definir donde queremos que se posicione el color a lo largo del
eje del degradado tambien por porcentajes, por ejemplo:
background: linear-gradient(top, blue, white 80%, orange);
Los prefijos
Antes de adentrarnos mas en las gradaciones, nos podemos preguntar ¿Qué son los prefijos? Pues
son palabras reservadas que suelen ir detrás de algunas propiedades css3 y que son distintas según
el navegador. Os dejo un listado de prefijos de los principales navegadores:
 -webkit- (Google Chrome y Safari)
 -moz- (Firefox)
 -o- (Opera)
 -ms- (Internet explorer)
Destacar que el uso de prefijos suele aplicarse a propiedades que se encuentran en fase
experimental o que aún no se han convertido en un estándar.
elemento{
background: -webkit-repeating-linear-gradient(#fff, #666 25%);
background: -moz-repeating-linear-gradient(#fff, #666 25%);
background: -o-repeating-linear-gradient(#fff, #666 25%);
background: repeating-linear-gradient(#fff, #666 25%);
}
Radial-gradient gradacion radial

Los degradados radiales se especifican usando la función radial-gradient. La sintaxis es similar a los
degradados lineales, excepto en que se puede especificar la forma final del degradado (circular o

26
Diseño Web
elíptico) así como el tamaño. Por defecto, la forma final es una elipse con las mismas proporciones que
la caja contenedora.
Sintaxis: background: radial-gradient(30% 30%, circle farthest-side, blue 0%, red );

Valores posibles: [<Position> || <angle>,]? [<shape> || <size>,] ) <start-color px %,…,
last-color px %>
Valor inicial: no
Se aplica a: Todos los elementos de bloque
Heredado: No
Los parámetros que podemos indicar en la declaración radial-gradient() es donde realmente radica la
dificultad y a la vez la potencia de este tipo de degradados. No obstante, la mayoría de los parámetros
son opcionales, por lo que podemos hacer degradados radiales bastante simples, que tomarán
parámetros por defecto. En realidad, como veremos, lo único que necesitaremos siempre es definir dos
o más colores para realizar el gradiente de color.
Posición inicial del gradiente circular:

El punto se especifica con una o dos coordenadas, que pueden tener distintas unidades CSS. Si se
omite, se entiende que el degradado tiene que comenzar en el punto central del fondo del elemento.
Puede ser asignado por background-position o el mismo radial-radient.
.fondo-radial {
background-position: center center;
background: radial-gradient(circle, black, white);
}
Forma y/o dimensión:

La forma puede ser circular o elipse, para lo cual especificamos las palabras "circle" o "ellipse". El
tamaño lo expresamos con otra serie de palabras clave, que indican hasta donde debe crecer el círculo o
elipse: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover. Por
ejemplo, closest-side indica que el círculo o elipse debe crecer hasta el lado más cercano. La palabra
farthest-corner indicaría que debe crecer hasta la esquina más lejana. Contain sería lo mismo que decir
closest-side y cover sinónimo de farthest-corner.
 closest-side ( el lado más cercano ): el gradiente se extiende hasta tocar el lado más cercano.
 farthest-side ( el lado más alejado ): el gradiente se extiende hasta tocar el lado más alejado.
 closest-corner ( la esquina más cercana ): el gradiente se extiende hasta tocar la esquina más
cercana.
 farthest-corner ( la esquina más lejana ): el gradiente se extiende hasta tocar la esquina más
lejana.

27
Diseño Web
header {
background: #DBD6D3;
height: 364px;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}
Colores del degradado:

Para acabar, se deben indicar cuantos colores se deseen, separados por comas, con la posibilidad de
indicar las paradas de color que se deseen en px o % similar a gradacion lineal.
La ubicación se puede especificar con un porcentaje de la longitud de la línea o como una longitud
absoluta. Se puede especificar tantas paradas de color como se quiera con el fin de conseguir el efecto
deseado. 0% representaría el punto de partida y 100% el punto final. Sin embargo, se pueden utilizar
los valores fuera de ese rango si es necesario para obtener el efecto deseado.
.fondo-radial {
background: radial-gradient(left bottom, circle farthest-side, #f7ff08 0%, #21ad11 50%, #00a3ef
80%);
}
Repetición de gradientes
La sintaxis es exactamente la misma que ya conocemos de los degradados lineales pero añadimos
repearting:
repeating-linear-gradient ()
repeating-radial-gradient ()
Siendo que en origen podremos colocar, tanto la posición inicial donde comienza el degradado, como el
ángulo que debe formar el gradiente. Luego, los colores, como también vimos, se indican separados por
comas. Sin embargo, ahora, para que realice la repetición, estamos obligados a señalar una parada de
color
Ejemplo de gradacion con repetición y prefijos:
.degradado{
background: -webkit-repeating-linear-gradient(#fff, #666 25%);
background: -moz-repeating-linear-gradient(#fff, #666 25%);
background: -o-repeating-linear-gradient(#fff, #666 25%);
background: repeating-linear-gradient(#fff, #666 25%);

28

Separata Paginas Web CSS 01

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Separata Paginas Web CSS 01

Uploaded by

Copyright:

Available Formats

HOJAS DE ESTILOS

¿Qué es CSS? ¿Para qué se utiliza?

Breve historia de CSS

Instituto de Diseño Publicitario

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

La solución que propone CSS es mucho mejor, permite separar los

Como puedes observar, una regla se compone de un selector y una

Instituto de Diseño Publicitario

Componentes del language css

Instituto de Diseño Publicitario

/* Este es un comentario en CSS */

Cómo incluir CSS en un

1. Como atributo de estilo (style=) en un elemento HTML

Instituto de Diseño Publicitario

2. Incluir CSS en el mismo documento HTML como etiqueta de estilo

3. Definir estilos en un archivo externo *.CSS

Instituto de Diseño Publicitario

1. Se crea un archivo de texto y se le añade solamente el siguiente contenido:

Instituto de Diseño Publicitario

Instituto de Diseño Publicitario

¿QUÉ TIPO DE CSS USAR?

DECLARACIÓN CSS CSS SE APLICA A ARCHIVOS AFECTADOS

¿Cuál de estas formas de aplicar CSS es mejor? ¿Cuál usar?

Declaración en línea > Declaración interna > Declaración externa

Instituto de Diseño Publicitario

Los Selectores y propiedades

Para P (del párrafo html). es P { text-indent: 3em }

 Selector universal (*)

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

Sintaxis: color: #ff00ff;

Algunos ejemplos de reglas de color:

Instituto de Diseño Publicitario

DarkKhaki #BDB76B 189,183,107

Instituto de Diseño Publicitario

LightCyan #E0FFFF 224,255,255

Instituto de Diseño Publicitario

MintCream #F5FFFA 245,255,250

 Selector de tipo o etiqueta (b, p, h1, …)

 Propiedades background (Fondo)

body { background: white url(http://www.htmlhelp.com/foo.gif) }

Sintaxis: background: #0c0 url(hojas.jpg) no-repeat bottom right

background-color (Color de fondo)

body { background-color: white }

Sintaxis: background-color: red;

background-image (Imagen de fondo)

Sintaxis: background-image: url(/images/foo.gif)

Multiples imágenes de fondo

Si tomásemos dos imágenes como las de arriba y aplicásemos background-image al superponerlas

Background-repeat (Repetir fondo)

Sintaxis: background-repeat: repeat-y;

Instituto de Diseño Publicitario

Background-attachment (Fijación de fondo)

Sintaxis: background-attachment: fixed

Background-position (Posición del fondo)

Sintaxis: background-position: 20% 65%

Instituto de Diseño Publicitario

background-image: url(sol.jpg), url(vaca.png), url(paisaje.jpg);

Tenemos este resultado:

Instituto de Diseño Publicitario

y el resultado será el mismo.

Background-size (tamaño de imágenes de fondo)

Sintaxis: background-size: 200 px 300 px;

La propiedad background-size permite establecer el tamaño de la imagen de fondo.