11. Resumen CSS(I)
11.1. Selectores.
En este tema hacemos un resumen - recordatorio de lo que se ha visto en este manual.
También puedes ver/descargar este resumen en PDF pulsando en el siguiente enlace:
Ver/Descargar Resumen PDF
Selectores básicos
- * : Selector universal. Afecta a toda la página.
- h1 : Selector de etiqueta. Afecta a todas las etiquetas con ese nombre.
- .clase : Selector de clase. Afecta a una clase marcada mediante class="clase".
- #idUnico : Selector de id. Afecta a toda la etiqueta marcada mediante id="idUnico".
Agrupación de selectores
- h1, h2, h3 : Combinación de selectores. La regla se aplica a todos los selectores indicados.
- p b : Selector descendente. La regla se aplica a la última etiqueta si está englobada en
las anteriores .
- p.tipo1 : selector de etiqueta de clase. La regla se aplica la etiqueta si lleva el
atributo de clase (<p class="tipo1">).
- p < em : Selector de hijos. Se aplica al segundo si es hijo directo del primero.
- elemento1 + elemento2 : Selector adyacente Selecciona elemento2 siempre que:
elemento1 y elemento2 son hermanos y además elemento2 aparece inmediatamente después de elemento1.
Selectores de atributos
Se escriben siempre entre corchetes [ ... ].
- [nombreAtributo]: por el nombre. Selecciona a todos los atributos cuyo nombre es
"nombreAtributo" sea cual sea su valor.
- [nombreAtributo="miValor"]: por nombre y valor. Selecciona los atributos con nombre
"nombreAtributo" y valor "miValor".
- [nombreAtributo~="miValor"]: por nombre y uno de los valores. Selecciona los atributos con nombre
"nombreAtributo" y al menos uno de los valores es "miValor".
Pseudoclases
- p:first-line : primera línea. Afecta sólo a la primera línea del texto seleccionado
- p:first-letter : primera letra. Afecta sólo a la primera letra del texto seleccionado.
Se emplea para hacer letras capitales.
- Pseudoclases de enlaces
-
- a:link : normal Enlace en su estado inicial
- a:visited : visitado Enlace que ya ha sido visitado
- a:hover : seleccionado Enlace cuando se le pasa el ratón por encima
- a:active : activo Enlace en el momento desde que es pulsado hasta que se
carga.
- Pseudoelementos before/after: con la propiedad "content"
-
- p:before : antes: para insertar texto antes de un elemento.
- p:after : después: para insertar texto despùés de un elemento.
Modos de enlazar CSS y HTML
- En la etiqueta: style="propiedad: valor;"
- En la página: <style type="text/css"> ... </style>
- En archivo aparte; <link rel="stylesheet" type="text/css" href="" media="" />
Comentarios
Se escriben entre los signos /* ... */
Seguimos con el resumen en la siguiente página donde empezamos a ver las propiedades CSS:
Propiedades I