Styling HR (Horizontal Rule) Tag

Gør interessante linjer på websider med HR-tags

Hvis du har brug for at tilføje vandrette linjer til separator-stil til dine websteder, har du nogle få muligheder. Du kan tilføje faktiske billedfiler af de pågældende linjer til din side, men det ville kræve, at din browser henter og indlæser disse filer, hvilket kan have en negativ indvirkning på webstedets ydeevne.

Du kan bruge CSS- grænseegenskaben til at tilføje grænser, der fungerer som linjer enten øverst eller nederst på et element, hvilket effektivt skaber din separatorlinie.

Endelig kan du bruge HTML- elementet til den vandrette regel - den

Det horisontale regelelement

Hvis du nogensinde har lagt et element på en webside, har du sandsynligvis opdaget, at standardmetoden, som disse linjer vises, ikke er ideelle. Det betyder, at du skal henvende dig til CSS for at justere det visuelle udseende af disse elementer for at være i overensstemmelse med, hvordan du vil have dit websted til at se.

Et grundlæggende HR-mærke vises som browseren ønsker at vise det. Moderne browsere viser typisk ustylede HR-tags med en bredde på 100%, en højde på 2px og en 3D-grænse i sort for at oprette linjen.

Her er et eksempel på et standard HR-element, eller du kan se i dette billede, hvordan en uformet HR ser ud i moderne browsere.

Bredde og højde er konsistente over browsere

De eneste stilarter, der er konsistente på tværs af webbrowsere, er bredden og stilarterne. Disse definerer hvor stor linjen vil være. Hvis du ikke definerer bredden og højden, er standardbredden 100%, og standardhøjden er 2px.

I dette eksempel er bredden 50% af grundelementet (bemærk, at disse eksempler under alle omfatter inline-stilarter. I en produktionsindstilling ville disse stilarter faktisk være skrevet i et eksternt stilark for at lette styringen på alle dine sider):

style = "width: 50%;">

Og i dette eksempel er højden 2em:

style = "height: 2em;">

Ændring af grænserne kan udfordres

I moderne browsere bygger browseren linjen ved at justere grænsen. Så hvis du fjerner grænsen med stilegenskaben, forsvinder linjen på siden. Som du kan se (ja, du vil ikke se noget, da linjerne vil være usynlige) i dette eksempel:

style = "border: none;">

Justering af grænsestørrelse, farve og stil gør linien til anderledes og har samme effekt i alle moderne browsere. I denne demonstration er grænsen f.eks. Rød, stiplede og 1px bred:

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

Men hvis du ændrer grænsen og højden, ser stilarterne lidt anderledes ud i meget forældede browsere end de gør i moderne browsere. Som du kan se i dette eksempel, hvis du ser det i IE7 og nedenfor (en browser, der er utroligt forældet og ikke længere understøttet af Microsoft), er der en skråt indvendig linje, der ikke vises i de andre browsere (herunder IE8 og op) :

style = "height: 1.5em; width: 25em; border: 1px solid # 000;">

Disse antikvitetsbrowsere er virkelig ikke meget bekymrede i webdesign i dag, da de i vid udstrækning er blevet erstattet af mere moderne muligheder.

Lav en dekorativ linje med et baggrundsbillede

I stedet for en farve kan du definere et baggrundsbillede til din HR, så det ser ud, som du vil have det til, men vises stadig semantisk i din markering.

I dette eksempel brugte vi et billede, der er af tre bølgete linjer. Ved at indstille det som baggrundsbillede uden gentagelse skaber det en pause i indholdet, der ser næsten ud som om du ser i bøger:

style = "højde: 20px; baggrund: #fff url (aa010307.gif) no-repeat rullecenter; grænse: none;">

Omdannelse af HR-elementer

Med CSS3 kan du også gøre dine linjer mere interessante. HR-elementet er traditionelt en horisontal linje, men med CSS-transformationsegenskaben kan du ændre, hvordan de ser ud. En foretrukken transformation på HR-elementet er at ændre rotationen.

Du kan rotere dit HR-element, så det er bare lidt diagonalt:

hr {
-moz-transform: rotere (10deg);
-webkit-transform: roter (10deg);
-o-transformer: roter (10deg);
-ms-transformer: roter (10deg);
transformere: rotere (10deg);
}

Eller du kan rotere den så den er helt lodret:

hr {
-moz-transform: rotere (90deg);
-webkit-transform: roter (90deg);
-o-transformer: roter (90deg);
-ms-transformer: roter (90deg);
transformere: rotere (90deg);
}

Husk at dette roterer HR baseret på dets aktuelle placering i dokumentet, så du kan muligvis justere positioneringen for at få den, hvor du vil have det. Det anbefales ikke at bruge dette til at tilføje lodrette linjer til et design, men det er en måde at få en interessant effekt på.

En anden måde at få linjer på dine sider

En ting, som nogle mennesker gør i stedet for at bruge HR-elementet, er at stole på grænser af andre elementer. Men nogle gange er en HR meget mere bekvem og lettere at bruge end at forsøge at oprette grænser. Løsningsmodelproblemerne fra nogle browsere kan gøre opsætningen af ​​en grænse endnu sværere.