Aby dodać poziome linie w stylu separatora do swoich stron internetowych, jedną z opcji jest dodanie plików graficznych tych linii do Twoją stronę, ale wymagałoby to pobrania i załadowania tych plików przez przeglądarkę, co może mieć negatywny wpływ na wydajność witryny. Możesz także użyć CSS właściwość graniczna do dodania granice które działają jak linie na górze lub na dole elementu, skutecznie tworząc linię oddzielającą.
Lub – jeszcze lepiej – użyj HTML element linii poziomej.
Element reguła pozioma
Domyślny wygląd poziomych linii nie jest idealny. Aby wyglądały ładniej, dodaj CSS, aby dostosować wygląd tych elementów do tego, jak chcesz, aby wyglądała Twoja witryna.
Podstawowy tag HR wyświetla sposób, w jaki przeglądarka chce go wyświetlić. Nowoczesne przeglądarki zazwyczaj wyświetlają niestylowane tagi HR o szerokości 100 procent, wysokości 2 pikseli i trójwymiarowej czarnej ramce, aby utworzyć linię.
Szerokość i wysokość są takie same we wszystkich przeglądarkach
Jedynymi stylami, które są spójne we wszystkich przeglądarkach internetowych, są
szerokość i style. Określają one, jak duża będzie linia. Jeśli nie określisz szerokości i wysokości, domyślna szerokość to 100 procent, a domyślna wysokość to 2 piksele.W tym przykładzie szerokość wynosi 50 procent elementu nadrzędnego (zwróć uwagę, że poniższe przykłady obejmują style wbudowane. W środowisku produkcyjnym te style zostałyby zapisane w zewnętrznym arkuszu stylów, aby ułatwić zarządzanie wszystkimi stronami):
style="szerokość: 50%;">
A w tym przykładzie wysokość to 2em:
style="wysokość: 2em;">
Zmiana granic może być wyzwaniem
W nowoczesnych przeglądarkach przeglądarka buduje linię, dostosowując obramowanie. Jeśli więc usuniesz obramowanie z właściwością style, linia zniknie na stronie. Jak widać (cóż, nic nie zobaczysz, ponieważ linie będą niewidoczne) w tym przykładzie:
style="obramowanie: brak;">
Dostosowanie rozmiaru, koloru i stylu obramowania sprawia, że linia wygląda inaczej i ma ten sam efekt we wszystkich nowoczesnych przeglądarkach. Na przykład w tej demonstracji ramka jest czerwona, przerywana i szeroka na 1 piksel:
style="border: 1px przerywana #000;">
Zrób ozdobną linię z obrazem tła
Zamiast koloru zdefiniuj obraz tła dla linii poziomej, aby wyglądał dokładnie tak, jak chcesz, ale nadal wyświetlał się semantycznie w znacznikach. W tym przykładzie użyliśmy obrazu składającego się z trzech falistych linii. Ustawiając go jako zdjęcie w tle bez powtórzeń tworzy przerwę w treści, która wygląda prawie tak, jak w książkach:
style="wysokość: 20px; background: #fff url (aa010307.gif) centrum przewijania bez powtarzania; obramowanie: brak;">
Przekształcanie elementów HR
Dzięki CSS3 możesz również uczynić swoje wiersze bardziej interesującymi. Element HR to tradycyjnie poziomy line, ale za pomocą właściwości transformacji CSS możesz zmienić ich wygląd. Ulubioną transformacją w elemencie HR jest zmiana rotacji.
Obróć element HR tak, aby był tylko nieznacznie przekątny:
godz. {
-moz-transform: obróć (10 stopni);
-transformacja webkit: obróć (10deg);
-o-transform: obróć (10 stopni);
-ms-transform: obróć (10deg);
transformacja: obróć (10 stopni);
}
Lub możesz go obrócić tak, aby był całkowicie pionowy:
godz. {
-moz-transform: obróć (90deg);
-webkit-transform: obróć (90deg);
-o-transform: obróć (90deg);
-ms-transform: obróć (90deg);
przekształć: obróć (90 stopni);
}
Ta technika obraca HR w oparciu o jego bieżącą lokalizację w dokumencie, więc może być konieczne dostosowanie pozycjonowania, aby umieścić go tam, gdzie chcesz. Nie zaleca się używania tego do dodawania pionowych linii do projektu, ale jest to ciekawy efekt.
Kolejny sposób na uzyskanie linii na swoich stronach
Jedną z rzeczy, które niektórzy ludzie robią zamiast używać elementu HR, jest poleganie na granicach innych elementów. Ale czasami HR jest o wiele wygodniejszy i łatwiejszy w użyciu niż próba ustalenia granic. Problemy z modelem pudełkowym niektórych przeglądarek mogą sprawić, że ustawienie obramowania będzie jeszcze trudniejsze.