Ús de CSS per alinear una imatge al costat esquerre d'un disseny de pàgina web
Mireu gairebé qualsevol pàgina web d'avui i veureu una combinació de text i imatges que componen la major part d'aquestes pàgines. És molt fàcil afegir text i imatges a una pàgina . El text està codificat usant etiquetes HTML estàndard com ara paràgrafs, llistes i encapçalaments, mentre que les imatges s'inclouen mitjançant l' element .
La capacitat de fer que aquest text i aquestes imatges funcionin bé és el que diferencia els grans dissenyadors web. No només voleu que el text i les imatges apareguin un darrere l'altre, de manera que aquests elements de nivell de bloc es distribuiran per defecte. No, voleu un cert control sobre com flueixen el text i les imatges en el que, en definitiva, serà el disseny visual del vostre lloc web.
Tenir una imatge que està alineada al costat esquerre d'una pàgina mentre el text d'aquesta pàgina flueix al voltant d'ell és un tractament de disseny comú per al disseny imprès i també per a pàgines web. En termes web, aquest efecte es coneix com flotant la imatge . Aquest estil s'aconsegueix amb la propietat CSS per "float". Aquesta propietat permet que el text flueixi per la imatge de l'esquerra al costat dret. (O al voltant d'una imatge alineada a la dreta al costat esquerre). Mirem com aconseguir aquest efecte visual.
Comenceu amb HTML
El primer que haurà de fer és tenir HTML amb el que treballar. Per al nostre exemple, escriurem un paràgraf de text i afegirem una imatge al principi del paràgraf (abans del text, però després de l'etiqueta
d'obertura). A continuació s'explica el que té aquest marcat HTML:
De manera predeterminada, la nostra pàgina web es mostraria amb la imatge que hi ha a sobre del text. Això es deu a que les imatges són elements de nivell de bloc en HTML. Això significa que el navegador mostra salts de línia abans i després de l'element d'imatge de forma predeterminada. Anem a canviar aquest aspecte per defecte, passant a CSS. En primer lloc, però, afegirem un valor de classe al nostre element d'imatge . Aquesta classe actuarà com un "ganxo" que utilitzarem a la nostra CSS més endavant.
Tingueu en compte que aquesta classe de "esquerra" no fa res en absolut! Per aconseguir el nostre estil desitjat, necessitem utilitzar CSS a continuació.
Estils CSS
Amb el nostre codi HTML inclòs, incloent el nostre atribut class "left", ara podem recórrer a CSS. Afegirem una regla al nostre full d'estils que flotarà aquesta imatge i també afegirà una mica de farcit al costat, de manera que el text que acabi embolicant-se a la imatge no s'oposi massa a ella. Aquí teniu el CSS que podeu escriure:
.left {float: left; padding: 0 20px 20px 0; }Aquest estil flota aquesta imatge a l'esquerra i afegeix una mica de farciment (usant una taquigrafia CSS) a la dreta i la part inferior de la imatge.
Si vau revisar la pàgina que conté aquest codi HTML en un navegador, la imatge ara estarà alineada a l'esquerra i el text del paràgraf apareixerà a la dreta amb una quantitat adequada d'espaiat entre els dos. Tingueu en compte que el valor de classe de "esquerra" que utilitzem és arbitrari. Podríem anomenar res perquè el terme "left" no fa res per si sol. Això necessita tenir un atribut de classe en el codi HTML que funcioni amb un estil CSS real que dicti els canvis visuals que voleu fer.
Formes alternatives per assolir aquests estils
Aquest enfocament de donar a l'element de la imatge un atribut de classe i, a continuació, utilitzar un estil CSS general que flota l'element és només una manera d'aconseguir aquesta imatge d'imatge alineada a l'esquerra. També podeu treure el valor de la classe de la imatge i modelar-lo amb CSS escrivint un selector més específic. Per exemple, vegem un exemple on aquesta imatge es troba dins d'una divisió amb un valor de classe de "contingut principal".
Per dissenyar aquesta imatge, podeu escriure aquest CSS:
.mage-content img {float: left; padding: 0 20px 20px 0; }En aquest sceario, la nostra imatge s'alinearia a l'esquerra, amb el text flotant al voltant com abans, però no necessitàvem afegir un valor de classe extra al nostre marcat. Fer això a escala pot ajudar a crear un fitxer HTML més petit, que serà més fàcil de gestionar i també pot ajudar a millorar el rendiment.
Finalment, fins i tot podeu afegir els estils directament al vostre marcat HTML, com aquest:
Aquest mètode s'anomena " estils en línia ". No és aconsellable perquè combina clarament l'estil d'un element amb el seu marcat estructural. Les millors pràctiques de la web dicten que l'estil i l'estructura d'una pàgina han de romandre separades. Això és especialment útil quan la vostra pàgina necessita canviar el disseny i buscar diferents mides de pantalla i dispositius amb un lloc web sensible. Tenir l'estil de la pàgina entrellaçat en HTML farà molt més difícil l' autorització de consultes de mitjans que ajusti l'aspecte del vostre lloc com calgui per a aquestes pantalles diferents.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 3/3/17.