Własność CSS lewicowa

Jeśli kiedykolwiek byłeś studentem programowania internetowego, musiałeś wypróbować kody HTML i CSS. HTML to hipertekstowy język znaczników używany do zapewnienia statycznego wyglądu stron internetowych. Podczas gdy CSS oznacza kaskadowy arkusz stylów, aby zapewnić estetyczny wygląd strony internetowej. Formatowanie CSS umożliwia dodanie innego wyglądu i stylu do strony internetowej, ja.mi. Dodawanie rekordów, wyściełanie lewej lub prawej właściwości, dodanie koloru tła, dzielenie strony na sekcje i wiele innych. W tym samouczku omówimy o użyciu opcji wyściółki CSS w lewej stronie w kodzie stylu CSS, i.mi. Prawdopodobnie przesuwając wszelkie dane w lewo.

Przykład nr 01:

Zacznijmy od pierwszego przykładu korzystania z właściwości lewej wyściółki w CSS pliku HTML. W tym celu musisz utworzyć nowy plik notatnika „lewicy” z „.rozszerzenie html ”na końcu. Ten plik może być używany w notatniku lub w dowolnym narzędziu językowym, takim jak kod Visual Studio, taki jak to, co zrobiliśmy na poniższym obrazie. Rozpoczynamy ten plik kodu HTML z tagiem standardowym HTML „”, a następnie znacznik głowy.

Znacznik może również zawierać tag tytułowy. Na razie unikamy korzystania z tagu tytułowego. W znaczniku głównym używamy znacznika stylu, aby używać stylizacji CSS w pliku HTML. Znacznik ciała podąża za znacznikami głowy, zaczynając od kierunku 1 do nagłówka 6. W ramach nagłówków używamy klasy „PG” jako identyfikatora do używania znacznika stylu. W tagie stylu używamy obiektu klasy „PG” dla każdego nagłówka do stylizacji. W nawiasach kręconych używamy wyściółki lewicowej CSS i ustawiamy ją na 100 pikseli w lewo od startu linii. Oznacza to, że nasze nagłówki są umieszczane na 100 pikseli daleko od startu linii zamiast umieszczać się na starcie linii. Styl i znacznik głowy są ukończone tutaj.

Po zapisaniu poprzedniego kodu HTML, zaczynamy go debugować. Ponieważ ten plik zawiera „.rozszerzenie html ”, jest ono bezpośrednio otwarte w domyślnej przeglądarce, którą wybrałeś w pierwszym biegu. Na stronie przeglądarki wyświetlane jest następujące dane wyjściowe zawierające w sumie 6 nagłówków umieszczonych w odległości 100 pikseli od lewej na początku każdej linii. Jeśli usuniemy lewą wyściółkę z tagu stylu, nagłówki zaczynają się od początku linii.

Przykład nr 02:

Wróćmy do kodu HTML i zaktualizujmy go trochę, jak pokazano następująco. Dodajemy pojedynczy nagłówek „H1” w ciele po znacznikach „div”. Tagi „div” służą do podziału strony na sekcje. Pierwszy znacznik „div” jest utworzony instancją z „id = div”, a wewnętrzny znacznik „div” w nim zawiera klasę „GreyDiv” do wyróżnienia. Ten znacznik „Div” zawiera proste zdanie stwierdzające, że ta sekcja „Div” jest umieszczona na 500 pikseli od lewej. Teraz, w stylu znacznika „głowy”, ustawiamy właściwość koloru tła „Różowa” dla strony internetowej i umieszczamy nagłówek 1 w odległości 500 pikseli od punktu wyjścia za pomocą opcji lewicowej wyściółki. Następnie dodajemy wysokość i kolor tła dla pierwszej sekcji „Div” tej całej strony. Wewnętrzna sekcja „Div” wykorzystywana przez klasę „Greydiv” służy do ustawiania szerokości „900” dla tej wewnętrznej sekcji Div z właściwością koloru tła ustawionego na „Lightgrey” i opcję lewicową ustawioną na 500 pikseli.

Oznacza to, że wartość „Tekst” sekcji wewnętrznej DIV jest umieszczana na 500 pikseli od lewej strony strony. Stylizacja CSS odbywa się tutaj, a ten kod jest gotowy do użycia. Zapiszmy ten kod za pomocą Ctrl+S i uruchom ten kod za pomocą przycisku „Uruchom” na pasku zadań kodu Visual Studio. Kod jest wykonywany, a przeglądarka jest otwarta w celu wyświetlenia wyniku dla tego kodu HTML.

Strona Chrome pokazuje dane wyjściowe dla tego kodu HTML, jak pokazano na poniższym obrazie. Pokazuje, że kolor strony jest ustawiony na różowy, a pierwsza sekcja „Div” jest dodawana po nagłówku 1, i.mi. Sekcja białego koloru. W pierwszej sekcji „Div” generowana jest inna sekcja „Div”, i.mi. Sekcja szarego koloru. Można zauważyć, że nagłówek 1 i dane w sekcji podziału wewnętrznego są umieszczone 500 pikseli od lewej strony strony.

Przykład nr 03:

Widzieliśmy użycie „pikseli” jako jednostki do ustawiania wartości dla opcji „wyściółka-lewicy” w kodzie HTML. Oprócz „PX” możemy również spróbować użyć punktu procentowego „%” do ustawiania opcji wyściółki w CSS kodu HTML. W ten sposób dodaliśmy nagłówek „H1” do tytułu „Nazwy” i stworzyliśmy nieo upordowaną listę 5 elementów na naszej stronie internetowej za pomocą znacznika „UL” dla „nie zamówionej listy” i „li” do wstawienia każdego rekordu na liście.

Klasa „tytułu” jest określona dla nagłówka 1, a klasa „wartości” jest zdefiniowana dla listy nieopisanej. W znaczniku „stylu” ustawiamy wartość lewej wyściółki dla H1 i nieopisaną listę na 20% przy użyciu nazw klas zdefiniowanych w znacznikach. Teraz zapisz kod, aby zobaczyć jego wyniki.

Po uruchomieniu tego kodu w kodzie Visual Studio, przeglądarka Chrome jest uruchamiana i wyświetlane jest następujące dane wyjściowe. „Nazwy” wraz z nieuporządkowaną listą 5 wartości, które zawierała, są wyświetlane zgodnie z oczekiwaniami, które jest 10 procent od lewej strony. W ten sposób można użyć opcji wyściółki do dodania danych od lewej strony.

W poprzednich przykładach wypróbowaliśmy znacznik stylu CSS w tym samym pliku, ale w głowicy pliku. Teraz używamy stylizacji CSS w linii do następującego kodu HTML. Tak więc, w obrębie znacznika głównego, używamy tylko znacznika „tytułu”, aby dodać tytuł tego pliku HTML, i.mi. Lewa wyściółka. W ramach tego pliku używamy tego samego nagłówka H1 i nieuporządkowanej listy. Stylukujemy nagłówek 1 i nieopisaną listę, ustawiając wartości dla opcji wyściółki na lewą do 12%. Ustawiliśmy również granicę na nagłówku 1 z kolorem, niebieskim fioletem. Zapiszmy kod i uruchom go za pomocą przycisku „Uruchom” kodu VS.

Daje granicę nagłówkowi 1 - „Nazwy”. Ponadto nagłówek i nieopisana lista są wyświetlane 12% od lewej strony.

Wniosek

Wprowadzający akapit tego artykułu opracowuje użycie CSS w HTML i pokazuje im sposoby korzystania z opcji lewicowej wyściółki. Omówiliśmy proste, ale eleganckie kody HTML w kodzie Visual Studio, aby wyświetlić użycie opcji lewicowej wyściółki. Wypróbowaliśmy również tę opcję z znakami „PX” i „%” w sekcji stylu osobno, aby zobaczyć, jak zmienia się wyjście. W tym celu próbowaliśmy użyć stylizacji CSS inline i zarysować kody HTML.