Ha vízszintes, elválasztó jellegű vonalakat szeretne felvenni a webhelyeire, tipikus beállításai közé tartozik az e sorok képfájljainak hozzáadása az oldalához, de ehhez a böngészőnek szüksége lehet a fájlok letöltésére és betöltésére, ami negatív hatással lehet a webhelyre teljesítmény. A CSS határoló tulajdonságát is használhatja olyan szegélyek hozzáadására, amelyek vonalaként működnek egy elem felső vagy alsó részén, hatékonyan létrehozva az elválasztó vonalat.
Vagy - még jobb - használja a HTML elemet a vízszintes szabályhoz.
A vízszintes szabályelem
A vízszintes vonalak alapértelmezett megjelenése nem ideális. Ahhoz, hogy jobban nézzenek ki, add hozzá a CSS-t, hogy beállítsa az elemek vizuális megjelenését ahhoz, hogy összhangban legyen a webhely megjelenésének módjával.
Egy alap HR címke megjelenik a böngésző megjelenítéséhez. A modern böngészők jellemzően 100 százalék szélességű, 2 képpontos magasságú HR-címkéket és fekete vonalbeli fekete szegélyt mutatnak a vonal létrehozásához.
A szélesség és a magasság konzisztens a böngészők között
Az egyetlen olyan stílus, amely az internetes böngészők között konzisztens, a szélesség és a stílusok. Ezek meghatározzák, mekkora lesz a vonal. Ha nem határozza meg a szélességet és a magasságot, az alapértelmezett szélesség 100 százalék, az alapértelmezett magasság pedig 2 pixel.
Ebben a példában a szélesség a szülőelem 50 százaléka (vegye figyelembe, hogy ezek az alábbi példák magukban foglalják az inline stílusokat.) Egy termelési környezetben ezeket a stílusokat egy külső stíluslapban írták le, így könnyebben kezelhetők az összes oldalán:
style = "szélesség: 50%;">
És ebben a példában a magasság 2em: style = "height: 2em;"> A modern böngészőkben a böngésző a határ beállításával állítja fel a vonalat. Tehát ha eltávolítja a határt a stílus tulajdonságával, a sor eltűnik az oldalon. Amint láthatja (nos, nem látsz semmit, mivel a vonalak láthatatlanok lesznek) ebben a példában: style = "border: none;">
A szegély méretének, színének és stílusának módosításával a vonal másképp néz ki, és ugyanolyan hatást gyakorol minden modern böngészőben. Például ebben a bemutatóban a határ piros, szaggatott és 1px széles: style = "border: 1px szaggatott # 000;">
De ha módosítja a határt és a magasságot, a stílusok kissé eltérnek a nagyon elavult böngészőkben, mint a modern böngészőkben. Ahogyan ez a példában látható, ha az IE7-ben és az alatt (böngésző, amely szomorúan elavult és már nem támogatja a Microsoft böngészőjét), megjelenik egy bontott belső vonal, amely nem jelenik meg a többi böngészőben (beleértve az IE8-at és az előzőeket is) : style = "magasság: 1.5em; szélesség: 25em; határ: 1px szilárd # 000;">
Ezek a régimódi böngészők valóban nem jelentenek komoly aggodalmat a webes tervezésben, mivel nagyrészt korszerűbb lehetőségeket váltottak fel. Ahelyett, hogy színt adna, megadhatja a vízszintes szabályhoz tartozó háttérképet úgy, hogy pontosan úgy nézzen ki, ahogyan akarja, hanem szemantikailag is megjeleníti a jelölést. Ebben a példában egy három hullámvonalú képet használtunk. Ha a háttérképet nem ismétléssel állítja be, akkor szünetet hoz létre a tartalomban, amely majdnem olyan, mint a könyvekben: style = "magasság: 20px; háttér: #fff url (aa010307.gif) no-repeat scroll center; border: none;"> A CSS3 segítségével még vonzóbbá teheti a vonalakat. A HR elem hagyományosan a vízszintes de a CSS-átalakítás tulajdonságaival megváltoztathatja a megjelenésüket. A HR elem kedvenc átalakítása a forgatás megváltoztatása. A HR elemet elforgathatja, így kissé átlós: hr {-moz-transzformáció: forgatás (10deg);-webkit-transzformáció: forgatás (10deg);-o-transzformáció: forgatás (10deg);-ms-transzformáció: forgatás (10deg);transzformáció: forgatás (10deg);}
Vagy forgathatja azt úgy, hogy teljesen függőleges legyen: hr {-moz-transzformáció: forgatás (90deg);-webkit-transzformáció: forgatás (90deg);-o-transzformáció: forgatás (90deg);-ms-transzformáció: rotáció (90deg);transzformáció: forgatás (90deg);}
Ne felejtsük el, hogy ez a technika forgatja a HR-t a dokumentum aktuális helyén alapulva, ezért szükség lehet arra, hogy módosítsa a pozícionálást ott, ahol azt szeretné. Ezt nem javasoljuk függőleges vonalak hozzárendeléséhez a tervezéshez, de érdekes hatás elérése érdekében. Az egyik dolog, hogy néhány ember a HR elem használata helyett más elemek határait használja. De néha a HR sokkal kényelmesebb és könnyebben használható, mint a határok felállítása. Bizonyos böngészők dobozmodell-kérdései még finomabbak lehetnek a határ beállításához. A határok megváltoztatása kihívást jelenthet
Készítsen egy dekoratív vonalat háttérképgel
HR Elemek átalakítása
Egy másik módja annak, hogy vonalakat kapj az oldaladon
