HTML-tunnisteen muotoilu CSS: llä

Jos sinun on lisättävä verkkosivustosi horisontaalisia erotuslinjaisia ​​viivoja, tyypilliset vaihtoehdot ovat näiden rivien kuvatiedostojen lisääminen sivulle, mutta selaimesi tarvitsee hakea ja ladata kyseiset tiedostot, mikä saattaa vaikuttaa negatiivisesti sivustoon esitys. Voit myös käyttää CSS-raja-ominaisuutta lisäämällä rajoja, jotka toimivat riveinä joko elementin yläosassa tai alareunassa, tehokkaasti luomalla erotuslinjan.

Tai - parempaa - käytä horisontaalisen säännön HTML-elementtiä.

Vaaka-asetuselementti

Horisontaalisten rivien oletusnäkymä ei ole ihanteellinen. Jotta heidät näyttäisivät hyvältä, lisää näiden elementtien visuaalisen ulkoasun lisäämällä CSS-arvoja sen mukaan, miten haluat sivustosi näyttävän.

Perus HR-tunniste näytetään samalla tavoin kuin selain haluaa näyttää sen. Nykyaikaiset selaimet näyttävät tyypillisesti avaamattomia HR-tunnisteita, joiden leveys on 100 prosenttia, korkeus on 2 pikseliä ja kolmiulotteinen raja musta.

Leveys ja korkeus ovat yhdenmukaisia ​​selainten kautta

Ainoat tyylit, jotka ovat yhdenmukaisia ​​verkkoselaimissa, ovat leveys ja tyylit. Nämä määrittelevät, kuinka suuri linja on. Jos et määritä leveyttä ja korkeutta, oletusleveys on 100 prosenttia ja oletuskorkeus 2 pikseliä.

Tässä esimerkissä leveys on 50 prosenttia vanhempielementistä (muista, että alla olevat esimerkit sisältävät kaikki inline-tyylit. Tuotantoasetuksessa nämä tyylejä kirjoitettaisiin itse ulkoiseen tyyliarkkiin, jotta hallinnointi olisi helppoa kaikilla sivuillasi):

style = "width: 50%;">

Tässä esimerkissä korkeus on 2em:

style = "height: 2em;">

Rajojen muuttaminen voi olla haastavaa

Nykyaikaisissa selaimissa selain rakentaa rivin säätämällä rajaa. Joten jos poistat rajan tyyliominaisuudesta, rivi poistuu sivulta. Kuten näette (no, et näe mitään, koska linjat ovat näkymättömiä) tässä esimerkissä:

style = "border: none;">

Rajan koon, värin ja tyylin säätäminen tekee linjasta erilainen ja sillä on sama vaikutus kaikissa moderneissa selaimissa. Esimerkiksi tässä demonstraatiossa raja on punainen, katkoviiva ja 1px leveä:

style = "border: 1px dashed # 000;">

Mutta jos muutat reunaa ja korkeutta, tyylit näyttävät hieman erilaisilta vanhentuneilta selaimilta kuin nykyisissä selaimissa. Kuten näet tässä esimerkissä, jos tarkastelet sitä IE7: ssä ja sen alapuolella (selain, joka on valitettavasti vanhentunut eikä Microsoft enää tue sitä), on viistetty sisäviiva, joka ei näy muissa selaimissa (mukaan lukien IE8 ja uudemmat) :

style = "height: 1.5em; leveys: 25em; raja: 1px solid # 000;">

Nämä vanhentuneet selaimet eivät todellakaan ole paljon huolta Web-suunnittelusta tänään, koska ne on suurelta osin korvattu nykyaikaisemmilla vaihtoehdoilla.

Tee koristeellinen linja taustakuvaan

Värin sijasta voit määrittää horisontaalisen säännön taustakuvan niin, että se näyttää tarkalleen kuin haluat, mutta silti näyttää semanttisesti merkinnän. Tässä esimerkissä käytimme kuvaa, joka on kolmesta aaltoviivasta. Jos asetat sen taustakuvaksi ilman toistoa, se luo murron sisältöön, joka näyttää melkein kuin kirjoissa:

style = "height: 20px; tausta: #fff url (aa010307.gif) ei-toista selaa keskustaa; raja: ei;">

HR-elementtien muuntaminen

CSS3: n avulla voit myös tehdä linjasi mielenkiintoisemmaksi. HR-elementti on perinteisesti a vaakasuora rivillä, mutta CSS-muunnosominaisuuden avulla voit muuttaa niiden näkymää. HR-elementin suosikki muunnos on vaihtaa kiertoa.

Voit kiertää HR-elementtiä niin, että se on vain hieman lävistäjä:

hr {-moz-muunnos: kiertää (10deg);-webkit-muunnos: kiertää (10deg);-o-muunnos: kiertää (10deg);-ms-muunnos: pyöritetään (10deg);muunnos: kiertää (10deg);}

Tai voit kiertää sitä niin, että se on täysin pystysuora:

hr {-moz-muunnos: pyöritetään (90deg);-webkit-muunnos: kiertää (90deg);-o-muunnos: pyöritetään (90deg);-ms-muunnos: pyöritetään (90deg);muunnos: pyöritetään (90deg);}

Muista, että tämä tekniikka kiertää HR-arvoa sen nykyisen sijainnin mukaan asiakirjassa, joten saatat joutua sopeuttamaan paikannusta niin, että sinne haluat sen. Ei ole suositeltavaa käyttää tätä, jos haluat lisätä pystysuoria viivoja muotoiluun, mutta se on tapa saada mielenkiintoinen vaikutus.

Toinen tapa saada viivoja sivuillesi

Yksi asia, jota jotkut ihmiset tekevät HR-elementin sijaan, on luottaa muiden elementtien rajoihin. Mutta joskus HR on paljon kätevämpää ja helppokäyttöisempi kuin rajojen luominen. Joidenkin selainten laatumallinumerot voivat tehdä rajan asettamisen entistä vaikeammaksi.