Scribd
Cargar
39 vistas17 páginas

CHTML C Laboratorio CSS 01

Cargado por

aye.trigo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
39 vistas17 páginas

CHTML C Laboratorio CSS 01

Cargado por

aye.trigo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 17

www.gl obal mentoring.com .

mx
Se solicita analizar el proyecto Laboratorio CSS, el cual
contiene la siguiente salida. El objetivo es entender cómo se
crearon los tabuladores y analizar los estilos que es aplicaron:

www.gl obal mentoring.com .mx


Vamos a crear el proyecto:

www.gl obal mentoring.com .mx


Vamos a crear el archivo contenido1.html

www.gl obal mentoring.com .mx


Vamos a crear el archivo contenido2.html

www.gl obal mentoring.com .mx


Vamos a crear el archivo contenido3.html

www.gl obal mentoring.com .mx


Vamos a crear el archivo estilos.css

www.gl obal mentoring.com .mx


Archivo index.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>Laboratorio CSS</title>
</head>
<body>
<h1>Laboratorio CSS</h1>
<a href="paginas/contenido1.html">P&aacute;gina de Contenido</a>
</body>
</html>

www.gl obal mentoring.com .mx


Archivo contenido1.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
<title>Contenido 1</title>
</head>
<body>
<h1>Sitio Web con Tabuladores</h1>
<div class="tab" id="actual">
<div>
<a href="contenido1.html">Contenido</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido2.html">Contenido 2</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido3.html">Contenido 3</a>
</div>
</div>
<br/>
<p>
Contenido de la página 1
</p>
<br>
<a href="../index.html">Regresar</a>
</body>
</html> www.gl obal mentoring.com .mx
Archivo contenido2.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
<title>Contenido 2</title>
</head>
<body>
<h1>Sitio Web con Tabuladores</h1>
<div class="tab">
<div>
<a href="contenido1.html">Contenido</a>
</div>
</div>
<div class="tab" id="actual">
<div>
<a href="contenido2.html">Contenido 2</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido3.html">Contenido 3</a>
</div>
</div>
<br/>
<p>
Contenido de la página 2
</p>
<br>
<a href="../index.html">Regresar</a>
</body>
</html> www.gl obal mentoring.com .mx
Archivo contenido3.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
<title>Contenido 3</title>
</head>
<body>
<h1>Sitio Web con Tabuladores</h1>
<div class="tab">
<div>
<a href="contenido1.html">Contenido</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido2.html">Contenido 2</a>
</div>
</div>
<div class="tab" id="actual">
<div>
<a href="contenido3.html">Contenido 3</a>
</div>
</div>
<br/>
<p>
Contenido de la página 3
</p>
<br>
<a href="../index.html">Regresar</a>
</body>
</html> www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
/*Nota: Se pueden descargar las imagenes a la carpeta de css
y solo poner el nombre de la imagen, ya sin el URL completo*/
body {
background:#ffffff;
}

img{border:0;}

h1{
padding:5px 5px 0 5px;
margin:0 0 15px 0;
color:#2b7c92;
font-size:2em;
}

/**
* Para crear los tabuladores, se aplica una
* tecnica, la cual por medio de 3 bloques
* de tipo div, vamos a ir agregando
* de manera anidada las imagenes, hasta formar
* todos los elementos de la imagen
*/

div.tab{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/izqTab.gif);
display:block;
float:left;
/*Es el alto de la imagen*/
height:21px;
padding:0;
/* Separacion entre tabuladores*/
margin:0 1px 0 0; www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
/*La imagen de la izquierda no se repite
* Por defualt una imagen se repite
* en todo el espacio que tenga para
* desplazarse */
background-repeat:no-repeat;
}

div.tab div{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/derTab.gif);
background-repeat:no-repeat;
background-position:top right;
height:21px;
float:left;
margin:0;
}

div.tab div a{
/*
* Las imagenes de la izq y der
* tienen un ancho de 8px, por lo tanto
* dejamos esta espacio para que se completen
* las esquinas
*/
margin:0 8px;
/* Las imagenes tiene un alto de 21px */
height:21px;
line-height:21px;
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/centroTab.gif);
display:block;
text-decoration:none;
vertical-align:middle;
float:left; www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
/* Por default se repite la imagen
* pero lo hacemos explicito
*/
background-repeat:repeat;
}

/**
* Solamente hay un elemento activo
* en la pagina, por lo tanto
* se utiliza un ID ( # ), en lugar
* de una clase ( . )
*/
#actual{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/actIzqTab.gif);
}

#actual div{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/actDerTab.gif);
}

#actual div a{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/actCentroTab.gif);
}

a:link,a:visited{
color:#226275;
text-decoration:underline;
}

a:active,a:hover{
color:#39a5c4;
} www.gl obal mentoring.com .mx
El resultado es como sigue:

www.gl obal mentoring.com .mx


• Con este laboratorio CSS hemos puesto en práctica más
ejemplos del uso de CSS, incluso les invitamos a probar el
ejercicio sin el archivo estilos.css para que vean la diferencia
entre usar únicamente etiquetas HTML, y agregar estilos css
y así lograr una diferencia sustancial en la forma en que se
presenta la información al usuario.

www.gl obal mentoring.com .mx


Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

También podría gustarte