Cosas que he aprendido al montar el blog (VI) Un montón de css que mañana olvidaré
El css de estilo de las páginas web es lo mas caótico que he visto
de hacer y aprender, pero de lo que me ha tocado usar y toquetear
me quedo con esta serie de cosas:
>Si queremos sobreescribir una propiedad de css ya sea desde otro css a parte por no manchar o sobreescribir el original del tema de wordrpess o para saltarse otras propiedades hijas usaremos el sufijo !important
!important se usa así:
p{color: red !important;}
Ahora si hubiese un elemento como
<p style='color:blue;'>hola</hola>
nuestro hola sería forzado a ser rojo.
Principalmente lo he usado para no modificar el style.css de mi tema al usar plugins creados por mí, sino directamente desde los plugins sobreescribir la propiedad con !important.
Para esta tarea realmente también tenemos una segunda solución: usando jquery.
Con jquery podemos modificar cualquier estilo al vuelo de esta manera:
jQuery("p").css("background-color","yellow");
Si queremos cambiar las propiedades de algo cuando hemos redimensionado la ventana a una resolución diferente usaremos @media only screen and (max-width:)
@media only… se usa así:
@media only screen and (max-width: 768px) {
#imagen { max-height:100px; }
}
De esta manera los elementos con id #imagen ahora tendrán un tamaño máximo de 100px.
>Si queremos superponer una imagen o elemento sobre otro
Tenemos dos opciones:
-z-index con position:*
z-index le da una prioridad de capa al elemento, un elemento con z-index:3; estará por encima de un elemento z-index:1;
De esta sencilla manera podemos posicionar elementos por encima de otros, siempre y cuando le hayamos definido el atributo position
Aquí tenéis un ejemplo práctico en el que podéis cambiar el z-index de -1 a 0 y ver como la imagen pasa a estar delante del texto:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
-sin z-index (div relativo e imagen absoluta dentro)
También podemos usar este otro método, se basa en hacer un elemento (div) con posición relativa y dentro de él meteremos elementos con posición absoluta y los ajustaremos a la posición deseada dentro del div.
Pondremos una imagen sin posición dentro del div con anchura del 100% (width:100%;) que rellenará el fondo del div.
Aquí os dejo un ejemplo modificado que podéis meter en el editor online:
<html> <head></head> <body> <h2>Image Text</h2> <p>How to place image over an image:</p> <div style="position:relative;"> <img src="img_snow_wide.jpg" id="myimg" alt="Snow" style="width:80%;"> <img src="img_snow_wide.jpg" alt="Snow" style="width:30%;position:absolute;left:20px;top:20px;"> </div> </body> </html>
Podéis probarlo aquí, sustituyendo el texto por el código de arriba: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_text
