For at tilføje vandrette linjer med separatorstil på dine websteder inkluderer en mulighed at tilføje billedfiler af disse linjer til din side, men det kræver, at din browser henter og indlæser disse filer, hvilket kan have en negativ effekt på webstedets ydeevne. Du kan også bruge CSS grænseegenskab at tilføje grænser der fungerer som linjer enten øverst eller nederst på et element, hvilket effektivt skaber din skillelinje.
Eller - bedre endnu - brug HTML element for den vandrette regel.
Det vandrette regelelement
Standardudseendet på vandrette regellinjer er ikke ideelt. For at få dem til at se pænere ud skal du tilføje CSS for at justere det visuelle udseende af disse elementer for at være i tråd med, hvordan du vil have dit websted til at se ud.
Et grundlæggende HR-tag viser den måde, browseren vil have det på. Moderne browsere viser typisk ikke-stilede HR-tags med en bredde på 100 procent, en højde på 2 pixels og en 3D-kant i sort for at skabe linjen.
Bredde og højde er konsistente overalt i browsere
De eneste stilarter, der er konsistente på tværs af webbrowsere, er bredde og stilarter. Disse definerer hvor stor linjen vil være. Hvis du ikke definerer bredde og højde, er standardbredden 100 procent, og standardhøjden er 2 pixels.
I dette eksempel er bredden 50 procent af det overordnede element (bemærk disse eksempler nedenfor inkluderer alle indbyggede stilarter. I produktionsindstillinger ville disse stilarter faktisk blive skrevet på et eksternt typografiark for at gøre det nemmere at administrere på alle dine sider):
style = "width: 50%;">
Og i dette eksempel er højden 2em:
style = "height: 2em;">
Ændring af grænserne kan være udfordrende
I moderne browsere bygger browseren linjen ved at justere grænsen. Så hvis du fjerner grænsen til stilegenskaben, forsvinder linjen på siden. Som du kan se (godt, vil du ikke se noget, da linjerne vil være usynlige) i dette eksempel:
style = "border: none;">
Justering af kantstørrelse, farve og stil får linjen til at se anderledes ud og har den samme effekt i alle moderne browsere. For eksempel er grænsen i denne demonstration rød, stiplet og 1 pix bred:
style = "border: 1px stiplet # 000;">
Lav en dekorativ linje med et baggrundsbillede
I stedet for en farve skal du definere et baggrundsbillede til din vandrette regel, så den ser ud som du vil have den, men stadig vises semantisk i din markering. I dette eksempel brugte vi et billede, der har tre bølgede linjer. Ved at indstille det som baggrundsbillede uden gentagelse skaber det en pause i indholdet, der ser næsten ud som du ser i bøger:
stil = "højde: 20 px; baggrund: #fff url (aa010307.gif) ikke-gentag rullecenter; grænse: ingen; ">
Transformerende HR-elementer
Med CSS3 kan du også gøre dine linjer mere interessante. HR-elementet er traditionelt et vandret linje, men med egenskaben CSS-transform kan du ændre, hvordan de ser ud. En foretrukken transformation på HR-elementet er at ændre rotation.
Drej dit HR-element, så det bare er lidt diagonalt:
hr {
-moz-transformation: roter (10deg);
-webkit-transformation: roter (10deg);
-o-transformation: roter (10deg);
-ms-transformation: roter (10deg);
transformere: rotere (10deg);
}
Eller du kan rotere det, så det er helt lodret:
hr {
-moz-transformation: roter (90 grader);
-webkit-transformation: roter (90 grader);
-o-transformation: roter (90 grader);
-ms-transformation: roter (90 grader);
transformere: rotere (90 grader);
}
Denne teknik roterer HR baseret på dets aktuelle placering i dokumentet, så du bliver muligvis nødt til at justere placeringen for at få den, hvor du vil have den. Det anbefales ikke at bruge dette til at tilføje lodrette linjer til et design, men det er en interessant effekt.
En anden måde at få linjer på dine sider på
En ting, som nogle mennesker gør i stedet for at bruge HR-elementet, er at stole på grænserne for andre elementer. Men nogle gange er en HR meget mere praktisk og lettere at bruge end at forsøge at oprette grænser. Boksmodelproblemerne i nogle browsere kan gøre opsætning af en kant endnu vanskeligere.