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

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

Jakmile začnete fušovat do HTML, pravděpodobně vás bude zajímat přidání většího vizuálního úderu na vaše webové stránky. CSS je nejlepší způsob, jak to udělat. CSS vám umožňuje aplikovat změny na celou stránku, 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 na své webové stránce provést některé základní změny stylu.



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

Styling pomocí CSS znamená, že nemusíte zadávat styl pokaždé, když vytvoříte prvek. Můžete jen říci „všechny odstavce by měly mít tento konkrétní styl“ a můžete jít.





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

, jeden ze značek HTML, které by měl každý znát), aby byl o něco větší než obvykle. A s tmavě šedým textem místo černé.

Příbuzný: Cheat Sheet HTML



Kód CSS pro toto je:

p { font-size: 120%; color: dimgray; }

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



Pokud vás zajímá, jaké barvy prostého textu můžete použít, podívejte se na toto Seznam barev CSS z Mozilly.

2. Příklad CSS pro změnu velikosti písmen

Chcete vytvořit označení pro odstavce, 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 psán malými písmeny, použijte trochu jinou značku HTML. Jak to vypadá:

Your paragraph here.

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

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

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Poslední velké malé písmeno první věty.

Změny stylu nejsou omezeny na odstavce. Odkazu lze přiřadit čtyři různé barvy: standardní barvu, navštívenou barvu, barvu při přechodu a aktivní barvu (která se zobrazí, když na ni kliknete). Použijte tento ukázkový kód CSS:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

U odkazů za každým 'a' následuje dvojtečka, nikoli tečka.

Každá z těchto deklarací mění barvu odkazu v konkrétním kontextu. Není nutné měnit třídu odkazu, aby změnil barvu.

Zatímco podtržený text jasně označuje odkaz, někdy vypadá hezčí toto podtržení sešrotovat. Toho je dosaženo pomocí atributu 'text-decoration'. Tento příklad CSS ukazuje, jak odstranit podtržení u odkazů:

a { text-decoration: none; }

Cokoli se značkou link ('a') zůstane podtrženo. Chcete jej podtrhnout, když na něj uživatel najede myší? Jednoduše přidejte:

a:hover { text-decoration: underline; }

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

Chcete na svůj odkaz upoutat více pozornosti? Tlačítko odkazu je skvělý způsob, jak toho dosáhnout. Tenhle vyžaduje ještě několik řádků:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Pojďme si vysvětlit tento ukázkový kód CSS.

Zahrnutím všech čtyř stavů odkazu zajistíte, že tlačítko nezmizí, když na něj uživatel umístí kurzor nebo na něj klikne. Můžete také nastavit různé parametry pro vznášení a aktivní odkazy, např. Změnou barvy tlačítka nebo textu.

Barva pozadí je nastavena na barvu pozadí a barva textu na barvu. Padding definuje velikost rámečku --- text je vyplněn 10px svisle a 25px vodorovně.

Zarovnání textu zajišťuje, že text bude zobrazen uprostřed tlačítka, nikoli na jedné straně. Textová dekorace, jako v posledním příkladu, odstraní podtržení.

jak odstranit trojský virus z Windows 10

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. Rovněž zajišťuje, že po vložení spustí nový řádek.

6. Příklad kódu CSS pro vytvoření textového pole

Prostý odstavec není příliš vzrušující. Chcete -li na stránce zvýraznit prvek, můžete přidat ohraničení. Zde je postup, jak to provést pomocí řetězce jednoduchého kódu CSS:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Tenhle je přímočarý. Kolem odstavce důležité třídy vytvoří pevný fialový okraj o šířce pěti pixelů. Chcete -li, aby odstavec zdědil tyto vlastnosti, deklarujte jej takto:

Your important paragraph here.

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

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

border-width: 5px 8px 3px 9px;

Výsledkem je horní ohraničení pěti pixelů, pravé ohraničení osm, spodní tři a velikost levého okraje devět pixelů.

7. Prvky zarovnání na střed se základním kódem CSS

Pro běžný úkol je centrování prvků pomocí kódu CSS překvapivě neintuitivní. Jakmile to uděláte několikrát, bude to mnohem jednodušší. Máte několik různých způsobů, jak věci soustředit.

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

.center { display: block; margin: auto; }

Tím je zajištěno, že prvek je zobrazen jako blok a okraj na každé straně je nastaven automaticky. Pokud chcete vycentrovat všechny obrázky na danou stránku, můžete do tagu img přidat dokonce 'margin: auto':

img { margin: auto; }

Chcete -li zjistit, proč to takto funguje, podívejte se na Vysvětlení modelu CSS boxu na W3C .

Ale co když chcete vycentrovat text pomocí CSS? Použijte tento ukázkový CSS:

.centertext { text-align: center; }

Chcete použít třídu 'centertext' k vycentrování textu v odstavci? Jednoduše přidejte tuto třídu do

štítek:

This text will be centered.

8. Příklady CSS pro úpravu polstrování

Polstrování prvku určuje, kolik místa by mělo být na každé straně. Pokud například do spodní části obrázku přidáte 25 pixelů odsazení, bude následující text 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 20 pixelů výplně na levé a pravé straně a 40 pixelů nahoře a dole. Nejzákladnější spuštění kódu CSS je:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Existuje však kratší instrukce CSS, která zobrazuje všechny tyto informace na jednom řádku:

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

Tím nastavíte horní, pravou, spodní a levou výplň na správné číslo. Díky použití pouze dvou hodnot (40 a 25) ji můžete ještě zkrátit:

img { padding: 40px 25px }

Když použijete pouze dvě hodnoty, první hodnota je nastavena pro horní a dolní část, zatímco druhá bude vlevo a vpravo.

9. Zvýrazněte řádky tabulky s kódováním CSS

Díky kódu CSS vypadají tabulky mnohem hezčeji než výchozí mřížky. Přidání barev, úprava okrajů a přizpůsobení stolu mobilním obrazovkám je snadné. Tento jednoduchý příklad CSS ukazuje, jak zvýraznit řádky tabulky, když na ně najedete myší.

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

Nyní, kdykoli najedete myší na buňku tabulky, tento řádek změní barvu. Chcete -li vidět některé z dalších skvělých věcí, které můžete dělat, podívejte se na Stránka W3C o efektních tabulkách CSS .

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

Kód CSS vám také může pomoci dělat skvělé věci s obrázky. Zde je příklad CSS pro zobrazení obrázků s menší než plnou neprůhledností, takže vypadají mírně „vybledle“. Když na obrázky najedete myší, zobrazí se jejich plná neprůhlednost:

img { opacity: 0.5; filter: alpha(opacity=50); }

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

Nyní, když jsou obrázky mírně průhledné, je můžete po najetí myší úplně neprůhledné:

img:hover { opacity: 1.0; filter: alpha(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 porozumění základním prvkům je životně důležité.

Těchto 10 jednoduchých příkladů kódu CSS zrekapitulovaných:

  1. Snadné formátování odstavců
  2. Změňte velikost písmen
  3. Změňte barvy odkazu
  4. Odstranit podtržení odkazu
  5. Vytvořit odkaz
  6. Vytvořte textové pole
  7. Prvky zarovnání na střed
  8. Upravte polstrování
  9. Zvýrazněte řádky tabulky
  10. Vytvářejte obrázky neprůhledné

Když si je znovu prohlédnete, všimnete si několika vzorů, které můžete použít na budoucí kód. A to je, když víte, že jste se opravdu začali stávat CSS mistrem. Ale pamatovat si to může být těžké. Tuto stránku můžete přidat do záložek pro budoucí použití.

Podíl Podíl tweet E-mailem Cheat Sheet The Essential CSS3 Properties

Zvládněte základní syntaxi CSS s cheatem vlastností CSS3.

Číst dále Související témata
  • Programování
  • Webový design
  • CSS
  • Skriptování
O autorovi Christian Cawley(1510 článků publikováno)

Zástupce redaktora pro oblast bezpečnosti, Linuxu, kutilství, programování a techniky a opravdu užitečného výrobce podcastů s rozsáhlými zkušenostmi s podporou desktopů a softwaru. Christian, který přispívá do časopisu Linux Format, je drotář Raspberry Pi, milovník Lega a fanoušek retro her.

Více od Christiana Cawleyho

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru