Guia Css

Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
Objetivo.
Aprender a colocar hojas de Estilos a las paginas Web
Introducción
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>



<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 b lock, 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:

Guia Css

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guia Css

Caricato da

Copyright:

Formati disponibili

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

Dando estilo a nuestra web

Si la queremos a la derecha se cambia el valor de left a rigth

Potrebbero piacerti anche