CSS: "Cascading Style Sheets": Concepto

CSS: “CASCADING STYLE SHEETS”
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

DISEÑO UTILIZANDO CSS

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

¿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;
}

Incluir CSS en un documento HTML
Incluir CSS en el mismo documento HTML
Definir CSS en un archivo externo

Estilo.css Index.html

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

Esquema de Trabajo utilizando CSS

Sintaxis de una regla CSS

SELECTORES
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
SELECTOR cambio
DECLARACIÓN
Que hay que hacer

SELECTORES BÁSICOS
Selector Se utiliza para seleccionar todos los elementos de la Página
universal Ejemplo
Selector de Selecciona todos los elementos de la página cuya

etiqueta HTML coincide con el valor del selector
tipo o etiqueta
Ejemplo
Permite seleccionar los elementos que son

Selector descendente dependientes de otros elementos
Ejemplo

SELECTORES BÁSICOS
Selector Permiten disponer de una precisión total al seleccionar los elementos
de clase 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

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>
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>
</div>

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>
<div id="pie">

EJERCICIO PRACTICO
<p align="center">
Todos los derechos reservados Daniel Neftalí Ramírez - Carlos Antonio Aguirre
</p>
<p align="center">
Grupo de Tecnología en la Red © Enero 2008 El Salvador C.A
</p>
</div>
</div>
</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

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;
}

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;
}

EJERCICIO PRACTICO
#cuerpo{
width:480px; .cuerpolateral{
margin-left: 8px; padding: 5px 4px 13px 10px;
padding: 12px 0px 10px 0px; }
background-color : #ffffff;
float:left; #lateral{
} width: 200px;
background-color: #EBF2FE;
.titlat{ border-bottom : 1px solid
background-color:#84C24B; #cccccc;
color:#ffffff; border-left : 1px solid
font-size:7pt; #cccccc;
font-weight:600; float:right;
text-transform : uppercase; }
padding: 7px 3px 7px 8px;
letter-spacing : 1px; #fbuscar form{
margin: 0px 0px 8px 0px; margin-bottom : 0px;
} margin-top : 0px;
}

EJERCICIO PRACTICO
#otras ul{
padding: 0px 0px 0px 4px;
list-style: none; #borde{
} border: 2px solid #cccccc;
text-align: left;
#otras li{ width: 700px;
padding-left: 14px; margin: auto;
background: transparent }
url("bullet.gif") 0 2px no-repeat;
margin-bottom: 10px; #pie{
} clear : both;
font-size : 7pt;
color : #555555;
text-align : right;
padding-bottom:10px;
}

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:
1. Nombre Completo
2. # Carné
3. Porción del código utilizado para enlazar la hoja de estilo css al documento HTML
Ejemplo: <head>
<link rel ….. ???? />
</head>
4. En dos o tres palabras lo aprendido en clase

GRACIAS POR SU ATENCION

CSS: "Cascading Style Sheets": Concepto

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS: "Cascading Style Sheets": Concepto

Cargado por

Copyright:

Formatos disponibles

CSS: “CASCADING STYLE SHEETS”

Su principal característica es la posibilidad de separar los

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Definir CSS en un archivo externo

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Orden de preferencia para aplicar una norma

Estilo especificado dentro de la Etiqueta

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Una regla CSS esta formada por

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Selector de Selecciona todos los elementos de la página cuya

Permite seleccionar los elementos que son

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Selector de ID Permite seleccionar un elemento de la Pagina a través del valor de su

Ejemplo Se escribe dentro del elemento al que se desea

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Descargar del sitio www.virtualtecnoclass.com el archivo Zip images, descomprimirlo y

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

A.enlacenav, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Visualice el sitio en el Navegador y observe el resultado.

Utilizando la opción contactar del sitio www.virtualtecnoclass.com enviar un comentario sobre

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

Carlos Antonio Aguirre | carlos99ayala@yahoo.com | www.virtualtecnoclass.com

También podría gustarte