CURSO DE CSS
1.- INTRODUCCION
1.1.- Definición
CSS son las siglas de Cascading Style Sheets. Estas Hojas de Estilo en Cascada
son un lenguaje formal usado para definir el aspecto de un documento estructurado
escrito en HTML y XHTML. Sirve tanto para presentarlo en la pantalla como para
imprimirlo. El desarrollo de las CSS tiene como objetivo separar los contenidos de la
página web de su presentación. Esta característica permite a los desarrolladores web
controlar el estilo y el formato de múltiples páginas web al mismo tiempo.
Este lenguaje da como resultado una mejor organización del código HTML,
menos peso en las páginas y más flexibilidad en los cambios.
Uno de los aspectos más importantes a la hora de crear una página web es la
accesibilidad. Aproximadamente entre un diez y un veinte por ciento de la población
padece algún tipo de discapacidad. Aplicar el principio básico de separar estructura de
apariencia y aplicar ciertas reglas sencillas para hacer tus páginas perfectamente
accesibles, producirá efectos secundarios positivos.
Entre estos efectos podemos dar la posibilidad a un ciego, por ejemplo, de
escuchar nuestros contenidos. La facilidad de mantenimiento del sitio web provoca
más rápidez de carga y mayor accesibilidad para las diferentes tecnologías de
navegación por la Web, como por ejemplo los robots indexadores de los motores de
búsqueda.
1.2.- Versiones
El W3C (World Wide Web Consortium) es el encargado, desde 1995, de
formular la especificación de las hojas de estilo que servirán de estándar para los
navegadores.
En el año 1996 se publica la primera recomendación oficial conocida como CSS
1, que es soportada por todos los navegadores. Más tarde en 1998 se publica la
recomendación CSS 2, que se revisó en 2007 y corresponde a la versión CSS 2.1. La
cual es actualmente utilizada por los principales navegadores. Hasta llegar al 2009
con las nuevas especificaciones de CSS 3 que están todavía por terminar. Y que ya son
muchos navegadores que se han dado prisa por integrarlas.
Nota
A lo largo del manual se han establecido diferentes notaciones de código para
que se pueda apreciar cómo se distribuye tanto el HTML junto al CSS como separado.
En algunos casos el código está completo para que pueda ser utilizado como
referencia para futuros ejercicios.
-3-
CURSO DE CSS
1.3.- Test
1. ¿Qué se entiende por CSS?
Class Style Sheets
Cascading Style Sheets
Cascading Style System
Ninguna de las anteriores
2. Indicar cual es verdadera o falsa, al mejorar la Accesibilidad de un sitio web se
pretende:
Hacer una versión sólo texto para que los discapacitados puedan utilizarla
Que el mayor número posible de personas pueda entrar a esa web y usarla
Reducir la cantidad de contenidos para que todo se vea mejor
Lograr que algunos contenidos sean más visibles que otros para así hacerlos
más accesibles
-4-
CURSO DE CSS
2.- SINTAXIS CSS
2.1.- Reglas y su jerarquía
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o
más elementos. Las hojas de estilo están compuestas por una o más de esas reglas
aplicadas a un documento HTML o XHTML.
Veamos los componentes sobre los que se basan las reglas CSS. La regla tiene
dos partes: selector y declaración.
§
§
Un selector indica al navegador que elemento del documento se verá afectado
por la regla.
Una declaración establece cuál será el efecto sobre ese elemento. Van entre
llaves ( {} ). Y cada declaración está compuesta por:
– Propiedad: especifica qué aspecto del diseño va a cambiarse.
– Valor: da valor para la propiedad.
-5-
H1 { color:
Propiedad
orange }
Valor
Selector
Declaración
Regla
Ejemplos:
Partiendo de la sintaxis general:
selector { propiedad: valor;
propiedad: valor;
…
}
– el elemento p (párrafo) tiene el color (propiedad) azul (valor)
p { color: blue}
– en caso de que el valor contenga varias palabras irá entrecomillado
p { font-family:”Times New Roman”}
CURSO DE CSS
– si lo que se desea es especificar más de una propiedad, entonces se separan
por punto y coma (;)
h1 {
color:red;
text-align:center;
}
– en caso de definir una misma propiedad para varios selectores se separan por
una coma (,)
p, h1, h2 {
color: green;
text-align:left;
font-family: Arial;
}
El aspecto de un elemento depende del contenedor donde se encuentre, que a
su vez es otro elemento. De esta forma podemos asignar un estilo específico dentro
de ese elemento.
Ejemplo:
ol p {font-size: small}
Se asigna un tamaño de fuente pequeña a todo el texto situado dentro de un
párrafo < p>, que sólo contenga una lista desordenada < ol>.
Es importante tener en cuenta que en la definición del estilo dejamos un
espacio en blanco entre las etiquetas, esta sintaxis indica la jerarquía.
2.2.- Comentarios
Son muy útiles los comentarios dentro del código HTML para breves
aclaraciones que facilitan el entendimiento del mismo.
La sintaxis es la siguiente:
/* comentario */
2.3.- Uso CSS
Estas reglas pueden ser embebidas dentro del documento HTML o separadas en
un archivo css. La ventaja de esta última opción, que ya hemos comentado, es que
con una sola hoja de estilo cualquier cambio en un elemento afectará a
Página siguiente  |