Para que se utiliza CSS: Es el lenguaje que se utiliza para aplicar un estilo a un HTML. Describe como deben mostrarse los elementos de un HTML
Estructura de CSS: selector { propiedad: valor ;}
Selectores +Usados:
| *{} | Selecciona todos los elementos del HTML |
| tag{} | Cualquier tipo de tag HTML (body, header, main, footer, p, h1..h6, etc.) |
| tag.clase{} | Selecciona los tag HTML con la clase .clase |
| tag1,tag2,tagN{} | Selecciona todos los elementos de tipo tag1, tag2 y tagN HTML |
| #id{} | Selecciona el elemento con este id en el HTML |
| .clase{} | Selecciona todos los elementos de esta clase en el HTML |
| .clase1.clase2{} | Selecciona todos los elementos que tienen las 2 clases en el HTML |
| .clase1 .clase2{} | Selecciona todos los elementos que tienen la clase2 descendiendo de la clase1 en el HTML |
| .clase1>.clase2{} | Selecciona todos los elementos que tienen la clase2 descendiendo directamente de la clase1 en el HTML |
| .clase1 ~ .clase2{} | Selecciona todos los elementos con clase2 a continuación de un elemento con clase1 en el HTML |
| .clase1 + .clase2{} | Selecciona cada elemento con clase2 ubicado inmediatamente a continuación de un elemento con clase1 en el HTML |
| tag1[atributo]{} tag1[atributo=valor]{} |
Selecciona cada elemento con este atributo o atributo y valor en el HTML |
Mas Selectores...
Pseudo-Clases:Las pseudo-clases sirven para definir un estado específico de un elemento. Las + Usadas:
| Pseudo-Clase | Aplica... |
|---|---|
| selector:focus{} | el estilo al elemento cuando esta en foco |
| selector:link{} | el estilo a un elemento cuando aún esta no-visitado |
| selector:visited{} | el estilo a un elemento cuando ya ha sido visitado |
| selector:hover{} | el estilo al elemento cuando el ratón pasa por encima |
| selector:nth-child(NroHijo){} | el estilo al elemento N de tipo selector que es N hijo de su padre |
| selector:first-child{} | el estilo al primer elemento de tipo selector que es hijo de su padre |
| selector:last-child{} | el estilo al último elemento de tipo selector que es hijo de su padre |
| selector:nth-child(even/odd){} | el estilo a los elementos pares o impares de tipo selector que son hijos de su padre |
| selector:nth-child(NroHijon){} | Aplica el estilo a los elemento cada N de tipo selector que son hijos de su padre |
Pseudo-Elementos: Los pseudo-elementos sirven para definir un estado específico a varios elementos a la vez (tipo h1, p, a). Los + Usados:
| Pseudo-Elementos | Aplica... |
|---|---|
| selector::first-letter{} | el estilo a la primer letra del elemento |
| selector::selection{} | el estilo al seleccionar algo del elemento |
| selector::before{} | el estilo antes del elemento |
| selector::after{} | el estilo después del elemento |