Entradas etiquetadas ‘css’

Los elementos de diseño. Construcción del Diseño

11 de Enero de 2011

Los elementos del diseño son los pilares del diseño. Estos elementos son los que componen cada página que se genera. Y comprender estos elementos básicos nos hará capaces de elaborar más páginas web de gran alcance y mayor calidad.

Hay cinco elementos básicos de diseño:

Líneas y línea de trabajo

Las líneas son las fronteras y las reglas. Pueden ser horizontales o verticales y ayudar a delinear los espacios alrededor de los elementos en las páginas Web. La línea de trabajo aumenta la legibilidad del diseño. Pueden mejorar la comprensión y la legibilidad de un diseño, pueden ser utilizadas como un borde alrededor de elementos o un divisor entre los elementos.

Las líneas en el diseño web se pueden utilizar de muchas maneras:

  • Fronteras alrededor de los elementos
  • Líneas divisorias entre los elementos
  • Contornos alrededor de los elementos
  • Decoración

Hay tres maneras de incluir las líneas de trabajo de diseño Web:

1. La etiqueta <hr/> son líneas horizontales en los documentos de la página web. El estilo de la etiqueta <hr/> puede mejorar las líneas a futuro.
2. CSS ofrece muchas maneras de agregar bordes a los elementos. Con las fronteras de una o dos caras de un elemento, podemos crear líneas que son un poco más interesantes que un borde cuadrado simple.
3. Las ideas pueden ser utilizadas como líneas y bordes para crear efectos más decorativos.


Forma

Formas para hacer cualquier contorno cerrado en el diseño. Las formas en la mayoría de las páginas Web son cuadradas o rectangulares. No siempre tiene que ser así, se pueden utilizar  imágenes para generar otras formas dentro de los diseños. Se utilizan para transmitir el significado y organizar la información. Las formas pueden ser de 2 dimensiones o 3 dimensiones.

Hay tres tipos básicos de formas:

  • Formas geométricas
  • Formas naturales
  • Formas abstractas

Las formas en el diseño web se puede utilizar de muchas maneras:

  • Agregar interés a un diseño
  • Mantener el interés
  • Organizar elementos separados
  • Dirigir la vista a través del diseño

Figuras geométricas:

Las formas geométricas son lo que la mayoría de la gente piensa cuando piensa en las formas. La mayoría de las formas geométricas en las páginas web se crean a través de la disposición y CSS. Algunas formas geométricas comunes que se ve en las páginas Web son:

  • Cuadrados y rectángulos
  • Círculos
  • Triángulos
  • Diamantes

Las formas naturales:

Las formas naturales son formas que se encuentran en la naturaleza, y también suelen ser formas de objetos hechos por el hombre. La mayoría de las formas naturales en las páginas web se crean con imágenes. Algunos ejemplos de las formas naturales son:

  • Hojas
  • Charcos

Resumen formas:

Las formas abstractas son las que tienen una forma reconocible, pero no son “reales” de la misma manera que las formas naturales. Por ejemplo, un dibujo de palo de la figura de un perro es un perro de forma abstracta, un perro en una foto es una forma natural. Las formas abstractas en el diseño Web se agregan generalmente a través de imágenes.

Algunos ejemplos de formas abstractas son las siguientes:

  • Alfabeto glifos
  • Iconos
  • Símbolos


Textura

La textura es lo que le da un diseño de la sensación de una superficie. Es el sentido del tacto de los elementos en el diseño. En el diseño web, la textura es visual. Algunas texturas más comunes son:

  • En bruto
  • Suave
  • Dura

La textura en el diseño web se puede utilizar de muchas maneras:

  • Fondos
  • Énfasis
  • Diseños estilizados, como grabados o aguafuertes

La manera más común para incorporar la textura en los diseños Web es con la propiedad de estilo background-image. Podemos poner imágenes de fondo en la mayoría de los elementos a nivel de bloque, que nos permite agregar textura a lo largo de las páginas web.


Color

El color es el elemento de diseño en el que la mayoría de diseñadores de páginas web son muy conscientes, aunque es muy importante, el color no es un elemento necesario en cualquier diseño. De hecho, un buen plan de diseño no usa el color en primer lugar, sino que lo va añadiendo poco a poco y a medida para mejorar el diseño.
Algunos de los mejores diseños se hacen con sólo en blanco y negro o un toque de un solo color.

El color en el diseño web se puede utilizar de muchas maneras:

  • Fondos
  • Texto en primer plano
  • Imágenes

El color es muy fácil de añadir a las páginas Web. Hay muchas propiedades de estilo para añadir color, incluyendo:

  • El color de primer plano, como las fuentes y texto
  • El color de fondo, que cambia el color de fondo del elemento
  • Las fronteras de color para cambiar el color de los bordes alrededor de los elementos

También puede añadir color a su diseño a través de sus imágenes. Imágenes JPEG para las fotografías y GIF para imágenes de color plano.


Dirección

La dirección le da movimiento a los diseños web, le proporciona el estado de ánimo y la atmósfera. La dirección da la ilusión de movimiento dentro de un diseño. En la mayoría de los diseños hay una sensación de movimiento en una dirección a través del mismo. Los buenos diseños dirigen la vista a través del diseño de una manera deliberada para que el espectador vea lo que el diseñador quiere.

Hay tres direcciones básicas en el diseño:

  • Horizontal
  • Vertical
  • Diagonal

En el diseño web, la dirección es más a menudo retratada por las imágenes en la página. Pero se puede imponer dirección a través de la colocación de elementos de la página, y con líneas especialmente cuando tienen puntas de flechas sobre ellas.

Se puede incorporar la dirección en los diseños web de las siguientes maneras:

  • Miramos las imágenes para determinar la dirección a la que los sujetos se enfrentan. Si la gente en la foto están mirando hacia la derecha, entonces debemos colocar la imagen en el lado izquierdo de la página. En caso contrario la dirección de los ojos en la foto dirigirá los ojos de los lectores fuera de la página.
  • Utilizaremos su disposición para sugerir la dirección. La posición de los elementos densos, como las fotos, en las líneas horizontales, verticales o diagonales. Mientras que los elementos menos densos, como el texto, los rodeen.
  • Utilizaremos las líneas, ya sea imágenes o etiquetas de recursos humanos, para sugerir el movimiento y la dirección.

Selectores de CSS 3. Avanzar hacia el futuro del CSS

11 de Enero de 2011

CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:

A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.
a[href="ftp:"] { … }

Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.
a[href=".a2sistemas"] { … }
Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.

Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.
img[src="photos"] { … }
Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.

CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.
Root pseudo-clase representa el elemento raíz del documento . Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.
:root { … }
El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.
p:last-child { … }
El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.
:target { … }
Pseudo-clase permite seleccionar los elementos que no están representados por el argumento. Tengamos cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:
img:not([alt]) { border: thick solid yellow; }

CSS 3 Combinar hermanos
Este selector permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ir directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser el primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 se escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.

Selectores de estilo descendientes en hojas de cascada

22 de Octubre de 2010

Definir estilos en elementos específicos

Los selectores descendientes en CSS permiten definir los estilos en los elementos que se encuentran en lugares específicos en la estructura del documento XHTML. Estos selectores se definen como patrones, para que pueda definir los elementos hijo, nieto, etc.

Definir un selector descendiente por la separación de los elementos pertinentes, con el espacio:
p div (background-color: # ccc;)

Esto repercutirá en todos los elementos p que están dentro de un elemento div. Pero los elementos p que estén dentro del cuerpo del documento no se verían afectados.

También podemos utilizar patrones para definir sus selectores:
* em div (background-color: # marco de cooperación;)

Esto afectará a todos los elementos em, nietos de un elemento div. En otras palabras, cualquier em que está por debajo de los dos elementos div. Por ejemplo:
<div> <p> <em> Esta es una </ em> </ p> <em> Este no es un </ em> </ div>

Compatibilidad con exploradores

El selector de descendiente con los patrones no funciona en Netscape 4 ó IE 4 Windows e IE 5 (Macintosh).

Selectores de estilo Hijos en hojas de cascada Las definiciones precisas de los estilos CSS

22 de Octubre de 2010

En CSS un elemento primario es un elemento que contiene otros elementos. Todos los elementos que están contenidos dentro de ese padre se llaman “hijo”. Usar el selector CSS hijo, puede definir propiedades que sólo afectan a elementos que son hijos de otros elementos específicos. Cada elemento es un hijo de otro elemento, excepto el elemento raíz, que no tiene padre.

Para seleccionar todos los párrafos que son hijos de la etiqueta <body>, escribiríamos:
body> p (background-color: # 00f;)

Esto es similar al selector descendiente, pero sólo se pueden definir los hijos, nietos o inferior.

Podemos combinar los selectores hijos con los selectores de otro tipo, como descendientes:
div ul li> p (background-color: # 00f;)
Esto afecta a los elementos a la AP que es un descendiente de Li, que es un hijo de ul que es un descendiente de div.

Compatibilidad con exploradores

Internet Explorer 6 e inferior (Windows) y 4.5 e inferiores (Macintosh) no son compatibles con este selector. Netscape 4 e inferiores no son compatibles con este selector.

¿Por qué utilizar CSS descendientes?

27 de Septiembre de 2010

Cuando diseñamos un nuevo documento, siempre es una buena idea modelarlo, especialmente de objetos comunes como <h1> y <p>. De esta manera, incluso si sólo hay un tipo de <h1> en el documento podemos estar seguros de que no se verá afectado el cambio de estilos en el futuro si otro tipo de <h1> se añade.

Por ejemplo:
div # principal h1 (border-bottom: 5px sólidos # ccc;)

Avanzada CSS Propiedades del texto

13 de Septiembre de 2010

Hay muchas propiedades CSS para usar en las hojas de estilo. Estas son las propiedades del texto y cómo usarlas.

Propiedades del texto

word-spacing – define la cantidad de espacio entre las palabras.

  • Word-spacing: normal;

hace el espacio entre palabras.

  • Word-spacing: 15 mm;

Añade 15 mm de espacio entre las palabras.

Especificar la longitud, la altura de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

espaciado entre letras - define la cantidad de espacio entre cada letra. Esto generalmente se denomina “seguimiento en el diseño de impresión.

  • Espaciado entre letras: normal;

permite el seguimiento normal para esta fuente.

  • Espaciado entre letras: 1 mm;

Añade 1 mm entre cada letra.

  • Espaciado entre letras:-1px;

Reduce el seguimiento de 1 píxel entre cada letra.

Especificar la longitud, la altura de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

text-decoration - define la decoración del texto.

  • Text-decoration: none;

Quita todas las decoraciones sobre el texto. (Utilizado en <a> etiquetas a quitar el subrayado.)

  • Text-decoration: overline;

Pone una línea sobre el texto.

  • Text-decoration: underline;

Pone una línea debajo del texto.

  • Text-decoration: line-through;

Pone una línea a través de la línea media del texto.

  • Text-decoration: blink;

Hacer un abrir y cerrar de texto dentro y fuera. (No se admite en los navegadores que no sean derivados de Netscape.)

texto transformación - define el caso del texto.

  • El texto-transform: capitalizar;

Realiza la primera letra de cada palabra en mayúscula.

  • El texto-transform: mayúsculas;

Transforma el texto en mayúscula.

  • El texto-transform: minúsculas;

Transforma el texto en minúsculas.

  • El texto-transform: none;

Elimina todas las transformaciones del texto.

texto-align – define cómo el texto se alineará en la página.

  • El texto-align: left;
  • El texto-align: right;
  • El texto-align: center;
  • El texto-align: alcance;

Alinear el texto para que quede al ras con ambas partes del documento.

text-indent define la cantidad de la primera línea del texto que debe tener una sangría.

  • El texto-guión: 15mm;
  • El texto-guión: 5%;

Especifica la longitud de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

line-height
define la cantidad de espacio entre líneas de texto. Esto se llama normalmente líder en el diseño de impresión.

  • Line-height: 1.5;

Sin una unidad, el número se supone que se multiplicará por la altura de la línea estándar para esta fuente.

  • Line-height: 5 mm;
  • Line-height: 10%;

Hay muchos más estilos, pero aquí ya tenemos algunos que podemos usar en nuestra hoja de estilos.

Avanzada CSS Propiedades de fuente

13 de Septiembre de 2010

Hay muchas propiedades CSS para usar en las hojas de estilo. Éstos son algunas de las características más populares de como usarlas.

Propiedades de la fuente

font-family – define la familia de fuentes que el texto debe mostrar en pulgadas (Nota: si el equipo que ve la página no tiene la fuente especificada, el navegador la intentará adivinar. Esto puede causar efectos extraños. Lo mejor es el uso normal  de fuentes, o fuentes genéricas.)

Para definir las familias específicas de la fuente, escribiremos los nombres de la familia en el orden que lo deseemos en la pantalla. Separe cada familia con una coma:

font-family: arial, ginebra, Helvetica, sans serif;

Para definir una familia de fuentes genéricas:

font-family: serif;

Las familias de fuentes genéricas incluidas en el sistema actual son:

  • Serif

font-family: serif;

  • Boton

font-family: sans-serif;

  • Monospace

font-family: espacio sencillo;

  • Cursiva

font-family: letra cursiva; ”

  • Fantasía

font-family: fantasy;

font-size - define el tamaño de la fuente. El tamaño de fuente puede ser especificado como un tamaño exacto, un tamaño relativo, con una longitud o un porcentaje (del espacio existente).

Para definir el tamaño exacto, simplemente especificar el tamaño en una de las siguientes medidas:

  • Ems

font-size: 13em;

  • Píxeles

font-size: 13px;

  • Picas

font-size: 13pc;

  • Puntos

font-size: 13pt;

  • pulgadas

font-size: 13IN;

  • centímetros

font-size: 13cm

  • milímetros

font-size: 13 mm

Hay siete tamaños estándar en los documentos HTML y XML, podemos definir su tipo de letra basado en los tamaños, así (texto estándar de tamaño medio):

  • Xx-small

font-size: xx-small;

  • X-small

font-size: x-small;

  • Pequeño

font-size: small;

  • Mediano

font-size: medio;

  • Grande

font-size: grande;

  • X-large

font-size: x-large;

  • Xx-large

font-size: xx-large;

Para definir el tamaño de letra en relación con el texto que lo rodea, podemos simplemente decir:

font-style - define si la fuente está en cursiva, oblicua, o normal.

  • Cursiva

font-style: italic;

  • Oblicua

font-style: oblicua;

  • Normal (por defecto)

font-style: normal;

font-variant - define si la fuente es normal o pequeña.

  • Small-caps

font-variant: small-caps;

  • Normal (por defecto)

font-variant: normal;

font-weight - define el grado de oscuridad o la luz del texto.

  • Negrita

font-weight: bold;

  • Audaz

font-weight: más audaces;

  • Más ligera

font-weight: más ligero;

  • 100

font-weight: 100;

  • 200

font-weight: 200;

  • 300

font-weight: 300;

  • 400

font-weight: 400;

  • 500

font-weight: 500;

  • 600

font-weight: 600;

  • 700

font-weight: 700;

  • 800

font-weight: 800;

  • 900

font-weight: 900;

  • Normal (por defecto)

font-weight: normal;

Avanzada CSS

13 de Septiembre de 2010

¿Cómo se crea en realidad una hoja de estilo?

Hay tres partes de una hoja de estilos:

  • Selector

el elemento o categoría y título de id a la que el estilo se aplicará

  • La propiedad

la información sobre cómo dar formato a la selección

  • Valor

el estilo concreto que debe aplicarse a la propiedad en el selector

Por ejemplo, si deseamos que todos los párrafos usen misma fuente, se utiliza el siguiente CSS:

p {
font-family : arial;
}

  • P

el selector. Todo el texto en el <p> / p> se ve afectado por este estilo

  • Font-family

la propiedad. Todos los textos tendrán la font-family cambiada

  • Arial

el valor. La fuente de la familia será “Arial”

Como se puede ver arriba, el formato de una declaración de estilo es:

selector {
property : value ;
property2 : value ;
}

Agrupe sus estilos para cada selector, juntos en llaves

{}

Luego separar la propiedad de los valores por dos puntos

:

Por último, al final de cada declaración de estilo con un punto y coma

;

(Nota: el punto y coma sólo se requiere para separar múltiples estilos, pero es una buena idea incluirlo en todo momento. A continuación podemos agregar más estilos.)

La selección es por lo general una etiqueta HTML, pero también podemos crear identificadores y clases. Estos tipos de selectores se utilizan cuando no se está seguro del estilo que vamos a utilizar. Por ejemplo, puede que quiera una clase de estilo  para “resaltar” el color de fondo a amarillo. No importará qué etiqueta se puso de relieve.

.highlight {
background-color : #ffff00;
}

Entonces, para usar ese estilo, establezeremos la clase en las etiquetas de HTML:

<h2> Este título se pone en relieve </ h2>

O simplemente podemos usar el

<span> </ span>

etiqueta para definir el texto exacto que se destacó.

Selectores de CSS Parte 3

23 de Agosto de 2010

Avanzar hacia el futuro del CSS

Usted puede pensar que es un poco pronto para estar pensando en CSS 3. Después de todo, aún no es una norma reconocida, y de hecho sólo hay unos pocos documentos en un estado público acerca de este nuevo nivel. Pero aún así, Mozilla y Firefox han comenzado los selectores CSS para que los diseñadores Web los puedan utilizar. Si usted comienza a aprender el CSS 3, estará por delante de la curva cuando otros navegadores empiecen a apoyarlos.

CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:

A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.

a[href^="ftp:"] { … }

Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.

a[href$=".a2sistemas"] { … }

Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.

Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.

img[src*="photos"] { … }

Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.

CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.

* Root pseudo-clase representa el elemento raíz del documento (en HTML 4 este es <html>). Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.

:root { … }

* El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.

p:last-child { … }

* El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.

:target { … }

* Pseudo-clase le permite seleccionar los elementos que no están representados por el argumento. Tenga cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:

img:not([alt]) { border: thick solid yellow; }

CSS 3 Combinar hermanos
Este selector le permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 usted escribiría:

h3 ~ blockquote

Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.

Otros 3 selectores CSS
Hay muchos más nuevos selectores CSS 3, pero no son compatibles con los navegadores hasta ahora. Cuando lo sean, van a agregar funcionalidad a las formas (como para poner de relieve los elementos comprobados, los elementos desactivados, y los elementos de forma que no han sido tocados por el lector), agregaran la capacidad de seleccionar los elementos en los que el único niño del padre o cuando no tienen hijos, o si desea seleccionar todas las filas de otra tabla, el selector de n-ésimo niño le permitirá alternar las filas que se seleccione.

Selectores CSS Parte2

6 de Agosto de 2010

Selectores CSS 2 Amplíe estilos

Los selectores CSS 2 son una extensión de selectores CSS 1, pero, como era de esperar, agregan más opciones y funciones para la mezcla. Estos selectores son compatibles con los navegadores modernos, así que no hay ningún motivo para empezar a utilizarlos para hacer sus hojas de estilo más específicas y directas.

CSS 2 Selector universal

Un selector universal es exactamente lo que suena: un selector que selecciona universalmente. En otras palabras, si usa el selector universal coincidirá con el nombre de cualquier tipo de elemento en el documento. Está escrito como una estrella:

*

Usted puede utilizar el selector universal en cualquier lugar que usaría un nombre de elemento. Así, por ejemplo, si quería igualar cualquier elemento secundario en una blockquote, debería escribir:

blockquote * { … }

Selectores de atributos CSS 2

Con CSS 2 ahora puede seleccionar los elementos que tienen atributos específicos. También puede coincidir en el valor del atributo. Por ejemplo, si desea establecer un estilo en todas las etiquetas de anclaje que tienen el atributo href (y no coinciden en las etiquetas de anclaje que no lo hacen, como anclas con nombre), debería escribir:

a[href] { … }

Si quería igualar sólo en los vínculos anclas que apuntaban a un sitio específico, usted debe anotar lo siguiente. Tenga en cuenta que esto debe ser una coincidencia exacta, los enlaces que apuntaban a sub-páginas dentro del href que figuran no coinciden.

a[href="http://webdesign.about.com/"] { … }

También puede hacer búsquedas parciales en los valores de atributo:

[att~=value]
Cuando el valor del atributo es una lista separada por espacios de valores, uno de los cuales es un partido.

span[style~="boxTop"]

Encaja en <span style=”boxRed boxTop”>

[att|=value]
Cuando el valor del atributo es una lista de palabras separadas por guión, el comienzo de lo que es un partido. Esto se utiliza principalmente para que coincida con el idioma sub-códigos:

*[lang|=en]

Encaja en nosotros y en-es-es.

Nueva CSS 2 pseudo-elementos y pseudo-clases

CSS 2 trae una serie de nuevos pseudo-elementos y clases.

:first-child
El primer niño pseudo-clase coincide con el primer elemento secundario de otro elemento, no importa lo que es. Si se define con un elemento por ejemplo, p: first-child,  buscará cada <p> que es un primer hijo, e ignorará los otros.

:hover and :focus
Activa la pseudo-clase a partir de CSS 1. El pase el ratón entra en vigor cuando esté el ratón sobre el elemento en cuestión, y el foco cuando el elemento tiene el foco del navegador.

:active
Si bien esta pseudo-clase existía en CSS 1, ahora se aplica a todos los elementos, no sólo enlaces. Asimismo, ya no es mutuamente excluyente con otras pseudo-clases. Por ejemplo, un elemento puede ser a la vez :active y :visited

:lang
Esta pseudo-clase especifica cómo el lenguaje humano del elemento está determinado, por lo que puede hacer coincidir un elemento basado en su lenguaje.

:first-line
Similar a :first-child pseudo-clase, pero este pseudo-elemento se aplica a la primera línea de texto en el elemento.

:first-letter
Este pseudo-elemento le permite seleccionar la primera letra de un elemento para crear la tapa desplegable o estilos iniciales.

:before and :after
Estas te permiten insertar contenido generado en el documento antes o después del elemento en cuestión.

CSS 2 Niño y selectores de hermanos

CSS 1 le ha permitido seleccionar los elementos que eran descendientes de un elemento más, pero con CSS 2 ahora se puede especificar que sólo desea hijos directos seleccionados, o simplemente quiere elementos que son hermanos (tienen el mismo padre) el uno del otro.

Selectores Niño

Un selector de hijo se escribe con un signo de mayor que (>). Para hacer coincidir todos los elementos p que son hijos de un elemento div podría escribir:

div ] p { … }

También puede combinar selectores de hijos de los selectores de descendientes. Por ejemplo, para que coincida con todas las etiquetas p que son descendientes de un elemento de la lista de menores por órdenes de que es descendiente de un div, usted escribiría:

div ol]li p { … }

Selectores de hermanos

Los hermanos adyacentes son elementos que están uno al lado del otro y al mismo nivel en la estructura del documento. Ellos tienen el mismo padre y estaría justo al lado el uno al otro en el documento. Por ejemplo, si se desea con el estilo de todos los elementos h2 que siguen inmediatamente un elemento h1 (pero que no tienen otro elemento, como AP por medio), usted escribiría:

h1 + h2 { … }

Como con los selectores niños, usted puede combinar otros selectores. Por ejemplo, para que coincida con todos los párrafos que siguen un h2 con una clase especial, usted escribiría:

h2.special + p { … }

Usar CSS 2 selectores

Con la descripción y uso de selectores CSS 2 hará que sus hojas de estilo sean más potentes. Se puede sincronizar elementos más directos y específicos Los selectores CSS 2 son una parte importante del CSS.