Om horizontale lijnen in de stijl van een scheidingsteken aan uw websites toe te voegen, kunt u onder meer afbeeldingsbestanden van die regels toevoegen aan: uw pagina, maar daarvoor moet uw browser die bestanden ophalen en laden, wat een negatief effect kan hebben Aan siteprestaties. Je zou ook de kunnen gebruiken CSS grenseigenschap om toe te voegen grenzen die fungeren als lijnen aan de boven- of onderkant van een element, waardoor in feite uw scheidingslijn wordt gemaakt.
Of - beter nog - gebruik de HTML element voor de horizontale regel.
Het horizontale regelelement
Het standaard uiterlijk van horizontale liniaallijnen is niet ideaal. Om ze er mooier uit te laten zien, voegt u CSS toe om de visuele weergave van deze elementen aan te passen aan hoe u wilt dat uw site eruitziet.
Een eenvoudige HR-tag geeft de manier weer waarop de browser deze wil weergeven. Moderne browsers geven doorgaans ongestileerde HR-tags weer met een breedte van 100 procent, een hoogte van 2 pixels en een zwarte 3D-rand om de lijn te creëren.
Breedte en hoogte zijn consistent in alle browsers
De enige stijlen die consistent zijn in alle webbrowsers zijn de breedte en stijlen. Deze bepalen hoe groot de lijn zal zijn. Als u de breedte en hoogte niet definieert, is de standaardbreedte 100 procent en is de standaardhoogte 2 pixels.
In dit voorbeeld is de breedte 50 procent van het bovenliggende element (let op: deze voorbeelden hieronder bevatten allemaal inline-stijlen. In een productieomgeving zouden deze stijlen eigenlijk in een externe stylesheet worden geschreven om het beheer op al uw pagina's te vergemakkelijken:
style = "breedte: 50%;">
En in dit voorbeeld is de hoogte 2em:
style="hoogte: 2em;">
Het veranderen van de grenzen kan een uitdaging zijn
In moderne browsers bouwt de browser de lijn door de rand aan te passen. Dus als u de rand met de eigenschap style verwijdert, verdwijnt de regel op de pagina. Zoals je kunt zien (nou ja, je zult niets zien, omdat de lijnen onzichtbaar zijn) in dit voorbeeld:
style="border: geen;">
Door de grootte, kleur en stijl van de rand aan te passen, ziet de lijn er anders uit en heeft het hetzelfde effect in alle moderne browsers. In deze demonstratie is de rand bijvoorbeeld rood, gestreept en 1px breed:
style="border: 1px streepjes #000;">
Maak een decoratieve lijn met een achtergrondafbeelding
Definieer in plaats van een kleur een achtergrondafbeelding voor uw horizontale regel, zodat deze er precies zo uitziet als u wilt, maar toch semantisch wordt weergegeven in uw opmaak. In dit voorbeeld hebben we een afbeelding gebruikt die uit drie golvende lijnen bestaat. Door het in te stellen als de achtergrond afbeelding zonder herhaling, creëert het een breuk in de inhoud die er bijna uitziet zoals je in boeken ziet:
stijl = "hoogte: 20px; achtergrond: #fff url (aa010307.gif) scrollcentrum zonder herhaling; rand: geen;">
HR-elementen transformeren
Met CSS3 kun je je lijnen ook interessanter maken. Het HR-element is traditioneel een horizontaal regel, maar met de eigenschap CSS-transformatie kunt u het uiterlijk wijzigen. Een favoriete transformatie op het HR-element is het wijzigen van de rotatie.
Draai uw HR-element zodat het net iets diagonaal is:
uur {
-moz-transformatie: roteren (10deg);
-webkit-transform: roteren (10deg);
-o-transformatie: roteren (10deg);
-ms-transform: roteren (10deg);
transformeren: roteren (10deg);
}
Of je kunt het draaien zodat het volledig verticaal is:
uur {
-moz-transform: roteren (90deg);
-webkit-transform: roteren (90deg);
-o-transformatie: roteren (90deg);
-ms-transform: roteren (90deg);
transformeren: roteren (90deg);
}
Deze techniek roteert de HR op basis van de huidige locatie in het document, dus het kan zijn dat u de positionering moet aanpassen om het te krijgen waar u het wilt hebben. Het is niet aan te raden om dit te gebruiken om verticale lijnen aan een ontwerp toe te voegen, maar het is een interessant effect.
Een andere manier om lijnen op uw pagina's te krijgen
Een ding dat sommige mensen doen in plaats van het HR-element te gebruiken, is vertrouwen op grenzen van andere elementen. Maar soms is een HR een stuk handiger en gebruiksvriendelijker dan proberen grenzen te stellen. De problemen met het doosmodel van sommige browsers kunnen het instellen van een rand nog lastiger maken.