xhtml y css

8/9/2019 xhtml y css

1/63

Xhtml y CSS


2/63

En un principio, la Web no era lo ms atractivo Diseado para compartir documentos repletos de contenidos con

hipertexto Elemento table de HTML se utiliza continuamente y se cre con el

objetivo de representar datos tabulares

Los navegadores de los aos 90 no eran compatibles con lasespecificaciones diseadas por el World Wide Web Consortium o W3C(www.w3c.org) y no admitan sus estndares

Se podra eliminar relleno de celdas, el espaciado y el borde lo table ypodramos hacer complejos diseos basados en cuadrculas y hacerms atractivos los sitios.

Por la incompleta compatibilidad de los navegadores con CSS, solo se

poda llenar las pginas cono elementos de marcado. El resultado fue pginas de difcil mantenimiento, costosas de disear,

no compatibles con los navegadores y fatal para el ancho de banda delos usuarios.
http://www.w3c.org/http://www.w3c.org/


3/63

Estructura y presentacin

Aunque HTML es un lenguaje bien estructurado, laspginas evolucionaron hasta convertirse en unaespecie de mezcla de etiquetas.

Con los navegadores incompatibles con las hojasde estilo o cascada todo se haca con grficostransparentes, etiquetas font, tablas anidadas...paracontrolar el diseo de los sitios.

Para quitar el margen de 10px del navegadores se

aplicaban atributos a la etiqueta body marginwidht=0 marginheight=`0`leftmargin=`0`

rightmargin=0


4/63

Anlisis

www.hardvard.edu Diseo correcto y muchas visitas Utilidad interesante

tgh://chrispederick.com/work/web-developer/ https://addons.mozilla.org/es-ES/firefox/addon/60

Tablas con cinco niveles de anidacin Las celdas contienen grficos gif Grficos con atributos onmouseover y onmouseout para controlar los efectos de rollover de los grficos Existen otros dispositivos y otros usuarios con necesidades distintas a simples navegadores grficos de escritorio

Navegadores solo para texto Accesibilidad (etiquetas alt)

Incompleta compatibilidad con CSS, diseos basados en table eran habituales Correcta presentacin en todos los navegadores grficos Alto consumo de ancho de banda Diseos de sitios inaccesibles

Hoy los navegadores son ms compartibles con CSS No es preciso depender del marcado que consume ancho de banda para realizar diseo de un sitio Separar estructura del estilo es la base del diseo Web basado en estndares

Sitios ms ligeros Ms fciles de mantener
http://www.hardvard.edu/http://chrispederick.com/work/web-developer/https://addons.mozilla.org/es-ES/firefox/addon/60https://addons.mozilla.org/es-ES/firefox/addon/60http://chrispederick.com/work/web-developer/http://www.hardvard.edu/


5/63

Marcado

Los atributos de reduccin de margen no aparecen en las especificacionesHTML www.w3.org/MarkUp

Marginwidht y marginheight solo funcionan con Firefox Leftmargin y rightmargin solo con Explorer Tolerancia a errores de los navegadores Si falla etiqueta o no cierre de etiqueta cada navegador tiene su estrategia

de recuperacin Problema porque cada navegador tiene su lgica de recuperacin y ofrece

resultados diferentes Probar entre navegadores

Cdigo incorrecto obliga a dedicar ms tiempo a tareas de programacin y

comprobacin Los nuevos navegadores, recuperan los errores como los actuales?? Solucin : XHTML
http://www.w3.org/MarkUphttp://www.w3.org/MarkUp


6/63

XHTML

XHTML se crea para que los propietarios de sitios cuenten con unaactualizan ms clara entre HTML y una sintaxis de documentos msestricta XML Comienza con declaracin DocType Correcto marcado

Anidacin etiquetas Primero abierto, ultimo cerrado

Cerrar todos los elementos Elementos y atributos en minsculas Marcado con significado

Reducir marcado de las pginas a un mnimo bien estructurado y con sentido

Encabezados H2,h3 cualquier dispositivo sabe que es un encabezado Motor bsqueda Google

Prrafos No usar font, brsino p

listas sin ordenar Sustituir mens de navegacin de tablas por listas sin ordenar


7/63

CSS - Selectores

CSS cuenta con reglas de estilo que el

navegador interpreta y se aplica a todos los

correspondientes elementos del documento

Toda regla CSS se divide en dos partes Selector que indica al navegador qu elementos se

vern afectados por la regla

Y un bloque de declaracin que determina qu

propiedades del elementos se van a modificar

h1 {color:#36C}


8/63

Selectores de tipos

La regla anterior es una selector de tipos queindica al navegador que seleccione todos loselementos de un determinado tipo (h1 delmarcado) y los presente en color azul

Ya nunca volveremos a usar font

#36C Forma abreviada de representar colores

hexadecimales Se puede abreviar tripletas RGB si cada parhexadecimal es idntico

#3366CC se puede #36C


9/63

Selector universal

Mayor alcance

Compara el nombre de todos los tipos deelemento

*{color:#000} Esta regla representa en negro el contenido

de todos los elementos del documento

No se suele utilizar mucho por lo excesivo desu alcance


10/63

Selectores descendentes

Texto con etiquetas de enfasis que se

muestran en cursiva
y aqui empezamos una lista desordenada un elemento otro elemento aqui una lista ordenada con un elemento ordenado
otro elemento


11/63

Selectores descendentes

De forma predeterminada, losnavegadores muestran los elementos emen cursiva

Los ponemos en maysculas Podramos usar una regla de tipos para

em

em {text-transform: uppercase;

}


12/63


13/63

Selectores de clase

Los hojas de estilo se pueden aplicar a cualquieraspecto del marcado

input.text {

border: 15px solid #FF0000;

}

Para utilizar un selector class ms genricospodemos poner solo . Realmente lo que indicas as es *.text


14/63

Selectores id

Mientras que selector class utiliza . el selector id utiliza #

h1#dato {

text-align: right;

}

#dato {

text-align: right;

}

No es necesario h1#dato porque el id es unico por cada pgina

Interesante con descendentes Base de diseos complejos

Permite seleccionar todos los elementos h2 que descienda de un elemento idconcreto


15/63

Id con descendentes

#dato h2 {

text-transform: uppercase;

}

un texto con encabezado h1

otro texto con h1

ahora uno con h2

otro con h2 otro con h1

otro con h2


16/63

Otros selectores

Explorer no admite todos estos otros

selectores


17/63

Selectores secundarios

p {

font-weight: bold;

font-variant: small-caps;

}

body p { font-weight: bold;


}

body>p { font-weight: bold;


}


18/63

Marcado

vamos a hacer varios parrafos

estos estn directamente en body

pero este esta en una div

y este tambin

ya ste est otra vez en body


19/63

Explicacin

El signo > indica que seleccione todos los

elementos p secundarios, no todos los

descendentes

Los parrafos incluidos en div no se venafectados, ya que son secundarios de dicho

elemento, no de body

Sin embargo, los parrafos anteriores y

posteriores a div se vern afectados ya que

ambos comparten body como elemento principal


20/63

Declaraciones mltiples

No tendremos una propiedad entre llaves

cada vez, sino varios grupos

p {

font-weight: bold;

font-variant: small-caps;}


21/63

Agrupar

Se pueden agrupar selectores de

etiquetas, de id.

Pero podramos hacer un ejemplo

interesante


22/63

#contenido {text-indent: 11px;

border: 10px solid #0000FF;

padding:10px;

background-color: #00FFCC;

}

#pie { background-color: #00FFCC;

padding: 10px;

}

#titular {

font-size: 36px;

text-align: center;word-spacing: 15em;

padding: 10px;

}


23/63

Agrupar

#contenido, #pie, #titular{

padding:10px;

}

#contenido, #pie{

background-color: #00FFCC;

}#contenido {

text-indent: 11px;

border: 10px solid #0000FF;

}

#titular {

font-size: 36px;text-align: center;

word-spacing: 15em;

}


24/63

Comentario

Puede no parecer un ahorro excesivo

Ms lneas

Ms reglas

Pero muchas ventajas, mejor cuanto ms

reglas de estilo ms complejas


25/63

Herencia

Al crear reglas CSS es preciso tener en

cuenta que algunas propiedades y sus

valores se heredan de elementos

descendientes P hereda de body

Img hereda del p en donde se incluye

Se podra configurar un rbol dedocumento del marcado


26/63

Documento sin ttulo

esto es un parrafo...que claro est en body

aqui tienes otro parrafo que tambin esta en body

una lista sin ordenar

pero puede dnetro tener varios elementos

una div...pero

con varios parrafos claro...

y ms parrafos fuera....


27/63

Comentarios

Estas reglas se aplican a todos los elementosbody

Entoncesal aplicar las reglas de herencia aldocumento, las propiedades de body se aplican

a todos los elementos incluidos en el cuerpo dedocumento, es decir, a todos los elementos quedesciendan de body

CSS como potente motor de presentacin

Pero pueden darse problemas No todas las propiedades se heredan

Mrgenes relleno


28/63

Reemplazar la herencia

Queremos aplicar al elemento body unas

propiedades

Pero los elementos de la lista con algunas

variaciones


29/63

Documento sin ttulo

parrafo en el body

elemento de una lista


30/63

Comentarios

Como los elementos de lista descienden del

elemento body, la segunda regla rompe la

cadena de herencia y aplica los estilos

declarados a los elementos li Pero como no hemos cambiando el tamao

de fuente para li, siguen heredando el valor

de dicha propiedad de su antecesor, body


31/63

Practica barra de navegacin

Para crear una barra de navegacin se

pueden crear table anidadas con bgcolor

para cada td y as

Para crear una barra de navegacin con

XHTML y CSS comenzamos con un

nuevo marcado


32/63

Marcado en barra navegacin

inicio

historia

productos

Quitar estilo vietas

Hemos creado el marcado con una sencilla listasin ordenar

En principio, quitamos el formato de las vietas

margin: 0px;

padding: 0px;

list-style-type: none;

Barra navegacin horizontal

Aadiendo

Float:left;

No sale??

Solucin

ul#nav, ul#nav li {

float:left;

margin: 0px;padding: 0px;

list-style-type: none;

Comentario

Hemos usado selectores id

Al especificar ul#nav en las reglas podemos aplicar unestilo a la lista de navegacin y a sus elementos conindependencia del resto del marcado de la pgina

Al agrupar las reglas ul#nav y ul#nav li en un selectordelimitado por comas, podemos afectar a su posicinflotante de cada id

La propiedad float vuelve a alinear la lista

Cada elemento se desplaza a la izquierda del anterior,eliminando el apiolado vertical en una lnea horizontal

Sugerencia

El modelo flotante es una potente

construccin de CSS y es la base de

muchos diseos

tgh://www.complexspiral.com/publications/

http://www.complexspiral.com/publications/http://www.complexspiral.com/publications/

Borde y fondo

ul#nav{font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:.8em;

background-color:#CCCCCC;

ul#nav li a{

border:1px solid #FF0000;

display:block;

float:left;

padding:5px;

Comentarios

Estas nuevas reglas se tienen que aadir

a la regla inicial

Prueba a comentar la primera regla

Prueba a comentar algunas propiedades

de estas nuevas reglas.

Podemos ver efectos interesantes..

Comentarios

Se ha aplicado un color de fondo gris directamente alista sin ordenar

Al establecer atributos font de la lista, podemos recurrira la herencia para aplicar una fuente a todos sus

elementos Las anclas se presentan como elementos en lnea y esto

es un problema puesto que todo relleno que apliquemossolo afecta a los bordes horizontales

Para poner pxeles de relleno a ambos lados de losvnculos de navegacin, convertimos los vnculos enelementos de nivel de bloque display:block

Bordes

Los bordes interiores son muy gruesos El borde de cada elementos se aade al de sus

parientesy se duplican

ul#nav li a{border-color:#FF0000;

border-width:1px 1px 1px 0;

border-style:solid;

display:block;

float:left;

padding:5px;

Comentario

Las nuevas extensas declaracionesobtienen el mismo efecto que lasdeclaraciones agrupadas pero el 0 de

border-width indica que ignore el bordeizquierdo

Pero falla el primer elemento

ul#nav li.primero a{border-width:1px;

Cascada

Origen del estilo

Las hojas de estilo pueden proceder de: Agentes de usuario

Hoja de estilo predeterminada a un documento antes de aplicarcualquier otra regla de estilo

Este conjunto interno de reglas CSS establece las reglas de

representacin predeterminadas de todos los elementos HTML H1 con fuente serif

Vieta por delante de ul

Usuario Los usuarios pueden crear CSS a partir de CSS2

Iniciativa de accesibilidad Autor

Nosotros

Las hojas de estilo incluidas en nuestro marcado

Reglas de estilo predeterminadas del

navegador son menos importantes

Que las de usuario, que son menos

importantes

Las reglas especificadas en el servidor del

sitio (autor)

O i d il d

Origen de estilo en cascada

(de menos a ms importante)

Navegador

Usuario

!important autor

!important usuario

Ejemplo !important de autor

font-size: 2em !important;

color: #0000CC !important;}

Ordenar por especificidad

Todo selector cuenta con un valor de

especificidad

Valor cualitativa de su importancia en la

cascada

Selectores id son ms especficos que los

selectores class

A ms especificidad de una regla, mayor influencia Normal, el id solo aparece una vez

Calcular especificidad de selector

Si el selector es el atributo de estilo de unelemento, no un verdadero selector

El numero de atributos id del selector

El numero de otros nombres de atributos ([lang],[rel]) y de pseudoclases (:hover, :visited) delselector. Los selectores de clase (li.active) son un tipo de

selector de atributo

El numero de nombres de elemento (a,li, p) ypseudo-elementos (:before, :after) del selector

Tabla de orden

Selector A B C D Especificidad

a 0 0 0 1 1

h3 a 0 0 0 2 2

ul ol+li 0 0 0 3 3

ul ol li.red 0 0 1 3 13

li.red.level 0 0 2 1 21

#dato 0 1 0 0 100

style="" 1 0 0 0 1000

Ordenar por orden

font-size: 36px !important;

color: #FF0000;

font-size: 10px;

color: #00FF00;

text-decoration: underline;

Necesidad de trucos

Es inevitable que al trabajar con CSS

surjan problemas

Muchos de los errores y sus causas estn

documentados

Error modelo de caja

Segn las especificaciones CSS todo

elemento del rbol de documento cuenta

Zona de contenido

Imagen

Relleno Borde

mrgenes

Modelo de caja de contenido

hicksdesign.co.uk/journal/483/3d_css_box_model

Modelo de caja

El tamao de estas zonas adicionales (relleno,

borde, mrgenes) se suman a la altura y

anchura de la zona de contenido

#modelo {margin: 10px;

padding: 30px;

width: 400px;border: 5px solid #FF0000;

Explicacin

Aunque la propiedad width tenga 400 pxvemos cmo a esta cantidad debemosaadir

Relleno izquierdo y derecho Borde izquierdo y derecho

Margen izquierdo y derecho

Pasa igual para la altura

As, el ancho real es width + resto Como dicen las especificaciones CSS

Problemas

Algunos navegadores no lo suman

Sino que lo restan

Width mrgenes borde relleno = ancho

A partir de Explorer 6 lo hacen segn los

estndares pero solo si tiene declarado

que sigue estos estndares Aparece DocType

Soluciones con trucos

#modelo {

margin: 10px;

padding: 30px;

width: 400px;border: 5px solid #FF0000;

* html p#modelo{

width:550px;

w\idth:400px;

Comentario

En la segunda reglate dice que todos los elementos html quedesciendan del elemento * No hay ninguno Pero Explorer anterior no ve *

Entonces s encuentra elementos Esta regla solo la ve Explorer

En la segunda regla, la primera lnea indica a los navegadoresdefectuosos Explorer 5 y anteriores La anchura correcta sumando ya y todo Pero en Internet Explorer 6 y siguientes Ve la nueva regla y entonces el ancho nuevo + todo lo anterior me da

un ancho errneo Solucin: convertir la segunda regla en error para IE6

Salta error y IE6 no la ve

Problemas con los trucos

Nos hacen hojas de estilo complicadas, casiilegibles

Y si los navegadores futuros no tratan as loserrores??

Solucin: Aadir soluciones a hojas de estilo para cada

navegador

Con link o @import definimos qu archivos cssimportar

Cuando no sean necesarios los trucos, basta con quitar esalnea

xhtml y css

Documents