Hr-tagi

Tag hr asettaa erottavan vaakasuoran viivan. Tagin etuna on, että yhden viivan vetämiseen ei tarvita luoda ylimääräisiä lohkoja. Ei vaadi sulkevaa tagia.

Esimerkki

Katsotaan kuinka tagi hr toimii:

html<hr>

Результат:

Esimerkki

Yritetään vaihtaa viivan väriä käyttämällä CSS-ominaisuutta border-color:

html<hr style="border-color: red;">

Результат:

Esimerkki

Viivan väriä voidaan vaihtaa myös ominaisuudella color (samaan aikaan, jos ominaisuudet color ja border-color on asetettu - jälkimmäisellä on etusija):

html<hr style="color: red">

Результат:

Esimerkki

Vaihdetaan nyt viivan väri käyttämällä CSS-ominaisuutta border. Huomaa, että tällöin viiva tulee kaksinkertaisen paksuiseksi (koska asetimme reunan sekä ylä- että alapuolelle):

html<hr style="border: 1px solid red;">

Результат:

Esimerkki

Yritetään vaihtaa viivan väriä käyttämällä CSS- ominaisuutta border-top, ja asetetaan vain yläreuna. Nyt kaksoisviivaa ei tule:

html<hr style="border-top: 1px solid red;">

Результат:

Esimerkki

Tehdään viiva pistemäiseksi käyttämällä CSS-ominaisuutta border-top, aseta arvo dotted arvon solid sijaan:

html<hr style="border-top: 1px dotted red;">

Результат:

Esimerkki

Suurennetaan viivan paksuutta käyttämällä CSS-ominaisuutta border-width:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Esimerkki

Ja nyt lisätään viivalle korkeus height ja reuna käyttäen border. Reuna jakautuu tällöin ylä- ja alaosaan:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Katso myös