Hojas de Estilo
13
Cascading Style Sheets Copyright 2013
-
Upload
montilinux -
Category
Technology
-
view
96 -
download
0
description
Hojas de Estilo
Transcript of 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 valora[class] { color: blue; }//Colo azul dependiendo si su clase se llama externoa[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; }
