1. guia css3

Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
Un archivo de estilos es un grupo de reglas de formato que ayudarán a cambiar la
apariencia de nuestra página web (por ejemplo, el tamaño y color del texto). Sin
estas reglas, el texto y cualquier otro elemento HTML, sería mostrado en pantalla
utilizando los estilos estándar provistos por el navegador. Los estilos son reglas
simples que normalmente requieren solo unas pocas líneas de código y pueden
ser declarados en archivos externos es una práctica recomendada. Cargar las
reglas CSS desde un documento externo (otro archivo) nos permitirá organizar el
documento principal, incrementar la velocidad de carga y aprovechar las nuevas
características de HTML5.
Continuando con la estructura de la guía de HTML, se tiene el código debes
incluir la etiqueta link en la cabecera del documento html, los atributos rel y href.
El atributo rel significa “relación” y es acerca de la relación entre el documento y el
archivo que estamos incorporando por medio de href. En este caso, el atributo rel
tiene el valor stylesheet que le dice al navegador que el archivo stylo.css es un
archivo CSS con estilos requeridos para presentar la página en pantalla.
<link rel="stylesheet" href="stylo.css" type="text/css">
En el código de la página anterior insertamos esta etiqueta
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Mi primera Página</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<header>
<h2> Imagen Corporativa </h2>
</header>
Objetivo.
Aprender a colocar hojas de Estilos a las paginas Web
Introducción

<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>


<aside>
<div> Sidebar/ barra Lateral</div>
</aside>


<section >
<div>
<span>Contenido principal</span>
<article>Artículo 1</article>
<article>Artículo 2</article>
</div>
</section>


<footer>
Copyright
</footer>

</body>
</html>

Dando estilo a nuestra web
Hemos especificado que nuestro fichero stylo.css se encontrará en la carpeta que
el archivo .html
html{
margin: 0;
padding: 0;
background: #efefef;
color: #fff;
}
body{
width: 80%;
margin: 10px auto;
}
header{
background: #B7B9B8; }
Le estamos dando color al fondo del encabezado de la pagina
nav{
background: #FF2C8F;}

nav ul li{
display: inline-block;
margin: 0 10px;
padding: 4px 10px;
border: 1px solid #fff;
border-radius: 4px;
}
aside{
float: left;
width: 25%;
height: 200px;
background: #5A9E95;
}
Si la queremos a la derecha se cambia el valor de left a rigth
float: right;

section{
float: right;
width: 70%;
height: 200px;
background: #96BC6C;
}
article{
margin: 10px auto;
background: #0072BC;
width: 90%;
}

footer{
background: #F36623;
}
Para finalizar le vamos a dar estilo a los contenedores diseño de cajas las
propiedades de alinear el texto, tipo de letra , tamaño de la letra margen y espacio
entre contenedores
header, nav, aside, section, article, footer{
margin: 10px 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
font-family: 'Tahoma';
}

Ahora debemos utilizar la propiedad clear con el valor both. La propiedad clear,
propiedad que simplemente restaura las condiciones normales del área ocupada
por el elemento, no permitiéndole posicionarse adyacente a una caja flotante. El
valor usualmente utilizado es both, el cual significa que ambos lados del elemento
serán restaurados y el elemento seguirá el flujo normal (este elemento ya no es
flotante como los anteriores). Esto, para un elemento block, quiere decir que será
posicionado debajo del último elemento, en una nueva línea. La propiedad clear
también empuja los elementos verticalmente, haciendo que las cajas flotantes
ocupen un área real en la pantalla. Sin esta propiedad, el navegador presenta el
documento en pantalla como si los elementos flotantes no existieran y las cajas se
superponen.
Ahora nuestra web luce algo más parecida al ejemplo:

1. guia css3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 1. guia css3

Similar a 1. guia css3 (20)

Más de ljds

Más de ljds (20)

Último

Último (20)

1. guia css3