diseño web con css
DESCRIPTION
TRANSCRIPT
Diseño web con CSS
Instituto Superior de Electrónica Gamma
¿Qué es CSS?
Parte I
¿Qué es CSS?
• “Cascading Style Sheets” (Hojas de Estilo en Cascada), separan el contenido del diseño.
• Con este lenguaje, aplicamos reglas de estilo a las distintas etiquetas del documento HTML.
• Una regla de estilo contiene uno o más atributos como: color de fondo, color de texto, posición, márgenes, fuentes de texto, etc.
Ventajas de CSS
• Menor tiempo de desarrollo de las páginas.• Mayor orden de nuestro código.• Menos peso en las páginas.• Mayor flexibilidad en los cambios• Al ser un standard de la W3C, todos los
navegadores lo soportan.• Una misma página puede tener diferentes
presentaciones para diferentes medios (Pantalla, impresión, móviles, etc.)
El proceso de desarrollo con CSS
1. Obtener el documento HTML
2. Crear las reglas de estilo.
3. Adjuntar hoja de estilos al documento.
4. Si se desean hacer cambios en la visualidad (layout) del documento, editar las reglas de estilo CSS.
¿Cómo funciona CSS?
Parte II
Sintaxis básica de CSS
selector {atributo:valor;}
A qué etiqueta o etiquetas HTML se aplicará la propiedad (ej., “body”)
El atributo CSS al que se le desea asignar un valor (ej. , “background-color”)
El valor de la propiedad (ej. “#FF0000 que es el valor para “rojo”)
¿Dónde se escribe el código CSS?
Se pueden escribir en tres lugares:
1.En línea (usando el atributo style)
2.Interno (la etiqueta style)
3.Externo (enlazar a una hoja de estilos)
1. Escribir CSS en línea: el atributo style
• Podemos asignar la propiedad escribiendo directamente en el elemento HTML al que deseamos dar estilo.
<html> <head>
<title>Ejemplo</title> </head> <body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p></body>
</html>
<html> <head>
<title>Ejemplo</title> </head> <body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p></body>
</html>
2. Interno: la etiqueta style
• Podemos insertar una etiqueta style directamente en el documento HTML, dentro de ella incluimos una o varias reglas.
<html><head>
<title>Ejemplo</title><style type="text/css"> body {background-color: #FF0000;} </style> </head>
<body> <p>Esta es una página con fondo rojo</p>
</body> </html>
<html><head>
<title>Ejemplo</title><style type="text/css"> body {background-color: #FF0000;} </style> </head>
<body> <p>Esta es una página con fondo rojo</p>
</body> </html>
3. Externo: enlace a una hoja de estilos
• Una hoja de estilos es un archivo de texto con la extensión .css que se vincula con una etiqueta link dentro del documento HTML.
<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head>
<body> ...
<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head>
<body> ...
3. Externo: ventajas de usar una hoja de estilos externa
• Al usar una hoja externa, podemos usar un único archivo .css que guarde el diseño de todas las páginas de un mismo sitio.
selector {atributo:valor;}selector {atributo:valor;}
Selectores
Parte III
Tipos de selectores
1. Selectores simples
2. Selectores de clase
3. Selectores de ID
Selectores simples
• En este caso, el selector es el nombre del tipo de etiqueta HTML a la que aplicaremos la regla.
body {background-color:#FF0000;}body {background-color:#FF0000;}
h1 { font-color: #000000; font-size: 20px;}
h1 { font-color: #000000; font-size: 20px;}
p { color: red; display: block; background-color: black;}
p { color: red; display: block; background-color: black;}
Selectores de clases
• Una clase es una regla de estilo que se puede aplicar a todas etiquetas que se estimen convenientes.
• Se pueden aplicar varias clases a un mismo elemento HTML• Una clase tiene un nombre definido por el usuario.• En el documento .css, ese nombre se define con un punto• En el documento HTML, ese nombre se referencia con el atributo
HTML “class”.
.miClase { font-color: #000000;}
.miClase { font-color: #000000;} <p class=“miClase”> Hola!!! </p><p class=“miClase”> Hola!!! </p>
<H1 class=“miClase”> Historia de Chile </p><H1 class=“miClase”> Historia de Chile </p>
estilos.css index.html
Selectores de ID
• Una ID es un identificador único asociado a un elemento HTML.
• Un elemento HTML no puede tener más de una ID.
• En el documento .css se definen con un caracter gato (#).
• En el documento HTML se definen con el atributo HTML “id”
#cabeza { border: 1px dotted #0000FF;}
#cabeza { border: 1px dotted #0000FF;}
<div id=“cabeza”> Instituto GAMMA</p><div id=“cabeza”> Instituto GAMMA</p>
estilos.css index.html
Atributos para fuentes
Parte IV
Atributos para fuentes
• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
Atributos para el texto
Parte V
Atributos para el texto
• word-spacing• letter-spacing• text-decoration• vertical-align• text-transform• text-align• text-indent• line-height• text-indent• white-space• display
Color y Background
Parte VI
Color
• El atributo “color” puede declararse:– Por su nombre (ej. red, aqua, black, blue, etc)– Hexadecimal (ej. #FF0000)– RGB (ej. 255,0,0)
Background
• background-color
• background-image
• repeat
• background-attachment
• background-position
• background
Listas
Parte VII
Listas
• list-style-type
• list-style-image
• list-style-position
Atributos para cajas
Parte VIII
Estructura de la caja
Posicionamiento CSS
Parte IX
Posicionamiento CSS
• position• left• top• height• width• visibility• z-index• clip• overflow
Float
Parte X
Float
• Cualquier elemento puede flotar en una página. Al asignar “float” a cualquier elemento lo convertimos en una caja, debiéndole asignar una anchura determinada.
• float– right– left– none
• clear– none– left– right– Both
Tablas
Parte XI
Tablas
• Caption– Asignar “caption” en el documento HTML para definir
cuál es el título de la tabla– Caption en CSS
• Celdas vacías– <table style="empty-cells: show;">
• border-collapse<table border="3" style="border-collapse: collapse;">
• border-spacing<table border="3" style="border-collapse:
collapse;border-spacing:0.5em 1em;">• table-layout
Cursores y estilo
Parte XII
Cursores y estilo
• auto• crosshair • default • pointer • move • e-resize • ne-resize • nw-resize • n-resize • se-resize • sw-resize • w-resize • s-resize • text • wait • progress • help
• Ejemplos: http://www.ignside.net/man/css/cursores.php