taller de css
Post on 13-Jun-2015
1.544 Views
Preview:
TRANSCRIPT
(CSS)
Rafael Castillo Guerrero
Taller
<2>
Hoojas EEstilo Cascada (CSS)
XHTML:
Lenguaje de Etiquetado de Hipertexto Extensible (Extensible HyperText Markup Language). Es una versión más estricta y limpia de HTML que nace ante la limitación de uso de éste con las cada vez más abundantes herramientas basadas en XML. XHTML extiende HTML 4.0 combinando la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir los datos.
http://www.w3c.es/divulgacion/a-z/
<3>
Hoojas EEstilo Cascada (CSS)
Defi nición del Tipo de Documento:
El DOCTYPE informa a los navegadores qué DTD se ha aplicado al crear el marcado del documento, y este DTD a su vez, informa a los navegadores cómo procesar la página.
<4>
Hoojas EEstilo Cascada (CSS)
Defi nición del Tipo de Documento:
Transitional: Es un DTD que añadiéndole los elementos y atributos
en desuso.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Este codigo se escribe antes que la primera etiqueta que abre la
pagina web.
<html>
<body>
<5>
Hoojas EEstilo Cascada (CSS)
Defi nición del Tipo de Documento:
Strict: Este DTD, es el más ajustado al estandard. No puede
contener ni Frames, ni elementos ni atributos en desuso.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Este codigo se escribe antes que la primera etiqueta que abre la
pagina web.
<html>
<body>
<6>
Hoojas EEstilo Cascada (CSS)
Defi nición del Tipo de Documento:
Frameset: Una DTD como la Transitional, pero que permite utilizar
frames.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Este codigo se escribe antes que la primera etiqueta que abre la
pagina web.
<html>
<body>
<7>
Hoojas EEstilo Cascada (CSS)
Defi nición del Tipo de Documento:
El W3C recomienda empezar todos nuestros documentos XHTML con
el siguiente código.
<?xml version=”1.0” encoding=”UTF-8”?>
Éste, sirve para especificar al navegador la codificación de caracteres
y la versión XML que se está utilizando. No obstante no todos los
navegadores interpretan adecuadamente esta etiqueta o código, ante
lo cual se utiliza:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<8>
Hoojas EEstilo Cascada (CSS)
XHTML:
Todos los elementos y atributos en minúscula•
<HTML> --> incorrecto
<html> --> correcto
Todos los valores de atributos entre comillas•
<img src=hola.jpg> --> incorrecto
<img src=”hola.jpg”> --> correcto
Todos los atributos deben tener un valor.•
<input type=”ckeckbox” name=”pais”
value=”España” checked />
<9>
Hoojas EEstilo Cascada (CSS)
XHTML:
Todos los atributos deben tener un valor.•
<input type=”ckeckbox” name=”pais”
value=”España” checked /> --> incorrecto
<input type=”ckeckbox” name=”pais” value=”España”
checked=”checked” /> --> correcto
<10>
Hoojas EEstilo Cascada (CSS)
XHTML:
1. compact=”compact” 2. checked=”checked” 3. declare=”declare” 4. readonly=”readonly” 5. disabled=”disabled” 6. selected=”selected” 7. defer=”defer”
8. ismap=”ismap” 9. nohref=”nohref” 10. noshade=”noshade” 11. nowrap=”nowrap” 12. multiple=”multiple” 13. noresize=”noresize”
<11>
Hoojas EEstilo Cascada (CSS)
XHTML:
Todas las etiquetas deben ir cerradas•
<br />
<hr />
<img src=”” title=”información de la imagen” />
Todas las etiquetas correctamente anidadas•
<h1> <em> Titulo </em> </h1>
Es necesaria la declaración de tipo de documento•
<12>
Hoojas EEstilo Cascada (CSS)
Historia de las CSS
Como ha sido la incorporación de CSS en los navegadores...?
W3C - 1995
CSS1 - 1996
CSS2 - 1998
<13>
Hoojas EEstilo Cascada (CSS)
Programas
Archivo > Guardar Como > tipo > Todos los archivos
Dreamweaver
Block de Notas
GoLive
FrontPage
<14>
Hoojas EEstilo Cascada (CSS)
Sintaxis en CSS
selector {
propiedad : valor;
}
Selector
Ejemplo:
Propiedad
Valor
<15>
Hoojas EEstilo Cascada (CSS)
Ejemplo:
selector {
propiedad : valor;
}
<16>
Hoojas EEstilo Cascada (CSS)
Comentarios:
Unidades de Medida:
/* comentario */
Tarea, buscar la unidades de medida que se utilizan en CSS
Tarea, cómo aplicar color en CSS
<17>
Hoojas EEstilo Cascada (CSS)
HTML y CSS:
Integrado en la etiqueta HTML
Integrado en la página HTML
<h1 style="color: #000;">Titulo</h1>
<head><style type="text/css">h1 {color: #000; }</style>
</head>aquí van más etiquetas
<18>
Hoojas EEstilo Cascada (CSS)
HTML y CSS:
Integrado desde un archivo externo
archivo: estilo.css
<head>
<link rel="stylesheet" href="estilo.css" type="text/css"
media="screen" />
</head>
h1 {color: #000; }
aquí van más etiquetas
aquí van más etiquetas
<19>
Hoojas EEstilo Cascada (CSS)
HTML y CSS:
Importado
@import es una propiedad de CSS2
<head><style><!--@import url(estilo2.css);
-->
</head>
<20>
Hoojas EEstilo Cascada (CSS)
CSS y el color:
- hexadecimal clásica: #FF33CC
- hexadecimal abreviada: #F3C , esto
corresponde a #FF33CC, no puede ser usado
para un color como #83CE4A
- notación decimal: color: rgb(0,0 255)
- notación en porcentaje: rgb(10%,20%,100%)
- palabras color: red, se pueden designar 17
colores básicos.
<21>
Hoojas EEstilo Cascada (CSS)
CSS y las unidades de medida:
unidad Descripción valor ejemplo
cm Centímetro entero 3cm
in Pulgada (inch), equivale a 2,54 cm real 0.1 in
pt Punto, equivale a 1/72 de pulgada entero 48pt
px Pixel. equivale al elemento más pequeño de resolución de pantalla
entero 420px
mm Milimetro entero 40mm
% Porcentaje entero 15%
pc Pica, equivale a 12 puntos real 4.5pc
<22>
Hoojas EEstilo Cascada (CSS)
CSS, noción de cascada:
- Propiedades del navegador
- Hojas de estilo externa
- Hojas de estilo internas
- Hojas de estilo en línea
<23>
Hoojas EEstilo Cascada (CSS)
ab
CSS, herencia
Es similar a la aplicación en HTML
ejemplo:
<h1> <em> Titulo </em> </h1>
c
a es padre del estilo b, a y b son padres del estilo c.
b es hijo del estilo a, y c es hijo de los estilos a y b.
<24>
Hoojas EEstilo Cascada (CSS)
CSS, elementos de cajaLa caja, por lo general se le conoce
como:
- Contenedor
- Bloque
margin = margen externo
padding = margen interno
border = borde
contenido
<25>
Hoojas EEstilo Cascada (CSS)
CSS, elementos de caja
Que dice el consorcio W3C acerca del uso del elemento CAJA
<26>
Hoojas EEstilo Cascada (CSS)
CSS, elementos de caja
p {
width:250px;
border: 10px solid #99C;
padding: 15px;
margin: 20px;
background-color:#FF0;
}
<27>
Hoojas EEstilo Cascada (CSS)
CSS, Nociones de Claseid
#nombre_de_la_clase {
declaración: valor;
o declaraciones: valor;
}
class
.nombre_de_la_clase {
declaración: valor;
o declaraciones: valor;
}
<28>
Hoojas EEstilo Cascada (CSS)
CSS, Nociones de Clase
<div id=”inicio”>
</div>
#inicio {
declaración: valor;
o declaraciones: valor;
}
aquí van más etiquetas
<29>
Hoojas EEstilo Cascada (CSS)
CSS, Nociones de Clase
<p class=”textual”>
</div>
.textual {
declaración: valor;
o declaraciones: valor;
}
aquí van más etiquetas
<30>
Hoojas EEstilo Cascada (CSS)
CSS, divIndica una división en la página, pueden
estar contenidos en otros “div”.
<div id=”cabecera”> -->en la página html
</div>
en la hoja CSS
#cabecera {
declaración: valor;
o declaraciones: valor;
}
aquí van más etiquetas
<31>
Hoojas EEstilo Cascada (CSS)
CSS, divIndica una división en la página, pueden
estar contenidos en otros “div”.
<div id=”cabecera”> -->en la página html
en la hoja CSS
#cabecera {
declaración: valor;
o declaraciones: valor;
}
<32>
Hoojas EEstilo Cascada (CSS)
CSS, CookClassAcá vemos de todo
¿cómo alinear listados de opciones?
ul.menu li {
display: inline;
margin: 0;
}
<33>
Hoojas EEstilo Cascada (CSS)
CSS, CookClassAcá vemos de todo
Librería de layout de Useme
http://useme.cl/labs/layouts/
Little Boxes
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
<34>
Hoojas EEstilo Cascada (CSS)
CSS, aplicaciones específi cas
<35>
Hoojas EEstilo Cascada (CSS)
CSS, textos
Sangría
p {
text-indent: 15px;
}
p {
text-indent: 15%;
}
<36>
Hoojas EEstilo Cascada (CSS)
CSS, textos
Decoraciónunderline = texto subrayadoblink = texto intermitenteoverline = subrayado sobre el textoline-through = texto tachado
none = elimina todo tipo de formatos
h2 {
text-decoration: underline;
}
<37>
Hoojas EEstilo Cascada (CSS)
CSS, textos
Interlineado
h2 {
line-height: 150%;
}
Alineación horizontal
left, right, center, justify
p {
text-align: left;
}
<38>
Hoojas EEstilo Cascada (CSS)
Bibliografía
http://www.estandaresweb.es/
http://www.w3c.es
http://cssbeauty.com
http://useme.cl/labs/layouts/
http://www.w3schools.com/css/css_list.asp
http://www.unmatchedstyle.com/
http://cssvault.com/
http://www.alzado.org/articulo.php?id_art=193
top related