Zasoby internetowe są oceniane przez użytkowników ze względu na swoją zewnętrzną atrakcyjność. Dlatego nawet przydatny informacyjnie tekst można odczytać ze względu na jego słabą konstrukcję. Wniosek - trzeba uważnie i ostrożnie podchodzić nie tylko do semantycznej zawartości stron witryny, ale także do jej wizualnej reprezentacji. Pojawienie się technologii CSS rozszerzyło możliwość tworzenia atrakcyjnych artykułów. Jedna z właściwości zaprojektowanych w celu ułatwienia percepcji napisanego wcięcia tekstu CSS.
Pola i wcięcia: jaka jest różnica?
Przed rozpoczęciem formatowania tekstu musisz zrozumieć, jakie są pola i wcięcia. Pomimo faktu, że te elementy oznakowania w niektórych przypadkach wygląda tak samo dla użytkownika, a wśród nich istnieją zasadnicze różnice:
dane prawo własności wypełniające, rekolekcje - marginesów;
obszar zdefiniowany odstęp pomiędzy zawartością i blok granicy wgłębienie między granicach sąsiednich bloków;
Pola mogą być brane pod uwagę w elementach elementu (szerokość i wysokość), a nie.
Margines nieruchomości
Dlatego, aby określić wcięcia poziomej lub pionowej CSS tekstu, stosując marżę projektowania. Ta właściwość dotyczy znacznika opisowego paragrafu dokumentu. W najprostszym przypadku jest napisane jako: margin: 12px. Linia ta oznacza, że wokół bloku tekstu (lub dowolnego innego bloku) 12 pikseli będzie wciętych ze wszystkich stron. Aby zwiększyć różnicę, na przykład trzy razy, wystarczy napisać: margin: 36px. Ale co zrobić, jeśliprzerwa między blokami powinna być różna od każdej strony? Twórcy stron używają kilku form pisania:
margin: 11px 22px.
marża: 11px 22px 33px.
marża: 11px 22px 33px 44px.
W pierwszym przykładzie z dolnej i górnej granicy bloku, wcięcia zostaną wykonane na 11 pikselach, po bokach bloku - o 22 piksele. Zgodnie z drugą formą nagrania, pomiędzy górną krawędzią bloku a treścią będzie 11 pikseli, między dolnym - 33 piksele, po bokach - 22 piksele. W trzecim przypadku przesunięcie tekstu CSS będzie 11 pikseli powyżej, 22 pikseli z prawej strony, 33 pikseli na dole i 44 pikseli z lewej strony.
Istnieje również możliwość zarejestrowania odległości do granicy bloku tylko z jednej strony: margines-górny margines-dół, margines-lewy, margines-prawy. Przenosząc nazwy nieruchomości na język rosyjski, łatwo jest domyślić się ich przeznaczenia. Na przykład ten wpis mówi, że prawy margines będzie wynosił 22 pikseli: margines-prawo: 22 pikseli. Na pozostałą odległość zakłada się, że odległość wokół bloku jest równa wartości elementu rodzica. Właściwość margin ma funkcję, którą programista musi zapamiętać w pionie przy użyciu wcięcia tekstu CSS. Interwały sąsiednich elementów nie są sumowane, ale nakładają się na siebie. Na przykład pozwól, aby jeden z bloków miał margines-dół: 15 pikseli i przyległy margines-wierzchołek na dole: 35 pikseli. Szkoła arytmetyczna i zdrowy rozsądek sugerują, że całkowity odstęp między nimi wyniesie 50 pikseli. W praktyce tak nie jest. Blok o dużej wartości własności depozytu "pochłonie" sąsiada. Rezultatem jest interwał między elementami o wielkości 35 pikseli.
Czerwona linia
Podczas pisania dokumentu w edytorze tekstu, użytkownicy wolą umieszczać każdy nowy akapit w "czerwonej" linii. Przy pomocy CSS łatwo jest przesuwać tekst w lewo - stosuje się konstrukt z wcięciem tekstu. Zapisuje się go w następujący sposób: tekst-wcięcie: 11 pikseli. Oznacza to, że pierwszy wiersz akapitu zostanie przesunięty o względną lewą krawędź o 11 pikseli. Aby tekst na stronie był bardziej dopasowany do dokumentu w edytorze, musisz dodatkowo ustawić wyrównanie na szerokość, czyli napis: text-indent: 11px; text-align: justify Oprócz pikseli, przy opisie znaczników dozwolone jest używanie innych jednostek - cali, punktów, procentów. Niech blok ma wcięcie tekstu CSS, równe 10%. Przy szerokości bloku 500 pikseli czerwona linia będzie miała 50 pikseli (10% z 500).
Dla tej właściwości można ustawić wartość dziedziczenia. Taki rekord mówi, że blok korzysta z podobnej właściwości bloku nadrzędnego. tekst-wcięcie: dziedzicz Co zaskakujące, wcięcie akapitu może przyjmować wartości ujemne! W takim przypadku tworzone są tak zwane spektakle, tzn. Tekst główny pozostaje na miejscu, a pierwsza linia przesuwa się w lewo o 22 piksele: tekst-wcięcie: -22 piksele. Aby nie dopuścić do tego, by litery przekraczały lewą krawędź przeglądarki, oprócz wcięcia tekstowego musisz użyć konstruktu dla zadania pola: wypełnienie-lewo: 22px.
Przydatne wskazówki
Rozpatrywane są podstawowe właściwości CSS do formatowania tekstu. A praktyka pomoże je skonsolidować. Oto kilka wskazówek, jak zastosować materiał do nauki podczas projektowania witryn internetowych:
czerwona linia i wcięcietekst - różne koncepcje i dla ich wskazówek stosowane są różne właściwości;
w przypadku odchyleń pionowych zasady matematyki nie mają zastosowania - przedziały zachodzą na siebie, "wygrywa" element z wielką wartością;
W celu oznaczenia akapitu pierwszego akapitu wraz z obrazem zastosowano wcięcie akapitem ujemnym.
