Búsqueda personalizada

Clases, pseudoclases y pseudoelementos en css

Clases
Una clase es una série de propiedades y métodos que se agrupan en una estructura para poder aplicarlos conjuntamente a una série de objetos, como CSS no tiene métodos, en este caso la clase solo contendrá propiedados (atributos) y decidiremos que objetos pertenecen a esta clase con el atributo HTML class.

La clase se definirá como expliqué en Sintaxis CSS, utilizando un selector de clase y poniendo todos los atributos y valores entre corchetes, veamos un ejemplo completo:

<html>
<head>
<title>Mi CSS</title>
<style>
.miClase {
border: 1px solid red;
padding: 4 4 4 4;
</style>
</head>
<body>
<b>Menú</b>
<div>Indice</div>
<div>Descargas</div>
<div>Links</div>
</body>
</html>
Como podeis ver, todos los objetos div están en la clase miClase, por lo tanto todos estos objetos tendrán las mismas propiedades.

Pseudoclases
Las pseudoclases són unas clases especiales de HTML, que se refieren a algunos estados especiales del elemento, las pseudoclases, igual que los pseudoelementos, se escriben de la siguiente manera:

objeto:pseudoclase {
propiedad: valor;
}
Las principales pseudoclases són para el objeto A (vínculo), y són las siguientes:

link – Enlace sin explorar
visited – Enlace que ha sido seguido por el usuario
active – Enlace seleccionado por el usuario
hover – Enlace que tiene el ratón encima

Pseudoelementos
Los pseudoelementos són partes determinadas de de un objeto, y tenemos las siguientes.

first-letter – Se refiere a la primera letra del objeto.
first-line – Se refiere a la primera línea del objeto.

De esta manera, con las pseudoclases y pseudoelementos, podemos definir una letra capital para la primera fila de cada párrafo, un enlace que se recuadra si le ponemos el mouse encima…

Clases
Una clase es una série de propiedades y métodos que se agrupan en una estructura para poder aplicarlos conjuntamente a una série de objetos, como CSS no tiene métodos, en este caso la clase solo contendrá propiedados (atributos) y decidiremos que objetos pertenecen a esta clase con el atributo HTML class.

La clase se definirá como expliqué en Sintaxis CSS, utilizando un selector de clase y poniendo todos los atributos y valores entre corchetes, veamos un ejemplo completo:

<html>
<head>
<title>Mi CSS</title>
<style>
.miClase {
border: 1px solid red;
padding: 4 4 4 4;
</style>
</head>
<body>
<b>Menú</b>
<div>Indice</div>
<div>Descargas</div>
<div>Links</div>
</body>
</html>
Como podeis ver, todos los objetos div están en la clase miClase, por lo tanto todos estos objetos tendrán las mismas propiedades.

Pseudoclases
Las pseudoclases són unas clases especiales de HTML, que se refieren a algunos estados especiales del elemento, las pseudoclases, igual que los pseudoelementos, se escriben de la siguiente manera:

objeto:pseudoclase {
propiedad: valor;
}
Las principales pseudoclases són para el objeto A (vínculo), y són las siguientes:

link – Enlace sin explorar
visited – Enlace que ha sido seguido por el usuario
active – Enlace seleccionado por el usuario
hover – Enlace que tiene el ratón encima

Pseudoelementos
Los pseudoelementos són partes determinadas de de un objeto, y tenemos las siguientes.

first-letter – Se refiere a la primera letra del objeto.
first-line – Se refiere a la primera línea del objeto.

De esta manera, con las pseudoclases y pseudoelementos, podemos definir una letra capital para la primera fila de cada párrafo, un enlace que se recuadra si le ponemos el mouse encima…

fuente: web taller

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | Responder

Maquetar una galería de fotos con CSS usando listas (2)

De este modo la definición de estilos para nuestra lista de fotos queda así:

#principal li {
   display:inline;
   float:left;
   width:220px;
   background-color:#f5f7f9;
   padding:5px;
   margin:10px;
   text-align: center;
   border-right: #a5a7aa solid 1px;
   border-bottom: #a5a7aa solid 1px;
}

La galería queda perfectamente maquetada, adaptable a distintas resoluciones y con un código limpio y fácil de entender.

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | Responder

Maquetar una galería de fotos con CSS usando listas

Una galería de fotos al fin y al cabo no es más que una lista de elementos (en nuestro caso imágenes) que mostraremos como más nos convenga. Desde el punto de vista de la ordenación lógica de la información en nuestras páginas resulta razonable usar una lista para estructurar nuestros elementos, así que a lo largo de este tutorial veremos el potencial de las listas para maquetar eficientemente casos como este de nuestra galería.

Normalmente estamos acostumbrados a ver las listas organizadas verticalmente, pero CSS nos permite jugar con los elementos de una lista para mostrarlos de distintas maneras. En nuestro caso, probablemente si organizáramos la lista verticalmente la apariencia de nuestra galería quedaría extraña comparada con una organización horizontal, tal y como vimos en el ejemplo de la galería fotográfica con capas. Por tanto, organizaremos nuestra lista horizontalmente, aplicando un display:inline y flotando los elementos a la izquierda para que fluyan unos a continuación a otros.

Partimos del siguiente código html:

<body>:
<div id=”principal”>
    <h3>GALERÍA CSS – Listas</h3>
   <ul>
      <li><a href=”#”><img src=”img/1.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href=”#”><img src=”img/2.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href=”#”><img src=”img/3.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href=”#”><img src=”img/4.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen más larga de lo habitual</span></a></li>
      <li><a href=”#”><img src=”img/5.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href=”#”><img src=”img/6.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href=”#”><img src=”img/7.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href=”#”><img src=”img/8.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href=”#”><img src=”img/9.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href=”#”><img src=”img/10.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href=”#”><img src=”img/11.jpg” border=”0″ alt=”"/><br /><span>Descripci&oacute;n de la imagen</span></a></li>

   </ul>
</div>
</body>

Como puede apreciarse, hemos insertado dentro de cada <li> (list item) nuestra imagen y un comentario añadido con un <span>, tal y como hicimos en el tutorial de la galería fotográfica con capas.

Nuestra redefinición de estilos para las listas quedaría de la siguiente manera:

#principal li {
   display:inline;
   float:left;
}

Nótese que las típicas viñetas que aparecen asociadas a las listas desordenadas desaparecen cuando aplicamos el display:inline, de la misma forma que si hubiéramos unsado un list-style:none. El comportamiento de nuestros elementos de la lista (los list ítems <li>) es similar al de las capas ahora.

Podemos modificar las propiedades que queramos para lograr que la apariencia de cada uno de los elementos de la lista se ajuste a nuestro objetivo. Basándonos en los estilos que aplicamos en el ejemplo de la galería fotográfica con capas, cambiamos el color de fondo, el ancho de cada <li>, les damos margin y padding para presentarlos correctamente y damos estilo a los bordes para lograr apariencia de profundidad.

fuente: webtaller.com

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | Responder

Novedades