För att lägga till horisontella linjer med separatorstil till dina webbplatser, inkluderar ett alternativ att lägga till bildfiler av dessa rader till din sida, men det skulle kräva att din webbläsare hämtade och laddade dessa filer, vilket kan ha en negativ effekt på webbplatsens prestanda. Du kan också använda CSS gränsegenskap att lägga till gränser som fungerar som linjer antingen längst upp eller längst ner på ett element, vilket effektivt skapar din separatorlinje.
Eller - ännu bättre - använd HTML element för den horisontella regeln.
Det horisontella regelelementet
Standardutseendet på horisontella regelrader är inte perfekt. För att få dem att se snyggare ut, lägg till CSS för att justera det visuella utseendet på dessa element så att de överensstämmer med hur du vill att din webbplats ska se ut.
En grundläggande HR-tagg visar hur webbläsaren vill visa den. Moderna webbläsare visar vanligtvis ostylade HR-taggar med en bredd på 100 procent, en höjd av 2 pixlar och en 3D-ram i svart för att skapa linjen.
Bredd och höjd är konsekvent över webbläsare
De enda stilar som är konsekventa i webbläsare är bredd och stilar. Dessa definierar hur stor linjen kommer att vara. Om du inte definierar bredd och höjd är standardbredden 100 procent och standardhöjden är 2 pixlar.
I det här exemplet är bredden 50 procent av det överordnade elementet (notera att dessa exempel nedan inkluderar alla integrerade stilar. I en produktionsinställning skulle dessa stilar faktiskt skrivas i ett externt stilark för att underlätta hanteringen på alla dina sidor):
stil = "bredd: 50%;">
Och i detta exempel är höjden 2em:
stil = "höjd: 2 em;">
Att ändra gränserna kan vara utmanande
I moderna webbläsare bygger webbläsaren linjen genom att justera gränsen. Så om du tar bort gränsen med stilegenskapen försvinner raden på sidan. Som du kan se (ja, du kommer inte att se någonting, eftersom raderna kommer att vara osynliga) i detta exempel:
style = "border: none;">
Justering av kantstorlek, färg och stil gör att linjen ser annorlunda ut och har samma effekt i alla moderna webbläsare. Till exempel, i denna demonstration är gränsen röd, streckad och 1 pixlar bred:
style = "border: 1px streckad # 000;">
Gör en dekorativ linje med en bakgrundsbild
Istället för en färg, definiera en bakgrundsbild för din horisontella regel så att den ser ut precis som du vill ha den, men ändå visas semantiskt i din markering. I det här exemplet använde vi en bild som består av tre vågiga linjer. Genom att ställa in det som bakgrundsbild utan upprepning skapar det en paus i innehållet som ser ut nästan som du ser i böcker:
stil = "höjd: 20 pixlar; bakgrund: #fff url (aa010307.gif) bläddringscenter utan upprepning; border: none; ">
Omvandla HR-element
Med CSS3 kan du också göra dina linjer mer intressanta. HR-elementet är traditionellt ett horisontell linje, men med CSS-transformegenskapen kan du ändra hur de ser ut. En favoritomvandling på HR-elementet är att ändra rotationen.
Rotera ditt HR-element så att det bara är något diagonalt:
tim {
-moz-transform: rotera (10deg);
-webkit-transform: rotera (10deg);
-o-transform: rotera (10deg);
-ms-transform: rotera (10deg);
transformera: rotera (10deg);
}
Eller så kan du rotera den så att den är helt vertikal:
tim {
-moz-transform: rotera (90 grader);
-webkit-transform: rotera (90 grader);
-o-transform: rotera (90 grader);
-ms-transform: rotera (90 grader);
transformera: rotera (90deg);
}
Denna teknik roterar HR baserat på dess aktuella plats i dokumentet, så du kan behöva justera positioneringen för att få den där du vill ha den. Det rekommenderas inte att använda detta för att lägga till vertikala linjer i en design, men det är en intressant effekt.
Ett annat sätt att få linjer på dina sidor
En sak som vissa människor gör istället för att använda HR-elementet är att förlita sig på gränserna för andra element. Men ibland är en HR mycket bekvämare och lättare att använda än att försöka sätta upp gränser. Boxmodellfrågorna för vissa webbläsare kan göra det ännu svårare att ställa in en gräns.