Descargar la presentación
La descarga está en progreso. Por favor, espere
1
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 | |
2
ESTRUTURA HTML Carlos Antonio Aguirre | |
3
DISEÑO UTILIZANDO CSS Carlos Antonio Aguirre | |
4
¿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 | |
5
¿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 | |
6
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 | |
7
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 | |
8
Esquema de Trabajo utilizando CSS
Carlos Antonio Aguirre | |
9
Sintaxis de una regla CSS
Carlos Antonio Aguirre | |
10
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 | |
11
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 | |
12
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 | |
13
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 | |
14
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 | |
15
EJERCICIO PRACTICO <h2 class="titlat">sitios de interes </h2> <div id="otras" class="cuerpolateral"> <ul> <li><a href=" Site de la UTEC</a> <li><a href=" <li><a href=" <li>Creditos </ul> </div> <div id="pie"> Carlos Antonio Aguirre | |
16
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 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 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 | |
17
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 | |
18
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 | |
19
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 | |
20
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 | |
21
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 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 | |
22
GRACIAS POR SU ATENCION
Carlos Antonio Aguirre | |
Presentaciones similares
