Dise帽o web con CSS
Instituto Superior de Electr贸nica Gamma
Parte I
¿Qué es CSS?
¿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.
Parte II
驴C贸mo funciona CSS?
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>
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>
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> ...
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;} Parte III
Selectores
Tipos de selectores
1. Selectores simples 2. Selectores de clase 3. Selectores de ID
Selectores simples â&#x20AC;˘â&#x20AC;Ż
En este caso, el selector es el nombre del tipo de etiqueta HTML a la que aplicaremos la regla. body {background-color:#FF0000;} h1 { font-color: #000000; font-size: 20px; } 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”. estilos.css .miClase { font-color: #000000; }
index.html <H1 class=“miClase”> Historia de Chile </p> <p class=“miClase”> Hola!!! </p>
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”
estilos.css #cabeza { border: 1px dotted #0000FF; }
index.html <div id=“cabeza”> Instituto GAMMA</p>
Parte IV
Atributos para fuentes
Atributos para fuentes
• • • • • •
font-family font-style font-variant font-weight font-size font
Parte V
Atributos para el texto
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
Parte VI
Color y Background
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
Parte VII
Listas
Listas
• list-style-type • list-style-image • list-style-position
Parte VIII
Atributos para cajas
Estructura de la caja
Parte IX
Posicionamiento CSS
Posicionamiento CSS • • • • • • • • •
position left top height width visibility z-index clip overflow
Parte X
Float
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
Parte XI
Tablas
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
Parte XII
Cursores y estilo
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