Css 1

Sesin No.
CSS
Que es CSS???
Es un lenguaje de hojas de estilos creado para controlar la presentacin de los documentos XHTML.
As lo hacan nuestros abuelos

<!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 pgina</font></h1> <p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy largo. </font> </p> </body> </html>
<!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>
As lo hacan nuestros abuelos
< ="red" face="Arial" size="5">Titular de la pgina</font></h1> <p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy largo. </font> </p> </body> </html>
font color
<html> <head> <title>Sin CSS</title> </head> <body> <h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1> <p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy largo.</font></p> </body> </html>
<html> <head> <title>Con CSS</title> <style type="text/css"> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> <body> <h1>Titular de la pgina</h1> <p>Un prrafo de texto no muy largo.</p> </body> </html>
Incluir CSS en un documento XHTML

Primera Forma <html> <head> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un prrafo de texto.</p> </body> </html>
Segunda Forma
archivo.css
p { color: black; font-family: Verdana; }
documento.html
<html> <head> <title>Ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" /> </head> <body> <p>Un prrafo de texto.</p> </body> </html>
Tercera Forma
<html> <head> <title>Ejemplo de estilos CSS en el propio documento</title> </head> <body> <p style="color: black; font-family: Verdana;">Un prrafo de texto.</p> </body> </html>
SINTAXIS
COMENTARIOS
Comentarios CSS /* Este es un comentario en CSS */ /* Este es un comentario CSS de varias Lineas */ 
Comentaios HTML
SELECTORES
Selector Universal *{ margin: 0; padding: 0; } Selector de Etiqueta h1 { color: black; } p{ color: blue; } h1, p { Color: red; }
Ejemplo 1.
Selector Descendiente
div p { color: blue; }
<div> <p>Texto 1</p> <p>Texto 2</p> </div> <p>Texto 3</p>
Selector de Clase .elegido { color: red; } p.elegido { color:red;} .especial{font-size: 15px;} <body> <div class=elegido> <p class="elegido">Texto 1</p> <p class=elegido especial>Texto 2</p> <p>Texto 3</p> </div> </body>
Selector de ID #destacado { color: red; } p#aviso { color: blue; } <p>Primer prrafo</p> <p id="destacado">Segundo prrafo</p> <p>Tercer prrafo</p>
Selector de hijos div > a { color: blue; } <div> <a href="#">Enlace1</a> <p><a href="#">Enlace2</a></p> </div>
Ejemplo 2
Selector de atributos
[nombre_atributo] Selecciona los elementos que tienen establecido el atributo llamado nombre_atributo
[nombre_atributo = valor]
Selecciona los elementos que tienen un valor igual a valor
un atributo llamado nombre_atributo y
a[class] { color: blue; } a[class="externo"] { color: blue; } a[href="http://www.ejemplo.com"] { color: blue; }
Agrupacion de Reglas
h1 { color: red; } ... h1 { font-size: 2em; } ... h1 { font-family: Verdana; } h1 { color: red; font-size: 2em; font-family: Verdana; }
HERENCIA
body { font-family: Arial; color: black; } h1 { font-family: Verdana; } p{ color: red; }
<body> <h1>Tituo 1</h1> <p>Un prrafo.</p> </body>
COLISIONES
Cuanto ms especfico sea un selector, ms importancia tiene su regla asociada. A igual especificidad, se considera la ltima regla indicada.
p { color: red; } p { color: blue; }
p { color: red; } p#especial { color: green; } * { color: blue; }
Unidades de Medida
Relativas em px %
cm mm
body { font-size: 0.9em; } h1 { font-size: 200%; }
Absolutas
in pulgadas centmetros milmetros picas
pt puntos pc
body { margin: 0.5in; }
h1 { line-height: 2cm; } a { font-size: 12pt }
p { word-spacing: 4mm; } span { font-size: 1pc }
COLORES
El metodo mas utilizados para definir colores es el del RGB hexadecimal.
p { color: #4762B0; }
Modelo de Cajas
Ancho
#lateral { width: 200px; } <div id="lateral"> ... </div>
Ancho
#cabecera { height: 60px; } <div id="cabecera"> ... </div>
Margen
Ejemplo
div{margin: .5em .5em .5em 1em;}
Relleno (padding)
body {padding: 1em 2em 3em 4em}
Bordes
div { border-top-width: 10px; border-right-width: 1em; border-bottom-width: 5px; border-left-width: 2px; }
Color div { border-color: #CC0000 blue #00FF00 #CCC; }

Css 1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Css 1

Cargado por

Copyright:

Formatos disponibles

Sesin No.

As lo hacan nuestros abuelos

As lo hacan nuestros abuelos

Incluir CSS en un documento XHTML

div p { color: blue; }

<div> <p>Texto 1</p> <p>Texto 2</p> </div> <p>Texto 3</p>

Selecciona los elementos que tienen un valor igual a valor

un atributo llamado nombre_atributo y

a[class] { color: blue; } a[class="externo"] { color: blue; } a[href="http://www.ejemplo.com"] { color: blue; }

<body> <h1>Tituo 1</h1> <p>Un prrafo.</p> </body>

p { color: red; } p { color: blue; }

p { color: red; } p#especial { color: green; } * { color: blue; }

body { margin: 0.5in; }

h1 { line-height: 2cm; } a { font-size: 12pt }

p { word-spacing: 4mm; } span { font-size: 1pc }

div{margin: .5em .5em .5em 1em;}

body {padding: 1em 2em 3em 4em}

También podría gustarte