Hojas de Estilo

AMPLIAR

¿Que son?

Creación de una Hoja de Estilo


<HTML>



<HEAD>

<TITLE>Ejemplo</TITLE>

</HEAD>



<STYLE TYPE="text/css">

    <!--

    B      { font-size: 12pt; color: green }

    /* Defino H1 y H2 simultaneamente */

    H1, H2 { margin-left: 15pt; color: red }

    -->

</STYLE>



<BODY> </BODY>

</HTML>

Hojas de Estilo en Ficheros Externos


<STYLE TYPE="text/css" SRC="estilo.css"> </STYLE>

<LINK  REL=stylesheet TYPE="text/css" HREF="estilo.css">

Herencia

Clases de Estilo


<STYLE TYPE="text/css">

    H1.rojo { color: red }

</STYLE>



<H1 CLASS="rojo">Ejemplo</H1>


<STYLE TYPE="text/css">

    all.verde { color: green }

</STYLE>



<H1 CLASS="verde">Ejemplo</H1>


<STYLE TYPE="text/css">

    H1.verde { font-style: normal; color: green }

    #cursiva { font-style: italic }

</STYLE>



<H1 ID="cursiva">Ejemplo</H1>

<H1 CLASS="verde" ID="cursiva">Ejemplo</H1>

Estilos en Función del Contexto


<STYLE TYPE="text/css">

    UL B       { color: yellow; font-style: italic }

    DIV P.rojo { color: red }

</STYLE>

Aplicación de Estilo sobre Elementos Individuales


<P STYLE="color: yellow; font-style: italic">


<SPAN STYLE="color: yellow; font-style: italic">

   una palabras

</SPAN>


<DIV STYLE="color: yellow; font-style: italic">

   varios parrafos, listas, etc.

</DIV>

Orden de Aplicación de los Estilos

Estilo de los Enlaces


A:link    {color: yellow}

A:visited {color: blue}

Descripción de Atributos de Estilo

Atributo Descripción Ejemplos
font-size Tamaño del texto en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje sobre el valor por defecto (%). {font-size: 12pt}
{font-size: 5cm}
font-family Nombre de la fuente (times, garamond, arial, helvetica, etc.) o nombre de una familia de fuentes (serif, sans serif, cursive, fantasy, monospace). {font-family: courier}
{font-family: Arial, Helvetica, sans-serif}
{font-family: "Courier New"}
font-weight Espesor de la fuente.
Valores: extra-light, light, demi-light, medium, demi-bold, bold, extra-bold, bolder, lighter, normal o un numero entre 100 y 900
{font-weight: bold}
font-style Estilo de la fuente.
Valores: normal o italic
{font-style: italic}
font La fuente como concatenación de: font-weight, font-style, font-size, font-height, font-family. {font: bold italic 12pt/20pt Times, serif}
line-height Distancia entre la base de las líneas de texto.
En puntos (pt), pulgadas (in), centímetros (cm), pixels (px), porcentaje (%) del valor por defecto, o normal
{line-height: 24pt}
{line-height: 150%}
margin
margin-left
margin-right
margin-top
margin-bottom
Márgen en puntos (pt), pulgadas (in), centímetros (cm), pixels (px), porcentaje (%) o auto. {margin: 1in}
{margin: 1in 2cm 5pt 1cm}
{margin-left: 1in}
{margin-right: -15pt}
{margin-top: 10%}
{margin-bottom: 1cm}
padding
padding-left
padding-right
padding-top
padding-bottom
Márgen en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%). {padding: 1in}
{padding-left: 2cm}
border-top-width
border-bottom-width
border-left-width
border-right-width
border-width
Tamaño del borde, en puntos (pt), pulgadas (in), centímetros (cm) o pixels (px). {border-left-width: 1in}
{border-width: 2cm}
border-style Estilo del borde.
Valores: none, solid, double, inset, outset, groove o ridge.
{border-style: inset}
border-color Color del borde.
Valores: nombre del color o valor RGB
{border-color: blue}
text-decoration Decoración del texto.
Valores: none, underline, blink, italic y line-through
{text-decoration: underline}
text-align Justificación del texto.
Valores: left, center, right, justify.
{text-align: right}
text-indent Indentación primera línea de los párrafos en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%). {text-indent: 0.5in}
text-transform Como mostrar la primera letra del texto.
Valores: none, capitalize, uppercase, lowercase
{text-transform: capitalize}
width Ancho en puntos (pt), pulgadas (in), centímetros (cm), pixels (px), porcentaje (%) o auto. {width: 2cm}
float Alineamiento.
Valores: left, right, none.
{float: left}
clear Desactivación de alineamiento.
Valores: none, left, right, both
{clear: both}
color Color de primer plano del texto.
Valores: nombre del color o valor RGB
{color: blue}
{color: #aa5500}
background Imagen o el color del fondo.
Valores: URL(url), nombre del color o valor RGB.
{background: #33CC00}
{background: URL(lib/nubes.jpg)}
background-color Color del fondo.
Valores: nombre del color o valor RGB.
{background-color: #33CC00}
background-image Imagen del fondo.
Valores: URL(url).
{background-image: URL(lib/nubes.jpg)}
display Tipo de elemento.
Valores: block, inline, list-item, none.
Nota: Los elementos de bloque no responden como inline.
{display: inline}
list-style-type Estilo de los elementos de tipo list-item.
Valores: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
{list-style-type: circle}
white-space Ignorar espacios en blanco y retornos de carro consecutivos.
Valores: normal, pre.
{white-space: pre}

Ejemplo

Sin estilos

Con un estilo

Con otro estilo