Hojas de Estilo en Cascada CSS Parte 2 - Blog de Tecnologia, Ingenieria en Sistemas

Novedades

viernes, 2 de marzo de 2012

Hojas de Estilo en Cascada CSS Parte 2

Hojas de estilo externas

+Es más conveniente cuando una misma hoja de estilos es aplicada a varias páginas. Las ventajas que tiene esta opción es que realizamos los cambios en un solo archivo, así podemos cambiar el aspecto de todo el sitio web. Las hojas de estilo deben llevar la terminación .css. Así para invocar el archivo por ejemplo, un archivo CSS externo le podemos llamar "estilo1.css":
p
{
font-family:Arial;
font-size:12px;
font-weight:normal;
}
El código anterior muestra un trozo del archivo “estilo1.css” en este caso comienzan directamente con el selector.
Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.
<head> – se declara en la sección de head
<link rel="stylesheet" type="text/css" href="estilo1.css"> 
</head>

rel="stylesheet" indica que la relación es una hoja de estilo.
type="text/css" dice que el tipo es texto y css.
href="fuentes.css" el nombre del documento que contiene el código css.
También es importante mencionar que todos los elementos del documento HTML heredarán las reglas de estilo del archivo externo css, pero que es posible invalidar el estilo de ciertos elementos individuales usando el atributo style en dichos elementos.

Posicionamiento

El posicionamiento en una hoja de estilo hace referencia al lugar (coordenadas) que puede ocupar cualquier contenido de una caja dentro de una página web.  Proporcionan al diseñador un dominio total de la estructura de la página sin necesidad de recurrir al uso de tablas, obteniendo así una buena organización del código HTML o XHTML.
Para trabajar con posiciones dentro de una página web se utiliza la propiedad position esta puede tomar los siguientes valores:
“position: static”: es el valor predefinido por defecto de todos los elementos HTML. Los elementos se van colocando uno a continuación de otro, cuando se utiliza este valor.
 “position: absolute”: permite colocar la posición de una caja en cualquier punto de la página de manera completamente independiente de los demás elementos, los cuales pueden además superponerse por encima o por debajo.

“position: relative”: desplaza una caja respecto de su posición original.
La propiedad desplazamiento de la caja se controla con las propiedades top, right, bottom y left, cabe destacar que para el valor static las propiedades anteriores no se utilizan.

Ejemplo: 

Codigo de ejemplo:

<html>
  <head>
  <title>Uso de las etiquetas de posicionamiento</title>
  <link type="text/css" rel="stylesheet" href="miCSS.css" />

  <style type="text/css">
                }
                .estatico{
                position: static
                background-color:yellow;
                }
                .absoluto{
                position:absolute; 
                left:50px; 
                top:400px;
                background-color:yellow;
                }
                .relativo{
                position: relative;
                left:300px; 
                top:50px;
                background-color:yellow;
                }
  </style>
</head>
   <body>
  <div id="head" class="cabecera">
  <h1>EJEMPLO DE POSICIONAMIENTO CON CSS</h1>
  </div>

  <div id="estatico" class="estatico">
  </div>

<div id="absoluto" class="absoluto">
 </div>

  <div id="relativo" class="relativo">
  </div>
   </body>
</html>

Declaración de  hojas de estilos en la página Web

Para declarar estilos CSS en una página web en construcción, existen reglas muy  conocidas, una de estas reglas permite que la declaración se haga dentro de la misma sintaxis de creación de la página web o documento HTML.

“Los etilos CSS sirven para dar presentación a los documentos HTML y XML por contenidos.”
El estilo debe ser declarado  en la página web (o documento HTML) en la sección  <head> (encabezado del documento)  y  después de <title> (titulo del documento como lo mostrara el navegador).

Ahora  utilizamos el elemento <style>, en el interior del documento lo cual permitirá que el estilo sea reconocido antes de que la página web se cargue por completo, lo siguiente es un ejemplo de tal sintaxis:

<head>
<title>Aquí va un título</title>
<style type="text/css">
h1, h2, h3 {
font-weight: normal;
color: blue;
}
</style>
</head>
Utilizando el código anterior los encabezados son de tamaño normal que corresponde según su nivel y de color azul, Visualiza el resultado:

imagen


Fíjese bien que se han utilizado estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style>.

Los selectores h1, h2 y h3 le dicen al navegador la parte del documento que se verá afectada por esa regla; es decir, los encabezados de nivel uno, dos y tres.

Los selectores pueden aparecer individualmente o agrupados, separándolos con comas.
Agrupados así:

h1, h2, h3 {
font-weight: normal; color: blue;
}

O lo que es lo mismo separados, así: 
h1 { font-weight: normal; color: blue; }
h2 { font-weight: normal; color: blue; }
h3 { font-weight: normal; color: blue; }

Utilizando en el documento HTML los selectores y escribiendo las reglas por separado obtenemos este resultado (no muy distinto del primer ejemplo) los encabezados de tamaño normal como corresponden según su nivel y el color de letra azul:



imagen

Las propiedades, que en este caso serían font-weight y  color, especifican qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el tamaño de la fuente y el color.

Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma.
h1 { font-weight: normal; color: blue;
padding-left: 11px;
font-family: "Times New Roman";
color: red;
background-color: #d8da3d;}

Y si creamos un documento HTML con este código, el resultado tendría que ser el siguiente:

imagen

Ahora si que esta muy diferente! Eso se debe a que las propiedades y los valores en las reglas de estilo para el selector h1, han sido modificadas a propósito para hacerse notar de esta manera.

El valor, representado a la derecha de los dos puntos (:), establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.
h1 { font-family: "Times New Roman"; }

Cajas CSS

¿Qué es el modelo de caja?
Antes de CSS, se usaban las tablas para estructurar un sitio web, ahora tenemos el modelo de caja que es un conjunto de propiedades que definen como se muestran y se alinean los elementos HTML (cajas/rectángulos).Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde.
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis elementos: 

imagen


Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son:
  1. Objeto de contenido: se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
  2. Relleno (padding): espacio libre opcional existente entre el contenido y el borde. Define el borde del elemento, por defecto es 0, osea sin borde.
  3. Borde (border): línea que encierra completamente el contenido y su relleno.
  4. Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  5. Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
  6. Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

imagen


El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando convenientemente cada una de estas partes se obtienen resultados muy interesantes.

Uso de div y Span

La etiqueta <span>
La etiqueta <span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo.


Qué es una división <div>
La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.
El <span> funciona sin salto de línea y este puede ser modificado desde un estilo de css en cambio, el <div> si aplica un salto de línea y trabajo en bloque y también se puede aplicar un estilo css y crear mayor realce.
<html>
<head>
<title>Que es el DIV</title>
<style type="text/css">
div {
background-color: lightblue
margin: 25px;
padding: 2px;
}
span.resaltar{
color: red;
font-size:bold;
font-family: Tahoma;
}
span.fecha{
font-style: oblique;
text-decoration: underline;
}
</style>
</head>
<body>
<p>

La etiqueta <strong>DIV</strong> define una división.  Esta etiqueta permite agrupar varios elementos de bloque  (párrafos, encabezados, listas, tablas, divisiones, etc).  En principio, los navegadores no muestran nada especial cuando  se crea una división, salvo que se dé formato a la división con  la hoja de estilo.
</p>
<div>
<p>El comienzo de la eternidad empieza aqui en la tierra, la cuál es una antesala a  donde queremos llega y es a Dios.</p>
</div>
<div>
<p>El lenguaje de html es fundamental para el diseño web.</p>
</div>
<br>
<br>
<p>La etiqueta <strong>Span</strong> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque  (por ejemplo, varias palabras seguidas en un párrafo),  para después darles formato con la hoja de estilo.
</p>
<p>La <span class="resaltar">Universidad Capitán General Barrios</span> se complace en partir la primera Maestría en Ingeniería Web</span><span class="fecha">La cual dio inicio el 11 de febrero del 2012</span></p>
</body>
</html>

Estructura de las Reglas

Una regla es un tipo de estamento que (1) identifica un elemento de la página HTML y (2) le indica al navegador el estilo que deberá tener ese elemento. El siguiente es un ejemplo de una regla CSS:
P {
background-color: red;
color: #FFFFFF
}
Cada regla consta de: un selector (P) que identifica (o selecciona) un elemento de la página Web.
Al selector le sigue un bloque de declaraciones que comienza con una llave de apertura ({) y termina con otra llave de cierre (}). Entre las llaves van las declaraciones (background-color: red; color: #FFFFFF), que son las que le indican al browser el estilo para el elemento seleccionado.
Las declaraciones, a su vez, tienen dos partes: una propiedad (background-color, color) que consiste en alguna de las palabras claves definidas por el lenguaje, seguida de dos puntos (:) y un valor (red, #FFFFFF) para esa propiedad. Existen distintos valores y cada propiedad puede aceptar algunos de esos valores.
El ejemplo anterior provocará que los párrafos (elementos P) de la página Web tengan de primer plano (color) un color blanco (#FFFFFF) y un fondo (background-color) de color rojo (red). Cuando hay más de una declaración, como en este caso, deben ir separadas entre sí por punto y coma (;).

EN UN ELEMENTO:
Así como podemos crear hojas de estilos individuales, también se pueden crear estilos individuales con nombre aplicados a un solo elemento. Los elementos HTML pueden utilizar un clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL.
También son útiles para definir capas de contenidos HTML posicionadas de forma precisa.
Parar definir estilos con nombre, en sintaxis CSS, se precede el nombre con el signo #.
En JavaScript se utiliza la propiedad ids.
Para aplicar el estilo a un elemento, se utiliza el nombre de estilo individual como valor del atributo ID.

En el siguiente código se crea una clase de estilo llamada PRINCIPAL. Esta clase especifica una fuente de 15 puntos, negrita y de color rojo, y una interlínea de 20 puntos. También se define un estilo con nombre llamado AZUL1 cuyo colokr es azul.

Sintaxis CSS
<style type="text/css">
.PRINCIPAL
{
 line-height: 20pt;
font-zize: 15pt;
font-weigth: bold;
color: red;
}
#AZUL1 {color: “blue”};
</style>
Sintaxis JavaScript
<style type="text/javascript">
with(classes.PRINCIPAL.all)
{
lineHeight = "20pt";
fontSize = "15pt";
fontWeight = "bold";
color = "red";
}
ids.AZUL1.color = "blue";
</style>



No hay comentarios:

Publicar un comentario

Gracias por su comentario