Vízszintes, elválasztó stílusú vonalak hozzáadásához a webhelyekhez az egyik lehetőség magában foglalja e vonalak képfájljainak hozzáadását az oldaladhoz, de ehhez a böngésződnek le kellene töltenie és be kell töltenie ezeket a fájlokat, aminek negatív hatása lehet tovább a webhely teljesítménye. Használhatná a CSS határmenti ingatlan hozzáadásához határok amelyek vonalakként működnek az elem tetején vagy alján, hatékonyan létrehozva az elválasztó vonalat.
Vagy - még jobb - használja a HTML elem a vízszintes szabályhoz.
A vízszintes szabályelem
A vízszintes szabályvonalak alapértelmezett megjelenése nem ideális. Annak érdekében, hogy szebbek legyenek, adjon hozzá CSS-t, hogy ezeknek az elemeknek a vizuális megjelenését úgy alakítsa, hogy összhangban legyen a webhely megjelenésével.
Az alap HR címke azt jeleníti meg, ahogyan a böngésző meg akarja jeleníteni. A modern böngészők általában stílus nélküli HR címkéket jelenítenek meg, amelyek szélessége 100 százalék, magassága 2 képpont, és 3D vonallal fekete színű a vonal létrehozása.
A szélesség és a magasság következetes a böngészők között
Az egyetlen stílus, amely a webböngészőkben következetes, a szélesség és stílusok. Ezek meghatározzák, hogy mekkora lesz a vonal. Ha nem határozza meg a szélességet és a magasságot, akkor az alapértelmezett szélesség 100 százalék, az alapértelmezett magasság pedig 2 képpont.
Ebben a példában a szélessége a szülőelem 50 százaléka (vegye figyelembe, hogy az alábbi példák mindegyike tartalmazza a belső stílusokat. Gyártási környezetben ezeket a stílusokat egy külső stíluslapba írják, hogy könnyebben kezelhessék az összes oldalt):
style = "width: 50%;">
És ebben a példában a magasság 2em:
style = "magasság: 2em;">
A határok megváltoztatása kihívást jelenthet
A modern böngészőkben a böngésző a szegély beállításával építi fel a sort. Tehát, ha eltávolítja a szegélyt a style tulajdonsággal, a sor eltűnik az oldalon. Amint láthatja (nos, nem lát 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 1 képpont széles:
style = "border: 1px szaggatott # 000;">
Készítsen dekoratív vonalat háttérképpel
Szín helyett adjon meg egy háttérképet a vízszintes szabályhoz úgy, hogy pontosan úgy nézzen ki, ahogy szeretné, de szemantikailag megjelenjen a jelölésekben. Ebben a példában három hullámvonalból álló képet használtunk. Azáltal, hogy a háttérkép ismétlés nélkül olyan törést hoz létre a tartalomban, amely majdnem úgy néz ki, mint a könyvekben:
style = "magasság: 20px; háttér: #fff url (aa010307.gif) nem ismétlődő görgetőközpont; határ: nincs; ">
HR elemek átalakítása
A CSS3 segítségével vonalait is érdekesebbé teheti. A HR elem hagyományosan a vízszintes sor, de a CSS transzformációs tulajdonsággal megváltoztathatja a megjelenésüket. Kedvenc transzformáció a HR elemen a forgatás megváltoztatása.
Forgassa el a HR elemét úgy, hogy csak kissé átlós legyen:
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 elforgathatja ú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ó: forgatás (90deg);
transzformáció: forgatás (90deg);
}
Ez a technika elforgatja a HR-t a dokumentumban való jelenlegi helye alapján, ezért lehet, hogy módosítania kell a pozícionálást, hogy a kívánt helyre kerüljön. Nem ajánlott ezt használni függőleges vonalak hozzáadásához a tervhez, de érdekes hatás.
Egy másik módja annak, hogy vonalak kerüljenek az oldalaira
Az egyik dolog, amit egyesek tesznek a HR elem használata helyett, más elemek határaira támaszkodik. De néha a HR sokkal kényelmesebb és könnyebben használható, mint a határok beállítása. Egyes böngészők dobozmodell problémái még bonyolultabbá tehetik a szegély beállítását.