HTML-dokumentin lohkotasoinen elementti (esim. Verkkosivu) näkyy peräkkäisessä järjestyksessä. Jos haluat muokata järjestystä, jotta sivu näyttäisi houkuttelevammalta tai parantaisi sen hyödyllisyyttä, sinun on käärittävä lohkot, mukaan lukien kuvat, niin että sivun teksti virtaa sen ympärille.
Web-termeissä tämä vaikutus tunnetaan nimellä "kelluva" kuva. Tämä tyyli saavutetaan CSS-ominaisuuden avulla "kellua" varten. Tämä ominaisuus antaa tekstin virrata vasemmanpuoleisen kuvan ympärille oikealle puolelle. Tai oikealle kohdistetun kuvan ympärille vasemmalle puolelle.
Aloita HTML: llä
Ensimmäinen asia mitä sinun tarvitsee tehdä on olla HTML-työkalu, jolla voit työskennellä. Esimerkkinä me kirjoitamme tekstin kohdan ja lisäämme kuvan kappaleen alkuun (ennen tekstiä, mutta avaamisen jälkeen
tag). Tässä on HTML-merkintä:
Kappaleen teksti menee tänne. Tässä esimerkissä meillä on kuva headshot-valokuvasta, joten tämä teksti olisi todennäköisesti henkilö, jolle headshot on.
Oletusarvoisesti verkkosivumme näkyy tekstin yläpuolella olevassa kuvassa, koska 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.
Kappaleen teksti menee tänne. Tässä esimerkissä meillä on kuva headshot-valokuvasta, joten tämä teksti olisi todennäköisesti henkilö, jolle headshot on.
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 paikallaan (mukaan lukien luokkaamme "left"), voimme nyt kääntää CSS: lle. 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. Mitä tahansa termiä, jota käytät, täytyy olla HTML-koodissa oleva luokkamääritelmä, joka toimii todellisen CSS-tyylin kanssa, joka määrittelee visuaaliset muutokset, joita haluat tehdä. 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 "tärkein sisältö" -luokan arvoon. Tämän kuvien muotoilemiseksi voit kirjoittaa tämän CSS: n: .main-content img { float: vasen; pehmuste: 0 20px 20px 0;}
Tässä tilanteessa kuvamme olisi kohdistettu vasemmalle, ja teksti kelluu sen ympärillä, kuten aiemmin, mutta meidän ei tarvinnut lisätä ylimääräistä luokkavaraa 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ää 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ä erottelu 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. Vaihtoehtoiset tavat saavuttaa nämä tyylit
Kappaleen teksti menee tänne. Tässä esimerkissä meillä on kuva headshot-valokuvasta, joten tämä teksti olisi todennäköisesti henkilö, jolle headshot on. Vältä sisäisiä tyylejä
Kappaleen teksti menee tänne. Tässä esimerkissä meillä on kuva headshot-valokuvasta, joten tämä teksti olisi todennäköisesti henkilö, jolle headshot on.
