nhtrhn

2. Hojas de Estilo en Cascada (Cascading Style
Sheets) es el lenguaje utilizado para
describir la presentación de documentos
HTML o XML. CSS describe como debe ser
renderizado el elemento estructurado en
pantalla.
CSS es uno de los lenguajes base de la Open Web y
posee una especificación estandarizada por parte del
W3C. Desarrollado en niveles, CSS1 es ahora
obsoleto, CSS2.1 es una recomendación y CSS3,
ahora dividido en módulos más pequeños, está
progresando en camino al estándar.

3. Al principio las páginas web estaban hechas sólo
con HTML, sin embargo pronto se vio que este
lenguaje tenía muchas limitaciones cuando se
quería hacer el diseño de la página y el estilo de
sus elementos.
Para solucionar esto se creó el lenguaje CSS. Con
CSS separamos los dos aspectos de la página. Por
un lado con HTML nos ocupamos del contenido, y
por otro con CSS nos ocupamos del estilo.
De esta manera, aunque tenemos que utilizar dos códigos
diferentes, los códigos quedan mucho más claros.

4. Desde la creación de este lenguaje ha habido varias versiones.
La primera es CSS 1, y la actual es CSS 2.1; se está
trabajando actualmente en una nueva versión más avanzada,
CSS 3. El problema es que no todos los navegadores
interpretan correctamente la versión CSS 3.
CSS1 CSS2 CSS3

5. CSS3
• Los estilos CSS deben darse de alta en un fichero acorde
para ello, no obstante:
• Pueden declararse dentro de un HTML mediante la
etiqueta <style>
• Pueden aplicarse directamente sobre un elemento
concreto en la propiedad "style".
• Lo correcto es llevar los estilos a un o unos ficheros css,
pero se permite añadir pequeños retoques directamente
sobre el HTML.

6. CSS3
• Cómo se define un estilo en css:
Selector { propiedad: valor; ...}
Declaración
H1 {color:#CC9900;}
Ejemplo:

7. CSS3
• Principales características
• Permite definir el estilo de cada elemento HTML de
manera exacta.
• Permite escalar tamaños en función del tamaño de la
pantalla.
• Aísla el contenido de la presentación.
• Permite incorporar cierta lógica a los estilos
aplicados (LESS y SASS).
• Permite crear plantillas de estilos que pueden
importarse en otros HTML.

8. Separación del
contenido y la
presentación
Consistencia
del sitio
Ancho de
banda
Formateo
de página
Accesibilidad

9. a.btnAzul {
display: block;
width: 250px;
height: 60px;
padding: 25px 0 0 0;
margin: 0 auto;
background: #4682B4;
background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87CEEB), color-stop(100%, #4682B4));
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #62C2F9;
border-radius: 10px;
font: bold 25px Helvetica, Sans-Serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #3090C7;
text-shadow: 0px 1px 2px #62C2F9;
}
<div id="contenedor">
<a href="#" class="btnAzul">Da Click</a>
</div>

10. CSS3
• Un selector es un identificador para saber sobre qué elemento
HTML debemos aplicar el estilo.
• Existen diferentes tipos de selectores.
• Se pueden crear jerarquías de estilos.
• Podemos definir estilos por defecto para los elementos HTML
estándar.
• Los estilos pueden sobreescribir a otro, el orden de sobreescritura
es el mismo en el que se cargan los ficheros css o se lee el fichero.
• Si queremos que un estilo prevalezca sobre el resto, podemos
indicarlo con !important

11. CSS3
• Tipos de selectores:
• De elemento HTML:
• h1, table, div, span…
• De identificador
• Todos los elementos HTML cuya propiedad "id" tenga un
determinado valor, tendrán ese estilo.
• De clase
• Todos los elementos HTML cuya propiedad "class" tenga
un determinado valor tendrán ese estilo.

12. CSS3
• Normalmente se le aplica un estilo por defecto a los elementos
HTML para conformar una plantilla.
• La personalización definitiva se suele realizar haciendo uso de la
propiedad "class".
• No es recomendado usar el selector por id. Sólo se recomienda
cuando el componente, además de estilo realiza alguna
funcionalidad javascript.
• Cuando incluyamos plantillas en un fichero HTML hay que estar
seguros que no incorporan estilos CSS que sobreescriban los
nuestros.
• En caso de conflicto, debemos asegurar que nuestros estilos
quedan situados por encima de los otros (aunque no siempre es
posible)

13. CSS3
• CSS3 como mejora de CSS incorpora propiedades para una mejor
maquetación y decoración de los elementos.
• Se han añadido propiedades para aplicar efectos de pintado.
• Se permiten realizar animaciones.
• Habilita el uso de lógica en los CSS.
• Ejemplo de dibujado HTML + CSS: Minion