HTML tutoriály: CSS řádkování

Rozteč řádků CSS je pro navrhování textu velmi potřebné. Jakýkoli odborník je vždy používá, pokud vytvoří krásný web. Díky těmto atributům můžete provádět jakékoli operace s textem.

Obvykle se většině návrhářů nelíbí výchozí rozložení textu v html. CSS řádkování umožňuje přizpůsobit téměř vše, co si můžete představit. A jdete-li hluboko, můžete udělat to, o čem nikdy nenapadlo.

Jak vytvořit mezery mezi řádky v CSS

Je důležité si uvědomit, že můžete nastavit velikost řádků, odsazení atd. Na všechny prvky, kde je text. Všechny atributy jsou například vynikající pro:

• odstavec;
• seznamy;
• ;
• tabulky;
• hlavičky;
• a všechno ostatní, kde umístíte text.

Vzhledem k čarovému odstupu CSS věnujte především následující atributy.

V "Photoshopu" existuje koncept vedoucího. V CSS neexistuje žádný takový atribut, ale díky tomu lze vysvětlit podstatu. Vedoucí ve skutečnosti je vzdálenost mezi linkami.

V CSS je velikost řádku nastavena parametrem výšky řádku a velikosti písma. Jak vidíte, obrázek jasně uvádí, že velikost písma je velikost písma. Žádný dopis nepřekračuje tyto limity.

Výška řádku je vzdálenost od středu horní části Přední do středu dolního vodítka. Šipky jsou zobrazeny na obrázku.

Všimněte si, že pokud zadáte výšku čáry menší než velikost písma, čáry se vzájemně překrývají. Ujistěte se, že to budete dodržovat, abyste předešli takové situaci.

Někteří lidé si myslí, proč je velikost písma napjatá níže než linka s písmeny. Je to jednoduché. Ostatně jsou písmena, které jsou nižší než hlavní úroveň řádku. Níže uvedený obrázek je jasným příkladem toho, kde jsou symboly používány, roztaženy nahoru a dolů.

Jak můžete vidět, písmena prostě zabírají celý rozsah velikosti písma. A výška řádku je větší a na obou stranách je přidán stejný prostor.

Hodnota atributu výšky řádku může být libovolná:

• pixely;
• palce;
• položky;
• zájem;
• a další, které se používají v CSS.

Nemůžete zadat zápornou hodnotu. Například pokud zadáte faktor rovný jeden a půl, dostanete standardní jeden a půl intervalu v textu.

Pokud zadáte v procentech, mějte na paměti, že 100% výšky řádku odpovídá hodnotě velikosti písma.

Kromě toho můžete zadat hodnotu normálního nebo dědičného. Pokud zadáte normální hodnotu, bude vzdálenost mezi linkami automaticky vypočítána prohlížečem podle jeho uvážení. Hodnota se může lišit, protože závisí na prohlížeči. Doporučuje se nastavit konkrétní číslo, aby měli všichni uživatelé stejnou věc.

Dědičnost znamená, že hodnota bude přesně stejná jako mateřský prvek.

Podrobnější design

Cesta řádků CSS není ve skutečnosti omezena na výše uvedené atributy. Vzdálenost se stále upravuje pomocí atributů okrajů a vycpávky. Pokud zadáte atribut přesně jako margin = '5px', pak se ze všech stran čáry (odstavce) přidá vzdálenost 5 pixelů.

Pokud potřebujete určit pouze nad odstavcem, můžete zadat horní okraj. Překlad je velmi jednoduchý. Tak bude možné nastavit odsazení z každé strany.

Všimněte si, že existuje také atribut padding. Funguje přesně stejný jako okraj. Můžete nastavit jak celkovou odrážku, tak konkrétní směr (levé, pravé, nahoru, dolní).

Podívejte se na výkres výše. Okraj - odsazení mimo objekt a výplň - uvnitř.

Tyto atributy jsou globální. Mohou být použity na všechno - obrázky, tabulky, text, odkazy a tak dále.

Pamatuj si to jednou provždy. To je velmi důležitý bod v konstrukci objektů. Například díky okraji můžete zadat odsazení mezi textem a obrázky uvnitř. Pokud tyto odrážky chybí, bude text umístěn v blízkosti obrázku.

Pokud máte text v tabulce, použijte polstrování, abyste zabránili tomu, že text zůstane na okrajích stolu, protože to vypadá ošklivě. A pokud nastavíte odrážku nejméně 5 pixelů, bude to vypadat mnohem lépe. Kromě výšky má řádek šířku atributu.

Někdy je to velmi potřebná vlastnost. Níže uvedený obrázek ukazuje příklad jiné šířky textu.

Příklad návrhu

Vytvoření návrhu webových stránek byste měli text vždy co nejvíce číst. Pokud uživatel obtížně čte text (je příliš malý nebo příliš velký), jednoduše zavře vaše stránky.

Zkuste porovnat dva odstavce na obrázku níže. Který text chcete číst?

Cesta řádků CSS je navržena tak, aby usnadňovala vnímání textu. Nezapomeňte také, že různá písma se mohou lišit v počáteční výšce.

Pro přehlednost můžete zkontrolovat libovolný editor. Porovnejte několik písem.

Vezměte prosím na vědomí, že všechna písma jsou zapsána ve 24 pixelech. Jak vidíte, všechny se liší výškou a šířkou písmen. Pokud porovnáte rozměry více, bude rozdíl více zřejmý.

CSS: řádkování v seznamu

Úpravy intervalů se používají v seznamech. Navíc ve stylu seznamů je charakteristický výše popsaný okraj a polstrování. Díky tomu se seznamy stanou krásnějšími než standardy. Pomocí těchto atributů můžete nastavit:

• Výška položek seznamu.
• Odsazení textu vlevo.
• Zarážky pro řádky nad a pod.
• Maximální šířka každé položky.

Závěr

Vlastnit takový soubor atributů, můžete hrát s designem nejen linky, ale vše, co chcete. Jedná se o globální parametry, které absolutně podléhají všem prvkům (výjimkou je velikost písma, protože jde pouze o text).