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 |