CSS

Cascading Style Sheets - Hojas de Estilo en Cascada

¿Para que sirve?

CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG

¿Cómo funciona?

h2 {color: green;}

h2 ---> es el selector
{color: green;} ---> es la declaración
- color ---> es la propiedad o atributo
- green ---> es el valor

/* comentarios */

LIMITACIONES

Los selectores no pueden usarse en orden ascendente según la jerarquía del DOM
Dificultad para el alineamiento vertical
Ausencia de expresiones de cálculo numérico para especificar valores (por ejemplo margin-left: 10% – 3em + 4px

Ventajas

Control centralizado de la presentación de un sitio web completo
Optimización del ancho de banda de la conexión, pues pueden definirse los mismos estilos para muchos elementos con un sólo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos

Formas de usar CSS

Un estilo en línea
Una hoja de estilo interna
Una hoja de estilo externa

HACKS

<!-- (…) -->
<head>
	<title>Título</title>
	<link href="all_browsers.css" rel="stylesheet" type="text/css">
	<!--[if IE]> <link href="ie_any_version.css" rel="stylesheet" type="text/css"> <![endif]-->
	<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
	<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent_versions.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
	<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
<!-- (…) -->

/* IE6 and below */ 
* html #uno { color: red }

javascripts

```
Jquery
```
Gsap
AngularJs

DEMO

```
Alineación vertical
```
Position: no static
z-index

RESET

*, *:after, *:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

-webkit-touch-callout: none;

}

*, *:after, *:before{

margin: 0; padding: 0;

}