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;
}
CSS
By Rafael Meza
CSS
Introducción a CSS
- 698