Benotzt CSS fir e Bild op der lénkser Säit vun enger Websäit Layout auszebréngen
Kuckt Iech elo eng Websäit haut a gesitt Dir eng Kombinatioun vun Text an Biller, déi de gréissten Deel vun de Säiten erofhuelen. Et ass ganz einfach Text an Biller op eng Säit ze vergréisseren . Den Text gëtt codéiert mat Standard HTML Tags wéi Zifferen, Lëschte a Rubriken, während d'Biller mat dem Element agefouert ginn .
D'Kapazitéit fir dës Texter an déi Biller ze gutt ze maachen, ass wat grouss Web Designer ausgeriicht sinn! Dir wëllt net nëmmen datt Äre Text an d'Biller méi no der selwechter sinn, wéi dës Elemente vum Blockelement normal sinn. Neen, Dir wëllt e Kontrolle wéi d'Texter an d'Biller zesummen zesumme liewen, wat lues a säi visuell Design ass.
E Bild, deen der lénkser Säit vun enger Säit ausgeruff ass, während den Text vun där Säit ëmstridden ass eng gemeinsam Entworfskonditioun fir gedréckt Design an och fir Websäiten. Am Web Termen ass dësen Effekt als Floating vum Bild bekannt . Dëse Stil gëtt mat der CSS-Eigenschaft fir "Schwammen" erreecht. Dës Eigenschaft erlaabt Text ze fléien um lénks lénks ausgeriicht Bild op senger rietser Säit. (Oder ronderëm e richtege bildt Bild op senger lénkser Säit.) Lass eis kucken, wéi Dir dës visuell Effekt erreeche kann.
Start mat HTML
Dat éischt wat Dir braucht fir ze maachen ass e puer HTML ze benotzen. Fir eise Beispill schreift en Paragrapse vum Text an eng Foto am Ufank vum Paragraphe (virdrun den Text, awer no der Erëffnung
). Hei ass wat dëse HTML Markup sieht aus:
Standardastell kënnt eis Websäit mat dem Bild iwwert dem Text. Dëst ass wéinst den Iwwerbléckelementer am HTML. Dëst bedeit datt de Browser Zeilbriechungen virum a no dem Bildelement par défaut weist. Mir änneren dëst Standardfaarf duerch Dreemen op CSS. Als éischt ginn awer e klassesche Wäert fir eisen Imageelement . Dës Klasse handelt als "Haken", déi mir spéider an eisem CSS benotzen.
Bedenkt datt dës Klass vun "lénks" guer näischt iwwer seng eegen! Fir eis Wënschstil ze eraussichen, brauche mir CSS virun.
CSS Styles
Mat eisem HTML an der Plaatz, och eise Klassattribut vun "lénks", kënne mir elo un CSS ginn. Mir wëllen eng Regel fir eis Stylesheet addéieren, déi dat Bild erofhuelen an och e klengt Polbréck niewend dem Duerf erofsetzen, sou datt de Text, dee schliisslech ëm d'Bild ëmgedréint ass, net géint en ze gutt drun ass. Hei ass de CSS Dir kënnt schreiwen:
.left {Schwämm: lénks; Ustellung: 0 20px 20px 0; }}Dëse Stil schwëllt de Bild op der lénkser a fiert e klenge Padding (mëcht e puer CSS Shorthand) bis op d'Säit a riets vun der Bild.
Wann Dir d'Säit iwwersetzt hutt, déi dëse HTML mat engem Browser enthält, wäerte d'Bild op der lénkser Säit ausgeriicht sinn, an den Text vum Paragraphe wier mat sengem passende Betrag mat enger Distanz tëscht deenen zwee. Remark: de Klasswert vun "lénks", dat mir benotzt hunn, ass willkürlech. Mir hätten eppes genannt, well de Begrëff "lénks" näischt vu sengen eegenen. Dëst muss e Klassen-Attribut am HTML hunn , deen mat engem CSS-Stil funktionnéiert, deen d'visuell Ännerungen déi Dir sicht.
Alternativ Weeër fir dës Stile z'erreechen
Dës Approche fir dem Bildelement e Klassenattribut ze ginn an dann mat engem generellen CSS-Stil, deen de Element eraussichtt, ass nëmmen eng Manéier datt Dir dëst "lénks orientéierte Bild" erreechen kënnt. Dir kënnt och de Klasswert aus dem Image huelen an et mat CSS mat engem méi spezifesche Selektor schreiwen. Zum Beispill kucke weis op engem Beispill, wou d'Bild innerhalb vun enger Divisioun mat engem Klasswert vun "Main-Content" ass.
Fir dësst Bild ze styléieren, kënnt Dir dëse CSS schreiwen:
.main-content img {Schwämm: lénks; Ustellung: 0 20px 20px 0; }}An dësem Szeario giff eis Bild op der lénkser Säit ausgeruff ginn, mat deem Text wéi et virdrun schwëmmt, awer mir brauche keng extra Klass fir eise Markup. Dat an der Skala däerf hëllefen eng kleng HTML-Akte z'ënnerstëtzen, wat méi einfach gëtt an et kann och hëllefen, d'Leeschtung ze verbesseren.
Schlussendlech kënnt Dir d'Stiler direkt an Äre HTML Markup wéi dës setzen:
Dës Methode gëtt " Inline Styles " genannt. Et ass net onbedengt, well et e klengen Kombinatioun vum Stil vun engem Element mat senger struktureller Markup. Web Best Practices Diktat datt de Stil an d'Struktur vun enger Säit soll separat bleiwen. Dëst ass besonnesch gutt wéi Är Säit muss änneren an se siche fir verschidde Layoutgréisst an Apparater mat enger reaktiounsäiteger Websäit. Den Stil vun der Säit, déi mat dem HTML verbonnen ass, wäert et vill méi schwéier Autoriséierungsproblemer Autoriséieren déi de Standuert vun Ärem Site unzepassen wéi néideg fir déi verschidde Skreens.
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard op 4/3/17.