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