10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut

reklama

Jakmile začnete fušovat do HTML, pravděpodobně budete mít zájem o zvýšení výkonu svých webových stránek. CSS je nejlepší způsob, jak toho dosáhnout. CSS umožňuje provádět změny na celé stránce, aniž byste se museli spoléhat na vložený styl.

Zde je několik jednoduchých příkladů CSS, které vám ukážou, jak provést některé základní změny stylu na vaší webové stránce.

1. Základní kód CSS pro snadné formátování odstavců

Styling s CSS znamená, že nemusíte určovat styl pokaždé, když vytvoříte prvek. Stačí říct „všechny odstavce by měly mít tento konkrétní styl“ a je dobré jít.

Řekněme, že chcete každý odstavec (

, jeden z Značky HTML, které by měl každý znát) být o něco větší než obvykle. A tmavě šedý text, místo černého. Kód CSS je:

p {velikost písma: 120%; barva: dimgray; }

Jednoduchý! Nyní, kdykoli prohlížeč vykreslí odstavec, text zdědí velikost (120 procent normální) a barvu („dimgray“).

Pokud jste zvědaví, jaké barvy prostého textu můžete použít, podívejte se na toto Seznam barev CSS od Mozilly.

2. Změnit velikost písmen

Chcete vytvořit označení odstavců, které by měly být psány malými písmeny? Ukázka CSS by byla:

p.smallcaps {font-variant: small-caps; }

Chcete-li vytvořit odstavec, který je zcela malý, použijeme mírně odlišnou značku HTML. Vypadá to takto:

Váš odstavec zde.

Přidání tečky a názvu třídy do prvku určuje podtyp tohoto prvku definovaného třídou. Můžete to udělat s textem, obrázky, odkazy a téměř cokoli jiného.

Pokud chcete změnit velikost textu na konkrétní případ, použijte tyto příklady CSS:

textová transformace: velká písmena; textová transformace: malá písmena; textová transformace: velká písmena;

Poslední kapitalizuje první písmeno každé věty.

3. Změnit barvy odkazu

Změny stylu se neomezují pouze na odstavce. K odkazu lze přiřadit čtyři různé barvy: jeho standardní barvu, navštívenou barvu, barvu vznášejícího se a aktivní barvu (která se zobrazuje, když na něj kliknete). Zde je kód CSS pro tyto uživatele:

a: link {color: grey; } a: navštíveno {barva: zelená; } a: hover {color: purple; } a: active {color: teal; }

U odkazů následuje každé „a“ dvojtečka, nikoliv tečka.

Každé z těchto prohlášení mění barvu odkazu v konkrétním kontextu. Není nutné měnit třídu odkazu, aby bylo možné změnit barvu.

4. Odstranit podtržení odkazu

Přestože podtržený text jasně naznačuje odkaz, někdy to vypadá hezčí, když podtržení zrušíte. Toho je dosaženo atributem „textové dekorace“. Tyto příklady CSS ukazují, jak odstranit podtržení z odkazů:

a {text-decoration: none; }

Všechno se značkou odkazu („a“) zůstane podtrženo. Chcete ji podtrhnout, když na ni uživatel přejde? Stačí přidat:

a: hover {text-decoration: underline; }

Tuto textovou ozdobu můžete také přidat k aktivním odkazům, abyste zajistili, že podtržení nezmizí po kliknutí na odkaz.

5. Vytvořte tlačítko odkazu pomocí kódu CSS

Chcete na svůj odkaz přilákat více pozornosti? Tlačítko odkazu je skvělý způsob, jak toho dosáhnout. Tento řádek vyžaduje několik dalších řádků, ale každý z nich přejdeme jednotlivě:

a: link, a: navštíveno, a: hover, a: active {background-color: green; barva bílá; čalounění: 10px 25px; zarovnání textu: střed; textové dekorace: žádné; display: inline-block; }

Zahrnutí všech čtyř stavů odkazů zajistí, že tlačítko nezmizí, když na něj uživatel umístí kurzor nebo klikne. Můžete také nastavit různé parametry pro přechody a aktivní odkazy, např. změna barvy tlačítka nebo textu.

Barva pozadí je nastavena barvou pozadí a barva textu barvou. Výplň definuje velikost rámečku - text je výplň svisle 10px a vodorovně 25px.

Zarovnání textu zajišťuje, že text bude zobrazen ve středu tlačítka namísto vypnutí na jednu stranu. Textová dekorace, jak jsme viděli v posledním příkladu, odstraní podtržení.

Kód CSS „display: inline-block“ je o něco složitější. Stručně řečeno, umožňuje nastavit výšku a šířku objektu. Zajišťuje také, že po vložení začne nový řádek.

6. Vytvořte textové pole

Prostý odstavec není příliš vzrušující. Pokud chcete na stránce zvýraznit prvek, můžete přidat ohraničení. Postupujte s tímto řetězcem kódu CSS:

p.důležité {border-style: solid; šířka okraje: 5px; barva okraje: fialová; }

Tenhle je jednoduchý. Vytváří pevné fialové ohraničení, široké pět pixelů, kolem každého důležitého odstavce. Chcete-li, aby odstavec zdědil tyto vlastnosti, stačí to prohlásit takto:

Váš důležitý odstavec zde.

To bude fungovat bez ohledu na to, jak velký odstavec je.

Existuje mnoho různých stylů ohraničení, které můžete použít; místo „pevné“ zkuste „tečkované“ nebo „dvojité“. Mezitím může být šířka „tenká“, „střední“ nebo „silná“. CSS kód může dokonce definovat tloušťku každého ohraničení jednotlivě, například takto:

šířka okraje: 5px 8px 3px 9px;

Výsledkem je horní hranice pěti pixelů, pravá hranice 8, dolní tři a velikost levého okraje devět pixelů.

7. Zarovnat na střed prvky

Pro velmi běžný úkol je centrování prvků s kódem CSS překvapivě neintuitivní. Jakmile to jednou uděláte, stane se to mnohem jednodušší. Máte několik různých způsobů, jak soustředit věci.

Pro prvek bloku (obvykle obrázek) použijte atribut okraj:

.center {display: block; marže: auto; }

Tím je zajištěno, že se prvek zobrazí jako blok a že okraj na každé straně je nastaven automaticky. Pokud chcete vystředit všechny obrázky na dané stránce, můžete do značky img přidat dokonce „margin: auto“:

img {margin: auto; }

Chcete-li zjistit, proč to funguje tímto způsobem, podívejte se na Vysvětlení modelu CSS boxu na W3C.

Ale co když chceme soustředit text na CSS? Použít tento ukázkový CSS:

.centertext {text-align: center; }

Chcete použít třídu „centertext“ pro centrování textu v odstavci? Jednoduše přidejte tuto třídu do

štítek:

Tento text bude vycentrován.

8. Příklady CSS pro úpravu vycpávky

Výplň prvku určuje, kolik prostoru by mělo být na každé straně. Například, pokud přidáte 25 pixelů výplně na dno obrázku, následující text bude posunut o 25 pixelů dolů. Mnoho prvků může mít výplň, nejen obrázky.

Řekněme, že chcete, aby každý obrázek měl na levé a pravé straně čalounění 20 pixelů a nahoře a dole 40 pixelů. Nejzákladnější provedení je:

img {padding-top: 40px; padding right: 25px; čalounění: 40px; padding-left: 25px; }

Existuje zkratkový kód CSS, který můžeme použít k prezentaci všech těchto informací na jednom řádku:

img {padding: 40px 25px 40px 25px; }

Tím nastavíte horní, pravé, dolní a levé výplně na správné číslo. Díky použití pouze dvou hodnot (40 a 25) to můžeme ještě zkrátit:

img {padding: 40px 25px}

Při použití pouze dvou hodnot je první hodnota nastavena pro horní a dolní, zatímco druhá bude vlevo a vpravo.

9. Zvýrazněte řádky tabulky

Díky kódu CSS vypadají tabulky mnohem hezčí než výchozí tabulky. Přidání barev, úprava okrajů a přizpůsobení stolu mobilním obrazovkám jsou snadné. Zde se podíváme na jeden skvělý efekt: zvýraznění řádků tabulky, když na ně přejdete myší.

Zde je kód, který budete potřebovat:

tr: hover {background-color: #ddd; }

Nyní, kdykoli umístíte kurzor myši na buňku tabulky, změní se tento řádek barvy. Chcete-li vidět některé další skvělé věci, které můžete udělat, podívejte se na Stránka W3C na efektních tabulkách CSS.

10. Přesouvání obrázků mezi průhlednými a neprůhlednými

CSS kód vám také pomůže udělat skvělé věci s obrázky. Zde je příklad CSS, který zobrazuje obrázky s menší než úplnou neprůhledností, takže vypadají mírně „vybledlé“. Když umístíte kurzor myši na obrázky, budou zcela neprůhledné:

img {krytí: 0,5; filtr: alfa (opacity = 50); }

Atribut „filtr“ dělá to samé jako „opacity“, ale Internet Explorer 8 a starší měření měření opacity nerozpoznávají. U starších prohlížečů je vhodné jej zahrnout.

Nyní, když jsou obrázky mírně průhledné, přivedeme je po přejetí myší zcela neprůhledně:

img: hover {krytí: 1,0; filtr: alfa (opacity = 100); }

10 příkladů CSS se zdrojovým kódem

S těmito příklady kódu CSS byste měli mít mnohem lepší představu o tom, jak CSS funguje. Šablony CSS může pomoci, ale pochopení prvotních prvků je zásadní.

10 příkladů snadného kódu CSS, na které jsme se podívali:

1. Snadné formátování odstavců
2. Změnit velikost písmen
3. Změnit barvy odkazu
4. Odstranit podtržení odkazu
5. Vytvořte odkazové tlačítko
6. Vytvořte textové pole
7. Zarovnat na střed prvky
8. Upravte výplň
9. Zvýrazněte řádky tabulky
10. Vytvářejte neprůhledné obrázky

Když si je znovu prohlédnete, všimnete si několika vzorů, které můžete použít pro budoucí kód. A to je, když víte, že jste se opravdu začali stát mistrem CSS. Ale pamatovat si to může být těžké. Možná budete chtít tuto stránku uložit jako záložku pro budoucí použití. Měli byste také Naučte se, jak zkontrolovat, vyčistit a optimalizovat váš CSS.

Chcete-li si rychle zapamatovat některé z věcí, které jste se zde naučili, nezapomeňte se podívat na naše Podvádět vlastnosti CSS3 Základní Cheat Sheet CSS3Zvládněte základní syntaxi CSS pomocí našeho cheatového listu vlastností CSS3. Přečtěte si více .