Gebruik CSS om 'n prentjie aan die linkerkant van 'n webbladuitleg te belyn
Kyk na bykans enige webblad vandag en jy sal 'n kombinasie van teks en beelde sien wat die grootste deel van die bladsye uitmaak. Dit is baie maklik om teks en prente by 'n bladsy te voeg . Die teks word gekodeer deur gebruik te maak van standaard HTML-tags soos paragrawe, lyste en opskrifte, terwyl die beelde ingesluit word deur die -element .
Die vermoë om daardie teks te maak en die beelde werk goed saam, is wat groot webontwerpers uitmekaar maak! U wil nie net hê dat u teks en beelde een na die ander verskyn nie, wat is hoe hierdie blokvlakelemente standaard sal uitmaak. Nee, jy wil beheer hê oor hoe die teks en beelde saamvloei in wat uiteindelik jou visuele ontwerp van jou webwerf sal wees.
As u 'n prentjie het wat aan die linkerkant van 'n bladsy gekoppel is, terwyl die teks van die bladsy daarheen vloei, is dit 'n algemene ontwerpbehandeling vir gedrukte ontwerp en ook vir webbladsye. In webterme word hierdie effek bekend as die prentjie . Hierdie styl word behaal met die CSS-eienskap vir "float". Hierdie eienskap laat teks om die linkerbelynde prentjie na sy regterkant toe vloei. (Of om 'n regslynde prentjie aan sy linkerkant.) Kom ons kyk hoe om hierdie visuele effek te bereik.
Begin met HTML
Die eerste ding wat jy moet doen is om 'n paar HTML te hê om mee te werk. Vir ons voorbeeld, skryf ons 'n paragraaf van teks en voeg 'n prentjie aan die begin van die paragraaf (voor die teks, maar na die opening
tag). Hier is hoe dit HTML-opmaak lyk:
Standaard sal ons webblad vertoon met die prent bo die teks. Dit is omdat beelde elemente in blokvlakke in HTML is. Dit beteken dat die blaaier standaardverdelings voor en na die beeldelement vertoon. Ons sal hierdie verstekkyk verander deur na CSS te skakel. Eerstens sal ons 'n klaswaarde by ons beeldelement voeg . Daardie klas sal optree as 'n "haak" wat ons later in ons CSS sal gebruik.
Let daarop dat hierdie klas van "links" niks op sy eie doen nie! Vir ons om ons gewenste styl te bereik, moet ons CSS volgende gebruik.
CSS Styles
Met ons HTML in plek, insluitend ons klas eienskap van "links", kan ons nou na CSS verander. Ons sal 'n reël by ons stylevel voeg wat daardie prentjie sal dryf en ook 'n bietjie blokkie langsaan voeg, sodat die teks wat uiteindelik om die prentjie omsluit, dit nie te nou omhels nie. Hier is die CSS wat jy mag skryf:
.left {float: left; Padding: 0 20px 20px 0; }Hierdie styl dryf die prent na links en voeg 'n bietjie vulling by (met behulp van 'n paar CSS-kortpunte) regs en onderkant van die prent.
As u die bladsy wat hierdie HTML bevat, in 'n blaaier hersien het, sal die prent nou links wees en die teks van die paragraaf sal regs verskyn met 'n gepaste hoeveelheid spasie tussen die twee. Let op die klaswaarde van "links" wat ons gebruik het, is arbitrêr. Ons kon dit iets noem omdat die term "links" niks op sy eie doen nie. Dit moet ' n klasattribuut hê in die HTML wat werk met 'n werklike CSS-styl wat die visuele veranderinge wat jy wil maak, dikteer.
Alternatiewe maniere om hierdie style te bereik
Hierdie benadering om die beeldelement 'n klasattribuut te gee en dan 'n algemene CSS-styl te gebruik wat die element dryf, is net een manier om hierdie "links-gerigte beeld" -kyk te bereik. U kan ook die klaswaarde van die beeld afneem en dit met CSS ontwerp deur 'n meer spesifieke selector te skryf. Kom ons kyk byvoorbeeld na 'n voorbeeld waar die beeld binne is van 'n afdeling met 'n klaswaarde van "hoofinhoud".
Om hierdie prent te styl, kan jy hierdie CSS skryf:
.main-inhoud img {float: left; Padding: 0 20px 20px 0; }In hierdie sceario sal ons beeld aan die linkerkant gekoppel word, met die teks soos dit voorheen swaai, maar ons het nie 'n ekstra klaswaarde nodig vir ons opmaak nie. As jy dit op skaal doen, kan dit help om 'n kleiner HTML-lêer te skep, wat makliker kan bestuur word en kan ook help om prestasie te verbeter.
Ten slotte kan jy selfs die style direk by jou HTML-opmaak voeg, soos volg:
Hierdie metode heet " inline style ". Dit is nie raadsaam nie omdat dit die styl van 'n element duidelik met sy strukturele opmaak kombineer. Web-beste praktyke bepaal dat die styl en struktuur van 'n bladsy afsonderlik moet bly. Dit is veral handig as jou bladsy sy uitleg moet verander en vir verskillende skermgroottes en toestelle soek met 'n sensitiewe webwerf. Die styl van die bladsy wat in die HTML verweef is, maak dit baie moeiliker om media-navrae te skrywer wat die voorkoms van u werf sal aanpas soos benodig vir die verskillende skerms.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 4/3/17.