CSS3
Las hojas de estilos en cascadas (CSS) son un lenguaje utilizado para describir el aspecto visual de una página web o cualquier aplicación virtual. Usando CSS podemos cambiar colores, margenes, bordes, tipografias, fondos, y mucho más. El contenido de este curso gratuito de CSS3 desde Cero consolidará las Fundaciones CSS desde las más básicas hasta un nivel muy avanzado.
La primera versión de CSS fue publicada a fines del año 1996 y fue logrando popularidad y aceptación hasta llegar a la versión 2.1, estándar actual que ofrece gran compatibilidad con la mayoría de los navegadores del mercado.
A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definición, esta versión nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseño web actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.
Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css y que describen el aspecto que deben tener los diferentes elementos HTML de una página.
Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos:
- “Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles respetivamente.”
- “El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro.”
Veamos un ejemplo concreto de cómo se expresarían las reglas anteriores en el lenguaje de las CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
h1, h2 {
color: black;
font-size: 16px;
}
h2 {
font-size: 14px;
}
p {
color: rgb(32,32,32);
text-align: left;
}
|
En el ejemplo anterior tenemos un total de 3 reglas, cada una se compone de un selector que indican a qué elementos HTML aplica la regla que es el texto que precede a las llaves de apertura y cierre de la regla. En la primera regla, el selector es “h1, h2”, en la segunda “h2” y en la tercera “p”.
Cada regla se compone a su vez de propiedades que especifican qué exactamente se hará con esos los elementos HTML a los que aplica.
El selector de la primera regla, por ejemplo, indica que esta regla se refiere a los elementos HTML <h1> y <h2> y que a ellos se aplicarán el color negro (propiedad “color”) y un tamaño de letra de 16 pixeles al texto (propiedad “font-size”).
Un ejemplo rápido de esto:
|
1
2
3
4
5
6
7
|
p a {
text-decoration: underline:
}
p.text-izq {
text-align: left;
}
|
INTRODUCCION AL CSS