Styling HTML HR-tagg med CSS

Om du behöver lägga till horisontella linjer i separatorstil på dina webbplatser, inkluderar dina typiska alternativ att du lägger till bildfiler av de här raderna på din sida, men det skulle kräva att din webbläsare hämtar och laddar upp de filer som kan påverka webbplatsen negativt prestanda. Du kan också använda gränssnittsegenskapen CSS för att lägga till gränser som fungerar som linjer antingen längst upp eller längst ner på ett element, vilket effektivt skapar separatorlinjen.

Eller - ännu bättre - använd HTML-elementet för den horisontella regeln.

Det horisontella regelelementet

Standardutseendet på horisontella regellinjer är inte idealiskt. För att få dem att se trevligare, lägg till CSS för att justera det visuella utseendet hos dessa element så att de överensstämmer med hur du vill att din webbplats ska se ut.

En grundläggande HR-tagg visas som webbläsaren vill visa den. Moderna webbläsare visar vanligtvis ostylade HR-taggar med en bredd på 100 procent, en höjd på 2 pixlar och en 3D-gräns i svart för att skapa linjen.

Bredd och höjd är konsekventa över webbläsare

De enda stilar som är konsekventa över webbläsare är bredden och stilerna. 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 moderelementet (notera att dessa exempel nedan alla inkluderar inline-stilar. I en produktionsinställning skulle dessa stilar faktiskt skrivas i ett externt stilark för enkel hantering på alla dina sidor):

style = "width: 50%;">

Och i detta exempel är höjden 2em:

style = "height: 2em;">

Att ändra gränserna kan bli 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 linjen på sidan. Som du kan se (ja, du ser ingenting, eftersom linjerna blir osynliga) i det här exemplet:

style = "border: none;">

Justering av gränsstorlek, färg och stil gör 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 1px bred:

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

Men om du ändrar gränsen och höjden ser stilarna lite annorlunda ut i mycket föråldrade webbläsare än vad de gör i moderna webbläsare. Som du kan se i det här exemplet, om du tittar på det i IE7 och nedan (en webbläsare som är väldigt föråldrad och inte längre stöds av Microsoft) finns det en fasad inre linje som inte visas i andra webbläsare (inklusive IE8 och uppåt) :

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

De antiqued webbläsare är verkligen inte mycket bekymrade i webbdesign idag, eftersom de i stor utsträckning har ersatts med mer moderna alternativ.

Gör en dekorativ linje med en bakgrundsbild

Istället för en färg kan du definiera en bakgrundsbild för din horisontella regel så att den ser ut exakt som du vill ha den, men visas fortfarande 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 den som bakgrundsbild utan repetition skapas en paus i innehållet som ser nästan ut som du ser i böcker:

style = "height: 20px; background: #fff url (aa010307.gif) no-repeat-scroll-center; border: none;">

Transformera HR-element

Med CSS3 kan du också göra dina linjer mer intressanta. HR-elementet är traditionellt a horisontell linje, men med CSS-transformationsegenskapen kan du ändra hur de ser ut. En favoritomvandling på HR-elementet är att ändra rotationen.

Du kan rotera ditt HR-element så att det bara är något diagonalt:

hr {-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:

hr {-moz-transform: rotera (90deg);-webkit-transform: rotera (90deg);-o-transform: rotera (90deg);-ms-transformation: rotera (90deg);transformera: rotera (90deg);}

Kom ihåg att 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 är inte rekommenderat att använda detta för att lägga till vertikala linjer i en design, men det är ett sätt att få 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 skapa gränser. Låsmodellproblemen hos vissa webbläsare kan göra att gränssnittet är ännu svårare.