22/2/10

Etiquetas de HTML / marcas básicas

Descarga el pdf
Publicado por en No hay comentarios:

Conceptos básicos de CSS

Fuente: http://observatorio.cnice.mec.es/

Una hoja CSS es un conjunto de estilos que se van a aplicar a una página HTML. Los estilos se definen como reglas. Estas reglas le dicen a los navegadores cómo mostrar los tipos específicos de estructuras y aspecto visual de una pagina. Para entender cómo los estilos afectan el aspecto de un Web, necesitamos entender qué sucede a un Web en ausencia de cualquier regla del estilo.

Cuadro 1.3. Las partes de una regla del CSS

Cada regla está formada por dos partes:

1. Un selector que define los elementos del HTML (etiquetas html), a los cuales se va a aplicar una regla.

2. Una colección de una o más declaraciones, compuesta de una propiedad y de un valor.

3. Estas características son las que describen el aspecto de todos los elementos que corresponden al selector.

Por ejemplo, el “font-weight”(estilo de fuente) dice al navegador que esta declaración, defina el estilo de fuente “bold” (negrita, subrayada, itálica etc) para el texto. Después de los dos puntos que separan las dos partes de una declaración, vemos un valor que es el que será aplicado a esa característica. Es decir, un valor equivalente a “negrilla” hará que la fuente en ese documento aparezca en negrita.

Cada declaración debe estar seguida por un punto y coma y aunque hay excepciones, si es recomendable ponerlo siempre.


Partes de una regla del CSS; Ejemplos

h1 { color: rojo; }

El selector, h1, indica que esta regla se aplica a todos los títulos h1 en el documento. La característica es el color, (que refiere al color de la fuente) y el valor que quisiéramos que la característica “color” tomara es “rojo”.

p { font-family: pequeño; color: verde; }

El selector, p, indica que la regla del estilo se debe aplicar a todos los párrafos en documento. Hay dos declaraciones en la regla. La primera, que establece que todos los párrafos deben tener un tamaño de fuente equivalente a pequeña; y la segunda declaración, que establece que el color se fije al verde.

El resultado de esta regla es que todos los párrafos en el documento aparecerán en color verde y fuente “pequeña”.

p {
font-family: ‘Verdana’, Arial, serif;
}

Hay algunas propiedades a los que se le pueden aplicar varias características del CSS, como por ejemplo en este caso, la propiedad equivalente a la fuente-familia (tipografía). Las características del CSS, nos permiten asignar una lista de valores posibles a la propiedad y no sólo un valor fijo o único, es decir, se pueden establecer diferentes tipos de tipografías para un mismo párrafo.

Cuando como en este ejemplo, se utiliza una lista de valores posibles, estos han de estar separados por comas. En este caso, la etiqueta font-family establece una lista de valores en las que el estilo “verdana”, queda situado en primer lugar de tal forma que el navegador utilice esta tipografía para mostrar el texto.

Si el navegador no tuviera instalada esa fuente, utilizaría o mostraría la siguiente de la lista que en este caso sería Arial. Y si ni lo uno ni lo otro de estas fuentes está disponible en el sistema del usuario, el navegador omitiría las anteriores y pasaría a mostrar la fuente serif. Siempre que un valor en una lista incluya espacios (al igual que el caso con la fuente nombrada “Verdana”), debes poner ese valor en comillas.


¿Dónde se pueden definir los estilos CSS?

Puedes definir estilos del CSS en cualquiera de estos tres lugares:

  • De forma directa dentro del HTML (tales declaraciones del estilo se llaman declaraciones en línea)
  • Encajada en el propio html entre las etiquetas <style> …….