Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 58

Visitas el mes pasado: 100

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




3. Selectores (III)

3.3 Selectores avanzados.

html

Mostraremos aquí una serie de selectores, que aunque son poco usados, a veces es conveniente tenerlos en cuenta para resolver algunas situaciones.


Selector de hijos

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.


Selector adyacente

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:

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.


Selectores de atributos

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 [...] )


Pseudoclases

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.

Pseudoclase de primera línea

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

Pseudoclase de primera letra

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}

Página de ejemplo





En la siguiente página veremos algunos problemas que pueden surgir al aplicar las reglas, y cómo se resuelven en CSS.

Prioridades.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com