Linie poziome
Opublikowany: 2021-09-01Istnieje wiele sposobów, aby Twoje strony HTML wyglądały bardziej oszałamiająco i miały lepszą strukturę. Mówiąc dokładniej, linia pozioma może odgrywać szczególną rolę w zapewnieniu wyważonej, bardziej przejrzystej i łatwiejszej do przeglądania zawartości witryny. Ilekroć zdecydujemy się wprowadzić duże zmiany na naszych stronach internetowych, tak małe rzeczy jak linie mogą mieć znaczenie. Takie drobiazgi sprawiają, że przekaz Twojej witryny jest bardziej wszechstronny. Poza tym mogą zmienić atrakcyjność wizualną Twojego zasobu internetowego i sposób, w jaki Twoi odbiorcy postrzegają Twoje dane.
Ale możesz także tworzyć niestandardowe linie, które pasują do Twojej strony internetowej i zapewniają lepsze opanowanie przestrzeni, którą manipulujesz na swojej stronie. Mając to na uwadze, przyjrzyjmy się bliżej dostosowywaniu linii poziomych na stronach HTML.Linia pozioma to element HTML używany jako dekoracja Twojej strony internetowej. Może się jednak przydać do wielu innych celów, takich jak:
- Separator, który wizualnie dzieli różne fragmenty treści i kładzie nacisk, gdzie jeden pomysł się kończy, a drugi zaczyna.
- Zakreślacz, który kładzie nacisk na niektóre znaczące sekcje strony internetowej.
- Linia pozioma jest uważana za jeden z najpopularniejszych i najłatwiejszych sposobów na osiągnięcie szerokiego zakresu celów na stronie internetowej. Choć na pierwszy rzut oka może wydawać się prosty, jest to wielofunkcyjny element, który można dostosować do własnych wymagań. Korzystając z prostych modyfikacji kodu HTML swojej strony internetowej, możesz dostosować następujące specyfikacje linii poziomej:
Długość;
Szerokość;
Kolor;
Wyrównanie.
Warto również zaznaczyć, że linia pozioma odnosi się do elementów blokowych. Oznacza to, że jest on umieszczony w osobnej linii na stronie internetowej, a tekst, który dodasz obok linii zostanie umieszczony pod nią.
Linie poziome są bardzo przydatne w dzieleniu strony na różne sekcje, aby dodać prostą poziomą linię, wystarczy wpisać < hr >, a otrzymasz to:
Jak stworzyć linię poziomą
Możesz ustawić linię za pomocą prostego znacznika < hr >. Jest skrótem od „Horizontal Rule” i określa klasyczne parametry zewnętrzne. Tym, co odróżnia go od wielu innych, jest to, że nie potrzebuje znacznika końcowego i może istnieć samodzielnie. Możesz zmienić zewnętrzne cechy elementu za pomocą dodatkowych wartości w etykiecie:
To wygląda tak. Na przykład, jeśli chcemy mieć długość 100 pikseli, ustawimy taki tag: hr width = "100.
Wyrównanie.
Możesz wyrównać linię do lewej lub prawej krawędzi, a także do środka. Ta funkcja jest prawidłowa tylko wtedy, gdy już określiłeś parametr szerokości, ponieważ nie można wyrównać linii na całej stronie. Dla wyrównania ustaw dodatkowy atrybut w znaczniku "align" i dodaj do niego kierunek: center - dla centrum, left - dla lewej i prawo - dla wyrównania do prawej. Gotowy tag w tym przypadku będzie wyglądał tak: jeśli musimy ustawić wyrównanie do środka dla poziomej linii o długości 150 pikseli, to gotowy tag będzie wyglądał tak: hr align = "center" width = " 150". Zauważ, że „align”, miara wyrównania, jest umieszczana na pozycji 1, mimo że atrybut jest zależny od szerokości miary długości.Szerokość.
Opcjonalnie możesz również określić szerokość, tworząc pogrubione lub cienkie podkreślenie. To kryterium nie zależy od niczego i może być używane niezależnie bez określania długości lub wyrównania. W tym celu używamy atrybutu rozmiaru w tagu oraz wartości liczbowej równej żądanej szerokości w pikselach. Numer jest podany w cudzysłowie po atrybucie rozmiaru i symbolu „=”.
Tak więc, jeśli musimy utworzyć linię o szerokości 15 pikseli, musimy utworzyć następujący tag: hr size = "15".
Kolor.
Jest również ustawiony jako niezależny wskaźnik. Aby to zmienić, użyj atrybutu koloru w połączeniu z nazwą koloru w postaci kodu lub w języku angielskim. Kolor jest podany w cudzysłowie po symbolu „=”.
Tak więc tag dla standardowej białej linii można zapisać na dwa sposoby: hr color = "#FFFFFF" lub hr color = "white"
Czerń można utworzyć za pomocą kodu # 000000.
Jak zrobić kolorową linię poziomą?
Poziome linie są dobre do oddzielania jednego bloku tekstu od drugiego. Mały tekst z poziomymi liniami u góry iu dołu przyciąga większą uwagę czytelnika niż zwykły tekst.
Za pomocą znacznika < hr > można narysować poziomą linię, której wygląd zależy od użytych atrybutów oraz przeglądarki. Znacznik odnosi się do elementów blokowych, więc linia zawsze zaczyna się w nowej linii, a następnie wszystkie elementy są wyświetlane w następnej linii. Dzięki wielu atrybutom znacznika < hr > wiersz utworzony za pomocą tego znacznika jest łatwy do manipulowania. W połączeniu z potęgą stylów dodanie linii do dokumentu to pestka.
Domyślnie linia jest wyświetlana w kolorze szarym iz efektem głośności. Ten rodzaj linii nie zawsze pasuje do projektu witryny, więc zrozumiała jest chęć programistów do zmiany koloru i innych parametrów linii za pomocą stylów. Jednak przeglądarki są niejednoznaczne w tej kwestii, dlatego będziesz musiał użyć kilku właściwości stylu jednocześnie. W szczególności starsze wersje Internet Explorera używają właściwości color dla koloru linii, podczas gdy inne przeglądarki używają koloru tła. Ale to nie wszystko, w tym przypadku upewnij się, że określiłeś grubość linii (właściwość wysokości) inną niż zero i usuń obramowanie wokół linii, ustawiając właściwość border na none. Łącząc wszystkie właściwości selektora hr, otrzymujemy uniwersalne rozwiązanie dla popularnych przeglądarek.
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Kolor linii poziomej </title> <style> hr { border: none; / * Usuń obramowanie * / background-color: red; / * Kolor linii * / kolor: czerwony; / * Kolor linii dla IE6-7 * / wysokość: 2px; / * Szerokość linii * / } </style > </head > < body > < hr > < p > Ciąg tekstowy </p > < hr > </body > </html >Przykłady:
Ten:
< hr color="#c7c34c" size="2" width="50%" >daje to:
Kolor: kolor linii:
< hr color="#c7c34c" size="2" width="50%" >Rozmiar: Wysokość linii wyrażona w pikselach:
< godz size="x" >Szerokość: Szerokość linii wyrażona w procentach (%) lub w pikselach (w moim przykładzie jest to 50% oryginalnego rozmiaru):
< hr width="x%"> lub < hr width="x" >Bardziej zaawansowany:
Ten:
< hr width="400" color="#000000" size="4" >daje:
W tym przypadku zastosowaliśmy styl:
Szerokość obramowania to 3 piksele (3 piks.)
To jest kropkowane
Kolor bazowy to czarny: #000000
Kropki w kolorze niebieskim: #0099CC
Ostatni przykład wyjaśniający więcej, jeśli nadal jest potrzebny ;):
Ten
< hr width="400" color="#FFFFFF" size="6" >daje:
W tym przypadku tuż powyżej:
Szerokość obramowania to 2 piksele (2 piks.)
Jest przerywany
Kolor bazowy to biały: #FFFFFF
Kreski w kolorze srebrnym: #C0C0C0
Możliwe style to:
-kropkowany
-przerywany
-solidny
-podwójnie
-rowek
-początek
-wstawka
-grzbiet
To wszystko, co mam do powiedzenia o liniach poziomych!