maquetación css
DESCRIPTION
Maquetación CSSTRANSCRIPT
Cristian Riffo Huez
Que es CSS Porqué CSS HTML Orden Lógico Normas y Accesibilidad Tablas Navegadores Qué debe saber un buen desarrollador
web Ejemplos y Otros Links de Interés
+
Separa Información del Estilo Fácil mantención Fácil manejo desde JavaScript Compatibilidad con dispositivos Accesibilidad (Personalización) Código HTML más limpio Programable
Evolución del HTML XHTML
<body><div> <h1><ul> <h2>
contenido
W3C WAI – WCAG (Web Accessibility Initiative, Web Content
Accessibility Guidelines) Contenido para todos
› Sin CSS› Sin Javascript› Sin Flash› Sin Imágenes› Sin Periféricos› Sistemas Operativos
Con tablas es más fácil ¿Porqué no? Tableless Divs vs Tablas
Navegadores del mercado› Firefox 2, 3› Internet Explorer 6, 7› Safari (Win, Mac)
Móviles
CSS vs JavaScript CSS Zen garden
porquero.blogspot.com www.guiaweb.gov.cl www.w3schools.com www.csszengarden.com delicious.com/popular/css www.mootools.net www.w3c.org developer.yahoo.com/yui/reset/
Comportamiento hover CSS/JavaScript
JavaScript CSS
Código html+javascript
<ul> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Inicio</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Quienes Somos</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Contacto</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Clientes</a></li></ul>
Código html
<ul> <li><a href=“#”>Inicio</a></li> <li><a href=“#”>Quienes Somos</a></li>
<li><a href=“#”>Contacto</a></li> <li><a href=“#”>Clientes</a></li></ul>
Código CSS
li a:hover {background-image: url(pub/imgs/img0.jpg);
}
Ver archivo