Posicionamiento CSS 3ª Entrega

Continuamos con los ejercicios de CSS. Hoy toca posicionamiento.Modificaremos nuestra hoja de estilo.Como es habitual creamos un archivo html en este caso llamaremos a este archivo posicionamiento.html. Dentro del código observamos como el< h1> lo llamo posicionamiento y voy a insertar una imagen, se me olvidaba la hoja de estilo la vinculo dentro del código html a style3.css que es donde voy a trabajar los códigos.


Dentro de <body>  ponemos fondo verde alineamos a la derecha y seleccionamos la imagen



Ya la tenemos un poco fea pero si nos fijamos palabra posicionamiento en h1 y alineada a la derecha con el fondo de la imagen elegida.



 La imagen no se moverá con la barra de desplazamiento .





He elegido que la imagen no se repita y el texto sea blanco para resaltar del fondo.


Ahora como soy un cabezón quiero la letra toda en mayúscula.



Ahora la selecciono en minúscula.



Las primeras letras de cada palabra en mayúscula con capitalize.



Todas las palabras subrayadas.


Ahora subrayada pero por encima.



En este caso por el medio.

Bueno esto va complicándose: Fondo no repetido,subrayado. texto helvética,tamaño 24px fuente de estilo itálica, separación de lineas de 90px.




Pero si queremos evitar tanto código hay una forma de hacerlo y  no se modifica nada de hecho no pasa nada:

Estamos en< body> y si observamos ponemos font: Acto seguido como queda abajo y es totalmente lo mismo.



Una cuestión mirar como modificando el código dentro de <div>   he puesto unos valores:

600px y 300px que si nos vamos al crome dentro de herramientas/consola java vemos que la página de estilo css mia  tiene las medidas que yo he puesto.



En este ejemplo fondo  azul con sus medidas  de texto  600px y 300px.


Le he dado de margen 0.



Mirar que belleza de márgenes....: Marging- bottom 80 osea margen anchura inferior, margen izuierdo 30 el derecho 45 y margin-top o  anchura superior 20. Esta claro.


Y si nos vamos al código a través del crome en  herramientas/consola vemos que las medidas son las que yo he establecido.


Esta claro que el algodón no engaña.








Os acordáis hace una ratito que dije que podemos evitar código  abreviando la situación ...si... pues mirar  margin: 20px 45px 80px 30px es lo mismo que lo de antes.


Aquí pongo el margen en automático.


En este caso voy modificando  los bordes del texto y como soy un facineroso escogí el color rojo. Mirar el borde que mal gusto tengo.jajajjaaj

Si observamos la consola el algodón no engaña , los mismos valores plasmados.



Bueno como soy un manías ahora quiero el borde sólido y rojo.






He modificado sólo los bordes superiores de ambos textos .

En definitiva como hemos podido ver en la hoja  de estilo  se puede llegar hacer casi maravillas hasta donde de css.Es  cuestión de gusto. El que una hoja de estilo pueda permitirnos varias opciones a la hora de programar nos da una  cierta libertad.








Comentarios

Entradas populares