HR (Horizontal Rule) -tunnisteen muotoilu

Muodosta mielenkiintoisia linjoja HR-tunnisteilla

Jos sinun on lisättävä verkkosivustosi horisontaalisia, separator-tyylisiä rivejä, sinulla on muutamia vaihtoehtoja. Voit lisätä kyseisten rivien varsinaisia ​​kuvatiedostoja sivusi päälle, mutta selaimesi tarvitsee hakea ja ladata kyseiset tiedostot, mikä voi vaikuttaa kielteisesti sivuston tehokkuuteen.

Voit käyttää CSS- raja-ominaisuutta lisäämällä reunoja, jotka toimivat riveinä joko elementin yläosassa tai alareunassa tehokkaasti luomalla erottelulinjan.

Lopuksi voit käyttää horisontaalisen säännön HTML- elementtiä -

Vaaka-asetuselementti

Jos olet koskaan asettanut elementin verkkosivulle, olet todennäköisesti huomannut, että oletusarvoinen tapa, jolla nämä rivit näkyvät, eivät ole ihanteellisia. Tämä tarkoittaa, että sinun on kääntyä CSS: ään näiden elementtien ulkonäön ulkoasun mukauttamiseksi siihen, 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%, korkeus 2px ja mustavalkoinen 3D-raja rivin luomiseen.

Tässä on esimerkki tavallisesta HR-elementistä tai näet tässä kuvassa, kuinka tyhmä HR näyttää modernilta selaimilta.

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% ja oletuskorkeus on 2px.

Tässä esimerkissä leveys on 50% vanhemmista elementeistä (huomaa, että nämä esimerkit sisältävät kaikki inline-tyylit. Tuotantokohteessa nämä tyylit 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ää taustakuvan HR: lle niin, että se näyttää tarkalleen haluamallasi tavalla, mutta näyttää silti semanttisesti merkinnöissää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 vaakasuora viiva, 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ä kiertää HR: n sen nykyisen sijainnin mukaan, joten saatat joutua sopeuttamaan paikannuspaikan sinne, missä 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.