Další informace o šablonách stylů CSS
Pojďme se podívat na další způsoby, jak můžou šablony stylů CSS usnadnit správu obsahu a váš obsah pro čtenáře zajímavější.
Komentáře
Stejně jako u každého počítačového jazyka podporuje css komentáře. K komentáři v části šablon stylů CSS byste použili /* comment */. Identifikuje /* začátek komentáře a */ označí konec. Komentář CSS může pokrýt více řádků textu. Komentáře představují skvělý způsob, jak nechat poznámky pro sebe nebo jiné vývojáře nebo si dělat poznámky při učení jazyka.
Důležité
Komentáře CSS jsou veřejné a přístupné jak prohlížečem, tak uživateli vašeho webu. Neukládejte citlivé informace do komentářů.
Komentáře CSS se formátují jinak než komentáře HTML. Komentáře v HTML používají syntaxi <!--comment--> .
Nastavení písem
Pomocí šablon stylů CSS můžete prohlížeči sdělit, jaké písmo chcete použít pro konkrétní text. Někdy chcete použít Arial pro čitelnost nebo něco, co je pro styl vhodné. Následující obrázek ukazuje nějaký text v Arialu a jiném textu v písmu s názvem "Dopad".
Nejběžnější možností nastavení písma na stránce je font-family.
font-family je obvykle nastavený na seznam písem, což prohlížeči umožňuje používat první písmo uvedené v seznamu, které může podporovat. Například nastavení pokusů o Tahoma, Verdana, sans-serif použití Tahoma, následované Verdanou a nakonec obecné bezpatkové písmo.
Můžete také použít další možnosti, jako je styl, váha a dekorace.
font-style se používá k kurzívě text nastavením hodnoty na italichodnotu .
font-weight podporuje různá nastavení tučným písmem, přičemž bold nejběžnější nastavení. A nakonec se text-decoration používá k underline, overlinenebo line-through textu.
| šablony stylů CSS | Výsledek |
|---|---|
font-weight: bold; |
Demoverze |
font-style: italic; |
Demoverze |
text-decoration: line-through; |
|
text-decoration se může lišit od ostatních možností použitých k úpravě zobrazení písma. Klíčovým rozdílem je použití text-decoration stylu kolem textu nebo textu, ale neupravuje samotné písmo. Písmo se upravuje tučným písmem a kurzívou.
Poznámka:
Obvykle byste se neměli používat podtržení na webové stránce, protože text se může jevit jako hypertextový odkaz.
Změna velikosti písma
Umožňuje font-size určit velikost písma, kterou chcete použít. Šablony stylů CSS nabízejí možnost použít absolutní nebo relativní velikost. Absolutní velikost se obvykle nastavuje v obrazových bodech a vždy se používá určená velikost. Relativní velikost může být založena na výchozí velikosti prohlížeče a měřeno v procentech nebo na základě velikosti referenčního prvku.
Poznámka:
Výchozí velikost písma pro mnoho prohlížečů je 16 pixelů.
Absolutní velikost lze měřit v pixelech a je označena v šabloně stylů CSS pomocí .px Pokud chcete nastavit písmo na 14 pixelů, můžete použít direktivu font-size: 14px;.
Relativní velikost písma se obvykle měří pomocí em nebo rem.
em je zkratka pro prvek a je relativní k nadřazené (em) nebo kořenové (rem). Kořen je html prvek.
1em nebo 1rem se rovná velikosti nadřazeného nebo kořenového prvku, zatímco 2em nebo 2em by byla velikost dvojnásobná. Vzhledem k tomu, že se velikosti obrazovky můžou lišit, je obvykle nejlepší použít relativní velikost, kdykoli je to možné.
Jako příklad zvažte následující kód HTML a CSS:
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
div Pokud je element 1em 14 obrazových bodů, protože rodič je div a nastaven na 14px, while by 1rem byl 18 obrazových bodů, protože html kořen je nastaven na 18px.
1.5em
div pro prvek by byl 21 pixelů (14 × 1,5 = 21) a 1.5rem byl by 27 pixelů (18 × 1,5 = 27). Při aktualizaci nadřazených nebo kořenových velikostí můžete zajistit emrem , aby se zbytek stránky škálovat.
Barvy
Barvu písma lze nastavit pomocí color vlastnosti.
color lze nastavit na hodnoty RGB (červené, zelené, modré) nebo na jednu z mnoha pojmenovaných barev, jako black nebo lightgray.
Hodnoty RGB v css mohou být šestnáctkové hodnoty s předponou #, nebo hodnoty 0 až 255 uvnitř rgb funkce. Chcete-li nastavit barvu na výchozí odstín hnědé, použijte color: brown;. Pro vlastní odstín fialové můžete použít color: #7462e0.
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Důležité
Výběr barev by měl vždy zvážit ty, kteří mají nedostatek barevného vidění. Pomocí nástrojů, jako je color Safe , můžete použít výběr kontrastních barev, abyste zajistili, že váš web bude přístupný všem uživatelům.
Jak můžete mít podezření, existují desítky dostupných pojmenovaných barev a hodnoty RGB nabízejí nekonečnou sadu možností. Editory, jako jsou vscode.dev nebo Visual Studio Code , vám můžou pomoct identifikovat dostupné hodnoty barev. Oba editory zobrazují náhled vzorku barev ve vašem CSS. Pokud na políčko najedete myší, zobrazí se nástroj pro výběr barvy, pomocí kterého můžete nastavit požadovanou barvu.
