Taller de Css

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


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>



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>



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>

<6>



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>

<7>



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>


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>


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>


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>


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>


Historia de las CSS

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

W3C - 1995

CSS1 - 1996

CSS2 - 1998

<13>


Programas

Archivo > Guardar Como > tipo > Todos los archivos

Dreamweaver

Block de Notas

GoLive

FrontPage

<14>


Sintaxis en CSS

selector {

propiedad : valor;

}

Selector

Ejemplo:

Propiedad

Valor

<15>


Ejemplo:

selector {

propiedad : valor;

}

<16>


Comentarios:

Unidades de Medida:

/* comentario */

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

Tarea, cómo aplicar color en CSS

<17>


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>


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


<19>


HTML y CSS:

Importado

@import es una propiedad de CSS2

<head><style>

</head>

<20>


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>


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>


CSS, noción de cascada:

- Propiedades del navegador

- Hojas de estilo externa

- Hojas de estilo internas

- Hojas de estilo en línea

<23>


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>


CSS, elementos de cajaLa caja, por lo general se le conoce

como:

- Contenedor

- Bloque

margin = margen externo

padding = margen interno

border = borde

contenido

<25>


CSS, elementos de caja

Que dice el consorcio W3C acerca del uso del elemento CAJA

<26>


CSS, elementos de caja

p {

width:250px;

border: 10px solid #99C;

padding: 15px;

margin: 20px;

background-color:#FF0;

}

<27>


CSS, Nociones de Claseid

#nombre_de_la_clase {

declaración: valor;

o declaraciones: valor;

}

class

.nombre_de_la_clase {



}

<28>


CSS, Nociones de Clase

<div id=”inicio”>

</div>

#inicio {



}


<29>


CSS, Nociones de Clase

<p class=”textual”>

</div>

.textual {



}


<30>


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 {



}


<31>


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 {



}

<32>


CSS, CookClassAcá vemos de todo

¿cómo alinear listados de opciones?

ul.menu li {

display: inline;

margin: 0;

}

<33>


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>


CSS, aplicaciones específi cas

<35>


CSS, textos

Sangría

p {

text-indent: 15px;

}

p {

text-indent: 15%;

}

<36>


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>


CSS, textos

Interlineado

h2 {

line-height: 150%;

}

Alineación horizontal

left, right, center, justify

p {

text-align: left;

}

<38>


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

Taller de Css

Design

Transcript of Taller de Css