Kun työskentelet HTML:n ja CSS:n kanssa, lohko, tekstin sisäinen ja tekstin sisäinen lohko voivat olla hämmentäviä. Alla on esimerkkejä kustakin määritteestä, jotta saat paremman käsityksen niiden toiminnasta.
CSS-näyttö: sisäänrakennettu
Ensimmäisessä esimerkissämme käytämme -tunnistetta, joka on oletuksena tekstin sisäinen elementti. Alla olevassa esimerkissä teksti on punainen -tunnisteiden style-attribuutin sanelemana. Tämä menetelmä on yksi tapa tehdä muutama sana tai lause punaiseksi CSS:n avulla.
HTML-koodi:
<span style="color:red;">span text</span>
CSS-näyttö: lohko
Seuraavassa esimerkissä olemme muuttaneet -tunnisteen oletusasetuksen näytettäväksi lohkona. Koska lohkoelementillä on oma rivinsä, se antaa vaikutelman, että esimerkissämme on painettu enter- tai return-näppäintä “miten” ja “teksti” jälkeen.
Esimerkkiteksti antaaksesi esimerkin valmistustavasta span tekstiä inline-, block- tai inline-block-elementti ja kuinka se muuttaa tekstin ulkonäköä.
HTML-koodi:
<span style="color:red; display: block;">span text</span>
CSS-näyttö: inline-block
Lopuksi, seuraavassa esimerkissä olemme muuttaneet -tunnisteen oletusasetuksen näytettäväksi rivin sisällä olevana lohkona. Toisin kuin lohkoelementti, rivin sisäinen lohko pysyy linjassa kaiken elementin ympärillä olevan tekstin kanssa ja näyttää samalta kuin tekstin sisäinen teksti.
Esimerkkiteksti antaaksesi esimerkin valmistustavasta span tekstiä inline-, block- tai inline-block-elementti ja kuinka se muuttaa tekstin ulkonäköä.
HTML-koodi:
<span style="color:red; display: inline-block;">span text</span>
Miksi käyttäisin rivistöä tekstin sijaan?
Kun olet nähnyt yllä olevat esimerkit, saatat heti kysyä itseltäsi, miksi haluaisin käyttää lohko- tai rivi-lohkoelementtiä? Tekemällä elementistä lohkoelementin saat mahdollisuuden pystysuoraan korkeuteen kyseiseen elementtiin alla olevan kuvan mukaisesti.
Linjaväli korkeudella
Esimerkkiteksti antaaksesi esimerkin valmistustavasta span tekstiä inline-, block- tai inline-block-elementti ja kuinka se muuttaa tekstin ulkonäköä.
HTML-koodi:
<span style="color:red; background-color:yellow; height:60px;">span text</span>
Inline-lohkoväli korkeudella
Esimerkkiteksti antaaksesi esimerkin valmistustavasta span tekstiä inline-, block- tai inline-block-elementti ja kuinka se muuttaa tekstin ulkonäköä.
HTML-koodi:
<span style="color:red; background-color:yellow; display: inline-block; height:60px;">span text</span>
