istnieją różne metody wcięć tekstu. Jednak w celu zapewnienia kompatybilności z wieloma przeglądarkami i dostępności omawiamy najpopularniejsze metody wcięć tekstu na twojej stronie internetowej.
zalecana metoda z CSS & HTML
do wcięć tekstu lub akapitu najczęściej używaną i zalecaną metodą jest użycie CSS. Poniżej znajdują się różne przykłady tego, jak CSS może wciąć tekst., Każdy z tych przykładów będzie umieszczony pomiędzy Twoim <head></head> znaczniki HTML.
poniższy przykład utworzy klasę stylu o nazwie „tab”, która wcięje tekst i paragraf 40 pikseli od lewej.
<style type="text/css"><!-- .tab { margin-left: 40px; }--></style>
gdy powyższy kod znajduje się w sekcji<head>możesz go użyć, dodając go do swojego akapitu (<p>) znaczniki jak pokazano.,
<p class="tab">Example of a tab</p>
włączenie CSS do dokumentu HTML, jak pokazano powyżej, jest określane jako CSS „in-line”. Jest to przydatne do szybkiego wprowadzania zmian, ale na dłuższą metę trudno jest zmienić później.
zamiast tego możesz pobrać cały 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 używać tych właściwości CSS. Korzystanie z zewnętrznego pliku CSS ułatwia późniejszą zmianę CSS, ponieważ wszystkie CSS są zdefiniowane w jednym miejscu.
<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">
raz to .,plik css został utworzony, Edytuj plik i dodaj ten sam kod CSS, z wyłączeniem<style> i komentuj do niego znaczniki, jak pokazano.
.tab { margin-left: 40px; }
wreszcie, po wykonaniu powyższych kroków, możesz zakładkę dowolnego tekstu, używając tego samego<p class=”tab”> przykład, który pokazaliśmy powyżej.
istnieją również inne formy wcięć. Na przykład, jeśli chcesz wciąć tylko pierwszą linię akapitu, zamiast używać powyższej linii CSS, użyjesz następującej linii.,
.tab { text-indent:40px }
Możesz również wciąć za pomocą procentu. Na przykład zamiast wcięcia o 40px (pikseli), można zastąpić wcięcie 5%, aby tekst wcięcia o 5% bieżącego widoku. Można również użyć spacji em podczas definiowania szerokości wcięć.
Możesz również zmienić z lewego wcięcia do prawego wcięcia, zmieniając margin-left na margin-right.
zalecana metoda przy użyciu HTML
możliwe jest osiągnięcie tych samych wyników powyżej za pomocą stylu inline w HTML., Podczas korzystania z 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ć poniższego przykładu.
<p style="margin-left: 40px">This text is indented.</p>
w tym pierwszym przykładzie cały tekst w znaczniku akapitu jest wcięty o 40 pikseli od lewej. Inne znaczniki akapitu nie są wcięte.
<p style="text-indent: 40px">This text is indented.</p>
w tym drugim przykładzie tylko pierwsza linia tekstu w akapicie będzie wcięta o 40 pikseli od lewej. Żadne dodatkowe wiersze tekstu w tym akapicie nie są wcięte.,
Możesz również wciąć za pomocą procentu. Na przykład zamiast wcięcia o 40px (pikseli), można zastąpić wcięcie 5%, aby tekst wcięcia o 5% bieżącego widoku. Można również użyć spacji em podczas definiowania szerokości wcięć.
Możesz również zmienić z lewego wcięcia do prawego wcięcia, zmieniając margin-left na margin-right.
alternatywna metoda
inną popularną (ale niewłaściwą) metodą wcięcia tekstu jest <blockquote> znaczniki, jak pokazano w poniższym przykładzie., Chociaż jest to łatwiejsze rozwiązanie, wprowadza problemy z dostępnością. Ten znacznik służy do cytowania tekstu, a nie do wcięć.
<blockquote>This text would be indented</blockquote>
dodatkowe informacje
- czy podczas pisania kodu HTML musisz wcięcie?
- Jak stworzyć dodatkową przestrzeń w HTML lub na stronie www.
- patrz definicja wcięcia dla powiązanych informacji i linków.
- HTML i projektowanie stron internetowych pomoc i wsparcie.
