Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 274

Visitas el mes pasado: 303

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




1 El lenguaje CSS (I)

1.1 Sintaxis CSS

html

Versiones de CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de las páginas web creadas mediante el lenguaje HTML y XHTML

Al principio las páginas web estaban hechas sólo con el HTML, sin embargo pronto se vió que este lenguaje tenía muchas limitaciones cuando se quería hacer el diseño de la página y el estilo de sus elementos. De manera que el código se recargaba con demasiadas etiquetas y atributos que indicaban el estilo y posición de cada elemento.

Para solucionar esto se creó el lenguaje CSS. Con CSS separamos los dos aspectos de la página. Por un lado con HTML nos ocupamos del contenido, y por otro con CSS nos ocupamos del estilo. De esta manera, aunque tenemos que utilizar dos códigos diferentes, los códigos quedan mucho más claros.

Además CSS tiene la ventaja de poder utilizar el mismo código para varios elementos de la página, por ejemplo escribiendo una sola línea, podemos poner todos los títulos con el mismo aspecto (mismo tamaño, color, tipo de letra, etc.).

Desde la creación de este lenguaje ha habido varias versiones. La primera es CSS 1, y la actual es CSS 2.1; se está trabajando actualmente en una nueva versión más avanzada, CSS 3. El problema es que no todos los navegadores interpretan correctamente la versión CSS 3, y para que ello ocurra tienen que salir nuevas versiones de los navegadores, con el soporte adecuado para las nuevas instrucciones. Incluso la versión CSS 2.1, que es la que vamos a estudiar aquí, tiene algunos fallos en algún navegador antiguo como Internet Explorer 6.


Escribir en CSS

El código CSS es un código escrito con texto, pero también tiene unas normas de escritura (sintaxis), por otra parte bastante lógicas.

En primer lugar, si lo que pretendemos mediante CSS es modificar el estilo de una o varias etiquetas HTML en una página web, deberemos indicar a qué etiqueta o etiquetas afecta la modificación. Esta parte del código se llama Selector. Para indicar el selector, salvo casos especiales, escribiremos el nombre de la etiqueta o una referencia a ella. por ejemplo, si en esta parte escribimos h1, el estilo que apliquemos afectará a todas las etiquetas h1 que haya en la página.

Despúes tendremos que escribir qué es lo que queremos cambiar de ese texto y cómo. Todo ello formará un bloque, que llamaremos declaración. En CSS se emplean los signos { y } para delimitar este bloque;( fíjate bien que son llaves); estos signos en un teclado normal los encontrarás a la derecha de la letra Ñ, y se escriben pulsando la tecla Alt Gr a la vez que su tecla correspondiente. De momento tenemos lo siguiente:

Ejemplo: h1 { }

Dentro de las llaves escribirémos qué es lo que queremos cambiar y el nuevo valor que le daremos. Se trata de una serie de palabras clave que indican qué es lo que hay que cambiar. Cada una de estas palabras clave es una propìedad. Cada propiedad tiene un valor que es lo que debe cambiarse (tamaño, color, aspecto, etc), esto lo indicamos escribiendolo después del nombre de la propiedad, de la cual va separado por el signo de dos puntos (:)

Ejemplo: h1 { font-size : 12px }

En este ejemplo font-size es la propiedad, mientras que 12px es el valor. Como puede observarse ambas están separadas por el signo de dos puntos. Lo que indicamos en este ejemplo es que el tamaño de letra (font-size) será de 12 pixels (12px) para todos los textos que estén encerrados dentro de una etiqueta h1.

dentro de una misma declaracion (signos de llaves) puede haber más de una propiedad con su valor, éstas deben ir separadas por el signo de punto y coma.

Ejemplo: h1 { font-size : 12px; color : blue; }

El signo de punto y coma, se puede poner al final de la última propiedad, no es obligatorio, pero resulta conveniente, por si queremos añadir alguna propiedad más.

El lenguaje CSS se basa en este tipo de estructura, que podemos resumir de la siguiente forma:

selector { propiedad : valor; propiedad : valor; }

El conjunto completo de selector con su declaración (encerrada entre llaves) y las propiedades se llama regla CSS o simplemente regla. El siguiente esquema muestra cada una de las partes que componen una instrucción o regla en CSS.

Esquema sintaxis CSS

Definiciones

Volvemos a definir los términos anteriores, dada su importancia, ya que son la base del lenguaje CSS.

en teoría,un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaracion puede estar formada por un numero infinito de pares propiedad/valor.




En la siguiente página veremos algunas normas más sobre el lenguaje CSS.

Normas de escritura.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com