CSS řádkování: řešení
Poměrně často začínající návrháři mají problémy s ovládáním kaskádových stylů (CSS). Neexistuje žádná výjimka řádkování v CSS. Rozteč řádků je vzdálenost mezi čarami vertikálně. Stejně jako v běžném dokumentu aplikace Microsoft Word může být tento parametr také změněn v textu html souboru.
Při změně vzdálenosti použijte výšku řádku
Prvním a nejpravděpodobnějším řešením problému v intervalech by bylo nastavení hodnoty pro vlastnost line-height. Ve výchozím nastavení je hodnota této vlastnosti normální (výška řádku: normální;). Rozteč řádků je automaticky vypočítána samotným internetovým prohlížečem a závisí zejména na typu písma a jeho velikosti. Jakákoli kladná číselná hodnota, která bude nastavena ve vlastnostech stylu výšky čáry, bude prohlížečem vnímána jako číslo, které musí být vynásobeno velikostí aktuálního písma.
V CSS lze rozlišovat řádky v různých délkových jednotkách: body (pt), palce (in), pixely (px) a procenta (%). Procento se vypočítá vzhledem k aktuálnímu písmu a jeho hodnota je ve výchozím nastavení 100%. Nezapomeňte, že vlastnost line-height zapůjčí hodnotu vlastnosti dědictví z jejího nadřazeného prvku.
Zde je několik příkladů, jak zvýšit řádkování v CSS:
.
Proces práce s řádkováním je poměrně jednoduchý. Měli byste mít základní znalosti CSS a schopnost připojit soubor k hlavní html stránce. Styly lze také nastavit přímo na html stránce:
Chcete-li v této větě uložit polovinu, musíte do souboru CSS přidat následující kód:
p.stroka {
výška řádku: 1,5;
}}
Chcete-li vytvořit dvojitý interval, můžete napsat následující kód:
p.stroka {
výška řádku: 2;
}}
nebo
p.stroka {
výška řádku: 200%;
}}
V obou případech prohlížeč pochopí, že potřebujete vynásobit aktuální písmo hodnotou 2. Tato hodnota bude řádkováním.
Nyní uvádíme příklad, jak snížit rozteč čáry (CSS):
Je důležité si uvědomit, že záporná hodnota výšky řádku je prostě ne vnímána, takže její minimální hodnota může být 0. Chcete-li získat polovinu intervalu, musíte napsat následující kód:
p.line {
výška řádku: 0,5;
}}
nebo
p.line {
výška řádku: 50%;
}}
nebo
p.line {
výška řádku: 2;
}}
nebo
p.line {
line-height: 0.5pt;
}}
Všechny 3 možnosti jsou správné a vyhovují všem standardům W3C, respektive budou pracovat v libovolné verzi prohlížeče.
Použijte polstrování při změně mezer
Nicméně, kromě změny vlastností výšky řádku existuje i jiný způsob, jak změnit rozteč čáry v CSS, bude to "hra" s hodnotami vlastnosti vycpávky. Vlastnost stylu padding je zodpovědná za odsazení v libovolném objektu html. Ve výchozím nastavení je tato vlastnost 0. Výběrem různých hodnot můžete změnit řádkování, například:
.
Práce s řádkováním je snadné. Stačí poznat základy CSS a připojit soubor k hlavní html stránce. Můžete jej také nastavit přímo na stránku s příponou html.
Chcete-li zvýšit rozteč řádků, zvýšit hodnotu vlastnosti:
p.second {
polstrování: 10px;
}}
Vzdálenost mezi čarami v našem odstavci se tedy zvýší o 10 pixelů vzhledem k počáteční. Stejným úspěchem je možné snížit rozteč čáry, například předepisovat:
p.second {
polstrování: 0px;
}}
Záporné řádkování
Pokud si všimnete, je také zakázáno zadávat záporné hodnoty tak, aby se řetězce navzájem nepřekrývaly. V CSS nemusí být řádkování záporné. Pokud jde o dodržování pravidel psaní kódu a standardů W3C, nikdy nemůžete psát záporné hodnoty v řádkových rozestupech.
Změna řádkové vzdálenosti v seznamech
Někdy je třeba provést změnu řádkování v seznamech.
- a
- . Předchozí metody nepovedou k požadovanému výsledku, ale existuje jedna vlastnost, která může změnit interval v seznamu - tato vlastnost je okraj. Tato vlastnost stylu může být buď pozitivní nebo negativní. Ukažme změnu řádkování v seznamu například:
Chcete-li zvýšit odsazení, musíte v souboru CSS zapsat následující řádky:
ul li {
margin-top: 10px;
}}
Uvedli jsme tedy, že vzdálenost od každé položky seznamu se zvýší o 10 pixelů. A v tomto případě je to možné a záporná hodnota. Můžeme tedy nastavit: - okraj: -15px.