Estilos CSS
Programación HTML
Alejandro Gonzalez Herrera
QUE VAMOS A REVISAR
VAMOS A CONVERSAR DE….
1. CSS: Selectores
Selectores
Los selectores son la parte de las reglas que indican al navegador a
qué elementos se van a aplicar las propiedades incluidas en las
declaraciones.
Selector Tipo E
Si se escribe una etiqueta (E), las propiedades afectan a todos los
elementos con etiqueta E. En el ejemplo siguiente, todos los
párrafos <p> se ven de color rojo.
Selector Universal *
Si se escribe un asterisco (*), las propiedades afectan a todos los
elementos de la página. En el ejemplo siguiente, tanto el
párrafo <p> como la dirección <address> se ven de color rojo.
Selector de Clase E.e
Si se escribe una etiqueta seguida de un punto y un nombre de clase
(E.e), las propiedades afectan a todos los elementos con etiqueta E
cuyo atributo class tenga el valor e. En el ejemplo siguiente, sólo el
párrafo <p> de clase "aviso" se ven de color rojo.
Selector de Clase E.e
Para definir una clase que se pueda aplicar a cualquier etiqueta, se
puede escribir como selector un punto y el nombre de la clase
(.nombre-clase) o el selector universal *.nombre-clase. En los dos
ejemplos siguientes, cualquier elemento de clase "aviso" se ve de
color rojo.
Selector de Clase E.e
Selector de ID: E#e
A menudo se desaconseja el uso de selectores de ID y se recomienda
utilizar en su lugar un selector de clase. En estos apuntes también se
desaconseja el uso de selectores de ID y por eso en la Configuración
recomendada de Visual Studio Code se recomienda configurar el
editor de manera que se señale como aviso el uso de selectores de
ID.
Selector de ID: E#e
Si se escribe una etiqueta seguida de una almohadilla y un nombre
de id (E#e), las propiedades afectan al elemento con etiqueta E cuyo
atributo id tenga el valor e. En el ejemplo siguiente, sólo el
párrafo <p> de id aviso se ve de color rojo.
Selector de ID: E#e
Hay que tener en cuenta que el atributo id no se puede repetir, es
decir, no puede haber dos elementos con el mismo valor del
atributo id (independientemente de que los elementos tengan
etiquetas iguales o distintas).
Para definir un id que se pueda aplicar a cualquier etiqueta, se puede
escribir como selector una almohadilla y el nombre del id (#nombre-
id) o el selector universal *#nombre-id. En los dos ejemplos
siguientes, cualquier elemento con id "aviso" se ve de color rojo.
Selector de ID: E#e
Selector de ID: E#e
Aunque en una página web no puede haber dos elementos con el
mismo valor del atributo id, en páginas distintas sí que puede haber
dos elementos con el mismo valor del atributo id. Si la misma hoja
de estilo se enlaza desde varias páginas web, el selector universal
afectará en cada página a los elementos con el id correspondiente.
Selector de Atributo
Hay cuatro formas de seleccionar elementos con determinados
atributos: E[atributo], E[atributo="valor"], E[atributo~="valor"],
E[atributo|="valor"].
Si se escribe una etiqueta seguida del nombre de un atributo entre
corchetes, E[atributo], las propiedades afectan a todos los elementos
que tengan establecidos ese atributo. En el ejemplo siguiente, los
párrafos con clase, independientemente de la clase asignada, se
muestran en mayúsculas.
Selector de Atributo
Selector de Atributo
Si se escribe una etiqueta seguida del nombre de un atributo igual a
un valor entre corchetes, E[atributo="valor"], las propiedades afectan
a todos los elementos que tengan establecidos ese atributo
exactamente con ese valor. En el ejemplo siguiente, el párrafo con
dos clases (asignadas en el mismo orden en el que aparecen entre
corchetes en la hoja de estilo), se muestran en mayúsculas. Además,
los párrafos con dos clases se ven de color azul porque las clases no
se aplican en el orden en el que aparecen en el atributo clase, sino en
el orden en que aparecen en la hoja de estilo.
Selector de Atributo
Selector de Atributo
Si se escribe una etiqueta seguida del nombre de un atributo tilde-
igual a un valor entre corchetes, E[atributo~="valor"], las
propiedades afectan a todos los elementos que tengan establecidos
ese atributo con ese valor (entre otros).
Si se escribe una etiqueta seguida del nombre de un atributo |-igual a
un valor entre corchetes, E[atributo|="valor"], las propiedades
afectan a todos los elementos que tengan establecidos ese atributo
con un valor que comience por ese valor seguido de un guion -. Este
selector esta pensado para seleccionar elementos con diferentes
variantes de un mismo idioma.
Pseudo-clases, pseudo-elementos
Las hojas de estilo asocian características de estilo a los elementos
basándose en las etiquetas de los elementos y en su posición relativa
(en el árbol del documento). Las pseudo-clases y los pseudo-
elementos permiten hacer referencia a determinados elementos sin
basarse en la información contenida en el árbol del documento.
La diferencia entre pseudo-clases y pseudo-elementos es sutil. En
general, los pseudo-elementos suelen hacer referencia a
determinadas partes de un elemento, mientras que las pseudo-clases
suelen hacer referencia al estado del elemento.
Pseudo-clases, pseudo-elementos
Otra diferencia importante es que un pseudo-elemento sólo puede aparecer
al final de un selector, mientras que una pseudo-clase puede aparecer en
cualquier elemento del selector.
En CSS 2, la sintaxis de las pseudo-clases y los pseudo-elementos era la
misma, etiqueta:pseudo-elemento-o-pseudo-clase (es decir, el nombre de la
etiqueta seguido de dos puntos y del nombre del pseudo-elemento o de la
pseudo-clase). En 2011, en la recomendación CSS 3 Selectores (cuya
segunda versión CSS 3 Selectores se publicó en 2018), se modificó la
notación de los pseudo-elementos a etiqueta::pseudo-elemento (es decir, el
nombre de la etiqueta seguido dos veces de dos puntos y del nombre del
pseudo-elemento) para distinguir unos de otros, pero permitiendo utilizar
también la antigua notación.
Pseudo-clases, pseudo-elementos
:first-child
:link y :visited
:hover, :active y :focus
:lang()
::first-line y ::first-letter
::before y ::after
GRACIAS!
Dudas o consultas?
[email protected]
+56 9 97195132
mya-consultora.cl
CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, and infographics &
images by Freepik.
