xhtml y css
TRANSCRIPT
-
8/9/2019 xhtml y css
1/63
Xhtml y CSS
-
8/9/2019 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/ -
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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/ -
8/9/2019 xhtml y css
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 -
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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 ordenadootro elemento
-
8/9/2019 xhtml y css
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;
}
-
8/9/2019 xhtml y css
12/63
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
16/63
Otros selectores
Explorer no admite todos estos otros
selectores
-
8/9/2019 xhtml y css
17/63
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;
}
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
20/63
Declaraciones mltiples
No tendremos una propiedad entre llaves
cada vez, sino varios grupos
p {
font-weight: bold;
font-variant: small-caps;}
-
8/9/2019 xhtml y css
21/63
Agrupar
Se pueden agrupar selectores de
etiquetas, de id.
Pero podramos hacer un ejemplo
interesante
-
8/9/2019 xhtml y css
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;
}
-
8/9/2019 xhtml y css
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;
}
-
8/9/2019 xhtml y css
24/63
Comentario
Puede no parecer un ahorro excesivo
Ms lneas
Ms reglas
Pero muchas ventajas, mejor cuanto ms
reglas de estilo ms complejas
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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....
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
28/63
Reemplazar la herencia
Queremos aplicar al elemento body unas
propiedades
Pero los elementos de la lista con algunas
variaciones
-
8/9/2019 xhtml y css
29/63
Documento sin ttulo
parrafo en el body
elemento de una lista
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
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
-
8/9/2019 xhtml y css
32/63
Marcado en barra navegacin
inicio
historia
productos
8/9/2019 xhtml y css
33/63
Quitar estilo vietas
Hemos creado el marcado con una sencilla listasin ordenar
En principio, quitamos el formato de las vietas
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
8/9/2019 xhtml y css
34/63
Barra navegacin horizontal
Aadiendo
Float:left;
No sale??
8/9/2019 xhtml y css
35/63
Solucin
ul#nav, ul#nav li {
float:left;
margin: 0px;padding: 0px;
list-style-type: none;
}
8/9/2019 xhtml y css
36/63
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
8/9/2019 xhtml y css
37/63
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/
8/9/2019 xhtml y css
38/63
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;
}
8/9/2019 xhtml y css
39/63
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..
8/9/2019 xhtml y css
40/63
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
8/9/2019 xhtml y css
41/63
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;
}
8/9/2019 xhtml y css
42/63
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;
}
8/9/2019 xhtml y css
43/63
Cascada
8/9/2019 xhtml y css
44/63
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
8/9/2019 xhtml y css
45/63
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)
8/9/2019 xhtml y css
46/63
O i d il d
8/9/2019 xhtml y css
47/63
Origen de estilo en cascada
(de menos a ms importante)
Navegador
Usuario
Autor
!important autor
!important usuario
8/9/2019 xhtml y css
48/63
Ejemplo !important de autor
h2 {
font-size: 2em !important;
color: #0000CC !important;}
8/9/2019 xhtml y css
49/63
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
8/9/2019 xhtml y css
50/63
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
8/9/2019 xhtml y css
51/63
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
8/9/2019 xhtml y css
52/63
Ordenar por orden
p {
font-size: 36px !important;
color: #FF0000;
}p {
font-size: 10px;
color: #00FF00;
text-decoration: underline;
}
8/9/2019 xhtml y css
53/63
Necesidad de trucos
Es inevitable que al trabajar con CSS
surjan problemas
Muchos de los errores y sus causas estn
documentados
8/9/2019 xhtml y css
54/63
Error modelo de caja
Segn las especificaciones CSS todo
elemento del rbol de documento cuenta
Zona de contenido
Texto
Imagen
Relleno Borde
mrgenes
8/9/2019 xhtml y css
55/63
Modelo de caja de contenido
8/9/2019 xhtml y css
56/63
8/9/2019 xhtml y css
57/63
hicksdesign.co.uk/journal/483/3d_css_box_model
8/9/2019 xhtml y css
58/63
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;
}
8/9/2019 xhtml y css
59/63
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
8/9/2019 xhtml y css
60/63
Problemas
Algunos navegadores no lo suman
Sino que lo restan
Width mrgenes borde relleno = ancho
real
A partir de Explorer 6 lo hacen segn los
estndares pero solo si tiene declarado
que sigue estos estndares Aparece DocType
8/9/2019 xhtml y css
61/63
Soluciones con trucos
#modelo {
margin: 10px;
padding: 30px;
width: 400px;border: 5px solid #FF0000;
}
* html p#modelo{
width:550px;
w\idth:400px;
}
8/9/2019 xhtml y css
62/63
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
8/9/2019 xhtml y css
63/63
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