Linia pionowa CSS
Przykład 1
Używamy kodu Visual Studio w generowaniu nowego pliku. Plik pusty się otwiera i musimy wybrać język. Najpierw wykonujemy kod HTML, więc wybieramy język HTML. Następnie plik wyprodukowany jest plik HTML. Nie musimy podawać rozszerzenia pliku podczas jego zapisywania. Teraz umieść podstawowe tagi HTML (lub możesz umieścić „!”Zaznacz do automatycznego generowania tych znaczników). Jeśli umieścisz „!”A następnie naciśnij„ Enter ”, natychmiast otrzymasz wszystkie podstawowe tagi HTML. W ciele widać, że jest nagłówek i pojemnik. „V1” to nazwa kontenera Div. Łączymy również ten plik HTML z CSS, wykorzystując znacznik „link” w „głowie” tego kodu HTML.
Dekortujemy nagłówek i wykorzystujemy właściwość „dekorację tekstu” i ustawiamy ją na „podkreślenie”. Tak więc, używając tej właściwości, nagłówek zostanie podkreślony. Używamy również właściwości „kolor”, która ustawia kolor tekstu nagłówka i ustawiamy go na „niebiesko-fioletowe”. W następnym wierszu mamy właściwość „rodziny czcionki”, którą ustalamy jako „Times New Roman”. Następnie umieszczamy nazwę kontenera Div, który jest „v1” i rysujemy linię pionową w tym pojemniku Div. Możemy narysować linię pionową za pomocą właściwości „granicznej”.
Tak więc używamy tej właściwości „granicowej” właściwości, która pomaga nam w rysowaniu linii pionowej. Ponieważ jest to właściwość „lewica graniczna”, musimy ustawić „szerokość”, „typ” i „kolor” dla tej właściwości: „10px” w „szerokości”, „solid” w „Typ” i „Czerwony” w „Kolor”. Wychowuje pionową linię na ekranie o szerokości 10px i na czerwono. Ustawiamy również „wysokość” tej pionowej linii jako „400px”. Teraz wyprodukujemy wyjście tego kodu, klikając odpowiedni przycisk myszy, a następnie wybierając „Otwórz w domyślnej przeglądarce”. Lub możesz użyć skrótu, który jest „alt+b” do uzyskania wyjścia.
Wyjście pokazano poniżej. Możesz zobaczyć linię pionową. Ta linia jest renderowana po lewej stronie, ponieważ użyliśmy właściwości „lewej” do rysowania tej pionowej linii.
Przykład 2
W przykładzie 2 dodajemy akapit w powyższym kodzie HTML. Teraz mamy nagłówek, akapit i kontener DIV w tym kodzie HTML. Następnie przechodzimy do pliku CSS w celu wygenerowania kodu CSS.
Udekoruj nieco nagłówek, stosując właściwość „dekorację tekstu” i ustawiając ją na „przerywane” i używając „czerwonego” jako wartości właściwości „kolor”. „Algierski” jest używany jako „rodzina czcionki”. Teraz zastosuj stylistykę do akapitu i ustaw „rozmiar czcionki” na „20px”. Wykorzystujemy „zielony” jako wartość właściwości „kolor”. Użyj także „Calibri” jako „rodziny czcionki”. „Bold” słowo kluczowe jest tutaj wykorzystywane jako „Waseight Font”.
Użyj div o nazwie „v1” i umieść właściwość „granicę”. Ta właściwość pomaga w narysowaniu pionowej linii wewnątrz pojemnika Div. „Szerokość” linii pionowej to „10px”. Ta linia pojawia się w typu „stałych”, ponieważ ustawiamy „solid” jako typ właściwości granicznej. Kolor linii pionowej to „pomarańczowy”. „Wysokość” określa wysokość linii, którą ustalamy jako „400px”. „Pozycja” linii pionowej jest „absolutna”. Ustawiliśmy „lewy” na „50%”, aby ta pionowa linia pojawiła się na 50% lewej stronie w środku. „Margin-left” to „-3px”. Ta właściwość służy do definiowania przestrzeni poza obiektem po lewej stronie. Ustawiamy również „góra” linii pionowej jako „50px”.
Linia pionowa pojawia się po 50% lewej stronie ekranu wyjściowego, ponieważ ustawiamy tę wartość w CSS i wykorzystaliśmy właściwość „LEWA” do rysowania tej linii.
Przykład 3
Teraz narysujemy dwie pionowe linie. W tym kodzie HTML umieszczamy dwa różne kontenery Div. Użyjemy każdej div do rysowania pionowych linii osobno. Tagi nagłówka i akapitu są takie same jak powyżej i po prostu zmieniamy tekst zapisany w tagach akapitowych.
W takim przypadku „rodzina czcionki” jest „algierska” dla nagłówka. Ustaw „rozmiar czcionki” akapitu na „20px” i zastosuj do niego więcej stylizacji. Do „koloru” używamy „fioletu”. Użyj także „Times New Roman” jako „rodziny czcionki”. „Bold” słowo kluczowe jest używane jako „Waseight Font”. „Podkreślamy” tekst akapitu za pomocą „dekoracji tekstu”. Używamy właściwości „lewic” na div o nazwie „v1.„Ten atrybut pozwala na narysowanie linii pionowej w pojemniku Div. „Szerokość” linii pionowej to „12px”, a linia ma „solidne”, ponieważ rodzaj właściwości granicznej jest „solidna”. W tym przypadku linia pionowa jest zabarwiona „niebieski”. Wysokość linii określa „wysokość”, którą umieściliśmy na „400px”. „Pozycja” linii pionowej jest „absolutna”. Ustawiliśmy „lewy” na „50 procent”, dlatego ta pionowa linia wyświetli się po 50 -procentowej lewej stronie, która jest pośrodku. „-3px” to „margines lewy.„TUTAJ TUTAJ to„ 130px ”.
Teraz ponownie używamy tych samych właściwości dla drugiej div, tworząc kolejną pionową linię w drugiej div. Ustawiliśmy właściwość „LEWA” na „12px Solid Green”, a „Wysokość” dla tej linii jest taka sama jak pierwsza linia pionowa, która jest „400px”. Ustawiliśmy jego „lewą” właściwość na „20%”, a ta linia pojawi się na 20% po lewej stronie. „Margines-lewi” i „top” jest taki sam jak pierwsza linia pionowa.
Widzimy, że dwie pionowe linie renderują na ekranie wyjściowym. Oba są renderowane w innej pozycji w wyjściu, ponieważ ustawiamy tę pozycję w kodzie CSS.
Przykład 4
Wkładamy nagłówek i div w ciele, a także piszemy tekst w pojemniku Div. Będziemy również narysować pionową linię w CSS i połączymy oba pliki.
Dostosuj właściwość „dekorację tekstu” do „Podkreśl” i „zielony” jako „kolor”, aby dodać dodatkowy talent do nagłówka. W tym przykładzie „roda czcionki” jest „algierska” i jest wyrównana w „środku”. W Div wykorzystujemy atrybut „prawej granicy”. W obrębie kontenera Div ten atrybut umożliwia narysowanie linii pionowej. „Szerokość” linii pionowej to „10px”, a linia wydaje się „solidna”, ponieważ typ właściwości granicznej jest „solidny”. Pionowa linia jest kolorowa „Złotym” w tym kodzie. „Wysokość” wskazuje wysokość linii, którą dostosowaliśmy do „500px”. Używamy koloru „brązowego” do „koloru”. Zmień „rozmiar czcionki” tekstu na „23px” i dodaj do niego dalszą dekorację. „Bold” słowo kluczowe jest wykorzystywane jako „Waseight Font” tutaj. Dodatkowo, jako „rodzinę czcionki”, użyj „Sans-Serif”.
Na tym zrzucie ekranu linia pionowa jest renderowana po prawej stronie ekranu wyjściowego, ponieważ w tym przykładzie wykorzystaliśmy właściwość „prawej granicy”.
Wniosek
Celem przedstawienia tego przewodnika jest pomoc w zrozumieniu „linii pionowej” w CSS. Szczegółowo omówiliśmy to pojęcie i podaliśmy kilka przykładów tego, jak narysowaliśmy tę pionową linię w CSS. Wyjaśniliśmy, że wykorzystaliśmy właściwość „LEST” lub „prawej granicy” do renderowania tej pionowej linii na ekranie wyjściowym. Napisaliśmy tutaj o tym, jak renderować linie pionowe. Użyliśmy tutaj czterech odrębnych przykładów i podaliśmy dane wyjściowe w tym przewodniku.