Xhtml y CSS

• En un principio, la Web no era lo más atractivo

• Diseñado 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 años 90 no eran compatibles con las
especificaciones diseñadas por el World Wide Web Consortium o W3C
(www.w3c.org) y no admitían sus estándares
• Se podría eliminar relleno de celdas, el espaciado y el borde lo table y
podríamos hacer complejos diseños basados en cuadrículas y hacer
más atractivos los sitios.
• Por la incompleta compatibilidad de los navegadores con CSS, solo se
podía llenar las páginas cono elementos de marcado.
• El resultado fue páginas de difícil mantenimiento, costosas de diseñar,
no compatibles con los navegadores y fatal para el ancho de banda de
los usuarios.
 Estructura y presentación
• Aunque HTML es un lenguaje bien estructurado, las
páginas evolucionaron hasta convertirse en una
especie de mezcla de etiquetas.
• Con los navegadores incompatibles con las hojas
de estilo o cascada todo se hacía con gráficos
transparentes, etiquetas font, tablas anidadas...para
controlar el diseño 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’
 Análisis
• www.hardvard.edu
• Diseño 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 anidación
• Las celdas contienen gráficos gif
• Gráficos con atributos onmouseover y onmouseout para controlar los efectos de rollover de los gráficos
• Existen otros dispositivos y otros usuarios con necesidades distintas a simples navegadores gráficos de escritorio
– Navegadores solo para texto
– Accesibilidad (etiquetas alt)
• Incompleta compatibilidad con CSS, diseños basados en table eran habituales
– Correcta presentación en todos los navegadores gráficos
– Alto consumo de ancho de banda
– Diseños de sitios inaccesibles
• Hoy los navegadores son más compartibles con CSS
• No es preciso depender del marcado que consume ancho de banda para realizar diseño de un sitio
• Separar estructura del estilo es la base del diseño Web basado en estándares
– Sitios más ligeros
– Más fáciles de mantener
 Marcado
• Los atributos de reducción de margen no aparecen en las especificaciones
HTML
– 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 recuperación
• Problema porque cada navegador tiene su lógica de recuperación y ofrece
resultados diferentes
– Probar entre navegadores
• Código incorrecto obliga a dedicar más tiempo a tareas de programación y
comprobación
• Los nuevos navegadores, recuperan los errores como los actuales??
• Solución : XHTML
 XHTML
• XHTML se crea para que los propietarios de sitios cuenten con una
actualizan más clara entre HTML y una sintaxis de documentos más
estricta XML
– Comienza con declaración DocType
– Correcto marcado
• Anidación etiquetas
– Primero abierto, ultimo cerrado
– Cerrar todos los elementos
– Elementos y atributos en minúsculas
– Marcado con significado
• Reducir marcado de las páginas a un mínimo bien estructurado y con sentido
– Encabezados
• H2,h3… cualquier dispositivo sabe que es un encabezado
• Motor búsqueda Google
– Párrafos
• No usar font, br…sino p
– listas sin ordenar
• Sustituir menús de navegación de tablas por listas sin ordenar
 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
verán afectados por la regla
– Y un bloque de declaración que determina qué
propiedades del elementos se van a modificar
h1 {color:#36C}
 Selectores de tipos
• La regla anterior es una selector de tipos que
indica al navegador que seleccione todos los
elementos de un determinado tipo (h1 del
marcado) 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 par
hexadecimal es idéntico
– #3366CC se puede #36C
 Selector universal
• Mayor alcance
• Compara el nombre de todos los tipos de
elemento
*{color:#000}
• Esta regla representa en negro el contenido
de todos los elementos del documento
• No se suele utilizar mucho por lo excesivo de
su alcance
 Selectores descendentes
• <body>
• <p>Texto con <em>etiquetas</em> de enfasis que se
<em>muestran</em> en cursiva</p>
• <ul>
• <li>y aqui empezamos una <em>lista</em> desordenada</li>
• <li>un <em>elemento</em></li>
• <li>otro elemento</li>
• </ul>
• <ol>
• <li>aqui una lista ordenada</li>
• <li>con un <em>elemento</em> ordenado</li>
• <li>otro elemento </li>
• </ol>
• </body>
• </html>
 Selectores descendentes
• De forma predeterminada, los
navegadores muestran los elementos em
en cursiva
• Los ponemos en mayúsculas
• Podríamos usar una regla de tipos para
em
em {
text-transform: uppercase;
}
 Selectores de tipos
• Pero solo necesitamos los elementos em
de ul
ul em {
text-transform: uppercase;
}
• En esta regla se indica al navegador que
seleccione todos los elementos em que
desciendan de elementos ul
 Selectores de clase
• Los hojas de estilo se pueden aplicar a cualquier
aspecto del marcado

input.text {
border: 15px solid #FF0000;
}

• Para utilizar un selector class más genéricos

podemos poner solo .
• Realmente lo que indicas así es *.text
 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 página

• Interesante con descendentes
– Base de diseños complejos
– Permite seleccionar todos los elementos h2 que descienda de un elemento id
concreto
 Id con descendentes
• #dato h2 {
• text-transform: uppercase;
• }

• <h1>un texto con encabezado h1</h1>

• <div id="dato">
• <h1 >otro texto con h1</h1>
• <h2>ahora uno con h2</h2>
• </div>
• <h2>otro con h2</h2>
• <h1>otro con h1</h1>
• <h2>otro con h2</h2>
 Otros selectores
• Explorer no admite todos estos otros
selectores
 Selectores secundarios
• p{
• font-weight: bold;
• font-variant: small-caps;
• }

• body p {
• font-weight: bold;
• font-variant: small-caps;
• }

• body>p {
• font-weight: bold;
• font-variant: small-caps;
• }
 Marcado
<body>
<p>vamos a hacer varios parrafos</p>
<p>estos est&aacute;n directamente en body</p>
<div class="caja1">
<p>pero este esta en una div</p>
<p>y este tambi&eacute;n</p>
</div>
<p>ya &eacute;ste est&aacute; otra vez en body
</p>
</body>
 Explicación
• El signo > indica que seleccione todos los
elementos p secundarios, no todos los
descendentes
• Los parrafos incluidos en div no se ven
afectados, ya que son secundarios de dicho
elemento, no de body
• Sin embargo, los parrafos anteriores y
posteriores a div se verán afectados ya que
ambos comparten body como elemento principal
 Declaraciones múltiples
• No tendremos una propiedad entre llaves
cada vez, sino varios grupos

p{
font-weight: bold;
font-variant: small-caps;
}
 Agrupar
• Se pueden agrupar selectores de
etiquetas, de id….
• Pero podríamos hacer un ejemplo
interesante
#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;
}
 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;
}
 Comentario
• Puede no parecer un ahorro excesivo
– Más líneas
– Más reglas
• Pero muchas ventajas, mejor cuanto más
reglas de estilo más complejas
 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 podría configurar un árbol de
documento del marcado
<edad>
<meta http-equiv="Content-Type" contenta="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #FF0000;
text-decoration: underline;
padding: 20px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
}
-->
</style>
</edad>

<body>
<p>esto es un parrafo...que claro est&aacute; en body</p>
<p>&nbsp;</p>
<p>aqui tienes otro parrafo que tambi&eacute;n esta en body</p>
<p>&nbsp;</p>
<ul>
<li>una lista sin ordenar</li>
<li>pero puede dnetro tener varios elementos</li>
</ul>
<div>
<p>una div...pero</p>
<p>con varios parrafos claro...</p>
<p>&nbsp; </p>
</div>
<p>y m&aacute;s parrafos fuera....</p>
<p>&nbsp; </p>
</body>
 Comentarios
• Estas reglas se aplican a todos los elementos
body
• Entonces…al aplicar las reglas de herencia al
documento, las propiedades de body se aplican
a todos los elementos incluidos en el cuerpo de
documento, es decir, a todos los elementos que
desciendan de body
• CSS como potente motor de presentación
• Pero pueden darse problemas
– No todas las propiedades se heredan
• Márgenes
• relleno
 Reemplazar la herencia
• Queremos aplicar al elemento body unas
propiedades
• Pero los elementos de la lista con algunas
variaciones
<edad>
<meta http-equiv="Content-Type" contenta="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
color: #FF0000;
}
li {
color: #0000FF;
text-decoration: underline;
}
-->
</style>
</edad>

<body>
<p>parrafo en el body</p>
<ul>
<li>elemento de una lista </li>
</ul>
</body>
 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 tamaño
de fuente para li, siguen heredando el valor
de dicha propiedad de su antecesor, body
Practica – barra de navegación
• Para crear una barra de navegación se
pueden crear table anidadas con bgcolor
para cada td… y así…
• Para crear una barra de navegación con
XHTML y CSS comenzamos con un
nuevo marcado
 Marcado en barra navegación
<ul id="nav">
<li class="primero"><a
href="descendentes.html">inicio</a></li>
<li><a
href="selectoressecundarios.html">historia</a><
/li>
<li><a
href="reemplazarherencia.html">productos</a><
/li>
</ul>
 Quitar estilo viñetas
• Hemos creado el marcado con una sencilla lista
sin ordenar
• En principio, quitamos el formato de las viñetas

ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
 Barra navegación horizontal
• Añadiendo
– Float:left;
• No sale??
 Solución
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 un
estilo a la lista de navegación y a sus elementos con
independencia del resto del marcado de la página
• Al agrupar las reglas ul#nav y ul#nav li en un selector
delimitado por comas, podemos afectar a su posición
flotante 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 línea horizontal
 Sugerencia
• El modelo flotante es una potente
construcción de CSS y es la base de
muchos diseños
tgh://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 añadir
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 a
lista sin ordenar
• Al establecer atributos font de la lista, podemos recurrir
a la herencia para aplicar una fuente a todos sus
elementos
• Las anclas se presentan como elementos en línea y esto
es un problema puesto que todo relleno que apliquemos
solo afecta a los bordes horizontales
• Para poner píxeles de relleno a ambos lados de los
vínculos de navegación, convertimos los vínculos en
elementos de nivel de bloque
– display:block
 Bordes
• Los bordes interiores son muy gruesos
• El borde de cada elementos se añade al de sus
parientes…y 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 declaraciones
obtienen el mismo efecto que las
declaraciones agrupadas pero el 0 de
border-width indica que ignore el borde
izquierdo
• 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 aplicar
cualquier otra regla de estilo
• Este conjunto interno de reglas CSS establece las reglas de
representación predeterminadas de todos los elementos HTML
– H1 con fuente serif
– Viñeta 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
 Orden
• 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)
 important
• Tanto el usuario como el autor pueden
definir reglas !important
• Una regla !important de usuario es más
importante que una !important de autor
 Origen de estilo en cascada
(de menos a más importante)
• Navegador
• Usuario
• Autor
• !important autor
• !important usuario
 Ejemplo !important de autor
h2 {
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 más específicos que los
selectores class
• A más 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 un
elemento, 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…) del
selector.
– Los selectores de clase (li.active) son un tipo de
selector de atributo
• El numero de nombres de elemento (a,li, p) y
pseudo-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
p{
font-size: 36px !important;
color: #FF0000;
}
p{
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 están
documentados
 Error – modelo de caja
• Según las especificaciones CSS todo
elemento del árbol de documento cuenta
– Zona de contenido
• Texto
• Imagen
•…
– Relleno
– Borde
– márgenes
Modelo de caja de contenido
hicksdesign.co.uk/journal/483/3d_css_box_model
 Modelo de caja
• El tamaño de estas zonas adicionales (relleno,
borde, márgenes) se suman a la altura y
anchura de la zona de contenido
#modelo {
margin: 10px;
padding: 30px;
width: 400px;
border: 5px solid #FF0000;
}
 Explicación
• Aunque la propiedad width tenga 400 px
vemos cómo a esta cantidad debemos
añadir
– 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 – márgenes – borde – relleno = ancho
real
• A partir de Explorer 6 lo hacen según los
estándares pero solo si tiene declarado
que sigue estos estándares
– 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 regla…te dice que todos los elementos html que
desciendan 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 línea indica a los navegadores
defectuosos
– 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 erróneo
– Solución: 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, casi
ilegibles
• Y si los navegadores futuros no tratan así los
errores??
• Solución:
– Añadir soluciones a hojas de estilo para cada
navegador
– Con link o @import definimos qué archivos css
importar
• Cuando no sean necesarios los trucos, basta con quitar esa
línea