HOJAS DE ESTILO EN CASCADA (CSS)
CSS son las siglas de Cascading Style Sheets que significa "hojas de estilo en cascada" y que es un
lenguaje que es usado para describir el aspecto y formato de un documento escrito en lenguaje de
marcas.
¿PARA QUE SIRVEN LAS HOJAS DE ESTILO EN CASCADA "CSS"?
EL uso mas comun es para dale estilo a paginas webs escritas en HTML y XHTML tambien se aplica a
documentos XML , SVG y XUL , los funciones que nos da son: modificar los tipos de fuentes en tamaño,
color, alto de linea, sombras, grosor y variante; Indicar en un bloque el espacio entre palabras, espacio
entre letras, alineamiento vertical, alineamiento de texto y sangria de texto ; En una etiqueta <div> definir dimensiones, bordes, rellenos, margenes, fondos ,desbordamiento, posicion,colocacion, visibiliad, z-index,
etc...
¿COMO FUNCIONAN LAS HOJAS DE ESTILO EN CASCADA "CSS"?
Tiene una sintaxis muy sencilla se usan palabras claves tomadas del ingles para especificar los nombres
de sus selectores, propiedades y atributos. Ejemplo:
h1 { font-size: 11px;
color: #333333; }
asi como esta en el ejemplo " h1" es el selector , " font-size: 11px; " es una declaracion y dentro de esta font-size: es la propiedad y 11px; es el valor y se encuentran separados por dos puntos( : ) y al final con punto y coma ( ; ) para agregar mas declaraciones si asi se desea, habiendo una o mas declaraciones dentro de las llaves " { } " a esto se le da el nombre de bloque de estilos.
selector { propiedad: valor; /*<--- esto es un declaracion*/
propiedad: valor; }
todo lo de color naranja es un bloque de estilos y puedes escibir algun argumento delante de alguna declaracion si asi lo deseas para marcar algun aspecto importante de ella utilizando estos signos: /* */ asi como esta en el ejemplo (esto no altera el CSS).
TRES FORMAS DE USAR LAS HOJAS DE ESTILO EN CASCADA (CSS)
1.- Un estilo en línea (online) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página.
___________________________________________________________________
<h2 style="font-size: 11px; color: #333333;">Hola bienvenidos</h2>
Esto es una ejemplo de un estilo en linea, la etiqueta es h2 las declaraciones que irían en el bloque de estilos aqui son directamente colocadas mediante el atributo style="" dentro de h2.
___________________________________________________________________
2.- Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho.
___________________________________________________________________
<html>
<head>
<style type="text/css">
<!--
h1 { font-size: 11px;
color: #333333; }
h2 { font-size: 10px;
color: #000000; }
-->
</style>
</head>
<body>
<h1>Hola bienvenios a mi pagina</h1>
</body>
</html>
Este es el ejemplo de como se ve la hoja de estilos completa dentro de la cabecera del documento HTML los selectores y sus boques de estilos se encuentran dentro de la etiqueta <style>.
___________________________________________________________________
3.- Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
___________________________________________________________________
<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Hola bienvenios a mi pagina web</h1>
</body>
</html>
Este es un ejemplo de como se aplica, en la parte de la cabecera se coloca la etiqueta <link> y dentro de esta en la pa parte que dice href="" se coloca el enlace del archivo CSS con esto el archivo HTML es capaz de leer y aplicar todos los estilos adecuados a cada etiqueta.
___________________________________________________________________
Bien con esta es mas que suficiente espero ahora entiendan un poco mas de lo que ya sabian compartan y sigan esperando los proximos articulos.