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.
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.
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.
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.
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.
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.
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
Publicar un comentario
bueno opina y compara estás en tu blog .