Säädä kuvaketta CSS: n avulla verkkosivun Layout-sivun vasemmalle puolelle
Katso miltei mitä tahansa verkkosivua tänään ja näet tekstin ja kuvien yhdistelmän, joka muodostaa suurimman osan näistä sivuista. Tekstin ja kuvien lisääminen sivulle on helppoa. Teksti koodataan tavallisilla HTML-tunnisteilla kuten kappaleilla, luetteloilla ja otsikoilla, kun taas kuvat sisältyvät -elementtiin .
Kyky tehdä kyseinen teksti ja kuvat toimivat hyvin yhdessä, mikä asettaa suuret web-suunnittelijat erilleen! Et vain halua, että teksti ja kuvat näkyvät yksi toisensa jälkeen, jolloin nämä lohkotason elementit asetetaan oletusarvoisesti. Ei, haluat jonkin verran valvoa, miten teksti ja kuvat kulkevat yhteen, mikä lopulta on sivustosi visuaalinen muotoilu.
Sivun vasemmalla puolella olevan kuvan kohdalla, kun sivun teksti virtaa sen ympärillä, on painettuun muotoiluun ja myös verkkosivuihin suunniteltu tavanomainen muotoilu. Web-termeissä tämä vaikutus tunnetaan kelluvaksi kuvaksi . Tämä tyyli saavutetaan CSS-ominaisuuden avulla "kellua" varten. Tämä ominaisuus antaa tekstin virrata vasemmanpuoleisen kuvan ympärille oikealle puolelle. (Tai oikealla kohdistetun kuvan ympärillä vasemmalle puolelle.) Katsotaanpa, miten tämä visuaalinen vaikutus saavutetaan.
Aloita HTML-koodilla
Ensimmäinen asia mitä sinun tarvitsee tehdä on olla HTML-työkalu, jolla voit työskennellä. Esimerkissämme kirjoitamme tekstin kohdan ja lisäämme kuvan kappaleen alkuun (ennen tekstiä, mutta avauksen
tagin jälkeen). Tässä on HTML-merkintä:
Oletusarvoisesti verkkosivumme näkyy tekstin yläpuolella olevassa kuvassa. Tämä johtuu siitä, että kuvat ovat HTML-tason elementtejä. Tämä tarkoittaa sitä, että selain näyttää rivi taukoja ennen kuva-elementtiä ja sen jälkeen. Muutetaan tämä oletusnäkymä kääntämällä CSS: hen. Ensin kuitenkin lisäämme luokan arvoa kuvaelementtiin . Tämä luokka toimii "koukuksi", jota käytämme CSS: ssä myöhemmin.
Huomaa, että tämä "left" -luokka ei tee mitään lainkaan! Jotta voimme saavuttaa haluamamme tyylin, meidän on käytettävä seuraavaksi CSS: tä .
CSS-tyylit
Kun HTML-koodi on paikalla, mukaan lukien "vasemmalla" luokkaamme, voimme nyt siirtyä CSS: ään. Lisäsisimme säännöt tyylitiedostomme , jotka float tuota kuvaa ja lisätään sen lisäksi hieman pehmusteita niin, että teksti, joka lopulta käärii kuvan ympärille, ei pääty liian tiukkaan. Tässä on CSS, jonka voit kirjoittaa:
.left {float: vasen; pehmuste: 0 20px 20px 0; }Tämä tyyli kelluu kyseisestä kuvasta vasemmalle ja lisää hieman täyttöä (käyttäen jotain CSS-pikakuvaketta) kuvan oikeaan ja alareunaan.
Jos tarkistit sivua, joka sisältää tämän HTML-koodin selaimessa, kuva olisi nyt vasemmalla ja kappaleen teksti näyttäisi oikealle sopivan määrän välimatkaa näiden kahden välillä. Huomaa, että käyttämämme "vasemman" luokan arvo on mielivaltainen. Voisimme kutsua sitä kaiken, koska termi "vasen" ei tee mitään yksin. Tämä edellyttää HTML-koodin luokkamääritettä, joka toimii todellisen CSS-tyylin kanssa, joka määrittelee visuaaliset muutokset, joita haluat tehdä.
Vaihtoehtoiset tavat saavuttaa nämä tyylit
Tämä lähestymistapa, jossa kuva-elementille annetaan luokan attribuutti ja jonka avulla elementti kelluu yleisellä CSS-tyylillä, on vain yksi tapa voit saada tämän "vasemmalle kohdistetun kuvan" ulkoasun. Voit myös ottaa luokan arvosta pois kuvasta ja muokata sitä CSS: llä kirjoittamalla tarkempi valitsin. Katsotaan esimerkiksi esimerkkiä, jossa kyseinen kuva kuuluu jakaumaan, jossa on luokan pääarvo-arvo.
Tämän kuvien muotoilemiseksi voit kirjoittaa tämän CSS: n:
.main-content img {float: vasen; pehmuste: 0 20px 20px 0; }Tässä artikkelissa kuvamme olisi vasemmalla puolella, ja teksti leijui sen ympärille kuten aiemmin, mutta meidän ei tarvinnut lisätä ylimääräistä luokkaa arvoamme merkintään. Tämä voi olla pienempi HTML-tiedosto, joka on helpompi hallita ja joka voi myös parantaa suorituskykyä.
Lopuksi voit lisätä tyylit suoraan HTML-merkintään, kuten:
Tätä menetelmää kutsutaan " inline-tyyliksi ". Ei ole suositeltavaa, koska se yhdistää selkeästi elementin tyylin ja sen rakenteellisen merkinnän. Web-parhaat käytännöt edellyttävät, että sivun tyyli ja rakenne säilyvät erillisinä. Tämä on erityisen hyödyllinen, kun sivusi on muutettava ulkoasua ja etsittävä eri näytön koot ja laitteet, joissa on reagoiva verkkosivusto. Kun sivun tyyli on HTML-lomakkeiden välissä, on paljon vaikeampaa kirjoittaa median kyselyjä , jotka muokkaavat sivustosi ulkoasua näiden eri näyttöjen mukaan.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija: Jeremy Girard, 4. 3. 17.