Hojas de Estilo

Cascading Style Sheets
Copyright 2013

Definicion de CSS
 CSS es un lenguaje de hojas de estilo creado para
controlar el aspecto o presentacion de los
documentos HTML.
 Versiones CSS1 CSS2 CSS3

Incluir CSS en un documento
HTML
 Tres formas de incluir css:
 Incluir css en los elementos HTML
 Incluir css en el mismo documento HTML
 Definir un archivo externo css.

Incluir css en los elementos
HTML
 Esta forma de incluir CSS directamente es utilizado cuando
se quiere aplicar un estilo especifico a un determinado
elemento.
 <p style="color: black; font-family: Verdana;">Un párrafo de
texto.</p>

Incluir css en el documento
HTML
 Se emplea con la etiqueta <style> y solo se la incluye dentro
la cabecera del documento <head>
 Se emplea cuando se quiere incluir estilos especificos en
una determinada pagina.
 Formato:
 <style type="text/css">
 p { color: black;
 font-family: Verdana;
 }
 </style>

Definir archivo css externo
 Los estilos se define en un archivo con extension .css y
luego se lo enlaza con la etiqueta <link>
 <link rel="stylesheet" type="text/css" href=“estilos.css" media="screen" />
 <link>
 rel: indica la relacion entre el recurso enlazado y el documento
 type: indica el tipo de recurso enlazado.
 href: indica la url del archivo css(puede apuntar a un recurso interno o externo
al sitio web).
 media: indica el medio en el que se van a aplicar los estilos.
 Con este metodo el mantenimiento del sitio web se simplifica al
maximo ya que con un cambio en el archivo css, se cambia todas
la paginas que la llaman.

Medios css
 Se pueden definir diferentes estilos para diferente medios:
pantallas,impresoras,moviles,proyectores,etc.
 La regla @media indica el medio al que se aplicaran los
estilos.

@media print {

body { font-size: 10pt }

}

@media screen {

body { font-size: 13px }

}

@media screen,print {

body { line-height: 1.2 }

}

Selectores
 Los selectores indican ‘a quien se va a aplicar el estilo’
Tipo Selector
Universal * {margin:0;padding:0;} A todos
Etiqueta p {color:blue} <p>Texto1</p>
Descendente p span { color: blue } <p>
<span>Texto1</span>
</p>
Clase .miaviso{color : blue} <div class=‘miaviso’>…</div>
Id #destacado{color:blue} <div id=‘destacado’>...</div>
Hijo(Directo de un elemento) p > span{color:blue} <p><span>Texto1</span></p>
<p>
<a href="#">
<span>Texto2</span>
</a>
</p>

Selectores
Adyacentes h2{ color: green; }
h1+h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
<h2>Otro subtítulo</h2>
</body>
Atributo //Color azul independiente de
su valor
a[class] { color: blue; }
//Colo azul dependiendo si su
clase se llama externo
a[class="externo"] { color:
blue; }

Unidades de Medida
 Se utiliza para definir la altura, anchura y margenes de los
elementos.
 Tipos de Unidades:
 Unidades Absolutas

Su valor no depende de una referencia (in,cm,mm,pt
punto 1 pulgada/72=0.35mm,pc picas).
 Unidades Relativas

Su valor esta referenciado respecto a otro valor.
 px pixeles respecto a la resolucion de la pantalla.
 em repecto al tamaño del letra del elemento.
 ex respecto a la altura de la letra x minuscula del tipo y tamaño del letra del
elemento.

Cajas
 Todos los elemento se representa mediante cajas.
 Elementos de una caja:

Cajas
 Elementos de una caja:
 Contenido.- Codigo HTML con texto,imagenes,etc. que se encuentran dentro la caja
 Relleno(padding).-Espacio entre el contenido y el borde.
 Borde(border).- Linea que encierra el contenido y el borde.
 Imagen de fondo(background-image).- Imagen que se muestra detras del contenido.
 Color de fondo(background-color).- Color de fondo que se muestra detras del
contenido e imagen de fondo.
 Margen(margin).- Espacio entre el borde y otros elementos.

Enlaces
 Pseudoclases:
 link.- Es el estilo del enlace en su estado original.
 :visited.- Es el estilo del enlace que ya ha sido visitado.
 :hover.- Es el estilo del enlace mientras se posiciona el puntero del ratón
sobre el enlace
 :active.- Es el estilo del enlace cuando se está pinchando sobre el enlace
(el tiempo durante el que se aplica este estilo es muy breve)
 Ejplo:
 p a:link { color: maroon; text-decoration: none; }
 p a:visited { color: orange; text-decoration: none; font-weight: bold; }
 p a:hover { color: green; text-decoration: underline; font-style:italic; }
 p a:active { color: navy; text-decoration: none; font-variant: small-caps; }


Hojas de Estilo

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (8)

Similar a Hojas de Estilo

Similar a Hojas de Estilo (20)

Último

Último (15)

Hojas de Estilo