Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
hojas de_estilo_css
1. Hojas de estilo (CSS)
Santiago Molina
Dpto. de Computación
UNAN - León
2. Agenda
• Motivación
• Introducción: ¿Qué es CSS?
• Sintaxis CSS
• Cómo agregar CSS a un doc HTML
• CSS Id y Class
• Estilos con CSS
– Background (fondo), Texto, Fuentes, Enlaces, Listas, Tablas
• CSS box model
– Box model, Border, Outline, Margin, Padding
• CSS Avanzado
– Dimension, Display, Positioning, Floating, Navigation Bar, Images
Sprite
3. La peor forma de crear estilos
<p><font face="Arial">Bienvenido a planeta
Criptón.
¡Usted<b>nunca, <i>nunca, <u>NUNCA</u></i></b
> encontrar&aaacute;<font size="+1"
color="red">mejores precios</font> que los
nuestros!</font></p>
Bienvenido a planeta Criptón. ¡Usted
nunca, nunca, NUNCA encontrará mejores precios
que los nuestros!
4. ¿Qué es CSS?
• CSS: Cascading Style Sheets
• Describe la apariencia, disposición y presentación
de la información en una página Web.
• Describe cómo será mostrada la información y no
lo que será visualizado.
• Los estilos fueron agregados a HTML 4.0 para
resolver un problema
• Puede estar incrustado en un doc HTML o en un
archivo separado (.css).
6. Comentarios CSS
• Los usamos para explicar el código y de ayuda
para recordar lo que hemos hecho.
• Un comentario CSS inicia con /*; y termina
con */
/*Esto es un comentario*/
p{
text-align:center;
/*Esto es otro comentario*/
color:black;
font-family:arial;
}
7. Agregar CSS a doc HTML
• Hay tres formas de hacerlo:
– Hoja de estilo externa
– Hoja de estilo interno
– Estilo “inline”
8. CSS Externo
<head>
<link rel="stylesheet" type="text/css" href=“filename" />
</head>
<head>
<link rel="stylesheet" type="text/css" href=“mystyle.css" />
<link rel="stylesheet" type="text/css"
href="http://www.google.com/uds/css/gsearch.css" />
</head>
• Se pueden enlazar múltiples archivos css
• En caso de conflicto (dos hojas definen un estilo para el mismo
elemento HTML), la propiedad de la última hoja se aplica.
9. CSS Interno
• Utilizado cuando un documento tiene un
único estilo.
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
10. Estilo inline
• No se recomienda, pero puede ser útil:
• Se aplica usando la propiedad style en un
elemento HTML
<p style="color:sienna;margin-left:20px">Este es un párrafo</p>
11. Múltiples estilos en cascada
• ¿Qué estilo será usado cuando haya más de
un estilo especificado para un elemento
HTML?
P
Navegador (default)
R
I
O CSS externo
R
“VIRTUAL – CSS”
I
D CSS interno
A
D Estilo inline
12. Selectores Id y class
• CSS permite especificar tus propios selectores
llamados “id” y “class”.
• El selector “id” se usa para especificar un
estilo para un solo elemento, único.
#para1
{
text-align:center;
color:red;
}
13. Selectores class
• El selector “class” se usa para especificar un
estilo para un grupo de elementos.
– Suele ser usado en varios elementos.
• Esto permite especificar un estilo particular
para cualquier elemento HTML con la misma
clase.
• El selector “class” utiliza el atributo class.
• Es definido con un “.”
15. Propiedades CSS para colores
p{
color: red;
background-color: yellow;
}
• color: color del texto del elemento
• background-color: color detrás del elemento
17. Styling Backgrounds
• Definir efectos de fondo de un elemento
• Propiedades:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
18. background-image
• Especifica una imagen a usar como fondo de
un elemento
• Por defecto, la imagen es repetida para cubrir
el elemento enteramente.
body{
background-image:url('gradient2.png');
}
19. Imagen de fondo: repeat H. o V.
• Algunas imágenes deseamos que se repitan
horizontal o verticalmente.
• Repetir horizontalmente: repeat-x
• Repetir verticalmente: repeat-y
body{
background-image:url('gradient2.png');
background-repeat: repeat-x;
}
20. Imagen de fondo: no-repeat
• En ocasiones queremos que la imagen se
repita una vez:
body{
background-image:url('gradient2.png');
background-repeat: no-repeat;
}
21. Imagen de fondo: attachment
• ¿La imagen estará fija o hará scrolling con el
resto del texto?
– background-attachment: fixed
– background-attachment: scroll
22. Imagen de fondo: posición
• También quisiéramos cambiar la posición de la
imagen para que no estorbe al texto:
body{
background-image:url('gradient2.png');
background-repeat: no-repeat;
background-position:right top;
}
23. Background – shorthand property
• Especificar todas las propiedades en una sola
línea:
body {background:#ffffff url('img_tree.png') no-repeat right top;}
• Se debe seguir el siguiente orden:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
24. Styling text
• Propiedades para cambiar el estilo del texto:
– color
– text-align: alineación del texto dentro de su
elemento.
– text-decoration: decoraciones como subrayado
– text-transform: uppercase, lowercase, capitalize
– text-indent: indentación del texto
26. Text decoration
• Para fijar o quitar decoraciones al texto:
– overline, underline, line-through, blink
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
27. Text transformation
• Para especificar texto en
mayúsculas, minúsculas o capitalizar la
primera letra de cada palabra.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
28. Text indentation
• Para dar sangría a la primera línea del texto
p {text-indent:50px;}
• Más propiedades:
– http://www.w3schools.com/css/css_text.asp
29. Styling Fonts
• CSS Font families: hay dos tipos de nombres
de familia de fuentes:
– Generic family: un grupo de fuentes con aspecto
similar (Serif, Monospace)
– Font family: una familia de fuentes específica
(Times New Roman, Arial)
30. Font-family (propiedad)
• Establecer varios nombres de fuentes.
• Empezar con la fuente que deseamos y
terminar con una familia genérica
p{font-family:"Times New Roman", Times, serif;}
31. Font size
• El valor especificado a la propiedad font-size
puede ser absoluto o relativo:
– Tamaño absoluto:
• Establece el texto al tamaño especificado
• No se permite al usuario cambiar el tamaño del texto en
todos los navegadores
• Útil cuando se conoce el tamaño físico de la salida
– Tamaño relativo:
• Establece tamaño relativo alrededor de los elementos
• Se le permite al usuario cambiar el tamaño del texto en los
navegadores
32. font-size
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
• vague font sizes: xx-small, x-
small, small, medium, large, x-large, xx-large
• relative font sizes: smaller, larger
• percentage font size: 90%, 120%
• unidades: pixels (px), point (pt), m-size (em):
–16px, 16pt, 1.16em
33. font-style y font-weight
• font-style: Usado para especificar texto en itálica
• Valores posibles: normal, italic, oblique
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
• font-weight: Usado para especificar grosor del
texto
• Valores posibles: normal, bold, bolder, 100, etc.
p { font-weight: bold; }
34. Styling links
• Puede atribuírsele un estilo diferente a un
enlace según el estado de éste.
• Hay 4 estados:
– a:link – normal, enlace no visitado
– a:visited – enlace que ha sido visitado
– a:hover – cuando se pasa el ratón encima
– a:active – cuando se da clic en el enlace
35. Styling links [2]
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
• Cuando se crea estilo para diferentes estados
del enlace:
– a:hover DEBE ir después de a:link y a:visited
– a:active DEBE ir después de a:hover
36. Listas
• Con las propiedades para listas podemos
establecer:
– Marcadores para listas ordenadas
– Marcadores para listas desordenadas
– Imagen como marcador de lista
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
37. Listas: list-style-type (propiedad)
Valores para listas desordenadas Valores para listas ordenadas
none: Sin marcador decimal
disc (default) decimal-leading-zero: 01, 02, 03…
circle lower-roman: i, ii, iii, iv, v, vi
square upper-roman: I, II, III, IV, V
lower-alpha: a, b, c, d
upper-alpha: A, B, C, D
lower-greek: alpha, beta, gamma…
40. CSS Box Model
• En CSS el término es usado cuando hablamos
de diseño y disposición.
• Esencialmente es una caja que envuelve a los
elementos HTML y consiste de: márgenes,
bordes, padding y contenido.
41. CSS Box Model
• Margin: no tiene color de fondo y es transparente.
• Border: es afectado por el color de fondo de la caja.
• Padding: área alrededor del contenido. Afectado por el color de
fondo de la caja.
• Content: donde el texto e imágenes aparecen.
42. CSS Box Model: alto y ancho de un
elemento
• Al especificar el ancho (width) y alto (height) de
un elemento, nada más lo hacemos para el área
de contenido.
• Hay que sumar el padding, border y margin para
conocer el ancho total. Ejemplo:
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
Total: 300px
43. CSS Border
• Las propiedades permiten especificar el estilo
y color del borde de un elemento.
• border-style:
dotted, dashed, solid, double, groove, ridge, in
set, outset
• border-width: 10px, thin, medium, thick.
– No funciona si no se establece border-style
• border-color: name, rgb, hex
44. Border: lados individuales
• En CSS es posible especificar diferentes bordes
para los diferentes lados.
p{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
45. border-style: single property
• border-style:dotted solid double dashed;
– top border es dotted
– right border es solid
– bottom border es double
– left border es dashed
• border-style:dotted solid double;
– top border es dotted
– right and left border es solid
– bottom border es double
• border-style:dotted solid;
– top and bottom borders dotted
– right and left borders solid
• border-style:dotted;
– Todos los bordes dotted
46. Margin
• No posee color de fondo, completamente
transparente.
• Los márgenes top, right, bottom y left pueden
ser cambiados independientemente.
• Valores posibles: auto, length (px, pt, em), %
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
47. Margin - Shorthand property
margin:25px 50px 75px 100px;
• top, right, bottom, left
margin:25px 50px 75px;
• top, right y left, bottom
margin:25px 50px;
• top y bottom, right y left
margin:25px;
• todos igual
48. Padding
• Define el espacio entre el borde y contenido
de un elemento.
• Es afectado por el color de fondo del
elemento.
• Valores posibles: %, fixed length(px, pt, em)
p.padding{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
49. Padding - Shorthand property
• padding:25px 50px 75px 100px;
– top, right, bottom, left
• padding:25px 50px 75px;
– top, right y left, bottom
• padding:25px 50px;
– top y bottom, right y left
• padding:25px;
– todos igual
51. Propiedad display
• Establece el tipo de box model con que un
elemento se visualiza.
• Puede ser: none, inline, block, compact,…
• Usarlo poco, porque altera radicalmente el
esquema de la página.
h2 { display: inline;}
52. Propiedad visibility
• Establece si un elemento será mostrado o no
en pantalla.
• El elemento mantiene su espacio, aunque no
sea mostrado.
• Valores: visible (default) o hidden
• Puede usarse para mostrar/ocultar contenido
HTML dinámico en respuesta a eventos.
p.secret { visibility: hidden; }
53. Propiedad position
• Static: posicionamiento por defecto.
– El elemento es siempre posicionado de acuerdo
con el flujo normal de la página.
• Fixed: el elemento es posicionado relativo a la
ventana del navegador. No se mueve si hay
scrolling.
p.pos_fixed{
position:fixed;
top:30px;
right:5px;
}
55. Propiedad z-index
• Overlapping de elementos
– Algunos elementos pueden solaparse cuando se
cambia su flujo normal
– La propiedad z-index especifica el orden de pila
(delante, atrás de) un elemento
img{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
56. Barra de navegación
• Básicamente se requiere de una lista de
enlaces: ul y li
• Remover bullets, margin y padding de ul
• Establecer float:left para <li> y especificar
display:block y width para <a>
58. Sprites
• Una imagen sprite es una colección de
imágenes, todas en un solo archivo.
Cliente Servidor Web
HTTP request (n)
<img .. />
REDUCIR HTTP RRQ <img …/>
<img … />
<img …/>