Taller de Css
-
Upload
rafael-castillo-guerrero -
Category
Design
-
view
1.544 -
download
1
Transcript of Taller de Css
![Page 1: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/1.jpg)
(CSS)
Rafael Castillo Guerrero
Taller
![Page 2: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/2.jpg)
<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/
![Page 3: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/3.jpg)
<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.
![Page 4: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/4.jpg)
<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>
![Page 5: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/5.jpg)
<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>
![Page 6: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/6.jpg)
<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>
![Page 7: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/7.jpg)
<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” />
![Page 8: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/8.jpg)
<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 />
![Page 9: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/9.jpg)
<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
![Page 10: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/10.jpg)
<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”
![Page 11: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/11.jpg)
<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•
![Page 12: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/12.jpg)
<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
![Page 13: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/13.jpg)
<13>
Hoojas EEstilo Cascada (CSS)
Programas
Archivo > Guardar Como > tipo > Todos los archivos
Dreamweaver
Block de Notas
GoLive
FrontPage
![Page 14: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/14.jpg)
<14>
Hoojas EEstilo Cascada (CSS)
Sintaxis en CSS
selector {
propiedad : valor;
}
Selector
Ejemplo:
Propiedad
Valor
![Page 15: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/15.jpg)
<15>
Hoojas EEstilo Cascada (CSS)
Ejemplo:
selector {
propiedad : valor;
}
![Page 16: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/16.jpg)
<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
![Page 17: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/17.jpg)
<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
![Page 18: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/18.jpg)
<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
![Page 19: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/19.jpg)
<19>
Hoojas EEstilo Cascada (CSS)
HTML y CSS:
Importado
@import es una propiedad de CSS2
<head><style><!--@import url(estilo2.css);
-->
</head>
![Page 20: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/20.jpg)
<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.
![Page 21: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/21.jpg)
<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
![Page 22: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/22.jpg)
<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
![Page 23: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/23.jpg)
<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.
![Page 24: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/24.jpg)
<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
![Page 25: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/25.jpg)
<25>
Hoojas EEstilo Cascada (CSS)
CSS, elementos de caja
Que dice el consorcio W3C acerca del uso del elemento CAJA
![Page 26: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/26.jpg)
<26>
Hoojas EEstilo Cascada (CSS)
CSS, elementos de caja
p {
width:250px;
border: 10px solid #99C;
padding: 15px;
margin: 20px;
background-color:#FF0;
}
![Page 27: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/27.jpg)
<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;
}
![Page 28: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/28.jpg)
<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
![Page 29: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/29.jpg)
<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
![Page 30: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/30.jpg)
<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
![Page 31: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/31.jpg)
<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;
}
![Page 32: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/32.jpg)
<32>
Hoojas EEstilo Cascada (CSS)
CSS, CookClassAcá vemos de todo
¿cómo alinear listados de opciones?
ul.menu li {
display: inline;
margin: 0;
}
![Page 33: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/33.jpg)
<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
![Page 34: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/34.jpg)
<34>
Hoojas EEstilo Cascada (CSS)
CSS, aplicaciones específi cas
![Page 35: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/35.jpg)
<35>
Hoojas EEstilo Cascada (CSS)
CSS, textos
Sangría
p {
text-indent: 15px;
}
p {
text-indent: 15%;
}
![Page 36: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/36.jpg)
<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;
}
![Page 37: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/37.jpg)
<37>
Hoojas EEstilo Cascada (CSS)
CSS, textos
Interlineado
h2 {
line-height: 150%;
}
Alineación horizontal
left, right, center, justify
p {
text-align: left;
}
![Page 38: Taller de Css](https://reader031.fdocuments.mx/reader031/viewer/2022013102/557b4a80d8b42a8c528b4c01/html5/thumbnails/38.jpg)
<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