Zrób linię w css. Linie poziome

Podczas tworzenia Strony HTML design odgrywa znaczącą rolę. Zwłaszcza jeśli mówimy o różnych symbolach i projektach dekoracyjnych: te małe rzeczy pomagają uczynić „język” Twojej strony bardziej przystępnym i przejrzystym, a także znacząco zmieniają jej postrzeganie i wygląd ogólnie. Jednym z najważniejszych elementów projektu jest linia pozioma, a następnie dowiemy się bardziej szczegółowo, jak z nią pracować i jak zrobić linię poziomą w HTML.

Co to jest linia pozioma i do czego służy?

Pozioma linia w HTML to element projektu strony, który spełnia szereg funkcji:

Dekoracyjny. Pomaga zwiększyć atrakcyjność strony.
Działowy. Promuje skuteczne oddzielanie informacji o różnych znaczeniach.
Podkreślanie lub podkreślanie. Zwraca uwagę gości strony na niezbędne i najważniejsze informacje.

Najbardziej uważana jest za linię poziomą w przystępny sposób do wdrożenia szeregu funkcji. Jest bardzo prosty w wykonaniu, a z wyglądu wygląda bardzo opłacalnie. Poprzez proste zmiany w kodzie HTML możesz dostosować:

długość;
szerokość;
charakterystyka koloru;
wyrównanie wzdłuż jednej lub drugiej krawędzi.

Warto zauważyć, że odnosi się do linii poziomej elementy blokowe. Oznacza to, że zajmuje nową linię na stronie, a tekst po niej przejdzie poniżej.

Tworzenie linii poziomej w HTML

Linię możesz ustawić za pomocą prostego znacznika – hr w nawiasach trójkątnych. Jest to skrót od „Zasada pozioma” i definiuje klasykę parametry zewnętrzne. Różni się od wielu innych tym, że nie potrzebuje znacznika zamykającego i może istnieć samodzielnie. Zmiana cechy zewnętrzne element wykorzystujący dodatkowe wartości w tagu:

Długość. Jeśli nie chcesz, aby długość linii rozciągała się na całą stronę, możesz ustawić żądany rozmiar w pikselach lub procentach. Odbywa się to w celu uzyskania pomocy dodatkowe słowo„szerokość” w tagu i długość numeryczną podaną po znaku „=” w cudzysłowie.

To wygląda tak. Przykładowo, jeśli potrzebujemy długości 100 pikseli, ustawiamy następujący znacznik: hr szerokość=”100″

Wyrównanie. Wyrównanie jest możliwe do lewej lub prawej krawędzi, a także do środka. Ta cecha działa tylko wtedy, gdy określiłeś już parametr szerokości, ponieważ linii rozciągającej się na całą stronę nie można wyrównać. Dla wyrównania ustawiamy dodatkowy atrybut w znaczniku „align” i dodajemy do niego kierunek: środek – dla wyrównania centralnego, lewy – dla lewego i prawego – dla wyrównania prawego.

Gotowy tag w tym przypadku będzie wyglądał tak. Na przykład, jeśli musimy ustawić wyrównanie do środka dla linii poziomej o długości 150 pikseli, gotowy znacznik będzie wyglądał następująco: hr wyrównanie=”centrum” szerokość=”150″.

Należy pamiętać, że „align”, metryka wyrównania, jest umieszczana na pierwszym miejscu, mimo że atrybut jest zależny od metryki szerokości.

Szerokość. Możesz także określić szerokość, tworząc pogrubione lub cienkie podkreślenie. Kryterium to nie jest od niczego zależne i może być stosowane jako niezależne kryterium bez określania długości lub wyrównania. W tym celu używamy atrybutu size w tagu i wartości liczbowej równej pożądanej szerokości w pikselach. Liczba jest podana w cudzysłowie po atrybucie rozmiaru i symbolu „=”.

Zatem jeśli chcemy utworzyć linię o szerokości 15 pikseli, musimy utworzyć następujący znacznik: hr size=”15″.

Kolor. Jest on również określany jako niezależny wskaźnik. Aby to zmienić, użyj atrybut koloru w połączeniu z nazwą koloru w formie kodu albo na język angielski. Kolor jest podany w cudzysłowie po symbolu „=”.

Zatem znacznikiem standardowej linii jest biały można zapisać na dwa sposoby: hr color=”#FFFFFF” lub hr color=”white”

Kolor czarny można utworzyć za pomocą kodu #000000.

Odłożyć cień. Jeśli potrzebujesz elementu, który nie zawiera cienia, powinieneś użyć w tagu atrybutu noshade. Można go stosować samodzielnie lub w połączeniu z innymi elementami. Znacznik standardowej linii używającej tej linii będzie wyglądał następująco: hr noshade

Tworzenie linii poziomej za pomocą wideo

A jeśli chcesz otrzymywać informacje w bardziej wizualnym formacie, zapoznaj się z poniższym filmem, który szczegółowo opisuje możliwości pracy z linią poziomą.

Po określeniu wymaganych wymiarów linii poziomej można zaprojektować strony serwisu w taki sposób, aby informacje były uporządkowane i wizualnie kompetentne. Dzięki temu odwiedzający łatwiej dostrzegą prezentowane informacje i wyróżnią Twoją witrynę na tle innych.

Zadanie

Zrób poziomą linię na stronie.

Rozwiązanie

Linie poziome dobrze oddzielają jeden blok tekstu od drugiego. Mały tekst z poziomymi liniami u góry i u dołu przyciąga większą uwagę czytelnika niż zwykły tekst.

Korzystanie z tagu

możesz narysować poziomą linię, której wygląd zależy od zastosowanych atrybutów, a także przeglądarki. Znacznik jest elementem blokowym, więc linia zawsze zaczyna się od Nowa linia, a po nim wyświetlane są wszystkie elementy następna linia. Dzięki wielu atrybutom tagów

linia utworzona za pomocą tego tagu jest łatwa w zarządzaniu. Jeśli połączymy także moc stylów, dodanie linii do dokumentu stanie się prostym zadaniem.

Linia domyślna

wystawiany szary i z efektem objętościowym. Ten typ linii nie zawsze pasuje do projektu witryny, dlatego zrozumiała jest chęć programistów zmiany koloru i innych parametrów linii za pomocą stylów. Jednak przeglądarki mają mieszane podejście do tego problemu, co oznacza, że będziesz musiał użyć kilku właściwości stylu jednocześnie. W szczególności starsze wersje przeglądarki Internet Explorera W przypadku koloru linii użyj właściwości color , a inne przeglądarki używają tła-color . Ale to nie wszystko, musisz określić grubość linii ( właściwość wysokości) różna od zera 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 popularne przeglądarki(Przykład 1).

Przykład 1: Linia pozioma

HTML5 CSS 2.1 IE Cr Op Fx

Kolor linii poziomej

Ciąg tekstowy

Wynik ten przykład pokazany na ryc. 1.

Ryż. 1. Kolorowa linia pozioma

Aby podkreślić niektóre szczególnie ważne elementy site, nie zaszkodzi użyć wszelkiego rodzaju Style CSS i właściwości. Oczywiście nie trzeba za bardzo przejmować się tekstem i wyróżniać go np. pogrubieniem lub kursywą, zmienić tło lub utwórz ramkę wokół tekstu. Ale jedna z przedstawionych metod nie zawsze jest odpowiednia. Załóżmy, że masz tekst, który należy podzielić ze względu na specyfikę jego obciążenia semantycznego. To tutaj przychodzą Pomoc HTML i właściwości CSS.

Jak zrobić linię w tekście za pomocą CSS

Aby zrealizować nasze plany, będziemy musieli się skontaktować plik style.css, po zapisaniu w nim odpowiedniej właściwości granica. Spowoduje to pojawienie się linii powyżej, poniżej lub po określonej stronie tekstu. Z kolei za wyświetlenie linii odpowiada kilka właściwości, a mianowicie:

- górna granica– pozioma linia znajdująca się nad tekstem;

- granica prawa– pionowa linia znajdująca się po prawej stronie tekstu;

- granica-dół– pozioma linia znajdująca się pod tekstem;

- obramowanie w lewo– pionowa linia znajdująca się po lewej stronie.

Jak zrobić linię w HTML

Za pomocą Właściwości CSS możesz wprowadzić wszystkie niezbędne wartości, edytując kod HTML. Aby to zrobić, musisz przejść do części administracyjnej witryny. Wybierz jeden z opublikowanych materiałów, przełącz Edytor tekstu do trybu edycji kodu HTML i dodaj właściwości CSS. Próbkę można zobaczyć poniżej.

Jak zrobić linię kropkowaną lub prostą?

Czy określając te właściwości, będziesz w stanie podkreślić wagę prezentowanego materiału, akapitu lub nagłówka?

Krótki opis poleceń

- szerokość– długość linii;

- solidny- linia ciągła;

- kropkowany- linia przerywana.

Aby lepiej zrozumieć style, polecam przeczytanie tego.

Należy zrozumieć, że w procesie wprowadzania zmian w kodzie strony właściwości określające rodzaj linii, jej grubość i kolor są wymienione oddzielone spacją.

Ta metoda ma kilka zalet:

Szerokie możliwości dzięki którym można wykonać niemal każdą linię.

Łatwość wprowadzania wszelkich niezbędnych zmian bezpośrednio w kodzie HTML. To znacznie upraszcza zadanie niedoświadczonym twórcom witryn.

Jak zrobić prostą poziomą linię za pomocą znacznika HTML

Pierwszą rzeczą, na którą chciałbym zwrócić Twoją uwagę, jest to, że tag ten, pomimo wszystkich subtelności i zasad HTML, nie posiada tagu zamykającego. Można go używać w dowolnym miejscu Kod HTML, pomiędzy tagami I.

Atrybuty tagu

- szerokość– odpowiada za długość linii. Można określić jako procent lub w pikselach.

- rozmiar- grubość linii. Określone w pikselach.

- kolor– określa kolor linii.

- wyrównywać– atrybut odpowiedzialny za wyrównanie linii. Z kolei zespół się z nim utożsamia.