2. 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
3. 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.
4. 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>
5. 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>
6. 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.
7. 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 }
}
8. 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>
9. 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; }
10. 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.
11. Cajas
Todos los elemento se representa mediante cajas.
Elementos de una caja:
12. 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.
13. 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; }