Dobrze projektowanie stron często dotyczy dobrej typografii. Ponieważ tak duża część zawartości strony internetowej jest prezentowana jako tekst, umiejętność stylizowania tego tekstu tak, aby był zarówno atrakcyjny, jak i skuteczny, jest ważną umiejętnością, którą powinien posiadać projektant stron internetowych. Niestety, nie mamy takiego samego poziomu kontroli typograficznej w Internecie, jak w przypadku druku. Oznacza to, że nie zawsze możemy niezawodnie stylizować tekst na stronie internetowej w taki sam sposób, w jaki moglibyśmy to zrobić w tekście drukowanym.
Jednym z typowych stylów akapitów, które często widuje się w druku (i który możemy odtworzyć online), jest wcięcie pierwszego wiersza tego akapitu spacja tabulacji. Dzięki temu czytelnicy mogą zobaczyć, gdzie zaczyna się jeden akapit, a gdzie kończy się drugi.
Nie widzisz tego stylu wizualnego tak często na stronach internetowych, ponieważ przeglądarki domyślnie wyświetlają akapity ze spacją pod nimi jako sposób na pokazanie, gdzie jeden się kończy, a drugi zaczyna, ale jeśli chcesz tak wystylizować stronę, aby to zawierała inspirowany drukiem
styl wcięcia w akapitach, możesz to zrobić za pomocą wcięcie tekstu właściwość stylu.Składnia tej właściwości jest prosta. Oto jak dodać wcięcie tekstu do wszystkich akapitów w dokumencie.
p {
wcięcie tekstu: 2em;
}
Dostosowywanie wcięć
Jednym ze sposobów, w jaki możesz dokładnie określić akapity do wcięcia, jest dodanie klasy do akapitów, które chcesz wciąć, ale wymaga to edycji każdego akapitu, aby dodać do niego klasę. To jest nieefektywne i nie następuje kodowanie HTML najlepsze praktyki.
Zamiast tego powinieneś rozważyć, kiedy wcinasz akapity. Wcinasz akapity, które występują bezpośrednio po innym akapicie. Aby to zrobić, możesz użyć selektora sąsiedniego rodzeństwa. Za pomocą tego selektora zaznaczasz każdy akapit, który jest bezpośrednio poprzedzony innym akapitem.
p + p {
wcięcie tekstu: 2em;
}
Ponieważ tworzysz wcięcie pierwszego wiersza, powinieneś również upewnić się, że między akapitami nie ma dodatkowej spacji (co jest domyślną wartością przeglądarki). Stylistycznie powinieneś mieć odstępy między akapitami lub wcięcie pierwszego wiersza, ale nie obu.
p {
margines-dolny: 0;
dopełnienie-dolne: 0;
}
p + p {
górny margines: 0;
wyściółka górna: 0;
}
Negatywne wcięcia
Możesz także użyć wcięcie tekstu właściwość wraz z wartością ujemną, aby spowodować przesunięcie początku wiersza w lewo, a nie w prawo, jak zwykłe wcięcie. Możesz to zrobić, jeśli wiersz zaczyna się od cudzysłowu, tak aby znak cudzysłowu pojawił się w niewielki margines po lewej stronie akapitu, a same litery nadal tworzą ładną lewą stronę wyrównanie.
Załóżmy na przykład, że masz akapit, który jest potomkiem cytatu blokowego i chcesz, aby był wcięty negatywnie. Możesz napisać ten CSS:
cytat blokowy p {
wcięcie tekstu: -.5em;
}
Spowodowałoby to, że początek akapitu, który prawdopodobnie zawiera otwierający znak cudzysłowu, zostałby lekko przesunięty w lewo, aby utworzyć wiszącą interpunkcję.
Odnośnie marginesów i dopełnienia
Często w projektowaniu stron internetowych używasz marginesy lub wartości dopełnienia do przesuwania elementów i tworzenia białej przestrzeni. Jednak te właściwości nie będą działać w celu uzyskania efektu wciętego akapitu. Jeśli zastosujesz jedną z tych wartości do akapitu, cały tekst tego akapitu, w tym każdy wiersz, zostanie oddzielony od siebie, a nie tylko pierwszy wiersz.