CSS

Qué es CSS?

Son un conjunto de reglas de formato que determinan el aspecto del contenido de una página Web. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación. El contenido de la página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la sección head). La separación del contenido y la presentación hace que resulte mucho más fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las distintas páginas cuando se desea realizar algún cambio.

Ventajas.

La ventaja más sobresaliente del uso de Estilos en Cascada es que el Diseñador puede separar el contenido del formato debido a que si él desea modificar el formato lo puede hacer por separado debido a que todo está contenido en un solo lugar, y con la modificación de ciertas propiedades puede afectar todo aquellos elementos en donde se hayan aplicado los estilos sin la necesidad de ir página por página del sitio o elemento a elemento.

Implementación

Un estilo puede aplicarse a cada elemento de tres maneras que son:

  •       Atributos
  •       Etiqueta <style></style>
  •       Vinculación de Hojas de Estilos
  1. ATRIBUTOS. Todos sabemos que las etiquetas poseen atributos que son características adicionales de una etiqueta o tag las cuales definen como será interpretada la etiqueta. En este caso cada etiqueta posee un atributo llamado style, el cual define directamente las propiedades del formato que poseerá el contenido.
  2.  ETIQUETA. Directamente en el código HTML pueden ser definidos los formatos de los estilos que se desean aplicar, las etiquetas que se colocan son <style></style> éstas se insertan entre las etiquetas <head></head> que posee la estructura básica de un documento HTML.Entre las etiquetas style se definen las reglas de formatos que colocaran en la página web, la única restricción es que estos estilos solamente estarán disponibles en la página web en donde se han colocado.
  3. VINCULACIÓN DE HOJAS DE ESTILOS. Es cuando se define un archivo propiamente de estilos los cuales se colocan en la o las páginas donde se desean mostrar los formatos. Cuando se vinculan los archivos de hojas de estilos se muestra una etiqueta adicional que es la siguiente:

  <link href=”miestilo.css” rel=”stylesheet” type=”text/css” />

Sintaxis Básica

Selector{ propiedades o atributo: valor de propiedad; }

Selectores

El selector es un término (por ejemplo p, h1, un nombre de clase o un identificador) que identifica el elemento con formato; el bloque de declaraciones define cuáles son las propiedades de estilo.

EXISTEN TRES TIPOS DE SELECTORES:

  •       Etiqueta.
  •       Clase
  •       Id.

1. SELECTOR POR ETIQUETA:

Es fácil de identificar a una regla de estilo por Etiqueta ya que el nombre del Selector es el mismo nombre de etiqueta que será afectada por el estilo.

Ejemplo:

h1 {

font-size: 16 pixels;

font-family: Helvetica;

font-weight:bold;

}

Cada declaración consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1 vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvetica y negrita.

2- SELECTOR POR CLASE:

Si queremos utilizar estilos que se puedan repetir para determinadas partes de nuestros textos, debemos utilizar las “clases”, a las que se les pondrá un punto antes del nombre de la regla. Estas reglas podemos definirlas en la propia página web o en un archivo css externo.

Ejemplo:

.resaltado {

color: #000000;

background-color: #ffff00;

font-family: “comic sans”;

}

Un estilo así definido como clase, podremos utilizarlo tantas veces como queramos y aplicarlo a cualquier elemento de nuestra página utilizando el atributo class que se encuentran en las etiquetas de HTML.

Ejemplo:

<p class=”resaltado” >Este es mi Ejemplo de Clase</p>

Nota: Cuando se aplica la clase en cualquier etiqueta se debe tomar en cuenta que el nombre de la clase ya no irá antecedido de un punto.

3. SELECTOR POR ID.

Podemos aplicar estilos en cascada a nuestros archivos HTML a través de un selector llamado ID que nos brinda más posibilidades de mejorar la presentación visual o estilización de nuestros archivos HTML.

Al definir un estilo por ID debe ir precedido de una almohadilla o signo numeral el nombre de la regla, como por ejemplo:

#identificador {

atributo1:valor;

atributo2:valor;

}

Donde el nombre que se define es el nombre del elemento HTML  en donde se aplicará el Estilo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

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

A %d blogueros les gusta esto: