CSS
Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
¿Cómo funciona?
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 XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.
Es una tecnología desarrollada con el fin de separar la presentación de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posición de los elementos, márgenes, tipos de letra, etc... Quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.
Atributos
Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.
Valores
Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor "red".
Selectores
Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta
del documento HTML.
Hay tres tipos de selectores:
· Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
· Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
· El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:
.mi_clase.
La sintaxis:
Es muy simple, primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el siguiente ejemplo:
/*CSS sobre selector de etiquetas*/
body {
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;
CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página
Web:
1. Una hoja de estilo externa, que es una hoja de estilo que está almacenada en un
archivo diferente al archivo donde se almacena el código HTML de la página
Web. Esta es la manera de programar más potente, porque separa
completamente las reglas de formateo para la página HTML de la estructura
básica de la página.
2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro
de un documento HTML. (Va a la derecha dentro del elemento
). De esta
manera se obtiene el beneficio de separar la información del estilo, del código
HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada
de una página a otra, (esta posibilidad es difícil de ejecutar si se desea para
guardar las copias sincronizadas). En general, la única vez que se usa una hoja
de estilo interna, es cuando se quiere proporcionar alguna característica a una
página Web en un simple fichero, por ejemplo, si se está enviando algo a la
página web.
3. Un estilo en línea (inline), que es un método para insertar el lenguaje de estilo
de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder
no es totalmente adecuada. El incrustar la descripción del formateo dentro del
documento de la página Web, a nivel de código se convierte en una tarea larga,
tediosa y poco elegante de resolver el problema de la programación de la página.
Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar
un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debería
ser, pero funciona. Este es el método recomendado para maquetar correos
electrónicos en HTML.
https://moodleite.files.wordpress.com/2010/10/css.pdf
https://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo