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

Deja un comentario

Tu dirección de correo electrónico no será publicada.

*

code

nasa pic of the day
laresistenciadelbit/wp_githubin

wordpress plugin for embedding github content

laresistenciadelbit/narpa

(N)o (A)(R)(P) (A)ttacks

laresistenciadelbit/bats

some of my scripts for dayly use

laresistenciadelbit/beacon

android beacon position triangulation app

laresistenciadelbit/androidTabs

example of dynamic scrolling tabs and dynamic sliding tabs for android studio

laresistenciadelbit/login_space

script for changing your login screen to last nasa uploaded picture

laresistenciadelbit/d2gls

(D)iablo (2) (g)ame (l)ist (s)niffer

laresistenciadelbit/wp_nasapic

wordpress plugin for a widget with the last nasa uploaded picture.

laresistenciadelbit/starfield

draw a star field in js moving in the desired direction

laresistenciadelbit/drone

quadcopter made with arduino (arduino pro micro + modules)