Noviisi web-suunnittelijat: miten tehdä tekstistä virtaa kuvien ympärille

Tässä artikkelissa kerromme noin ominaisuuksia HTML ja CSS, jotka liittyvät kuvien. Opit lisätä ne HTML-dokumentti. Artikkelissa on myös tietoja siitä, miten muuttaa kuvan asetuksia ja järjestää tekstiviestejä virtaus kuvan ympärille.

Ensimmäinen - miten lisätä kuvan. Tämän on tunniste "img", jossa on useita ominaisuuksia. Tärkein niistä - "src". Siinä tallentaa osoitteen, josta selain voi lisätä kuvan. Voit määrittää polun kuvan jo tallennettu tietokoneen, tai antaa linkin web resurssi.

Kuitenkin tärkeä ominaisuuksia parin - "leveys" (leveys) ja "korkeus" (korkeus). Niitä käytetään manuaalisesti muuttaa kuvien kokoa (hyödyllinen vaihtoehto venyttelyyn ja pakkaamalla kuvat).

Minkä jälkeen parametrit "hspace" ja "vspace" (etäisyys kuvan ympäröivän tekstin). On selvää, "hspace" - horisontaalinen pehmuste ja "vspace" - pystysuora.

Me tag on ominaisuuksia, kuten "alt" ja "title". Ne muistuttavat toisiaan, koska niiden tarkoitus on kuvata kuvan. Mutta "otsikko" määrätty teksti, joka tulee näkyviin, kun viet hiiren kuvan päälle, ja kirjaimellinen arvo "alt" määrite näkyy siinä tapauksessa, että se ei ollut mahdollista ladata kuvan.

On olemassa joitakin erityisiä ominaisuuksia, jotka ovat läsnä useimmissa tunnisteita. Tämä "accesskey", "luokka", "id" ja "tyyli". "Accesskey" määrittelee näppäimien yhdistelmän, jonka kautta kohteeseen pääsy. "Luokka" ja "id" - liittyviä parametreja CSS. Ne kuvaavat luokkaa, johon kuuluu kuvan (tai sen tunnus). "Style" - määritettä tekstin, jolloin voit asettaa sisäänrakennettu kuvien CSS-tyyliä.

Yksi parametrit, jotka määrittävät ulkonäkö kuva on "border". Se määrittää paksuus reunuksen kohde ja se voidaan asettaa mihin tahansa positiivinen kokonaisluku (pikseleinä).

Seuraava määrite - "align". Hän kuvailee tekstin virtaus kuvan ympärille. Tämä vaihtoehto voidaan asettaa "pohja", "keskellä", "vasen", "oikea" ja "ylhäältä". Kunkin arvon määrittää, mihin sijoittaa kuvan tekstistä. Esimerkiksi arvo "keski" keskellä kuva on kohdistettu alaraja tekstiä, kun taas "vasemmalle" - objekti on vasemmalla tekstin. Mutta tämä on vain yksi tapa määrittää tekstin virtaus kuvan ympärille - HTML.

Siellä on yksi tärkeimmistä - CSS (paljon monipuolisempi). Sitä voidaan käyttää huomattavasti tehokkaammin aseta tunnisteen määritteitä, kuten tekstin virtaus kuvan ympärille. CSS voit määritellä muuttujat, paitsi tiettyyn kohteeseen, ja kaikki hänen kaltaistensa. Jos esimerkiksi haluat määrittää sisennystä kaikkien kuvien asiakirja on kymmenen pikseliä, riittää yhteyden CSS-tiedostoa sen yhdellä ompeleen: "img {margin: 10px 10px 10px 10px;}" (käytännössä lainausmerkkejä ei tarvita!).

Teksti virtaus noin kuvia, esimerkiksi, vasemmassa reunassa on määritelty seuraavasti: "img {kohdista: vasen;}".

Muuten, lisätä CSS-koodia ei tarvitse kirjoittaa sitä tiedostoon. Tunnisteen "tyyli" on säädetty HTML, jonka avulla voit lisätä CSS-koodin. Mutta se toimii vain dokumentin (jos haluat lisätä samaa koodia useita HTML-tiedostoja, sinun pitäisi luoda erillinen tyylisivua).

Nyt voit "laimentaa" kuvia sivuston, käyttäen hyödyllisiä ominaisuuksia tunnisteen, joka on vastuussa tästä. Voit vapaasti käyttää kokoa tai kierrättää tekstin kuvia. Verkkosivuja grafiikka komponentit - aika surullista näky, eikö olekin?