CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 35
Visitas el mes pasado: 106
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Mostraremos aquí una serie de selectores, que aunque son poco usados, a veces es conveniente tenerlos en cuenta para resolver algunas situaciones.
Como una variante del selector descendente está el selector de
hijos, aunque diferente en su funcionamiento. Se utiliza para seleccionar
un elemento que es hijo directo de otro elemento; es decir, está incluido
en el otro en un puesto inmediatamente inferior (sin ninguna otra
etiqueta que lo incluya) y se indica mediante
el "signo de mayor que" ( >
). Ejemplo:
p > em { text-decoration: underline; }
Si tenemos las siguientes dos líneas de código html:
<p>este texto es <em>importante</em></p>
<p><b>este texto es <em>importante</em></b></p>
Este selector sólo afecta a la etiqueta em
de la primera línea, pero no
a la de la segunda, ya que tiene otro nivel de etiqueta por medio, mientras que
un selector descendente afectaría a las dos líneas por igual.
El selector adyacente utiliza el signo + y su sintaxis es:
elemento1 + elemento2 { ... }
Este selector selecciona todos los elementos de tipo elemento2
que cumplan las dos
siguientes condiciones:
elemento1
y elemento2
deben ser hermanos,
por lo que su elemento padre o inmediato superior, debe ser el mismo.elemento2
debe aparecer inmediatamente despues de
elemento1
en el codigo HTML de la pagina.Ejemplo
h1 + p {font-weight: bold; }
Si aplicamos esta regla css al siguiente código html:
<h1>Título</h1>
<p>parrafo primero</p>
<p>parrafo segundo</p>
El selector sólo afecta al párrafo primero, ya que el segundo, aunque está al mismo nivel que el tituo (h1), no está inmediatamente después que él.
los selectores de atributos, permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. Hay cuatro tipos de selectores de atributos. Estos selectores se escriben entre corchetes (signos [...] )
[nombre_atributo]
, selecciona los elementos que tienen el atributo llamado
nombre_atributo, independientemente de su valor. Ejemplo.[class] { color: blue }
class
sea cual sea su valor.[nombre_atributo=valor]
, selecciona los elementos que tienen
un atributo llamado nombre_atributo
con un valor igual a
valor
. Ejemplo[align=left] { color: blue }
align
con un valor left
[nombre_atributo~=valor]
, selecciona los elementos que
tienen un atributo llamado nombre_atributo
y al menos uno de
los valores del atributo es valor
.Ejemplo:[face~=arial] { color: blue }
face
en el
que uno de sus valores sea arial
[nombre_atributo|=valor]
, selecciona los elementos que tienen
establecido un atributo llamado nombre_atributo
y cuyo valor es
una serie de palabras separadas con guiones, pero que comienza con valor
.
Este tipo de selector sólo es útil para los atributos de tipo
lang que indican el idioma del contenido del elemento.Las pseudoclases son unos elementos especiales que permiten aplicar estilos a ciertas partes de un texto. En concreto, en CSS se permite definir estilos especiales a la primera frase de un texto, a la primera letra de un texto y a los enlaces. Las pseudoclases relacionadas con los enlaces las veremos más adelante, en el tema de enlaces. Ahora vamos a ver las otras dos pseudoclases.
Permite dar un estilo diferente a la primera línea de un texto.
Para aplicarlo, después del selector, y sin espacios entre medio
escribimos :first-line
. Ejemplo:
p:first-line { font-weight: bold; }
En este ejemplo todos los párrafos tendrán la primera línea en negrita
Veamos una página de ejemplo: Página de ejemplo
Al igual que en la pseudoclase anterior, se permite aplicar
un estilo diferente a la primera letra del texto. en este caso
escribiremos el código :first-letter
después del
selector.Ejemplo:
p:first-letter { font-weight: bold; font-size: 2em; }
Mediante la pseudoclase :first-letter
podemos crear una letra capital,
simplemente aplicando la regla que hemos dado de ejemplo: la veríamos así:
Texto con letra capital
Si queremos que la letra capital esté al mismo nivel del texto ocupando las
dos o tres primeras líneas, usaremos además algúna otra propiedad. La propiedad
line-height: 0.9
hace que la la parte superior de la letra se coloque
a la misma altura que la primera línea; para otros tamaños de letra, debemos probar
cual es el valor de esta propiedad que más se ajusta al espacio que ocupa; y la
propiedad float: left
, de la cual hablaremos en lecciones posteriores,
aquí permite que el texto de la segunda línea no quede por debajo de la letra
capital, sino que se ajuste al resto de la primera línea. Un pequeño margen alrededor
de la letra mejora también su visibilidad. En el siguiente ejemplo aplicaremos
margin: 0.1em
La siguiente página de ejemplo lleva este código para crear la letra capital en sus párrafos:
p:first-letter { font-weight: bold; font-size: 2.5em; line-height: 0.9em; float: left; margin: 0.1em}
En la siguiente página veremos algunos problemas que pueden surgir al aplicar las reglas, y cómo se resuelven en CSS.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com