Está en la página 1de 5

ISMAEL HERNNDEZ VILLAGMEZ

7CM6

Pseudo-clases
Las pseudoclases son las diferentes clases o los diferentes estilos que podemos darle a un enlace. El navegador por defecto le otorga un estilo diferente a los enlaces con respecto al texto restante. Pero nosotros podemos definir ese estilo mediante las pseudoclases. Las diferentes posibilidades de las pseudoclases son las siguientes: a:link Es el estilo de un enlace que no ha sido explorado por el usuario. a:visited Es el estilo de un enlace que ha sido visitado. a:active Estilo de un enlace seleccionado, mientras est siendo seleccionado. a:hover Es el estilo de un enlace que tiene el ratn encima, pero sin estar seleccionado. La sintaxis es semejante a la enunciacin de clases (CLASS) si bien con dos puntos ":", en lugar de uno solo (a:Visited ... h1.miclase). Estas definiciones afectarn a todos los elementos a que enlacen con otra pgina distinta, o con otra seccin de la misma pgina. No afectan al elemento <a name>. Las pseudo clases pueden ser usadas con selectores contextuales: a:link img { border: solid blue;} O combinadas con clases normales: a.external:visited { color: blue; } <a class="external" href="http://www.otrapagina.com/">link externo</a> Se pueden especificar todo tipo de fuentes o formatos de texto para estos links (color, tamao de fuente, grosor de la fuente, color de fondo), o a traves de la propiedad "text-decoration" eliminar, por ejemplo, el subrayado de los links: a:visited {color: blue; text-decoration: none; }

Pseudo-clase 'primer hijo'


La pseudo-clase :first-child equivale a un elemento que es el primer hijo de algn otro elemento. Considera este ejemplo: 1. <div class="capitulo"> 2. <p>primer parrafo del capitulo</p> 3. <p>segundo parrafo del capitulo</p> 4. </div> Si queremos dar estilo solo al primer prrafo, que es el primer hijo del elemento div, lo especificamos as: p:first-child { estilo } Si queremos sealar solo al prrafo primer hijo de cada capitulo, y no al prrafo primer hijo de otro elemento cualquiera: div.capitulo > p:first-child { estilo } El selector p:first-child em selecciona todos aquellos elementos <em> que se encuentren dentro de un elemento <p> que sea el primer hijo de cualquier otro elemento.

Pseudo-clases :hover,:active y :focus


Las pseudo-clases :hover, :active y :focus permiten variar los estilos de un elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y :visited que slo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar a cualquier elemento. A continuacin se indican las acciones del usuario que activan cada pseudo-clase: :hover, se activa cuando el usuario pasa el ratn o cualquier otro elemento apuntador por encima de un elemento. :active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratn sobre un elemento. El estilo se aplica durante un espacio de tiempo prcticamente imperceptible, ya que slo dura desde que el usuario pulsa el botn del ratn hasta que lo suelta. :focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento est seleccionado. Normalmente se aplica a los elementos <input> de los formularios cuando estn activados y por tanto, se puede escribir directamente en esos campos.

ISMAEL HERNNDEZ VILLAGMEZ

7CM6

Pseudo-clase :lang
La pseudo-clase :lang se emplea para seleccionar elementos en funcin de su idioma. Los navegadores utilizan los atributos lang, las etiquetas <meta> y la informacin de la respuesta del servidor para determinar el idioma de cada elemento. p { color: blue; } p:lang(es) { color: red; } <p lang="en">Lorem ipsum dolor sit amet...</p> <div lang="fr"> <p>Lorem ipsum dolor sit amet...</p> <p lang="es_ES">Lorem ipsum dolor sit amet...</p> </div> <p lang="en">Lorem ipsum dolor sit amet...</p> <ul> <li lang="fr">Lorem ipsum dolor sit amet...</li> </ul>

Pseudo Elementos
Los Pseudo Elementos nos permiten agregar alguna propiedad a un selector.

El pseudo-elemento :first-line
El pseudo-elemento :first-line permite seleccionar la primera lnea de texto de un elemento. As, la siguiente regla CSS muestra en maysculas la primera lnea de cada prrafo: p:first-line { text-transform: uppercase; } Este pseudo-elemento slo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas. Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos avanzados: div:first-line { color: red; } p:first-line { text-transform: uppercase; } <div> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> </div> En el ejemplo anterior, la primera lnea del primer prrafo tambin es la primera lnea del elemento <div>, por lo que se le aplican las dos reglas CSS y su texto se ve en maysculas y de color rojo.

El pseudo-elemento :first-letter
Permite seleccionar la primera letra de la primera lnea de texto de un elemento. De esta forma, la siguiente regla CSS muestra en maysculas la primera letra del texto de cada prrafo: p:first-letter { text-transform: uppercase; } Los signos de puntuacin y los caracteres como las comillas que se encuentran antes y despus de la primera letra tambin se ven afectados por este pseudo-elemento. Este pseudo-elemento slo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.

Los pseudo-elementos :before y :after


Los pseudo-elementos :before y :after se utilizan en combinacin con la propiedad content de CSS para aadir contenidos antes o despus del contenido original de un elemento. h1:before{ content:url(beep.wav) } h1:after{ content:url(beep.wav) }

ISMAEL HERNNDEZ VILLAGMEZ

7CM6

El contenido insertado mediante los pseudo-elementos :before y :after se tiene en cuenta en los otros pseudoelementos :first-line y :first-letter.

Posicionamiento de elementos
Con posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la pgina.

Position: static
El posicionamiento por defecto para todos los elementos es position: static, lo que significa que el elemento no estar posicionado y aparecer donde normalmente debera hacerlo. Normalmente no deber especificarse a no ser que deba modificarse una posicin previamente definida. #div-1 { position:static; }

Posicionamiento absoluto
El elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento. Esto significa que no deja un espacio vaco despus de ser posicionado. Para posicionar un elemento de forma absoluta, la propiedad position se establece como absolute. Posteriormente puedes usar las propiedades left, right, top, y bottom para colocar la caja. Como ejemplo de posicionamiento absoluto, vamos a colocar 4 cajas en cada esquina del documento: #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }

Posicionamiento relativo
Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cmo se calcula la posicion. La posicin para un elemento que se posiciona de forma relativa se calcula desde la posicin original en el documento.. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento despus de haberse posicionado.

ISMAEL HERNNDEZ VILLAGMEZ

7CM6

Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imgenes de forma relativa respecto a su posicin original en la pgina. Fjate cmo las imgenes dejan espacios vacos en sus posiciones originales en el documento: #dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }

Position relative + position absolute


Si especificas la posicin de div-1 de forma relativa, todos los elementos contenidos dentro de div-1 se posicionaran relativamente a div-1, por lo tanto si le establecemos la posicin absoluta a div-1a, este se posicionar en la esquina superior derecha del contendor div-1. #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }

Columnas posicionadas de forma absoluta


Utilizando posicionamiento relativo en el contenedor y absoluto para las columnas se pueden posicionar las columnas, una en cada lado. Una ventaja de usar este posicionamiento es que se puede colocar el HTML de las columnas en cualquier orden, ya que el posicionamiento se realiza de forma absoluta. #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

ISMAEL HERNNDEZ VILLAGMEZ

7CM6

Position float
Por ltimo, el posicionamiento flotante situa la caja fuera del flujo del documento, tan a la izquierda o tan a la derecha como le sea posible en esa misma lnea, si no tiene espacio en esa lnea baja a la siguiente hasta que encuentre espacio. Aunque el resto de las cajas ocupen el espacio que ha dejado la caja flotante en el flujo del documento, el contenido de estas se adaptan para no solaparse con la caja flotante (el contenido, no la caja que si ocupara el espacio dejado). La solucin consiste en posiconar un elemento de forma flotante con tal de ubicarlo lo ms a la derecha o lo ms a la izquierda posible para, posteriormente, incluir texto en l. #div-1a { float:left; width:200px; }

Float de columnas
Para columnas de altura variable, el posicionamiento absoluto no sirve, en este caso hay que utilizar el posicionamiento flotante. Con la propiedad float se puede posicionar un elemento lo ms a la derecha posible o lo ms a la izquierda posible, dejando que el resto de elementos fluya alrededor suyo. El div div-1a est flotado a la izquierda, y el texto del resto de divs fluye alrededor el div-1a, pero el resto de divs (div-1b y div-1c) siguen ocupando la misma posicin que antes, es decir todo el contendor, porque son elementos de bloque. #div-1a { float:left; width:200px; }

Columnas flotantes
Para que no se solapen unos elementos con otros hay que flotar todas las columnas. Para que se muestren una al lado de otra, entre todas las columnas han de sumar un ancho no superior al ancho del contenedor. Si te fijas, tanto div-after, como div-1 (que hace de contenedor) se solapan con las columnas creadas, vamos a ver como solucionar esto. #div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }

Columnas flotantes con clear


Luego, en el ltimo div (div-1c), en este caso el que hace de pie, se le puede aadir la propiedad clear, para que deje de tener efecto el flotado de las columnas de arriba y el resto del contenido se posicione debajo. #div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }