CURSO
DESARROLLO WEB
Tecnologías Virtuales
Estilos para
documentos HTML
Generalidades
Estilos para documentos HTML
Se utiliza para definir la información de
estilo de un documento HTML
Especifica el aspecto visual de los
elementos HTML en un navegador
Cada HTML puede contener varias
etiquetas <style>
Inline Style
Embedded Style
Hoja de estilo cascada CSS - externo
Inline Style
<style> se coloca
dentro del elemento <head>
<head>
<title> Elemento Style </title>
<style type=“text/css”> Requiere un atributo
. llamado “type” que
indica al navegador el
. Definición de estilos
tipo de estilo que se
. para la página
está usando.
</style>
</head>
Inline Style
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>cabecera 1</h1>
<p>párrafo</p>
</body>
</html>
Embedded style
<style> se coloca
dentro la etiqueta
<h1 style="color:green;"> Cabecera</h1>
<p style="color:gray"> Lorem ipsum </p>
No tiene límite Se coloca una
(cantidad) máxima definición para
para inserción cada etiqueta
Embedded style
<html>
<head>
</head>
<body>
<h1 style="color:green;">
Cabecera 1 </h1>
<p style="color:gray"> Lorem
ipsum dolor sit amet. </p>
</body>
</html>
Externo - CSS
HTML CSS Documento CSS con
Elemento “link”, especificaciones de
indica tipo y estilo
ubicación del CSS
<head> h2{
<link color:blue;
rel="stylesheet"
}
type="text/css"
href="css/estilo.css” em{
> color:lightblue;
</head> }
Externo - CSS
HTML CSS
<html> h2{
<head> color:blue;
<link rel="stylesheet"
type="text/css" }
href="css/estilo.css">
</head> em{
color:lightblue;
<body> }
<h1>cabecera
1</h1>
<p>párrafo</p>
</body>
</html>
Estilos para
documento HTML
Propiedades Style
Propiedades Style
Font-family: Fuente Text-align: alineación
Font-style: mayor o menor Background-image: poner
tamaño imágenes detrás de un
Font-weight: peso –negrilla. elemento
Font-size: tamaño de fuente Background-color: color de
fondo del elemento
Color: color del elemento
Line-height: espacio entre
Top: posición respecto a la renglones
parte superior del elemento
Margin: espacio entre bordes
Left: posición respecto a la de elemento y su contenido
parte izquierda del elemento
Border: borde (grosor y tipo)
List-style: visualización de alrededor de un elemento
elementos en lista
Letter-spacing: espacio entre
letras
Propiedades style
Font Size
Family Font-size:14px;
No todas las fuentes body: 14px
son ”fuentes seguras” h2: 17px
font-family: Verdana, h1: 21px p: 14px
Geneva, Arial, Sans-
serif; Font-size: 150%
Body{font-size:14px
H1{font-size: 150%}
Font-size:1.2em
h2{font-size:1.2em}
Propiedades style
Color
Nombre (texto)
16 colores para cualquier navegador, es
posible encontrar 150 extendidos en nuevos
navegadores.
body {
background-color: silver;
}
Propiedades style
Color
RGB (Red Green Blue)
body {
background-color: rgb(80%, 40%, 0%);
}
body {
background-color: rgb(204,102,0);
}
Valores numéricos
entre 0 y 255
Propiedades style
Color
Hexadecimal
Representación de RGB en 3 pares
hexadecimales
body {
background-color:#339999;
}
Valores numéricos
entre 0 y 255
Propiedades style
font-weight text-decoration
Especifica el peso Decora el texto
de la fuente
Propiedades style
Border
Controla el efecto visual del borde
Grosor
Color
Estilo
Border Width
Propiedades style
Border color
border-color: red;
border-color: rgb (100%, 0, 0)
border-color: #ff000;
Propiedades style
Solid
Double
Groove
Ridge
Propiedades style
Outset
Inset
Dotted
Dashed
Hojas de estilo
cascada CSS
Generalidades
Historia CSS
1970 necesidad de definir un mecanismo que permita
aplicar de forma consistente estilos a documentos
electrónicos
Interpretación diferente por falta de estándares
W3C, propone crear un lenguaje de hojas de estilo
específico para HTML
CHSS (Cascading HTML Style Sheets) 1994 - 1995, realizada por
Håkon Wium Lie
SSP (Stream-based Style Sheet Proposal) propuesto por Bert Bos
Lie y Bos definen un nuevo lenguaje CSS (Cascading Style
Sheets).
1995, W3C publica la primer recomendación oficial “CSS
nivel 1”
1998, segunda recomendación oficial “CSS nivel 2”
2011, “CSS nivel 3” (http://www.w3.org/TR/css3-selectors/ )
Por que usar CSS
Forma parte de las buenas prácticas en
diseño Web
Facilita la lectura del código
Separa el contenido de la presentación
Evita la escritura de cientos de líneas de
código
Permite crear “efectos” visuales
Permite heredar (body : gran papá)
Permite sobrescribir reglas, en cascada (arriba
a abajo)
Incluir un CSS en un HTML
Crear un archivo de texto con la definición
de estilos y guardarlo con la extensión .css
En el HTML enlazar el css mediante la
etiqueta <link>
La etiqueta <link> se coloca dentro de la
etiqueta <head>
Incluir un CSS en un HTML
<link> se coloca
dentro del elemento <head> type: tipo de recurso enlazado
para CSS “text/css”
<head>
<title>Titulo de mi documento</title>
<link rel="stylesheet” type="text/css” href="css/estilo.css”
Media:”screen”>
href: Ubicación relativa o
</head> rel: relación entre el absoluta del archivo
recurso y el HTML,
Medio al que se para CSS “stylesheet”
aplicarán los estilos
Términos de estilos CSS
Regla: cada uno de los estilos que componen un CSS.
Selector: elemento(s) HTML a los que se aplica la regla CSS.
Declaración: especifica el (los) estilos que se aplican a los
elementos
Propiedad: característica que se modifica
Valor: define el nuevo valor de la característica.
Comentarios en CSS
Se utilizan los símbolos de apertura /* y
cierre del comentario */
/* Este es un comentario en CSS */
/* Este es un
comentario CSS de
Varias líneas */
Hojas de estilo
cascada CSS
Selectores
Selectores
Selector universal
Selecciona todos los elementos de la página
*{
margin: 0;
padding: 0;
}
Selectores de tipo o etiqueta
Selecciona todos los elementos con determinada
etiqueta HTML
pueden encadenarse por medio de “,” para
aplicar un mismo estilo a vatios elementos
p{
color: blue;
}
h1, h2, h3{ h1 {font-size: 2em;}
color: #ccc; h2 { font-size: 1.5em; }
font-weight: bold; h3 { font-size: 1.2em; }
font-family: Arial, Helvetica,
sans-serif;
}
Selector descendiente
Selecciona los elementos que se
encuentran dentro de otros elementos
Se encuentran separados entre sí por
espacios en blanco
<p>
... p em {
... color:red
<em>texto1</em> }
...
...
</p>
Selectores de clase
Seleccionan los elementos definidos con la
clase indicada
Campos de un formulario
<body> .destacar {
<p class="destacar">Lorem i…</p> background-color:#cfcfcf;
<p>Nunc sed...</p> }
<p class="destacar"> Class...</p>
</body>
Selector de id
Selecciona el elemento definido con el
identificador dicho
Botón enviar del formulario
<body> #destacado {
<p>Primer párrafo</p> color: red;
<p id="destacado">Segundo párrafo</p> }
<p>Tercer párrafo</p>
</body>
Selectores
Puede restringirse el alcance del selector
combinando con otros selectores
Todos los elementos de tipo "p" con atributo
id="aviso”
p#aviso { ... }
Todos los elementos con atributo id="aviso" que estén
dentro de cualquier elemento de tipo "p”
p #aviso { ... }
Todos los elementos "p" de la página y todos los
elementos con atributo id="aviso" de la página
p, #aviso { ... }
Selectores
Documento HTML que contenga
2 div contenedores
1 párrafo
Enlace
Texto enfatizado
3 párrafos
Span
Enlace
3 Enlaces
2 Texto enfatizado
Selectores
Todos los elementos Los elementos "em"
Font-family: Arial, contenidos en #color-
Helvetica, sans-serif; distinto
Font-size: 12px; background: #FFFFCC;
Todos los párrafos padding: .1em;
color: #555; Todos los elementos "em"
Todos los párrafos de clase "especial”
contenidos en #color- background: #FFCC99;
distinto border: 1px solid
color: #336699; #FF9900;
padding: .1em;
Todos los enlaces
color: #CC3300; Elementos "span"
contenidos en .normal
font-weight: bold;
Selectores
HTML
Etiqueta Div
Div
Define una división o una sección de un
HTML
Se usa para agrupar bloques de
elementos de tal forma que pueda darse
formato con CSS
Por defecto los navegadores colocan un
salto de línea antes y después de un
elemento <div> con CSS
Div
<!doctype html>
<html>
<head>
<title>Etiqueta Div</title>
</head>
<body>
<div style="color:#0000FF">
<h3>cabecera</h3>
<p>párrafo de contenido</p>
</div>
</body>
</html>
HTML
Etiqueta Spam
Spam
Se usa para agrupar elementos en línea en
un documento
No proporciona ningún cambio visual por
sí mismo
Proporciona una forma de agregar un
“gancho” a una parte de un texto o
sección del documento.
Permite una manipulación visual a través
ed CSS o manipulación con JavaScript
Spam
<!DOCTYPE html>
<html>
<body>
<p>Mi gato tiene <span style="color:blue;font-
weight:bold">ojos azules </span> y mi perro
tiene <span style="color:darkolivegreen;font-
weight:bold">ojos verdes</span></p>
</body>
</html>
HTML
Propiedad Float
Propiedad Float
Especifica si una caja o elemento debe
“flotar”
Los elementos posicionados de forma
absoluta ignoran la propiedad float
Valor por defecto: none
Valores
Left
Right
None
inherit
Propiedad Float – Capital
Letter
span{ <body>
float:left; <p>
<span>M</span>aecenas vel
width:0.7em; odio vitae justo mollis
eleifend sed quis sapien.
font-size:400%; Pellentesque habitant
font- morbi tristique senectus
family:algerian,cou et netus et malesuada
fames ac turpis egestas.
rier; Vestibulum luctus magna
Line-height:80%; quis turpis feugiat, et
dictum libero luctus</p>
} </body>
Propiedad Float- Menú
horizontal
ul{ <ul>
float:left; <li><a href="#">Link
one</a></li>
width:100%;
<li><a href="#">Link
padding:0; two</a></li>
margin:0; <li><a href="#">Link
three</a></li>
list-style-type:none;
<li><a href="#">Link
} four</a></li>
a{ </ul>
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
Propiedad Float – Homepage
sin tablas
<div class="container”>
<div class="header">
<h1 class="header">Homepage</h1>
</div>
<div class="menu">
<ul>
<li>
<a href="#">Link one</a>
</li>
<li>
<a href="#">Link two</a>
</li>
</ul>
</div>
Propiedad Float – Homepage
sin tablas
<div class="left”>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse faucibus, massa nec interdum tristique."</p>
<p> William of Ockham (1285-1349)</p>
</div>
<div class="content">
<h2>Lorem ipsum dolor</h2>
<p>Pellentesque ac consectetur erat, rutrum suscipit quam. Nulla
vehicula mi ac nulla lobortis placerat. Fusce mattis porta massa, nec
fringilla urna eleifend in. Sed et magna egestas dolor fringilla luctus
dignissim sed sapien. Aenean facilisis orci in augue consequat viverra.</p>
</div>
<div class="footer">Copyright 2014 by USTA.</div>
</div>
Propiedad Float – Homepage
sin tablas
div.Container { div.left{
width:100%;
float:left;
margin:0px;
border:1px solid gray; width:160px;
Line-height:150%; margin:0;
}
padding:1em;
div.header,div.footer{
padding:0.5em; }
color:white; div.content{
background-color:gray;
margin-left:190px;
clear:left;
} border-left:1px solid
h1.header{
gray;
padding:0; padding:1em;
margin:0;
}
}
Hojas de estilo
cascada CSS
Modelo de cajas
Modelo de cajas
Característica de CSS
Comportamiento de CSS que hace que los
elementos se representen mediante cajas
rectangulares no visibles
Condiciona el diseño de las páginas web
Modelo de cajas
Contenido (content)
Contenido HTML del
elemento
Relleno (padding)
Espacio libre opcional
existente entre el
contenido y el borde.
http://www.hicksdesign.co.uk/boxmodel/
Modelo de cajas
Borde (border)
Línea que encierra
completamente el
contenido y su relleno.
Imagen de fondo
(background image)
Imagen que se
muestra por detrás del
contenido y el espacio
de relleno.
Modelo de cajas
Color de fondo
(background color)
Color que se muestra
por detrás del
contenido y el
espacio de relleno.
Margen (margin)
Separación opcional
existente entre la caja
y el resto de cajas
adyacentes.
Uso del Modelo de Cajas
Uso del Modelo de Cajas
Uso del Modelo de Cajas
Uso del Modelo de Cajas
Hojas de estilo
cascada CSS
Posicionamiento
Posicionamiento
Para cumplir con el modelo de cajas se tiene en
cuenta los siguientes factores:
Propiedades width y height
Tipo de elemento (de bloque o en línea)
Posicionamiento de la caja
Las relaciones entre elementos
Información de ventana, tamaño de imágenes y otros
PROPIEDAD POSITION
Valores static | relative | absolute | fixed | inherit
Se aplica a Todos los elementos
Valor inicial static
Descripción Selecciona el posicionamiento con el que
se mostrará el elemento
Posicionamiento
Posicionamiento normal o estático
Valor por defecto
Sólo se tiene en cuenta si el elemento es de bloque o de línea,
propiedades width y height y su contenido
Distancia se controla con márgenes laterales
Distribución se controla mediante text-align
Si la caja ocupan más espacio del disponible, se muestra en las
líneas inferiores.
http://librosweb.es/img/css/f0502.gif http://librosweb.es/img/css/f0503.gif
Posicionamiento relativo
Posiciona una caja según el posicionamiento
normal y la desplaza respecto de su posición
original.
Se controla con las propiedades top, right,
bottom, left (desplazamiento respecto al borde)
No afecta las cajas adyacentes
http://librosweb.es/img/css/f0504.gif
Posicionamiento absoluto
Posiciona de forma absoluta respecto de su elemento
contenedor y el resto de elementos de la página ignoran la
nueva posición del elemento.
Se indica mediante las propiedades left, right, top, bottom
La posición depende del posicionamiento del elemento
contenedor
http://librosweb.es/img/css/f0516.gif
Posicionamiento fijo
Convierte una caja en un elemento
inamovible, su posición en la pantalla siempre
es la misma independientemente del resto de
elementos y del movimiento del usuario en la
ventana del navegador .
Si la página se visualiza en un medio
paginado (impresoras) la caja posicionada se
repite en todas las páginas
Se usa para encabezados o pies de páginas
disponibles para impresión.
No soportado por IE6 y anteriores
Posicionamiento flotante
Desplaza las cajas todo lo posible hacia la
izquierda o hacia la derecha de la línea en la que
se encuentran.
Cuando se posiciona una caja de forma flotante:
La caja deja de pertenecer al flujo normal de la página,
lo que significa que el resto de cajas ocupan el lugar
dejado por la caja flotante.
La caja flotante se posiciona lo más a la izquierda o lo
más a la derecha posible de la posición en la que se
encontraba originalmente.
Posicionamiento flotante
http://librosweb.es/img/css/f0507.gif
http://librosweb.es/img/css/f0508.gif
Posicionamiento flotante
Si existen otras cajas flotantes, al posicionar de forma
flotante otra caja, se tiene en cuenta el sitio
disponible.
En el siguiente ejemplo se posicionan de forma
flotante hacia la izquierda las tres cajas.
http://librosweb.es/img/css/f0509.gif
Posicionamiento flotante
Si no existe sitio en la línea actual, la caja flotante baja a la
línea inferior hasta que encuentra el sitio necesario para
mostrarse lo más a la izquierda o lo más a la derecha
posible en esa nueva línea.
http://librosweb.es/img/css/f0510.gif
Posicionamiento flotante
El posicionamiento flotante permite
colocar imágenes alrededor de las cuales
fluye texto.
http://librosweb.es/img/css/f0514.gif
Modelo de Cajas y
Posicionamiento
Crear una galería de imágenes similar a la siguiente.
Las imágenes se encuentran enmarcadas
Usar para cada imagen, posicionamiento flotante
Modelo de Cajas y
Posicionamiento
<div id="galeria”> #galeria img {
<img float: left;
src="../imagenes/imagen. margin: 1em;
png" alt="Imagen
generica" /> padding: .5em;
<img border: 1px solid #CCC;
src="../imagenes/imagen. }
png" alt="Imagen
generica" />
.
.
.
</div>
Posicionamiento
Posicionamiento
Hojas de estilo
cascada CSS
Visualización
Visualización
Existen otras propiedades para controlar la
visualización de los elementos
Permiten realizar efectos avanzados y
animaciones
Display
Visibility
Overflow
z-index
Visualización
Display
Controla la visualización
de los elementos
Permite ocultar cualquier
elemento de la página
Se usa junto con javascript
para crear efectos
dinámicos
Oculta completamente un
elemento, al no mostrarse,
los demás elementos se
http://librosweb.es/img/css/f0522.gif
desplazan para ocupar su
lugar
Visualización
Valores display
Inline
Visualiza un elemento
como si fuera un
elemento de línea
Block
Muestra un elemento
como si fuera un
elemento de bloque
None
Oculta un elemento y
hace que
desaparezca de la
http://librosweb.es/img/css/f0523.gif
página
Visualización
Visibility
Controla la visualización de
los elementos
Permite ocultar cualquier
elemento de la página
Se usa junto con javascript
para crear efectos
dinámicos
Hace invisible un elemento
Guarda el espacio del
http://librosweb.es/img/css/f0522.gif
elemento pero no lo
muestra
Valores
visible | hidden | collapse |
inherit
Visualización
Overflow
Controla la forma en la que se visualizan los
contenidos que sobresalen de sus elementos
Valores de Overflow
Visible
El contenido no se corta y sobresale de la zona
Hidden
El contendo sobrante se oculta
Scroll
Agrega barras scroll para visualizar el resto del
contenido
Auto
El comportamiento depende del navegador, crea
scroll si es necesario
Visualización
http://librosweb.es/img/css/f0524.gif
Visualización
z-index
Posiciona tridimensionalmente la caja
contenedora
Se indica a través de un numero entero
Valor mas alto= más cerca del usuario
http://librosweb.es/img/css/f0525.gif
Hojas de Estilo
Cascada CSS
Layout
Layout
Permite realizar diseños que anteriormente
se hacían en tablas en el HTML a través de
CSS
Facilita el mantenimiento de la página
Brinda más accesibilidad
Mejora los tiempos de respuesta de la
página
Layout
Centrar una página horizontalmente
Se debe agrupar todos los contenidos de la
página en un div y asignar márgenes laterales
automáticos
Suele llamarse contenedor o wrapper
http://librosweb.es/img/css/f1206.gif
Layout
Diseño a 2 columnas con cabecera y pie de
página
Float para los elementos posicionados como el menú y
los contenidos
Clear en el pie de página para evitar los solapamientos
ocasionados por los elementos posicionados con float.
http://librosweb.es/img/css/f1208.gif
Layout
<body>
<div>
« Anterior Sigioente »
</div>
</body>
Layout
Diseño a 3 columnas con cabecera y pie
de página
http://librosweb.es/img/css/f1210.gif
Layout
http://librosweb.es/css/capitulo_15/ejercicio_13.html
