Cascading Style Sheets CSS

Can I Use - (prefijos, para ver que versiones tienen problema). Dice si necesitas prefijo alguna versión o si hay versiones que si funcionan con prefijo y dice cuáles

Los elementos globales en el CSS se ponen al principio CTRL-F9 ordena en alfabético

Orden de aplicación de estilos (colisión)

  • 1-Navegador: Estilos definidos por el navegador
  • 2-Usuario: Estilos definidos por el usuario en su navegador
  • 3-Archivos CSS: Estilos definidos en las páginas
  • 4-Propiedades que se heredan
  • 5-Propiedades del elemento
  • 6-Clases asignadas y en el mismo orden "miClase1 miClase2"
  • 7-Identificador, puntos 6 y 7 dependen del orden, si primero id o primero class

color:red !important; El color se mantiene sin importar lo que venga después a menos que tenga otro !important;

Aplicación de estilos de acuerdo a su ubicación y herencia

header h2, h3{} Cualquier h2 dentro del header y todos los h3 de la página toman el estilo

header>h2{}Solo los h2 hijos directos del header.

section div>h2{} H2 hijos directos de un DIV dentro del SECTION

p#id{}El parrafo con ese Id

.miClase{}La clase se define con un punto. Todos los que tengan esa clase o hereden

.miClase2{} Puedo definir un elemento que le aplican dos clases. Primero le aplica miClase y luego miClase2 <p class="miClase miClase2">

p+p{}Todos los p que tengan como hermano mayor a un p, excepto el hermano mayor y tienen que estar consecutivo, si hubiera un div entre hermanos ya no aplica

p~p{}Los hermanos menores de un p aunque no estén consecutivos

h3[title]{} h3 con atributo title, sin importar el valor

h3[title="hola"]{} Que tenga el atributo y el valor

h3[title~="hola"]{} Que tenga el atributo y el "hola" como parte de su valor, como un like "%valor%"

h3[lang|="es"]{} H3 con lenguaje es.