Jeśli chcesz dodawać poziome linie w stylu separatora do swoich stron internetowych, typowe opcje obejmują dodawanie plików graficznych tych linii do strony, ale to wymagałoby od przeglądarki pobrania i załadowania tych plików, co może mieć negatywny wpływ na witrynę wydajność. Można również użyć właściwości obramowania CSS, aby dodać obramowania, które działają jako linie u góry lub u dołu elementu, skutecznie tworząc linię separatora.
Lub - jeszcze lepiej - użyj elementu HTML dla reguły poziomej.
Poziomy element reguły
Domyślny wygląd poziomych linii reguł nie jest idealny. Aby wyglądać ładniej, dodaj CSS, aby dostosować wygląd tych elementów, aby wyglądały tak, jak chcesz.
Podstawowy znacznik HR jest wyświetlany w sposób, w jaki przeglądarka chce go wyświetlić. Nowoczesne przeglądarki zazwyczaj wyświetlają nieoznaczone etykiety HR o szerokości 100 procent, wysokości 2 pikseli i obramowanie 3D na czarno, aby utworzyć linię.
Szerokość i wysokość są spójne dla wszystkich przeglądarek
Jedynymi stylami spójnymi w przeglądarkach internetowych są szerokość i style. Określają one, jak duża będzie linia. Jeśli nie zdefiniujesz 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ą wszystkie style wbudowane. W ustawieniach produkcyjnych style te zostałyby zapisane w zewnętrznym arkuszu stylów, aby ułatwić zarządzanie na wszystkich stronach):
style = "width: 50%;">
W tym przykładzie wysokość wynosi 2em: style = "height: 2em;"> W nowoczesnych przeglądarkach przeglądarka buduje linię, dostosowując obramowanie. Jeśli więc usuniesz ramkę z właściwością stylu, linia zniknie z tej strony. Jak widać (cóż, nic nie zobaczysz, ponieważ linie będą niewidoczne) w tym przykładzie: style = "border: none;">
Dostosowanie rozmiaru, koloru i stylu obramowania sprawi, że linia będzie wyglądać inaczej i będzie miała taki sam efekt we wszystkich nowoczesnych przeglądarkach. Na przykład w tej demonstracji obramowanie jest czerwone, przerywane i szerokie na 1 piksel: style = "border: 1px dashed # 000;">
Ale jeśli zmienisz granicę i wysokość, style wyglądają nieco inaczej w bardzo przestarzałych przeglądarkach niż w nowoczesnych przeglądarkach. Jak widać w tym przykładzie, jeśli przeglądasz go w IE7 i poniżej (przeglądarka, która jest żałośnie nieaktualna i nie jest już obsługiwana przez firmę Microsoft), istnieje ukośna wewnętrzna linia, która nie jest wyświetlana w innych przeglądarkach (w tym w IE8 i wyżej) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Te przestarzałe przeglądarki naprawdę nie stanowią już problemu w projektowaniu stron internetowych, ponieważ zostały w dużej mierze zastąpione nowszymi opcjami. Zamiast koloru możesz zdefiniować obraz tła dla swojej reguły poziomej, aby wyglądał dokładnie tak, jak chcesz, ale nadal wyświetla się semantycznie w twoim znaczniku. W tym przykładzie użyliśmy obrazu składającego się z trzech falistych linii. Ustawiając go jako obraz tła bez powtarzania, tworzy przerwę w treści, która wygląda prawie tak, jak w książkach: style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;"> Dzięki CSS3 możesz także uatrakcyjnić swoje linie. Element HR jest tradycyjnie poziomy linii, ale z właściwością transformacji CSS, możesz zmienić jej wygląd. Ulubioną transformacją elementu HR jest zmiana obrotu. Możesz obrócić swój element HR tak, aby był lekko przekątny: hr {-moz-transform: obracaj (10deg);-webkit-transform: obracaj (10deg);-o-transform: obracaj (10deg);-ms-transform: obróć (10deg);przekształć: obróć (10deg);}
Możesz też obrócić go tak, aby był całkowicie pionowy: hr {-moz-transform: obracaj (90 stopni);-webkit-transform: obróć (90deg);-o-transform: obracaj (90 stopni);-ms-transform: obróć (90 stopni);przekształć: obróć (90 stopni);}
Pamiętaj, że ta technika obraca HR w oparciu o jego bieżące położenie w dokumencie, więc możesz potrzebować dostosować pozycjonowanie, aby uzyskać je tam, gdzie chcesz. Nie zaleca się używania tego do dodawania pionowych linii do projektu, ale jest to sposób na uzyskanie interesującego efektu. Jedną rzeczą, którą niektórzy ludzie robią, zamiast używać elementu HR, jest poleganie na granicach innych elementów. Ale czasami HR jest dużo wygodniejszy i łatwiejszy w użyciu niż próba ustanowienia granic. Problemy z niektórymi modelami niektórych przeglądarek mogą sprawić, że ustawienie granicy będzie jeszcze trudniejsze. Zmiana granic może być wyzwaniem
Zrób dekoracyjną linię z obrazem tła
Transformacja elementów HR
Innym sposobem na uzyskanie linii na swoich stronach
