Taller de Css

Taller
(CSS)

Rafael Castillo Guerrero

Hojas Estilo Cascada (CSS)
o

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/

<2>

o

Deﬁ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.

<3>

o

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>

<4>

o

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”>

pagina web.

<html>
<body>

<5>

o

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”>

pagina web.

<html>
<body>

<6>

o

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” />

<7>

o

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 />
<8>

o

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

<9>

o

XHTML:
1. compact=”compact” 8. ismap=”ismap”
2. checked=”checked” 9. nohref=”nohref ”
3. declare=”declare” 10. noshade=”noshade”
4. readonly=”readonly” 11. nowrap=”nowrap”
5. disabled=”disabled” 12. multiple=”multiple”
6. selected=”selected” 13. noresize=”noresize”
7. defer=”defer”

<10>

o

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

<11>

o

Historia de las CSS
W3C - 1995
CSS1 - 1996
CSS2 - 1998

Como ha sido la incorporación de CSS
en los navegadores...?

<12>

o

Programas
Dreamweaver

GoLive

FrontPage

Block de Notas
Archivo > Guardar Como > tipo > Todos los archivos

<13>

o

Sintaxis en CSS
Selector

Propiedad

Valor

Ejemplo:
selector {
propiedad : valor;
}

<14>

o

Ejemplo:
selector {
propiedad : valor;
}

<15>

o

Comentarios:
/* comentario */
Unidades de Medida:

Tarea, buscar la unidades de
medida que se utilizan en CSS

Tarea, cómo aplicar color en CSS

<16>

o

HTML y CSS:
Integrado en la etiqueta HTML
<h1 style="color: #000;">Titulo</h1>

Integrado en la página HTML
<head>
<style type="text/css">
h1 {color: #000; }
</style>
aquí van más etiquetas

</head>
<17>

o

HTML y CSS:
Integrado desde un archivo externo
<head>
<link rel="stylesheet" href="estilo.css" type="text/css"
media="screen" />

</head>

archivo: estilo.css
h1 {
color: #000;
}

<18>

o

HTML y CSS:
Importado
<head>
<style>

</head>

@import es una propiedad de CSS2

<19>

o

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.

<20>

o

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 entero 420px
resolución de pantalla
mm Milimetro entero 40mm

% Porcentaje entero 15%

pc Pica, equivale a 12 puntos real 4.5pc

<21>

o

CSS, noción de cascada:

- Propiedades del navegador
- Hojas de estilo externa
- Hojas de estilo internas
- Hojas de estilo en línea

<22>

o

CSS, herencia
Es similar a la aplicación en HTML
ejemplo:
<h1> <em> Titulo </em> </h1>

a a es padre del
b estilo b, a y b son
c padres del estilo c.

b es hijo del estilo
a, y c es hijo de
los estilos a y b.

<23>

o

CSS, elementos de caja
La caja, por lo general se le conoce
como:
- Contenedor
- Bloque

margin = margen externo
border = borde
padding = margen interno
contenido

<24>

o


Que dice el consorcio W3C acerca
del uso del elemento CAJA

<25>

o

p{
width:250px;
border: 10px solid #99C;
padding: 15px;
margin: 20px;
background-color:#FF0;
}

<26>

o

CSS, Nociones de Clase
id
#nombre_de_la_clase {
declaración: valor;
o declaraciones: valor;
}
class
.nombre_de_la_clase {
}
<27>

o


<div id=”inicio”>

</div>

#inicio {
}

<28>

o


<p class=”textual”>

</div>

.textual {
}

<29>

o

CSS, div
Indica 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 {
}
<30>

o

CSS, div
Indica 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 {
}

<31>

o

CSS, CookClass
Acá vemos de todo
¿cómo alinear listados de opciones?
ul.menu li {
display: inline;
margin: 0;
}

<32>

o

CSS, CookClass
Acá 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

<33>

o

CSS, aplicaciones especíﬁcas

<34>

o

CSS, textos

Sangría
p{
text-indent: 15px;
}

p{
text-indent: 15%;
}

<35>

o

CSS, textos

Decoración
underline = texto subrayado
blink = texto intermitente
overline = subrayado sobre el texto
line-through = texto tachado
none = elimina todo tipo de formatos
h2 {
text-decoration: underline;
}

<36>

o

CSS, textos

Interlineado
h2 {
line-height: 150%;
}
Alineación horizontal
left, right, center, justify
p{
text-align: left;
}

<37>

o

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

<38>

Taller de Css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (17)

Similar a Taller de Css

Similar a Taller de Css (20)

Último

Último (20)

Taller de Css