En este blog archivo publicaciones para estudiar y aprender CSS. A cada publicación de este blog, las cuales son extraidas de otras páginas, le anexo al pie de página, la respectiva fuente de origen.
Cuando no existía el lenguaje CSS la estructuración de una página web (título, secciones, subsecciones…) y el diseño/presentación (colores, tamaños de fuente, efectos de elementos…) estaba integrado en el mismos código.
Imaginemos. Digamos que quisiéramos destacar un encabezado de página con el texto de color rojo, por ejemplo:
CSSADICTUS
Antiguamente escribiríamos todo en lenguaje HTML. Utilizaríamos un atributocolor combinando con el elementofont como vemos a continuación:
<h1><font color="#FF0000">CSSADICTUS<font><h1>
Con CSS utilizaríamos la propiedadcolor. Por otro lado el elemento de formato font es perfectamente prescindible.
<h1 style="color:#FF0000">CSSADICTUS<h1>
Sintaxis CSS
Se compone de sentencias en las que se establece un atributo de estilo y un valor para el mismo, ambas separadas por el signo de dos puntos “:”.
color : red; Estas sentencias se aplican a las etiquetas HTML estableciendo características propias de su aspecto. Dentro de sus usos distinguimos entre especificación interna y especificación externa.
Terminología
HTML
Estructuración
<p class="articulo">
<p class="articulo">: elemento
p: etiqueta
class: atributo
articulo: valor
CSS
Diseño
p{color:red;}
p{color:red;}: sentencia
p: selector -de elemento
color: propiedad
red: valor
Una definición de un estilo en CSS tiene dos partes principales: un selector y una o más declaraciones.
Estructura Reglas CSS
Selector
Apertura
Declaración 1
Declaración 2
Cierre
h1
{
color:
blue;
font-size:
12px;
}
propiedad
valor
propiedad
valor
Como vemos en este ejemplo, cada declaración está compuesta a su vez por una propiedad y su valor.
Normalmente los selectores son elementos HTML a los cuales se les quiere aplicar un estilo.
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
esa etiqueta 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. A lo que queremos cambiar le llamamos propiedad, y lo indicamos mediante
una palabra clave. Cada propiedad tiene un valor (o varios). El valor indica la variación de la propiedad, es decir, en cuanto
o en qué ha cambiado la propiedad.
Por ejemplo, si queremos cambiar el tamaño de los títulos con etiqueta h1 utilizaremos el siguiente código:
h1 { font-size : 12px }
En este ejemplo h1 indica las etiquetas a las que debemos aplicar este estilo;
font-size indica la propiedad (el tamaño de letra), mientras que 12px
es el valor, es decir la variación de la propiedad (el cambio de tamaño).
Como puede observarse la propiedad y e valor están separados por el signo de dos puntos.
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; }
En este ejemplo las etiquetas h1 reciben dos propiedades, con la primera cambiamos el
tamaño de letra, y con la segunda cambiamos el color de letra.
El signo de punto y coma, se puede poner al final de la última propiedad, aunque no es obligatorio
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:
Una instrucción CSS determina los valores o propiedades que deben tener los elementos de tu documento electrónico. En su estructura básica, la instrucción consiste en un selector y corchetes. Las declaraciones se enumeran dentro de los corchetes, separadas por punto y coma. Cada instrucción consta del nombre de la propiedad, dos puntos y un valor específico. Después de la instrucción final y antes del corchete de cierre, se puede añadir otro punto y coma, pero no es obligatorio.
Definiciones
Volvemos a definir los términos anteriores, dada su importancia, ya que son la base del
lenguaje CSS.
Regla: cada uno de los estilos que se aplican a una parte de la página en una hoja de estilos CSS.
Cada regla esta compuesta de una parte de "selectores", un simbolo de
"llave de apertura" ( { ), otra parte denominada "declaraciones" y por ultimo,
un simbolo de "llave de cierre" ( } ).
Selector: indica el elemento o elementos HTML a los que se aplica
la regla CSS.
Declaracion: especifica los estilos que se aplican a los elementos.
Esta compuesta por una o mas propiedades CSS con sus valores.
Propiedad: permite modificar el aspecto de una caracteristica del elemento.
Valor: indica el nuevo valor de la caracteristica modificada en el elemento.
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.
