Imprimir

Lenguaje CSS

Posteado en Diseño: CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los navegadores.

La idea es separar el contenido de un documento .html de su aspecto.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Cuando creamos una página web, primero utilizamos el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: los títulos y subtítulos, los párrafos, texto destacado, lista de elementos, tablas, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento colocado: tamaño, color y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

La forma más usual de dar estilo a un documento es utilizar una hoja de estilo externa vinculada a un documento .html a través de la etiqueta <link> situada en la sección <head>. Si por ejemplo, nuestra hoja de estilos se llama mis_estilos.css, la línea que debemos poner en la cabecera de la página web, si el archivo .css está en una carpeta posterior a la que tenemos la página web, es:

<link rel="stylesheet" type="text/css" href="mis_estilos.css" />

Es decir, tenemos 2 archivos: uno con extensión .html donde colocamos el contenido y otro con extensión .css donde escribimos las reglas de estilo que afectarán al documento html.

Un documento .css es un conjunto de Reglas de Estilo .css con las siguientes características:

regla css

  • Cada regla debe escribirse entre llaves { }
  • Cada declaración termina en punto y coma ;
  • Cada propiedad se separa de su valor por dos puntos :
  • El orden en el que aparecen las reglas en el documento es indiferente salvo que afecten al mismo selector y a la misma propiedad con un valor distinto, si es así prevalece la última.

reglas css

Hay 3 tipos de selectores ( exceptuando el selector universal que es el asterisco * ):

  • Selectores de Tipo (corresponden a las etiquetas en código HTML) y su nombre es el mismo que las etiquetas HTML.
  • Selectores de Identificador (corresponden al atributo ID de las etiquetas y deben ser únicos en el archivo HTML) además deben comenzar con el símbolo de almoadilla #
  • Selectores de Clase (corresponden al atributo CLASS de las etiquetas y puede haber varios dentro de un archivo HTML) además deben comenzar con un punto . simple

Utilizando reglas de estilo .CSS podemos actuar sobre:

  • Los Tipos, tamaños y colores, alineación, espaciado,... de texto
  • La Visibilidad y posicionamiento de elementos
  • Las propiedades de las listas, tablas, ...
  • Las propiedades de cualquier etiqueta HTML
  • Los Márgenes, fondo y colores de zonas del documento,...
  • Las propiedades de Caja o cualquier tipo de contenedor

etc...

 Ejemplo:

/* HOJA DE ESTILOS CSS */
* {margin: 0; padding:0}        /* sin margen ni relleno  */
body {
    background: #999999;
    text-align: center;        /* para centrar en IE */
}
#main {
    width: 640px;
    margin: 10px auto;        /* para centrar en todos los navegadores */
    background: #f1f1f1;
    text-align: left;
    border: 1px solid #000000;
}
p,h1,h2,h3,h4,h5,h6,ol,ul { padding: 5px 20px;}
h1{ color: #ff0000; }
h2{ color: #00ff00; }
h3{ color: #0000ff; }
h4{ color: #ffff00; }
h5{ color: #ff00ff; }
h6{ color: #00ffff; }
hr { border: 1px solid #0000ff;}
.rotular {
    background: #ffff00;
}
.recuadro { 
    border: 0.05em solid #0000ff;
    padding: 0 0.2em;
}
.rayado_dis { border-bottom: 1px dashed #ff0000;}

Aula Virtual / Foro

aula virtualforo

Utilidades...

imprescindibles Chrome Safari Opera IE9 Adobe Reader 7zip Flash Java Filehippo Ninite

Visitas...

Hoy9
Ayer4
Mes102
TOTAL58809

En línea...

Tenemos 6 visitantes y ningun miembro en Línea