HTML5 y CSS3

/* Todos los span con el atributo "lang" en negrita */
span [lang] {font-weight: bold;)

/* Todos los span en portugués en verde */
span [lang="pt"] {color: green;}

/* Todos los span en inglés americano en azul */
span [lang ~="en-us"] {color: blue;}

/* Cualquier campo en chino en rojo, selecciona chino simplificado (zh-CN) y tradicional (zh-TW) */
span [lang |="zh"] {color: red;}

/* Todos los enlaces internos con el fondo dorado */
a[href ^="#"] {background-color: gold}

/* Todos los enlaces en los que la URL finaliza en ".cn" en rojo */
a[href $=".cn"] {color: red;}

/* Todos los enlaces en los que la URL contiene "ejemplo" con el fondo gris */
a[href *="ejemplo"] {background-color: #CCCCCC;}

• Combinador descendente E F: Selecciona un elemento F que desciende de E. Los descendientes de E son sus elementos hijos, nietos, etc. El elemento combinador es el espacio entre E y F.

• Combinador hijo E>F: Selecciona un elemento F que es hijo de E, pero no selecciona los descendientes con más profundidad (nietos, biznietos, etc.). El carácter > es el elemento combinador.

• Combinador hermanos adyacentes E + F: Cuando dos elementos E y F comparten el mismo padre, se selecciona F si es inmediatamente precedido por E. El carácter + es el elemento combinador.

<style>
     h2~p { color:green; }
</style>

<div id="uno">
<p>Este elemento no será visible porque es hermano pero anterior</p>
<h2>This is a test</h2>
<p>Este p es hermano de h2</p>
<p>Este otro p también es hermano de h2</p>
</div>

<div id="dos">
<p>Este p no se pintará</p>
</div>

• :nth-child(n) selecciona elementos basándose en la posición de los hijos. Puede utilizar números, expresiones y las palabras odd (impar) y even (par). De este modo podemos hacer el típico zebrado en las tablas de forma muy sencilla.

• :nth-last-child(n) sigue la misma idea que el anterior, pero selecciona a partir del último elemento.

• :last-child selecciona el último elemento de una lista (es lo mismo que :nth-child(1)).

• :only-child es equivalente a: :first-child:last-child, o bien a: :nth-child(1):nth-last-child(1), seleccionando un elemento que es hijo único (es primero y último hijo).

• :nth-of-type(n)

• :nth-last-of-type(n)

• :first-of-type que es igual a :nth-of-type(1)

• :last-of-type que es igual a :nth-last-of-type(1)

• :only-of-type que es igual a :first-of-type:last-of-type y también es igual a :nth-of-type(1):nth-last-of-type(1)

• :checked selecciona los elementos de tipo input que estén seleccionados

• :disabled selecciona los elementos de tipo input que estén deshabilitados

• :enabled selecciona los elementos de tipo input que estén habilitados

• :empty selecciona elementos que están vacíos, es decir que no tienen hijos

• :not selecciona elementos que no cumplen la declaración especificada

• :required selecciona elementos de tipo input que tengan el atributo «required» especificado

p {  color: rgba(0,0,0,0.5) }

background:hsl(320, 100%, 10%);
background:hsl(320, 80%, 30%); 
background:hsl(320, 60%, 50%); 
background:hsl(320, 40%, 70%); 
background:hsl(320, 20%, 90%); 

<img src="img_02.jpg" style="opacity:0.2">
<img src="img_02.jpg" style="opacity:0.4">
<img src="img_02.jpg" style="opacity:0.6">
<img src="img_02.jpg" style="opacity:0.8">
<img src="img_02.jpg" style="opacity:1">

filter: alpha(opacity = 50);

.bordered {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px / 10px;

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

box-shadow: 0 0 10px 5px black, -20px 0px 50px blue;

text-shadow: 2px 2px #aaa;

text-shadow: 2px 2px 5px #666;

text-shadow: 2px 2px 5px #666;

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(fondo1.png), url(fondo2.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

background-image: url(fondo1.png) 25% repeat;

#uno { 
  padding:30px;
  border-width:10px 10px 10px 10px;
  border-image: url('fondo.png') 10 100 10 10 repeat stretch;
  background-color:#fff;
}

  -webkit-column-count: 3;
  -moz-column-width: 200px; 
  -webkit-column-width:200px; 
  -moz-column-gap: 20px; 
  -webkit-column-gap: 20px;

@font-face {
    font-family: Gentium;
    src: url(gentium.otf);
}

@font-face {
    font-family: 'UbuntuRegular';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') formato('embedded-opentype'),
      url('webfont.woff') formato('woff'),
      url('webfont.ttf') formato('truetype'),
      url('webfont.svg#UbuntuRegular') formato('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-width: 600px) { 
    .class { background: #ccc; } 
}

<link rel="stylesheet" media="screen and (min-width: 600px)"  href="small.css" />

<a href="#" class="boto">Botón por transición</a>

 a.boto {
    text-decoration:none;
    color:#fff;
    padding: 5px 10px;
    background: #f76c6c;
    -webkit-transition-property:background;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function:ease;
}
a.boto:hover {
    background: #d22828;
}

• La transición no se tiene que poner dentro del evento (en este caso el selector hover) sino en el elemento que tiene que cambiar.

• Lo que definimos en la transición es la propiedad que queremos animar, en este caso el background.

• Podemos definir la duración y también la interpolación de tiempo. En este caso utiliza una función de aceleración. Disponemos de las siguientes funciones: ease, linear, ease-in, ease-out, ease-in-out y cubic-bezier.

• También podemos definir un retraso en la ejecución de la animación con la propiedad -webkit-transition-delay: 0.5s.

• Se puede escribir de manera compacta en una sola línea:

-webkit-transition: background 0.3s ease 0.5s;

-webkit-transition: background .3s ease,  color 0.2s linear;

transition: all 3s ease, color 0.2s linear;

<div class="contenedor">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element">6</div>
    <div class="element">7</div>
</div>

.contenedor{
    display:flex;
}
.elemento{
    width:25%;
}

• row - Establece la dirección del eje principal en horizontal

• row-reverse - Establece la dirección del eje principal en horizontal (invertido)

• column - Establece la dirección del eje principal en vertical

• column-reverse - Establece la dirección del eje principal en vertical (invertido)

• https://demo.agektmr.com/flexbox/

• http://the-echoplex.net/flexyboxes/

gem install sass

sass entrada.scss salida.css

sass --watch entrada.scss:salida.css

sass --watch ruta/carpetasass

sass --watch ruta/carpetasass:ruta/carpetacss

sass --watch ruta/carpetasass:ruta/carpetacss

modulo.exports = function(grunt) {  
   grunt.initConfig({      
       sass: {
           dist: {
               files: {
                   'css/estilos.css' : 'scss/estilos.scss'
               }
           }
       },
       watch: {
           css: {
               files: 'scss/*.scss',
               tasks: ['sass']
           }
       }
   });
   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.registerTask('default',['watch']);
}

#main {
 color: grey;
 font-size: 0.9em;
}

#main 
 color: grey
 font-size: 0.9em

#main {
 color: grey;
 font-size: 0.9em;

 a {
   font: {
     weight: bold;
     family: serif;
   }
&:hover {
     background-color: #eee;
   }
 }
}

#main 
 color: grey
 font-size: 0.9em

 a 
    font: 
     weight: bold
     family: serif

&:hover 
     background-color: #eee

#main 
 :color grey
 :font-size 0.9em

.users #userTab,
.posts #postTab
   width: 100px
   height: 30px

@import "themes/dark";
@import "font.sass";

@import themes/dark
@import font.sass

<script type="text/javascript">
    less = {
        env: "development", // o "production"
        async: false,       // carga las importaciones de manera asíncrona
        fileAsync: false,   // carga las importaciones async cuando una 
                            // página usa un protocolo de archivos
        poll: 1000,         // Tiempo (en milisegundos) entre las consultas 
                            // mientras se encuentra en modo de seguimiento (watch)
        functions: {},      // funciones del usuario, especificadas por nombre
        dumpLineNumbers: "comments", // o "mediaQuery" o "all"
        relativeUrls: false,// ajusta las URLS relativas si false, 
                            // relativas respecto al fichero less de entrada 
        rootpath: ":/a.com/"// ruta para añadir al principio de las URLS 
    };
</script>
<script src="less.js"></script>

<link rel="stylesheet/less" type="text/css" href="styles.less" />

$ npm install -g less

@color-principal: #1D365D;
@color-secundario: #172B4A;
@color-texto: #222;
@anchura-imágenes: 300px;
@radio: 5px;

@colorbase: red;
body{
    @colorbase: blue;
    color: @colorbase;
}

//Salida CSS:
body {
    color: blue;
}

.bordered {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.box {
    border: 1px solid #ccc;  
    color: #444;
    .bordered;
}

.box {
    border: 1px solid #ccc;  
    color: #444;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

// LESS
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.box {
  .rounded-corners;
}

footer {
  .rounded-corners(10px);
}

/* CSS compilado */
.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

// LESS
header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* CSS compilado */
header h1 {
  font-size: 26px;
  font-weight: bold;
}
header p {
  font-size: 12px;
}
header p a {
  text-decoration: none;
}
header p a:hover {
  border-width: 1px;
}

// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

/* CSS compilado */
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

$ lessc styles.less

stylus estil.styl

stylus –w estil.styl

stylus –w –c ruta/carpetastylus –o ruta/carpetacss