CSS: “CASCADING STYLE SHEETS” UNIVERSIDAD TECNOLÓGICA CONCEPTO: Lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML Su principal característica es la posibilidad de separar los elementos formales de los contenidos. Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
ESTRUTURA HTML Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
DISEÑO UTILIZANDO CSS Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
¿Por qué se llaman hojas de estilo? Porque a través de ellas podemos crear clases y pseudoclases. Lo que nos permite modificar e indicar al navegador la forma en la que tiene que presentar cualquier elemento HTML Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
¿Por qué se llaman en Cascada? Porque cuando se crean estilos, las especificaciones que se realicen para un determinado elemento serán aplicados a todos aquellos elementos que estén por debajo de él atendiendo a un criterio de herencia. body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #D4E5D4; margin: 0; color: #000000; } EJEMPLO Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
Incluir CSS en un documento HTML Incluir CSS en el mismo documento HTML Definir CSS en un archivo externo Estilo.css Index.html Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
Orden de preferencia para aplicar una norma Incluir en los elementos HTML Orden de preferencia para aplicar una norma Estilo especificado dentro de la Etiqueta Estilo especificado en la cabecera del documento Estilo definido en un documento independiente al que se enlaza nuestra pagina Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
Esquema de Trabajo utilizando CSS Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
Sintaxis de una regla CSS Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
SELECTORES SELECTOR DECLARACIÓN Una regla CSS esta formada por PARA CREAR DISEÑOS WEB PROFESIONALES, ES IMPRESCINDIBLE CONOCER Y DOMINAR LOS SELECTORES DE CSS Una regla CSS esta formada por A quien se le aplicara un cambio SELECTOR DECLARACIÓN Que hay que hacer Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
SELECTORES BÁSICOS Selector universal Selector de tipo o etiqueta Se utiliza para seleccionar todos los elementos de la Página Ejemplo Selector de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector Ejemplo Permite seleccionar los elementos que son dependientes de otros elementos Selector descendente Ejemplo Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
SELECTORES BÁSICOS Selector de clase Selector de ID Permiten disponer de una precisión total al seleccionar los elementos Ejemplo Se utiliza el atributo class para indicar el nombre de la clase que se va a utilizar. Este se escribe dentro del elemento al que se desea aplicar la regla de estilo. Selector de ID Permite seleccionar un elemento de la Pagina a través del valor de su atributo ID Ejemplo Se escribe dentro del elemento al que se desea aplicar la regla como valor del atributo id Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO Copie el siguiente código a un editor de paginas web. Ej. “Dreamweaver” <html> <head> <title>Aprende Tecnología </title> </head> <body> <div id="borde"> <div id="contenedor"> <div id="cabecera"><img src=“images/cabecera.jpg" width="700" height="106“ alt="La Web del Invierno" border="0"></div> <div id="navegador"> <a href="index.php" class="enlacenav">Principal</a> | <a href="#" class="enlacenav">Examen</a><a href="#"></a> | <a href="#" class="enlacenav">Tutoriales</a><a href="#"></a> | <a href="#" class="enlacenav">Foros</a> | <a href="#" class="enlacenav"></a><a href="#“ class="enlacenav">Contactos</a> | <a href="articulos.php" class="enlacenav">Articulos</a> | <a href="#">Videos</a> | | </div> Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO <div id="cuerpo"> <p align="center"><img src="images/cable_data_transfer_md_wht.gif" width="160" height="50"></p> <p align="center"><a href="estadisticos.php”>Estadísticos FICA</a></p> <p align="center"><img src="images/cable_data_transfer_md_wht.gif" width="160" height="50"></p> </div> <div id="lateral"> <h2 class="titlat">descargar tutoriales </h2> <div id="fbuscar" class="cuerpolateral"> <p> Word 2007</p><p> Excel 2007</p> <p>Powerpoint 2007</p> <p>PHP</p><p>MYSQL</p><p>Dreamweaver css 3</p> <p>Firework css 3</p> <p>Flash css 3</p> Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO <h2 class="titlat">sitios de interes </h2> <div id="otras" class="cuerpolateral"> <ul> <li><a href="http://www.utec.edu.sv">Web Site de la UTEC</a> <li><a href="http://www.google.com.sv">Google</a> <li><a href="http://mail.yahoo.com">Yahoo</a> <li>Creditos </ul> </div> <div id="pie"> Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO <p align="center"> Todos los derechos reservados Daniel Neftalí Ramírez - Carlos Antonio Aguirre </p> Grupo de Tecnología en la Red © Enero 2008 El Salvador C.A </p> </div> </body> </html> Guarde el Archivo con el nombre de index.html. Este archivo deberá estar dentro de una carpeta llamada ejer1css. Descargar del sitio www.virtualtecnoclass.com el archivo Zip images, descomprimirlo y ubicarlo en la carpeta ejer1css. Crear una hoja de estilo css para dar una apariencia profesional al documento HTML. La hoja de estilo deberá llamarse estilo.css Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO Copiar el siguiente código a la hoja de estilo css body { background : #C0D9D9 url(fondo.gif) repeat; font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #000000; margin : 20px 0px 20px 0px; text-align: center; } #contenedor{ text-align: left; width: 700px; background-color : #ffffff; margin: auto; Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO #cabecera{ height : 106px; width: 700px; } #navegador{ background : #F5F4C3 url(fondonav.gif); padding : 3px 10px 5px 10px; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; A.enlacenav, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{ color: #494E6B; A.enlacenav:HOVER{ color: #3F7DE3; Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO #cuerpo{ width:480px; margin-left: 8px; padding: 12px 0px 10px 0px; background-color : #ffffff; float:left; } .titlat{ background-color:#84C24B; color:#ffffff; font-size:7pt; font-weight:600; text-transform : uppercase; padding: 7px 3px 7px 8px; letter-spacing : 1px; margin: 0px 0px 8px 0px; .cuerpolateral{ padding: 5px 4px 13px 10px; } #lateral{ width: 200px; background-color: #EBF2FE; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; float:right; #fbuscar form{ margin-bottom : 0px; margin-top : 0px; Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO #otras ul{ margin : 5px 10px 0px 0px; padding: 0px 0px 0px 4px; list-style: none; } #otras li{ padding-left: 14px; background: transparent url("bullet.gif") 0 2px no-repeat; margin-bottom: 10px; #borde{ border: 2px solid #cccccc; text-align: left; width: 700px; margin: auto; } #pie{ clear : both; font-size : 7pt; color : #555555; text-align : right; margin : 10px 10px 0px 10px; padding-bottom:10px; Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
EJERCICIO PRACTICO Guarde el archivo. Ahora abra el documento index.html y establezca el enlace a la hoja de estilo llamada estilo.css Visualice el sitio en el Navegador y observe el resultado. Utilizando la opción contactar del sitio www.virtualtecnoclass.com enviar un comentario sobre la actividad, tomando en cuenta los siguientes punto: Nombre Completo # Carné Porción del código utilizado para enlazar la hoja de estilo css al documento HTML Ejemplo: <head> <link rel ….. ???? /> </head> En dos o tres palabras lo aprendido en clase Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com
GRACIAS POR SU ATENCION Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com