Ensayo Del Libro El Profeta
Enviado por giovana963 • 27 de Mayo de 2013 • 1.407 Palabras (6 Páginas) • 556 Visitas
El lenguaje CSS nace con el objetivo de superar las limitaciones y reducir la complejidad del HTML. Inicialmente, atributos del lenguaje HTML proveían ciertos estilos para cada elemento, pero la escritura del código se volvía bastante compleja y extensa, haciendo a HTML un lenguaje lejos del alcance de los diseñadores. Desde entonces, CSS fue adoptado de manera que pudiera separar las estructuras dentro del lenguaje HTML, y así fue ganando mucha importancia dentro del diseño web.
Sintaxis
Primero que todo, hay tres manera de aplicar estilos al archivo HTML: en línea, embebido y archivo externo. La manera más eficiente de aplicar estilos es a través del archivo externo. Para enlazar el archivo externo, se realiza la siguiente línea de código dentro de la cabecera del HTML:
<link rel=”stylesheet” href=”CarpetaContenedora/nombreArchivo.css” type=”text/css” />
Ahora, dentro del código CSS, es importante especificar cual elemento queremos modificar dentro de la estructura HTML, para esto, en CSS se manejan tres tipos de referencias: Por palabra clave, por id y por clase.
Al usar referencia por palabra clave, todos los elementos dentro del HTML nominados con esa palabra, se verán afectados. Cuando nos referimos a una palabra clave, se escribe solo el nombre de la etiqueta dentro del CSS.
palabraClave{
propiedad: valor;
}
Cuando usamos referencia por atributo id, este atributo se designa como un nombre que define a un elemento, lo que quiere decir que un atributo id no puede ser el mismo para dos o más elementos, es un nombre único. Dentro del lenguaje CSS, cuando nos referimos a un atributo id, se nombra con el símbolo #, seguido de su nombre.
#atributoId{
propiedad: valor;
}
Cuando usamos referencia por clases, varios elementos dentro del HTML pueden estar dentro de una misma clase, y este tipo de referencia hace que sea mucho más flexible la hora de asignar estilos, sobre todo cuando hay varios elementos que deben llevar el mismo diseño. Para referenciar una clase en el código CSS, se agrega un punto, seguido del nombre de la clase.
.clase{
propiedad: valor;
}
Estructura
En la web, el código HTML es procesado a manera de caja. Cada estructura en bloque dentro del HMTL podrá ser posicionada de diferentes maneras gracias al lenguaje CSS. en CSS hay dos manera de procesar estas cajas de información: en bloque (block) o en Línea (inline).
La estructura en Bloque son posicionados unos sobre otro hacia abajo dentro de la página, mientras que en línea son posicionados uno al lado del otro.
Con este modelo de caja, CSS maneja las disposiciones de cada bloque del HTML, y nosotros como diseñadores debemos saber combinar esta herramienta junto a los demás estilos que brinda CSS para estructurar bien la página web. Las propiedades más importantes dentro de los estilos de CSS son:
display: El sistema de caja a manejar, si en bloque o en línea.
width: La medida del ancho de la caja.
height: La medida del alto de la caja.
margin: El margen de los bordes de la caja con respecto a otros elementos externos.
padding: El margen del contenido de la caja con respecto a los extremos de la caja.
float: Esta opción permite poner a flotar cajas en partes de la pantalla.
text-align: Maneja las opciones de alineación de los textos en las cajas.
background-color: Define el color manejado dentro de la caja.
color: Define el color manejado en los textos.
Ejemplos
Tenemos esta estructura en código HTML:
<html>
<head>
<title>Mi Página Web</title>
<meta charset=”utf-8″ />
</head>
<body>
<header>
<h1>Mi Título</h1>
</header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
<section>
<h3>Título Mediano</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus, enim a facilisis aliquam, sapien nisi elementum augue, vitae sodales eros tortor vel augue. Morbi fringilla ipsum in libero bibendum ut blandit quam facilisis. Nam a felis vitae nibh dignissim convallis id at mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus, enim a facilisis aliquam, sapien nisi elementum augue, vitae sodales eros tortor vel augue. Morbi fringilla ipsum in libero bibendum ut blandit quam facilisis. Nam a felis vitae nibh dignissim convallis id at mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus, enim a facilisis aliquam, sapien nisi elementum augue, vitae sodales eros tortor vel augue. Morbi fringilla ipsum in libero bibendum ut blandit quam facilisis. Nam a felis vitae nibh dignissim convallis id at mauris.
...