bart-simpson

Esta entrada es un brevísimo resumen sobre una útil entrada de Vagabundia que recomiendo y a la que tuve que recurrir para despejar algunas dudas.
Es algo muy básico, una de esas cosas hacemos automáticamente copiando y pegando pero no siempre resulta bien por eso es mejor entender lo que estamos haciendo.

En la hoja de estilos de nuestra plantilla podemos ver las propiedades de distinta forma. Reconocemos que se trata de una clase por ese punto antes del nombre de la clase.

.post {
.....
}

Si en lugar del punto llevara una almohadilla # estaríamos hablando de un ID eso quiere decir que se trata de un identificador único, no puede haber dos iguales en la plantilla.

#header-wrapper {
...............
}

A veces nos vemos en la necesidad de crear unos estilos distintos a los predeterminados en la plantilla para utilizarlos en una etiqueta concreta.
En el body de nuestra plantilla encontraremos los estilos definidos para el texto del blog y los enlaces.
Si queremos por ejemplo utilizar un color distinto para el texto seguramente lo que hacemos es modificarlo en el mismo editor de entradas en la pestaña "Redactar" pero ¿ y si queremos un color que no se encuentra en la paleta de colores? ¿y si ese color de texto lo queremos añadir en un gadget?

Hacemos unas pruebas y jugamos un poco con los estilos y las clases.

.rosa {
color:#ff00BB;
}

En nuestro editor de entradas o donde queremos tener el texto de color añadimos:
<p class="rosa">Texto rosa</p>

Texto rosa

Podemos añadir más propiedades a una misma clase y tantas clases como necesitemos usar para una misma etiqueta.

.rosa {
color:#ff00BB;
font-size: 20px;
font-weight:bold;
}

<p class="rosa">Texto rosa</p>

Texto rosa

Cuando añadimos una clase todas las etiquetas que contienen esa clase adquieren los mismos estilos. Para añadir estilos a un enlace añadimos:

a.rosa {
color:#FF00BB;
}

<a href="#" class="rosa"> Esto es un enlace de color rosa </a>

Esto es un enlace de color rosa

Igualmente podemos añadir efectos a la misma clase.

.rosa {
color:#ff00BB;
font-size: 34px;
font-weight:bold;
text-shadow: #000000 1px 2px 3px;
font-family:Times New Roman,sans-serif;
}

.rosa:hover {
color:#000000;
font-weight:bold;
font-style:italic;
font-size: 34px;
font-weight:bold;
text-shadow: #000000 1px 2px 3px;
font-family:Times New Roman,sans-serif;
}

<p class="rosa">¿ Texto rosa ?</p>

¿ Texto rosa ?
Pink Punk Pum Diseños

wow que bien la explicacion! me encanto esta nueva entraga besos! :D

Responder
Gem@

:: Besos Pink Punk Pum Diseños :)

Responder
concha

Como me gustaria saber la cuarta parte de lo que tu sabes. Por cierto me dicen que tengo un virus en la tecla del acento. ¿Es posible eso...?

Responder
Gem@

:: La cuarta parte de poco es demasiado poco Concha, todo es perder el miedo y experimentar en un blog de pruebas las cositas que vemos y nos gustan. Como en todo con la práctica se va cogiendo soltura pero nunca se llega a saber todo sería aburrido entonces :)
Lo del virus es la primera vez que lo oigo o mejor dicho leo, ¿te lo dijo alguien que entiende del tema? ¿cómo lo sabe?

Responder
UFE-Activo

mUchas Gracia tiene buena explicasion este post

Responder
Gem@

:: Gracias por comentar UFE-Activo :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:) :'( :( :P :D :$ ;) :-I :X :O |O :S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top