…HoJaS De eSTiLo eN CaSCaDa (CSS)…

Publicado: 11 febrero, 2008 en MPI
Etiquetas:, , , , , ,

 

CSS_0

 

Las CSS son un conjunto de instrucciones que definen los formatos de los elementos HTML de la página a la que afecta. Dicho de una forma más simple: se encuentra vinculada a una página HTML y dota de estilo a todos o algunos de los elementos que la componen.

El código que compone la hoja de estilos está formado por una o más reglas de estilo. Éstas son las declaraciones de los formatos que adoptarán los elementos de la página o sitio web a la que está destinada la hoja de estilos. Mediante la regla de estilo se identifica el elemento HTML que se desea seleccionar y la apariencia que se le quiere dar (por ejemplo que todas las fotos lleven un marco de color azul).

Las hojas de estilo se pueden realizar de tres formas:

  • Aplicando estilos de forma local – para aplicar estilos a elementos HTML directamente, se escribe el código CSS dentro del atributo style de la etiqueta HTML. Al escribir style=”codigo_css” no es necesario poner el selector ya que se entiende que el elemento afectado es aquel en el que está ubicado el estilo. Un ejemplo sería:
    • <p style=”color:green;”>HOLA<p>
  • Hojas de estilo internas – suelen utilizarse cuando se pretende aplicar el estilo sólo a la página donde se ubica. El código de la hoja de estilo interna se encontrará entre las siguientes etiquetas:
    • <style type=”text/css“><style>
    Esta etiqueta se puede ubicar en cualquier parte de la página, pero suele utilizarse dentro de la cabecera (<head></head>) para mayor comodidad.
  • Hojas de estilo externas – se usan para dar un aspecto común a varias páginas de un portal. Todos los estilos se definen en una hoja de estilo externa para, posteriormente, hacer que todas las páginas del portal la consultes. Así se obtendrá un estilo común a todo el portal. Para crear una hoja de estilos externa se escribe su código en un documento de texto plano. Posteriormente se vincula a la página web mediante la inclusión de la siguiente etiqueta en la cabecera del documento HTML:
    • <link rel=“stylesheet” type=“text/css” href=“url.css”>
    La parte “url.css” es el nombre de la hoja con su correspondiente URL si fuera necesario.

En el siguiente ejemplo se puede ver el código de una página HTML titulada Ejemplo vinculada a una CSS externa llamada estilo.css :

EjemploCSS

Las reglas de estilo:

Las reglas de estilo tienen dos componentes: el selector que seleccionará los elementos sobres los que actuará la regla, y la declaración que establece las propiedades y los valores a aplicar sobre los elementos seleccionados. Una regla de estilo adopta las siguiente forma:

selector {propiedad1: valor1;}

En el caso de querer declarar más de una propiedad/valor a un mismo selector, deben estar separadas por punto y coma(;) , como por ejemplo:

selector {propiedad1: valor1; propiedad2: valor 2}

El selector

Es el primero y más importante de los elementos que componen una regla de estilo. Sin él, el navegador no sabría a qué debe aplicarle el formato que a continuación viene encerrado entre llaves. Es decir, el selector determina los elementos sobre los que se aplica una regla de estilo.

Por ejemplo, si se quieren formatear los elementos p con el color azul, se tiene que crear un selector que identifique a estos elementos:

p {color: blue;}

Identificadores

Son selectores más específicos, se incrustan en la etiqueta HTML con la finalidad de asignar una identificación a un elemento unequívocamente, que no pueda existir otro elemento con la misma id en todo el documento. un ejemplo de identificador es por ejemplo:

 

<p id=”despedida”>Contenido del párrafo</p>
y en la parte de la hoja de estilos si por ejemplo queremos asignar un tamaño se letra 14 podríamos:
p#despedida {font-size: 14px;}
Clases
Otros atributos de los elementos HTML en class. Su finalidad es la de agrupar los elementos por clases o grupos para que así, CSS u otro lenguaje pueden seleccionarlos y distinguirlos de los demás. Al igual que ocurría con id, su uso es opcional aunque recomendable. Su sintaxis en HTML sería por ejemplo:
<img src=”casa.jpg” class=”fotos“>
Y en la parte de la CSS se escribiría de la siguiente manera:
.fotos {border-width: 1px;}

Pseudo-clases

Clasifican a los elementos según el estado del mismo. Es decir, los elementos son agrupados en función de los eventos que les hayan ocurrido: que el enlace haya sido visitado, que el cursor del ratón se encuentre encima o que deje de estar sobre él,etc.

De todos los existentes hasta la fecha, los más utilizados son los de vínculos(etiqueta <a>). Existen otros referentes al idioma (:lang) o al llamado primer hijo (:first-chlid), que hace referencia al primer elemento después de otro elemento. Es posible que cuando se establezcan las especificaciones para CSS3, surjan nuevos pseudo-clases.

Un ejemplo de pseudo-clase es el siguiente:

a:visited{color:blue}

con esta pseudo-clase estamos diciendo que cuando un enlace se haya visitado adoptará un color azul.

Pseudo-elementos

Son “partes” de elementos de una página a los que HTML no otorga identidad propia, y por tanto no pueden ser seleccionados por dicho lenguaje. Sin embargo, sí que pueden ser identificados por las reglas de estilo y ser formateados de manera distinta a la de los elementos a los que pertenecen.

Un ejemplo de pseudo-elementos es el siguiente:

p:first-letter {color:green}

Con este pseudo-elemento estamos indicando que la primera letra de todos los elementos p será de color verde.

Propiedades

En CSS existen numerosas propiedades que afectan de una u otra forma a diversos elementos HTML. Aparencen todas en la Guía de Referenciacss_1 Rápida de la W3C de la cual os dejo un enlace justo aquí debajo:

Visiten la guía de Referencia Rápida de CSS en el siguiente enlace -> W3C

Si lo desean también pueden descargarse esta versión en PDF-> CSS_Guía_ReFeReNcia_RaPiDa

Un enlace interesante para prácticar sobre CSS y saber más -> ManualDelCSS.com

Enlace de interés -> CSS ZeN GaRdeN

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s