Domov › Nastavení › Formátování textu v CSS. Různé cesty formátování CSS

Formátování textu v CSS. Různé cesty formátování CSS

V tomto článku si povíme, jak se formátuje text v CSS, podíváme se na techniky zarovnání textu, jak pomocí CSS udělat červenou čáru, nastavit řádkování a mezery mezi slovy, jak ozdobit text, převést text na horní nebo malá písmena a jak vytvořit velké písmo.

Během vzhledu webu budete muset neustále měnit vzhled webových stránek. Jedním z prvních úkolů při práci s textem na stránce je potřeba jej zarovnat.

Zarovnání textu

Podívejme se na příklad práce se zarovnáním textu:

Příklad použití vlastnosti text-align

Jezte více těchto měkkých francouzských rohlíků a pijte čaj.

čtyři) třídy, které definují různé možnosti zarovnání textu. Pro všechny prvky

nastavíme barvu pozadí na rgba(0, 255, 0, .1) .

Výsledek našeho příkladu:

Odsazení prvního řádku

Pokud otevřete téměř jakoukoli knihu obsahující textové informace, můžete si všimnout, že první řádek každého odstavce je zpravidla odsazený (červená čára).

Pokud potřebujete dát dokumentu vzhled podobný tisku, použijte vlastnost CSS, jako je text-indent .

Můžete použít jakékoli relativní jednotky měření, které ve svém dokumentu používáte, buď pixely, nebo hodnoty, které závisí na velikosti základního písma (např. em).

Upozorňujeme, že v některých situacích může být nutné použít záporné odsazení prvního řádku vlastnost text-indent umožňuje použití záporných hodnot, v takovém případě je řádek posunut v opačném směru.

Podívejme se na příklad použití této vlastnosti:

Příklad použití vlastnosti text-indent

Jezte více těchto měkkých francouzských rohlíků a pijte čaj. Jezte více těchto měkkých francouzských rohlíků a pijte čaj. Jezte více těchto měkkých francouzských rohlíků a pijte čaj. Jezte více těchto měkkých francouzských rohlíků a pijte čaj.

V tomto příkladu jsme vytvořili 4 ( čtyři) styl a aplikoval je jeden po druhém čtyři odstavce. Pro První odstavec nastaven na výchozí hodnotu odsazení ( 0 ), Pro druhý nastavit odsazení 40 pixelů, Pro Třetí indikované negativní odsazení ( -20 pixelů), v důsledku toho se odstavec přesunul mimo okno prohlížeče a pro Čtvrtý odstavec odsazený rovný 50% .

Upozorňujeme, že pokud použijete procentuální hodnoty, odsazení závisí na šířce nadřazeného prvku, ve kterém je odstavec umístěn.

Výsledek našeho příkladu:

Rýže. 61 Příklad použití vlastnosti text-indent (červená čára).

Nastavení řádkování

Při práci s textem je často potřeba umístit řádky odstavce blíže k sobě, nebo naopak - roztáhnout je. Vzdálenost mezi základními liniemi sousedních čar se nazývá vedoucí nebo řádkování .

V CSS je vlastnost line-height zodpovědná za řádkování (proklad). Čím vyšší je hodnota této vlastnosti, tím větší je mezera mezi řádky.

Upozorňuji na skutečnost, že při nastavování hodnoty výšky řádku pomocí jednotek pixelů bude velikost řádkování přímo záviset na velikosti písma, to znamená, že se automaticky upraví v poměru ke změně velikosti písma vlastnost (velikost písma), o které jsme pojednávali v předchozím článku .

Zpravidla ve všech moderních prohlížečích výchozí výška řádku je 120 %.

Řádkování se vypočítá takto:

Výška řádku ( výška čáry) mínus výška písma ( velikost písma)

Například velikost písma je 20 pixelů a výšku řádku 150% (30 pixelů). Tak se ukazuje:

Výška řádku ( 150 % nebo 30 pixelů) mínus výška písma ( 20 pixelů) = 10px

Je možné nastavit velikost výšky řádku pomocí číselné hodnoty. Reklama vypadá takto:

volič(výška řádku: 1,5;)

Jak vidíte, jednotky měření nejsou uvedeny a číslo funguje jako násobitel. Při použití číselných hodnot se řádkování vypočítá takto:

Číselná hodnota * velikost písma

Například písmo odstavce je nastaveno na 2 em, a výška řádku je uvedena jako 1.5 :

p(velikost písma: 2em; výška řádku: 1,5;)

Vypočítaná hodnota řádkování v našem případě bude 3 em:

Číselná hodnota( 1.5 ) * velikost písma( 2 em) = 3 em

Ve většině případů je použití multiplikátoru velmi výhodné, protože prvky dědí hodnoty řádkování nadřazeného prvku. výška řádku:

Příklad použití vlastnosti line-height

Odstavec s výškou řádku: 10px

Odstavec, ve kterém je výška řádku: normální

Odstavec, ve kterém výška řádku: 150 %

Odstavec, ve kterém výška řádku: 2

V tomto příkladu jsme se podívali na způsoby, jak určit výšku řádku v pixelech, procentech a pomocí multiplikátoru.

Výsledek našeho příkladu:

Rýže. 62 Příklad použití vlastnosti line-height (nastavení řádkování).

Mezery mezi slovy a znaky

Při návrhu stránek na webu musíte upravit mezery nejen mezi řádky, ale i mezi jednotlivými slovy či znaky. Například zmenšením mezery mezi znaky bude dlouhý nadpis kompaktnější, nebo naopak zvětšením mezery bude vypadat roztaženější.

Chcete-li nastavit konkrétní mezery mezi znaky, musíte použít vlastnost CSS pro mezery mezi písmeny. Při práci s vlastností používejte relativní jednotky CSS ( em, rem, px a tak dále). Jsou povoleny kladné i záporné hodnoty. Kladné hodnoty odpovídajícím způsobem zvětšují mezery mezi znaky a záporné hodnoty je zmenšují, až se písmena a symboly vrství na sebe.

Podívejme se na příklad použití vlastnosti letter-spacing:

Příklad použití vlastnosti letter-spacing

class = "test" > mezera mezi písmeny: -1px

mezery mezi písmeny: normální

mezera mezi písmeny: 2px

mezera mezi písmeny: 1 em

V tomto příkladu jsme se podívali na způsoby, jak určit mezery mezi znaky v textu v pixelech (kladné i záporné hodnoty) a jednotkách em.

Výsledek našeho příkladu:

Mezery mezi jednotlivými slovy můžete nastavit pomocí vlastnosti CSS s podobným názvem – word-spacing. Podobně jako u vlastnosti letter-spacing použijte relativní jednotky CSS ( em, rem, px a tak dále). Jsou povoleny kladné i záporné hodnoty. Kladné hodnoty odpovídajícím způsobem prodlužují interval mezi slovy a záporné hodnoty jej zkracují, dokonce až do té míry, že slova na sebe vrství.

Podívejme se na příklad použití vlastnosti word-spacing:

Příklad použití vlastnosti word-spacing

V tomto příkladu jsme se podívali na způsoby, jak určit mezery mezi slovy v textu v pixelech (záporná hodnota) a jednotkách em.

Výsledek našeho příkladu:

Textová dekorace

Vlastnost CSS text-decoration nám dává možnost přidat do textu takové typy dekorace, jako jsou:

podtržení
přeškrtnout
řádek nad textem

Jedním z nejběžnějších použití této vlastnosti je však zrušení dekorace a s vlastností text-decoration musíte použít klíčové slovo none:

A { /* pomocí voliče typu vyberte všechny hypertextové odkazy */ text-dekorace: žádná; /* odstranit ozdobu textu */ }

V tomto příkladu jsme odstranili dekoraci (podtržení) ze všech hypertextových odkazů. Kompletní seznam klíčových slov pro vlastnost text-decoration je uveden v této tabulce:

Vezměte prosím na vědomí, že většina uživatelů spojuje podtržený text s hypertextovým odkazem a přeškrtnutý text s odstraněným textem, takže pokud je to opravdu nutné, použijte dekoraci.

V jedné deklaraci můžete použít více hodnot:

text-decoration : podtržení prolínání ; /* definuje řádek pod textem a řádek přes text */

Podívejme se na příklad použití vlastnosti text-decoration na text:

Příklad použití vlastnosti text-decoration

Text-dekorace: podtržení;

Text-dekorace: overline;

Text-decoration: line-through;

Text-dekorace: podtržení nadtržení;

V tomto příkladu jsme vytvořili čtyři různé styly a aplikovali je postupně na každý odstavec. V První do odstavce přidána textová dekorace - řádek zdola (hodnota podtržení), in druhý dekorace textu - řádek nahoře (hodnota podtržení), in Třetí výzdoba textu je průchozí a dovnitř Čtvrtý dvojitá textová dekorace - čára nahoře a dole (podtržení hodnot podtržení).

Výsledek našeho příkladu:

Rýže. 65 Příklad použití vlastnosti text-decoration (dekorace textu v CSS).

Velká a malá písmena

CSS poskytuje možnost převést jakýkoli text na velká nebo malá písmena a převést první písmeno každého slova na velká. Vlastnost text-transform řídí velikost písmen v tabulce níže:

Podívejme se na příklad použití vlastnosti text-transform na text:

Příklad použití vlastnosti text-transform

V tomto příkladu jsme vytvořili tři různé styly a aplikovali je na každý odstavec jeden po druhém. V prvním odstavci byly první znaky každého slova převedeny na velká písmena (hodnota velkých písmen), ve druhém byly všechny znaky převedeny na velká (hodnota velkých písmen) a ve třetím na malá písmena (hodnota malých písmen).

Rýže. 66 Příklad použití vlastnosti text-transform (změna velikosti písmen v textu).

Velká písmena v CSS

Malá velká písmena nebo velká (anglicky) malá čepice) - styl písma, ve kterém malá písmena vypadají jako zmenšená velká písmena. Chcete-li vytvořit takový styl, použijte vlastnost CSS font-variant s následující syntaxí:

volič(varianta písma: malá písmena; /* nastavit velké písmo */ }

Podívejme se na příklad použití:

Příklad použití vlastnosti font-variant

Odstavec se zobrazí normálním písmem.

Malá písmena jsou nastavena na malá velká písmena.

V tomto příkladu je první odstavec ponechán beze změny a vlastnost font-variant s hodnotou malých písmen je aplikována na druhý, díky čemuž bude text zobrazen malými písmeny (malá písmena jsou nastavena na malá velká písmena).

Text v tomto článku se zaměřuje na různé způsoby formátování CSS, které se liší od různých způsobů organizace CSS. V zásadě jsou si tyto koncepty podobné, ale osobně se mi zdá, že organizace CSS je zodpovědnější za to, jak jsou prvky CSS seskupeny a uspořádány, což vám umožní rychle a pohodlně najít a upravit potřebné pasáže.

Formátování nemá nic společného s funkcemi CSS. To jen proto, aby kód získal esteticky atraktivní vzhled. Pravda, to neznamená, že formátování není vůbec důležité. To je stejné, jako když říkáte, že pro umělce nezáleží na tom, na jaké plátno maluje. To ovlivňuje pohodlí při psaní kódu CSS, snadnost prohlížení kódu a jeho další úpravy.

Protože existuje mnoho různých způsobů formátování CSS, neexistují žádná pevná a rychlá pravidla týkající se mezer a zalamování řádků. Například:

Div (šířka: 50px)
Toto je stejné jako:

Div(šířka:50px)
Jako:

}
Víceřádkové formátování

Navigace_rss_icon (
pozice: absolutní;
vlevo: 940px;
dole: 0px;
}
#navigation_rss (
pozice: absolutní;
vlevo: 720px;
text-transform: velká písmena;
barva: #897567;
výška řádku: 2,5 em;
}
#navigation_rss li (
zobrazení: inline;
}

barva: #fffffe;
text-dekorace: žádná;
odsazení: 0px 2px;
mezera mezi písmeny: -0,05em;
}
#navigation_rss li a:hover (
barva: #eed2a1;
text-dekorace: žádná;
}
Vsadím se, že toto je nejčastěji používaná možnost. Čte se velmi snadno, protože je prezentována v krátkých pasážích, a proto jsou vyučované články nejčastěji formátovány tímto způsobem. Ve výše uvedeném příkladu není mezi uzavírací závorkou a následující pasáží žádný prázdný řádek, a to je ten, který se ve skutečnosti používá nejčastěji.

Víceřádkové formátování s odstavováním

Navigace_rss_icon (
pozice: absolutní;
vlevo: 940px;
dole: 0px;
}
#navigation_rss (
pozice: absolutní;
vlevo: 720px;
rodina písem: Verdana, Arial, Helvetica, sans-serif;
text-transform: velká písmena;
barva: #897567;
výška řádku: 2,5 em;
}
#navigation_rss li (
zobrazení: inline;
}
#navigation_rss li a:link, #navigation_rss li a:navštíveno (
barva: #fffffe;
text-dekorace: žádná;
odsazení: 0px 2px;
mezera mezi písmeny: -0,05em;
}
#navigation_rss li a:hover (
barva: #eed2a1;
text-dekorace: žádná;
}
Zvýrazněný blok znamená, že tato pasáž je nějak specifická a důležitá než předchozí pasáže a také zobrazuje podřízené prvky.

Jednořádkové formátování

Div.wrapper ( margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 )
ul.nav ( position:absolute; top:0; left:430px; padding:120px 0 0 0 )
ul.nav li ( display:inline; margin:0 10px 0 0 )
div.column ( float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px )
div.post_wrapper ( background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) dole uprostřed bez opakování; margin:0 0 40px 0; padding:0 0 40px 0 )
div.wrapper img, div.wrapper a img, div.article_illustration_mini ( background:#d3d4cb; padding:10px; border:1px solid #999 )
div.wrapper a:hover img ( background:#fff )
Toto je pravděpodobně nejekonomičtější varianta, protože veškerý kód je komprimován do jednoho souvislého textu, bez jakýchkoli mezer a nových řádků. Je pravda, že tato metoda bude vyžadovat neustálé posouvání, vertikální i horizontální, pokud chcete kód upravit. Tento způsob navíc vypadá dost nevzhledně a pokud budete v budoucnu potřebovat kód upravit, bude pro vás pravděpodobně extrémně obtížné najít požadovanou pasáž.

Jednořádkové formátování s tabulátory

p, li, dd ( písmo: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; okraj: 0 0 15px 0; barva: #5e5d5d; )
td, th ( písmo: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; zarovnání textu: vlevo; )
Jednořádkové formátování s odstavováním

Zvýrazněná část kódu označuje, že obsahuje informace, které jsou potomkem informací z předchozího odstavce.

Normální formátování na jeden řádek

Obecně preferuji jednořádkové formátování, ale použijte zalomení řádku v textovém editoru, aby ty dlouhé řádky netrvaly věčně, ale spíše se vešly do okna editoru. U zvláště dlouhých řádků s mnoha různými pasážemi však používám pevný konec řádku pro přepnutí na nový řádek s atributy.

H1, h2, h3 ( font: 24px Helvetica, Sans-Serif; okraj: 0 0 10px 0; )
h1 (velikost písma: 36px; )
h2 (velikost písma: 30px; )
h2 a, h2 a:navštíveno ( barva: #2e2e2e; )
h2 a:hover ( barva: #fe4902; border-bottom: 1px tečkovaný #2e2e2e; )
p, li, dd ( písmo: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
okraj: 0 0 15px 0; barva: #5e5d5d; )
td, th ( písmo: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
text-align: left; )
Variace

Formátování jednoho řádku lze provést jednoduchým otevřením následující závorky na stejném řádku, což je také často vidět v kódu PHP:

Div
{
odsazení: 10px;
}
Ve víceřádkovém formátování s tabulátory můžete vidět úvodní závorku jako oddělovač:

#content-area ol ( margin: 15px 0 0 25px; list-style: decimal; )
#content-area ol ol ( styl seznamu: nižší-alfa; )
#content-area ul ( margin: 0 0 0 5px; list-style: none; )
#content-area ul li ( padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; )
#content-area ul ul ( margin: 15px 0 0 25px; list-style: disc; )
#content-area ul ul li ( pozadí: žádné; výplň: 0; )
Kombinace

Kombinace víceřádkového a jednořádkového formátování může vést pouze k tomu, že podobné atributy budou seskupeny na stejném řádku:

Navigace_rss_icon (
pozice: absolutní;
nahoře: 10px; vlevo: 10px; dole: 10px; vpravo: 10px;
velikost písma: 12px; váha písma: tučné;
}
Čitelnost vs. Posouvání

Vaše volba formátování by měla být založena na čitelnosti kódu. Musíte rychle a pohodlně procházet kódem, abyste mohli naléhavě opravit tento nebo ten segment. Pokud máte pocit, že jednořádkové formátování je pro vaše oči příliš náročné a ztěžuje vám pochopení toho, co se kam v kódu nachází, pak je samozřejmě nejlepší se této možnosti vyhnout.

Obecně si myslím, že možnost víceřádkového formátování lze pro konkrétní část kódu snadno najít, ale řádek po řádku takový dokument zabírá mnohem více místa, 5-8krát. Celkově ale tyto dokumenty považuji za méně čitelné, protože je tu nepříjemné vertikální posouvání a musíte spěchat z jednoho kusu kódu do druhého. Zatímco formátování na jednom řádku je někdy i mnohem pohodlnější díky tomu, že většinu kódu máte na očích.

Za nejlepší možnost formátování se pro vás považuje ta, která poskytuje větší čitelnost a méně rolování. Obecně se podívejte na své vlastní pocity pohodlí.

Milujete svůj CSS kód stejně jako já? Pokud ano, pak se samozřejmě snažte o to, aby se nejen choval a cítil dobře, ale také hezky vypadal.
Doufám, že níže popsané nástroje pomohou vašemu kódu přiblížit se ideálu.

1. Styleat

Pravděpodobně nejjednodušší služba prezentovaná v recenzi.
Nástroj nemá mnoho možností:

Seřadit vlastnosti podle abecedy
Řazení voličů podle abecedy (pokud je zaškrtnuto „Bezpečně uspořádat“, tato možnost není dostupná)
Možnost volby stylu formátování: víceřádkový nebo jeden řádek
Dokáže stáhnout CSS soubory zahrnuté pomocí , do hlavního souboru a nemilosrdně je zpracovat
Kód můžete odeslat ke zpracování pomocí: textového pole, nahráním souboru nebo poskytnutím odkazu na CSS
Výsledek lze získat jako CSS kód nebo nahrát soubor

2.Formát CSS

I přes svůj hrozivý vzhled si nástroj dobře poradí se svými funkcemi, kterých má dostatek.
Můžete toho nakonfigurovat hodně:

umístění mezer/tabulátorů/nových řádků,
vlastnosti řazení a názvy selektorů,
převod názvů vlastností a selektorů na malá písmena atd.

Co se mi na této službě obzvlášť líbilo: schopnost formátovat dílčí pravidla pomocí „žebříku“ (považuji to za velmi pohodlný způsob organizace stylů).

3. CleanCSS

Poměrně výkonný nástroj, který nám poskytuje mnoho možností:

CSS můžete zkopírovat a vložit do pole „Kód CSS“ nebo jako odkaz na soubor stylu
Výsledek můžete získat jako text nebo jako soubor.
Uživatel má na výběr 4 typy formátování zdroje: kód lze optimalizovat pro nejmenší velikost nebo naopak pro lepší čitelnost. V poli „Vlastní šablona“ je možné nastavit formátovací šablonu
Schopnost kombinovat pravidla a redukovat evidenci majetku do krátké podoby
V případě potřeby odstraňte komentáře a neplatné definice
Stejně jako výše popsané služby vám ochotně seřadí vše, po čem vaše srdce touží, podle abecedy a převede to na malá/velká písmena

Mimochodem, tato služba je založena na motoru „ “.- open source analyzátor/optimalizátor CSS. Každý si tak může na jeho podstavci libovolně vyobrazit svou vlastní krásu s blackjackem a přepínači.
UPD> V komentářích navrhli odkaz na dvojče této služby: CodeBeautifier. Sada funkcí je téměř totožná s CleanCSS (služba běží i na CSSTidy).

4.ProCSSor

Podle mého zkušeného názoru je to nejpohodlnější ze všech prezentovaných v této recenzi.
Služba vítá uživatele příjemným rozhraním a velmi jasnými vyskakovacími tipy, které vám umožní rychle pochopit nastavení.
Jako každý sebeúctyhodný zkrášlovač od nás ProCSSor přijme kód ve vstupním poli ve formě souboru nebo odkazu. Odešle výsledek do prohlížeče a zobrazí odkaz pro stažení souboru.
Nástroj má dostatek nastavení, aby potěšil téměř každého uživatele, nedává příliš smysl - je lepší to hned vyzkoušet.
Příjemnou vlastností služby je možnost uložit vaše nastavení, takže příště můžete přeskočit krok nastavení a přejít přímo k procesu rafinace.
Další atrakce - ProCSSor poskytuje API, dokumentaci naleznete zde:

Někdy náš kód není vždy dokonalý. A opravdu chci, aby to bylo nejen funkční, ale také krásně navržené a naformátované. Čas je naším hlavním nepřítelem, jen zřídka nám umožňuje dodržovat pravidla návrhu kódu. Snažíme se rychle dodělat layout, případně popsat tucet CSS stylů a děláme to na úkor čitelnosti. V tomto článku uvedu seznam služeb, které vám pomohou naformátovat kód tak, aby byl příjemný na pohled.

Měli byste důvěřovat programu nebo dělat vše ručně?

Jistě máte otázku: jak zajistit, aby byl kód čitelný? Dokáže program správně uspořádat všechna odsazení a zalomení řádků tak, aby lidské oko dostalo ze sledování kódu pouze estetické potěšení? Samozřejmě, že může! Nenechte se mýlit, protože robot v podstatě dělá práci za vás, bude se dělat „nanečisto“. Služby, které budou představeny v článku níže, mě nejednou zachránily. Například v situacích, kdy bylo nutné zkopírovat stejný html kód z jiného webu a při vkládání tagů byly jednoduše umístěny v nějakém chaotickém pořadí podél řádků: spousta tabulátorů, nelogické zalomení řádků, absolutně žádné hnízdění bylo vidět! To je asi mnohým známé. A opravdu chci, aby vaše webové stránky vypadaly jinak: úhledné a snadno čitelné. Koneckonců, v první řadě to děláme pro sebe, pro pohodlí další podpory toho či onoho kódu.

Pojďme naformátovat váš kód

Méně mluvte, více pracujte. Jak ukázala praxe, formátování kódu online je poměrně jednoduché. Vše, co musíte udělat, je zkopírovat svůj špinavý kód a vložit jej do speciálních textových polí na jedné z uvedených stránek. Pak stiskněte tlačítko, chvíli počkejte a - voila! Získáte krásný, naformátovaný a snadno čitelný kód.

Zde je seznam všech kódových "čističů", které znám pro různé jazyky.

Oblíbené v kategorii: