PayBox
Hace 13 años
class
e id
para especificar propiedades para los elementos seleccionados.class
class
.id
id
.id
es que no pueden existir dos elementos dentro del mismo documento con el mismo id
. Cada id
tiene que ser único. En cualquier otro caso, se debería usar el atributo class
en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id
:id
a cada capítulo de la siguiente manera:#nombredelidentificador
en la hoja de estilo del documento.class
e id
podrás especificar propiedades para elementos específicos."span"
y "div"
.
"a"
. Por lo tanto, podemos usar a
como selector en CSS:a:link
y a:visited
para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active
, y a:hover
cuando el cursor se coloca o pasa sobre el enlace.a:link
:link
se usa para enlaces que dirigen a páginas que el usuario no ha visitado.a:visited
:visited
se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro:a:active
::active
se usa para enlaces que están activos.a:hover
a:hover
se usa cuando el puntero del ratón pasa por encima de un enlace.:hover
.letter-spacing
. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:text-transform
, que sirve para intercambiar entre letras en mayúscula y minúscula. Esto se puede usar también para crear un determinado efecto en los enlaces:text-decoration
se puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor de text-decoration
a none
.text-decoration
junto con otras propiedades para las cuatro pseudo clases.color
describe el color de primer plano de un elemento."h1"
. El código siguiente establece el color de los elementos "h1"
como rojo.background-color
describe el color de fondo de los elementos."body"
contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color
debería aplicarse al elemento "body"
."body"
y "h1"
."h1"
separándolas por medio de un punto y coma.background-image
se usa para insertar una imagen de fondo.background-image
al elemento "body"
y especifica la localización de la imagen.background-repeat
controla este comportamiento.background-repeat
.background-attachment
especifica si una imagen está fija o se desplaza con el elemento contenedor.background-attachment
. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.background-position
te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.background-position
. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.background
es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta lección.background
se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma más abreviada, lo que facilitará su lectura.background
se puede lograr el mismo resultado con una única línea de código:
background-attachment
y background-position
del ejemplo anterior, quedando el código de la siguiente manera:scroll
y top left
.
"style"
)style
. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:style"
)
. Por ejemplo, así:"href
"."head"
y "/head"
. De esta manera: