Zalecana metoda z CSS i HTML
W przypadku wcięcia tekstu lub akapitu najczęściej stosowaną i zalecaną metodą byłoby użycie CSS. Poniżej znajdują się różne przykłady wykorzystania CSS do wcięcia tekstu. Każdy z tych przykładów zostanie umieszczony między tagami HTML.
Poniższy przykład tworzy klasę stylu o nazwie „karta”, która wcina tekst i akapit 40 pikseli od lewej.
Gdy powyższy kod znajduje się w sekcji, możesz go użyć w dowolnym momencie, dodając go do akapitu (
) Tagi jak pokazano.
Przykład zakładki
Dołączanie CSS do dokumentu HTML, jak pokazano powyżej, jest nazywane CSS „in-line”. Jest to przydatne do szybkiego wprowadzania zmian, ale na dłuższą metę trudno zmienić później.
Zamiast tego możesz zabrać cały swój kod CSS i umieścić go w osobnym pliku z rozszerzeniem .css. Następnie możesz połączyć się z tym jednym plikiem z dowolnego dokumentu HTML, a ten dokument może korzystać z tych właściwości CSS. Użycie zewnętrznego pliku CSS ułatwia późniejszą zmianę CSS, ponieważ cały CSS jest zdefiniowany w jednym miejscu.
Aby połączyć się z zewnętrznym plikiem CSS, dodaj następujący wiersz w dokumencie HTML w elemencie (po
Po utworzeniu pliku .css edytuj plik i dodaj ten sam kod CSS, wyłączając do niego znaczniki i komentarze, jak pokazano.
.tab {margin-left: 40px; }
Wreszcie, po wykonaniu powyższych kroków, możesz zakleić dowolny tekst używając tego samego
przykład pokazany powyżej.
Istnieją również inne formy wcięć. Na przykład, jeśli chcesz tylko wciąć pierwszy wiersz akapitu, zamiast używać powyższej linii CSS, użyjesz następującej linii.
.tab {text-indent: 40px}
Wskazówka: możesz również wciąć za pomocą procentu. Na przykład zamiast wcięcia o 40px (piksele) można zastąpić wcięcie 5% wcięciem tekstu o 5% bieżącego widoku. Możesz również użyć spacji em podczas definiowania szerokości wcięcia.
Wskazówka bonusowa: Możesz również zmienić wcięcie od lewego do prawego wcięcia, zmieniając margines w lewo w prawo.
Zalecana metoda wykorzystująca HTML
Można osiągnąć te same wyniki powyżej, używając stylu wbudowanego w HTML. Podczas gdy użycie powyższego przykładu CSS może ułatwić utrzymanie na wielu stronach internetowych, jeśli potrzebujesz użyć stylu tylko raz, możesz użyć następującego przykładu.
Ten tekst jest wcięty.
W tym pierwszym przykładzie cały tekst znacznika akapitu jest wcięty 40 pikseli od lewej strony. Wszelkie inne znaczniki akapitu nie są wcięte.
Ten tekst jest wcięty.
W tym drugim przykładzie tylko pierwsza linia tekstu w akapicie będzie wcięta 40 pikseli od lewej strony. Wszelkie dodatkowe wiersze tekstu w tym akapicie nie będą wcięte.
Wskazówka: możesz również wciąć za pomocą procentu. Na przykład zamiast wcięcia o 40px (piksele) można zastąpić wcięcie 5% wcięciem tekstu o 5% bieżącego widoku. Możesz również użyć spacji em podczas definiowania szerokości wcięcia.
Wskazówka bonusowa: Możesz również zmienić wcięcie od lewego do prawego wcięcia, zmieniając margines w lewo w prawo.
Alternatywna metoda
Innym powszechnym (ale niewłaściwym) sposobem wcięcia tekstu jest użycie znaczników, jak pokazano w poniższym przykładzie. Chociaż jest to znacznie łatwiejsze rozwiązanie, istnieją problemy z dostępnością, które mogą być spowodowane przez użycie tego rozwiązania do wcięcia tekstu. Ten znacznik jest przeznaczony do cytowania tekstu, a nie do wcięcia.
Ten tekst byłby wcięty