SlideShare una empresa de Scribd logo
CSS
BIBLIOGRAF´IA
Taller de XHTML y CSS3
Nivel B´asico - Parte II
Julian Fern´andez Ortiz
Vicepresidente de IEEE Student Branch of Granada
Grado en Ingenier´ıa Electr´onica Industrial
julian.fernandez.es@ieee.org
Rub´en Mart´ın Moreno
Vocal en IEEE Student Branch of Granada
Grado en Estad´ıstica
ruben.martinmoreno.es@ieee.org
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Licencia
Este documento esta realizado
bajo licencia Creative Commons
“Reconocimiento-CompartirIgual 3.0
Espa˜na” .
Fuente: Curso desarrollado por IEEE Student Branch of Granada
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Aplicar estilos localmente
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Aplicar estilos localmente
<body>
...
<p style="color: red">TEXTO</p>
...
</body>
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Establecer una hoja de estilos
dentro del propio documento
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Establecer una hoja de estilos
dentro del propio documento <head>
...
<style type ="text/css">
h1{
font-family: Algerian;
color: #4113db;
font-style: italic ;
text-align: center;
}
</style >
...
</head>
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Vincular una hoja de estilos externa
(RECOMENDADO)
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Vincular una hoja de estilos externa
(RECOMENDADO)
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
...
</head>
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Una hoja de estilos es un archivo de texto que contiene reglas que
determinan como se ver´an los elementos en la web.
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Una hoja de estilos es un archivo de texto que contiene reglas que
determinan como se ver´an los elementos en la web.
Selector
Declaraci´on
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
selector{
propiedad1: valor1;
propiedad2: valor2;
...
}
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
selector{
propiedad1: valor1;
propiedad2: valor2;
...
}
h1{
color: gray;
font-family: "Corsiva Hebrew";
}
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Es posible nombrar elementos para referirlos posteriormente:
Elementos ´Unicos
id="nombre"
Grupo de Elementos
class="nombre"
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Es posible nombrar elementos para referirlos posteriormente:
Elementos ´Unicos
id="nombre"
Grupo de Elementos
class="nombre"
Cada identificador deber ser ´unico
M´as de un elemento puede pertenecer a la misma clase
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Hay varias formas de definir selectores
h1 {color: red;}
em.class {color: red;}
em#id {color: red;}
h1 em {color: red;}
a:link {color: red;}
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Hay varias formas de definir selectores
h1 {color: red;}
em.class {color: red;}
em#id {color: red;}
h1 em {color: red;}
a:link {color: red;}
Normal
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Hay varias formas de definir selectores
h1 {color: red;}
em.class {color: red;}
em#id {color: red;}
h1 em {color: red;}
a:link {color: red;}
Normal
Con clase
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Hay varias formas de definir selectores
h1 {color: red;}
em.class {color: red;}
em#id {color: red;}
h1 em {color: red;}
a:link {color: red;}
Normal
Con clase
Con identificador
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Hay varias formas de definir selectores
h1 {color: red;}
em.class {color: red;}
em#id {color: red;}
h1 em {color: red;}
a:link {color: red;}
Normal
Con clase
Con identificador
Jer´arquicos
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Hay varias formas de definir selectores
h1 {color: red;}
em.class {color: red;}
em#id {color: red;}
h1 em {color: red;}
a:link {color: red;}
Normal
Con clase
Con identificador
Jer´arquicos
Basado en estado
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Para cambiar el estilo de varios selectores a la vez usamos comas:
h1,h2,h3{
color: red;
}
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Para cambiar el estilo de varios selectores a la vez usamos comas:
h1,h2,h3{
color: red;
}
Para cambiar el estilo de todos los selectores usamos *:
*{
color: red;
}
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Para estructurar la p´agina debemos dividirla en secciones l´ogicas
Elementos div
Elementos span
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Estructura
La estructura com´unmente utilizada es:
conteiner o contenedor
header o cabecera
content o contenido
footer o pie
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Estructura
La estructura com´unmente utilizada es:
conteiner o contenedor
header o cabecera
content o contenido
footer o pie
CONSEJO
Esta estructura es la m´as com´un, pero puedes usar la que te
resulte m´as sencilla
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Modelo de Cajas
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Modelo de Cajas
Posicionamiento de una caja:
Est´atico
Absoluto
Fijo
Relativo
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Elementos Flotantes
Un elemento puede “flotar” a la derecha o a la izquierda usando la
propiedad float.
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Estas estructuras se
dividen con
<div>...</div>
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Sistemas m´as comunes
RGB(a)
Hexadecimal
RECUERDA
Tambi´en puedes definir el color
usando su nombre
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Colores RGB y HEX
RGB HEX
0,0,0 #000000
255,0,0 #FF0000
0,255,0 #00FF00
0,0,255 #0000FF
255,255,0 #FFFF00
0,255,255 #00FFFF
255,0,255 #FF00FF
192,192,192 #C0C0C0
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Fondo
Propiedades comunes que se utilizan para personalizar el fondo de
la p´agina:
background-attachement
background-color
background-image
background-position
background-repeat
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Atributos comunes que se utilizan para personalizar el texto:
font-family
font-style
font-variant
font-weight
font-size
text-align
text-decoration
text-indent
text-justify
text-overflow
text-transformation
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tipos de Enlaces
Existen 4 atributos que se utilizan para editar los enlaces:
:link
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tipos de Enlaces
Existen 4 atributos que se utilizan para editar los enlaces:
:link
:visited
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tipos de Enlaces
Existen 4 atributos que se utilizan para editar los enlaces:
:link
:visited
:hover
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tipos de Enlaces
Existen 4 atributos que se utilizan para editar los enlaces:
:link
:visited
:hover
:active
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tipos de Enlaces
Existen 4 atributos que se utilizan para editar los enlaces:
:link
:visited
:hover
:active
:focus
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tipos de Enlaces
Existen 4 atributos que se utilizan para editar los enlaces:
:link
:visited
:hover
:active
:focus
Adem´as se pueden completar con m´as atributos, como por ejemplo
target
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Listas
A la hora de editar una lista tendremos en cuenta de si esta es
ordenada o desordenada
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Listas
A la hora de editar una lista tendremos en cuenta de si esta es
ordenada o desordenada
list-style-type
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Listas
A la hora de editar una lista tendremos en cuenta de si esta es
ordenada o desordenada
list-style-type
list-style-position
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Listas
A la hora de editar una lista tendremos en cuenta de si esta es
ordenada o desordenada
list-style-type
list-style-position
list-style-image
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Cajas - Bordes
Algunos atributos utilizados
border-color
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Cajas - Bordes
Algunos atributos utilizados
border-color
border-style
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Cajas - Bordes
Algunos atributos utilizados
border-color
border-style
border-width
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Cajas - Bordes
Algunos atributos utilizados
border-color
border-style
border-width
border-radius
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Cajas - Bordes
Algunos atributos utilizados
border-color
border-style
border-width
border-radius
RECUERDA
Puedes editar solo un lado del borde
haciendo referencia con el c´odigo
border-top, border-right,
border-bottom o border-left
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tablas
Para editar los bordes de las celdas ya sean pertenecientes a toda
la tabla, los encabezados o al cuerpo de la tabla
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tablas
Para editar los bordes de las celdas ya sean pertenecientes a toda
la tabla, los encabezados o al cuerpo de la tabla
border-collapse
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tablas
Para editar los bordes de las celdas ya sean pertenecientes a toda
la tabla, los encabezados o al cuerpo de la tabla
border-collapse
border-spacing
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tablas
Para editar los bordes de las celdas ya sean pertenecientes a toda
la tabla, los encabezados o al cuerpo de la tabla
border-collapse
border-spacing
caption-side
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Tablas
Para editar los bordes de las celdas ya sean pertenecientes a toda
la tabla, los encabezados o al cuerpo de la tabla
border-collapse
border-spacing
caption-side
empty-cells
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Los estilos CSS nos ayudan a crear efectos din´amicos sin la
utilizaci´on de scripts
Algunos ejemplos son:
Botones
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Los estilos CSS nos ayudan a crear efectos din´amicos sin la
utilizaci´on de scripts
Algunos ejemplos son:
Botones
Men´us desplegables
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Los estilos CSS nos ayudan a crear efectos din´amicos sin la
utilizaci´on de scripts
Algunos ejemplos son:
Botones
Men´us desplegables
Pop-ups
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
Los estilos CSS nos ayudan a crear efectos din´amicos sin la
utilizaci´on de scripts
Algunos ejemplos son:
Botones
Men´us desplegables
Pop-ups
...
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
´Indice
1 CSS
Selectores
Dise˜no
Colores y Fondo
Texto
Enlaces
Listas, Cajas y Tablas
Efectos Din´amicos
2 BIBLIOGRAF´IA
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CSS
BIBLIOGRAF´IA
http://www.w3c.es/estandares/
http://www.w3schools.com/
http://www.javascripter.net/faq/rgbtohex.htm
http://librosweb.es/
Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS

Más contenido relacionado

La actualidad más candente (18)

Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
 
Presentación
PresentaciónPresentación
Presentación
 
Hojas de estilos css
Hojas de estilos cssHojas de estilos css
Hojas de estilos css
 
Presentación
PresentaciónPresentación
Presentación
 
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
Html guia 1
Html guia 1 Html guia 1
Html guia 1
 
Barra de diseño de página de word
Barra  de diseño de página de wordBarra  de diseño de página de word
Barra de diseño de página de word
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
 
Hablando de css
Hablando de cssHablando de css
Hablando de css
 
iconos de word
iconos de wordiconos de word
iconos de word
 
PowerPoint de Diana y Liliana
PowerPoint de Diana y LilianaPowerPoint de Diana y Liliana
PowerPoint de Diana y Liliana
 
Dayanis
DayanisDayanis
Dayanis
 
Curso css
Curso   cssCurso   css
Curso css
 
Diapo03
Diapo03Diapo03
Diapo03
 
Herramientas de WORD
Herramientas de WORD Herramientas de WORD
Herramientas de WORD
 
Trabajo normas apa
Trabajo  normas apaTrabajo  normas apa
Trabajo normas apa
 

Similar a Curso de XHTML y CSS3

Atributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEAtributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLE
MELISSA MORNEO
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
Evelyncita Perea
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
Evelyncita Perea
 
Gestión de las citas con ref works
Gestión de las citas con ref worksGestión de las citas con ref works
Gestión de las citas con ref works
Mercedes Bueno
 
Creacion de paginas web
Creacion de paginas webCreacion de paginas web
Creacion de paginas web
Kevingranado
 

Similar a Curso de XHTML y CSS3 (20)

Presentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdfPresentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdf
 
Taller XHTML y CSS3 - XHTML
Taller XHTML y CSS3 - XHTMLTaller XHTML y CSS3 - XHTML
Taller XHTML y CSS3 - XHTML
 
Atributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEAtributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLE
 
T2 1-css
T2 1-cssT2 1-css
T2 1-css
 
Conociendo mas sobre HTLM
Conociendo mas sobre HTLMConociendo mas sobre HTLM
Conociendo mas sobre HTLM
 
conociendo sobre HTLM
conociendo sobre HTLMconociendo sobre HTLM
conociendo sobre HTLM
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio CarracedoPHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
 
Css intro
Css introCss intro
Css intro
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
TUTORIAL WORD 2007
TUTORIAL WORD 2007TUTORIAL WORD 2007
TUTORIAL WORD 2007
 
HERRAMIENTAS DE WORD 2007
HERRAMIENTAS DE WORD 2007HERRAMIENTAS DE WORD 2007
HERRAMIENTAS DE WORD 2007
 
Capítulo 2 css
Capítulo 2 cssCapítulo 2 css
Capítulo 2 css
 
CSS
CSSCSS
CSS
 
curso html
curso htmlcurso html
curso html
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
 
Gestión de las citas con ref works
Gestión de las citas con ref worksGestión de las citas con ref works
Gestión de las citas con ref works
 
Creacion de paginas web
Creacion de paginas webCreacion de paginas web
Creacion de paginas web
 
html
htmlhtml
html
 

Más de Julián Fernández Ortiz

Más de Julián Fernández Ortiz (14)

DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICODISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
 
Service Level Agreement (SLA)
Service Level Agreement (SLA)Service Level Agreement (SLA)
Service Level Agreement (SLA)
 
Bitcoin - Estado del arte
Bitcoin - Estado del arteBitcoin - Estado del arte
Bitcoin - Estado del arte
 
Nozbe - Análisis a alto nivel.
Nozbe - Análisis a alto nivel.Nozbe - Análisis a alto nivel.
Nozbe - Análisis a alto nivel.
 
Web 2.0, e-travel & e-banking
Web 2.0, e-travel & e-bankingWeb 2.0, e-travel & e-banking
Web 2.0, e-travel & e-banking
 
Análisis de la empresa Seresco S.A.
Análisis de la empresa Seresco S.A.Análisis de la empresa Seresco S.A.
Análisis de la empresa Seresco S.A.
 
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
 
Red zig bee para la monitorización de variables atmosféricas y meteorológicas
Red zig bee para la monitorización de variables atmosféricas y meteorológicasRed zig bee para la monitorización de variables atmosféricas y meteorológicas
Red zig bee para la monitorización de variables atmosféricas y meteorológicas
 
Investigación de mercados inicial basada en la DB E-PRTR
Investigación de mercados inicial basada en la DB E-PRTRInvestigación de mercados inicial basada en la DB E-PRTR
Investigación de mercados inicial basada en la DB E-PRTR
 
Red zigbee para la monitorización de variables atmosféricas y meteorológicas
Red zigbee para la monitorización de variables atmosféricas y meteorológicasRed zigbee para la monitorización de variables atmosféricas y meteorológicas
Red zigbee para la monitorización de variables atmosféricas y meteorológicas
 
OLEDs
OLEDsOLEDs
OLEDs
 
Ética y responsabilidad social en la empresa
Ética y responsabilidad social en la empresaÉtica y responsabilidad social en la empresa
Ética y responsabilidad social en la empresa
 
Cómo despejar una incógnita en el denominador
Cómo despejar una incógnita en el denominadorCómo despejar una incógnita en el denominador
Cómo despejar una incógnita en el denominador
 
Sumary of Person Surveillance Using Visual and Infrared Imagery
Sumary of Person Surveillance Using Visual and Infrared Imagery Sumary of Person Surveillance Using Visual and Infrared Imagery
Sumary of Person Surveillance Using Visual and Infrared Imagery
 

Último (6)

fase 4-Estudio de la geometria analitica[1].pptx
fase 4-Estudio de la geometria analitica[1].pptxfase 4-Estudio de la geometria analitica[1].pptx
fase 4-Estudio de la geometria analitica[1].pptx
 
PLAN LOS ANIMALES MARINOS.pdf con las actividades a realizar día a días, tota...
PLAN LOS ANIMALES MARINOS.pdf con las actividades a realizar día a días, tota...PLAN LOS ANIMALES MARINOS.pdf con las actividades a realizar día a días, tota...
PLAN LOS ANIMALES MARINOS.pdf con las actividades a realizar día a días, tota...
 
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA IINSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
 
PANCREATITIS aguda explicacion anatomia todo
PANCREATITIS aguda explicacion anatomia todoPANCREATITIS aguda explicacion anatomia todo
PANCREATITIS aguda explicacion anatomia todo
 
SliderSHARE ¿que es? y ¿c0mo funciona ?.
SliderSHARE ¿que es? y ¿c0mo funciona ?.SliderSHARE ¿que es? y ¿c0mo funciona ?.
SliderSHARE ¿que es? y ¿c0mo funciona ?.
 
EduLearnIAappde IAparatodosdisponible.pptx
EduLearnIAappde IAparatodosdisponible.pptxEduLearnIAappde IAparatodosdisponible.pptx
EduLearnIAappde IAparatodosdisponible.pptx
 

Curso de XHTML y CSS3