For å legge til horisontale linjer i separatorstil på nettstedene dine, inkluderer ett alternativ å legge til bildefiler av disse linjene siden din, men det krever at nettleseren din henter og laster inn filene, noe som kan ha en negativ effekt på nettstedets ytelse. Du kan også bruke CSS grenseiendom å legge til grenser som fungerer som linjer enten øverst eller nederst i et element, og effektivt skaper skillelinjen.
Eller - enda bedre - bruk HTML element for den horisontale regelen.
The Horizontal Rule Element
Standardutseendet til horisontale linjelinjer er ikke ideelt. For å få dem til å se bedre ut, legg til CSS for å justere det visuelle utseendet til disse elementene for å være i tråd med hvordan du vil at nettstedet ditt skal se ut.
En grunnleggende HR-tag viser hvordan nettleseren vil vise den. Moderne nettlesere viser vanligvis ikke-stilte HR-koder med en bredde på 100 prosent, en høyde på 2 piksler og en 3D-kant i sort for å lage linjen.
Bredde og høyde er jevn over nettlesere
De eneste stilene som er konsistente på tvers av nettlesere er bredde og stiler. Disse definerer hvor stor linjen vil være. Hvis du ikke definerer bredde og høyde, er standardbredden 100 prosent og standardhøyden er 2 piksler.
I dette eksemplet er bredden 50 prosent av det overordnede elementet (legg merke til at eksemplene nedenfor inkluderer innebygde stiler. I produksjonsmiljø vil disse stilene faktisk skrives i et eksternt stilark for enkel administrasjon på alle sidene dine):
stil = "bredde: 50%;">
Og i dette eksemplet er høyden 2em:
stil = "høyde: 2 em;">
Å endre grensene kan være utfordrende
I moderne nettlesere bygger nettleseren linjen ved å justere grensen. Så hvis du fjerner grensen til stilegenskapen, vil linjen forsvinne på siden. Som du kan se (vel, vil du ikke se noe, da linjene vil være usynlige) i dette eksemplet:
style = "border: none;">
Justering av kantstørrelse, farge og stil får linjen til å se annerledes ut og har samme effekt i alle moderne nettlesere. For eksempel, i denne demonstrasjonen er grensen rød, stiplet og 1px bred:
style = "border: 1px stiplet # 000;">
Lag en dekorativ linje med et bakgrunnsbilde
I stedet for en farge, definer et bakgrunnsbilde for den horisontale regelen slik at den ser ut akkurat slik du vil ha den, men fremdeles vises semantisk i markeringen din. I dette eksemplet brukte vi et bilde som har tre bølgede linjer. Ved å sette den som bakgrunnsbilde uten gjentakelse, skaper det en pause i innholdet som ser nesten ut som du ser i bøker:
stil = "høyde: 20 px; bakgrunn: #fff url (aa010307.gif) rullesenter uten gjentakelse; border: none; ">
Transformerende HR-elementer
Med CSS3 kan du også gjøre linjene dine mer interessante. HR-elementet er tradisjonelt et horisontal linje, men med CSS transform-egenskapen kan du endre hvordan de ser ut. En favorittomdannelse på HR-elementet er å endre rotasjonen.
Roter HR-elementet slik at det bare er litt diagonalt:
hr {
-moz-transform: roter (10deg);
-webkit-transform: roter (10deg);
-o-transform: roter (10deg);
-ms-transform: roter (10deg);
transform: roter (10deg);
}
Eller du kan rotere den slik at den er helt loddrett:
hr {
-moz-transform: roter (90deg);
-webkit-transform: roter (90deg);
-o-transform: roter (90 grader);
-ms-transform: roter (90deg);
transformer: roter (90deg);
}
Denne teknikken roterer HR basert på den nåværende plasseringen i dokumentet, så du må kanskje justere posisjoneringen for å få den der du vil ha den. Det anbefales ikke å bruke dette for å legge vertikale linjer til et design, men det er en interessant effekt.
En annen måte å få linjer på sidene dine
En ting som noen mennesker gjør i stedet for å bruke HR-elementet, er å stole på grensene til andre elementer. Men noen ganger er en HR mye mer praktisk og enklere å bruke enn å prøve å sette opp grenser. Boksmodellproblemene i noen nettlesere kan gjøre det vanskeligere å sette opp en grense.