10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Akonáhle začnete fušovať do HTML, pravdepodobne vás bude zaujímať pridať na svoje webové stránky vizuálnejší punc. CSS je najlepší spôsob, ako to urobiť. CSS vám umožňuje aplikovať zmeny na celú stránku bez toho, aby ste sa museli spoliehať na vložený štýl.





Tu je niekoľko jednoduchých príkladov CSS, ktoré vám ukážu, ako na svojej webovej stránke vykonať základné zmeny štýlu.



1. Základný kód CSS pre jednoduché formátovanie odsekov

Styling pomocou CSS znamená, že nemusíte zadávať štýl pri každom vytváraní prvku. Môžete jednoducho povedať „všetky odseky by mali mať tento konkrétny štýl“ a môžete ísť.





Povedzme, že chcete každý odsek (

, jeden z tagov HTML, ktoré by mal vedieť každý), aby bol o niečo väčší ako obvykle. A s tmavosivým textom, namiesto čierneho.

Súvisiace: Cheat Sheet HTML



Kód CSS je:

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

Jednoduché! Teraz, kedykoľvek prehliadač vykreslí odsek, text zdedí veľkosť (120 percent normálnej veľkosti) a farbu („šedé“).



Ak vás zaujíma, aké farby obyčajného textu môžete použiť, pozrite sa na to Zoznam farieb CSS z Mozilly.

2. Príklad CSS na zmenu veľkosti písmen

Chcete vytvoriť označenie pre odseky, ktoré by mali byť napísané malými písmenami? Vzorka CSS by na to bola:



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

Ak chcete odsek vytvoriť úplne malými písmenami, použite mierne odlišnú značku HTML. Ako to vyzerá:

Your paragraph here.

Pridanie bodky a názvu triedy k prvku určuje podtyp tohto prvku definovaného triedou. Môžete to urobiť pomocou textu, obrázkov, odkazov a čohokoľvek iného.

Ak chcete zmeniť skupinu textu na konkrétny prípad, použite tieto príklady kódu CSS:

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

Posledné písmeno robí veľké prvé písmeno každej vety.

Zmeny štýlu sa neobmedzujú iba na odseky. K odkazu môžu byť priradené štyri rôzne farby: štandardná farba, navštívená farba, farba pri vznášaní a aktívna farba (ktorá sa zobrazuje pri kliknutí na ňu). Použite tento ukážkový kód CSS:

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

Pri odkazoch za každým „a“ nasleduje dvojbodka, nie bodka.

Každé z týchto vyhlásení mení farbu odkazu v konkrétnom kontexte. Nie je potrebné meniť triedu odkazu, aby zmenil farbu.

Aj keď podčiarknutý text jasne naznačuje odkaz, niekedy vyzerá krajšie jeho podčiarknutie zrušiť. To sa dosahuje pomocou atribútu „text-decoration“. Tento príklad CSS ukazuje, ako odstrániť podčiarknutie odkazov:

a { text-decoration: none; }

Čokoľvek so značkou odkazu ('a') zostane podčiarknuté. Chcete ho podčiarknuť, keď naň používateľ prejde myšou? Stačí pridať:

a:hover { text-decoration: underline; }

Túto textovú dekoráciu môžete tiež pridať k aktívnym odkazom, aby sa podčiarknutie nezmizlo po kliknutí na odkaz.

Chcete na svoj odkaz upútať väčšiu pozornosť? Tlačidlo odkazu je skvelý spôsob, ako to urobiť. Tento vyžaduje niekoľko ďalších riadkov:

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; }

Vysvetlíme tento ukážkový kód CSS.

Zahrnutie všetkých štyroch stavov odkazu zaistí, že tlačidlo nezmizne, keď naň používateľ prejde alebo naň klikne. Môžete tiež nastaviť rôzne parametre pre umiestnenie kurzora a aktívne odkazy, napríklad zmenu tlačidla alebo farby textu.

Farba pozadia je nastavená na farbu pozadia a farba textu na farbu. Padding definuje veľkosť poľa --- text je vyplnený 10px zvisle a 25px vodorovne.

Zarovnanie textu zaisťuje, že sa text zobrazí v strede tlačidla, nie na jednej strane. Textová dekorácia, ako v poslednom prípade, odstráni podčiarknutie.

zakázané, že nemáte prístup

Kód CSS 'display: inline-block' je o niečo komplikovanejší. Stručne povedané, umožňuje vám nastaviť výšku a šírku objektu. Tiež zaisťuje, že po vložení začne nový riadok.

6. Príklad kódu CSS na vytvorenie textového poľa

Jednoduchý odsek nie je veľmi vzrušujúci. Ak chcete na svojej stránke zvýrazniť prvok, možno budete chcieť pridať orámovanie. Tu je postup, ako to urobiť pomocou reťazca jednoduchého kódu CSS:

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

Tento je priamočiary. Okolo odseku dôležitej triedy vytvorí pevný purpurový okraj so šírkou päť pixelov. Ak chcete, aby odsek zdedil tieto vlastnosti, deklarujte ho takto:

Your important paragraph here.

Bude to fungovať bez ohľadu na to, aký veľký je odsek.

Môžete použiť mnoho rôznych štýlov ohraničenia; namiesto výrazu „plné“ skúste „bodkované“ alebo „dvojité“. Medzitým môže byť šírka „tenká“, „stredná“ alebo „hrubá“. Kód CSS môže dokonca definovať hrúbku každého okraja jednotlivo, napríklad takto:

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

Výsledkom je horný okraj piatich pixelov, pravý okraj osem, spodok troch a veľkosť ľavého okraja deväť pixelov.

7. Prvky zarovnané na stred so základným kódom CSS

Pri bežnej úlohe je centrovanie prvkov pomocou kódu CSS prekvapivo neintuitívne. Keď to však urobíte niekoľkokrát, bude to oveľa jednoduchšie. Máte niekoľko rôznych spôsobov, ako veci sústrediť.

Pre prvok bloku (zvyčajne obrázok) použite atribút margin:

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

Tým je zaistené, že prvok je zobrazený ako blok a okraj na každej strane je nastavený automaticky. Ak chcete vycentrovať všetky obrázky na danú stránku, môžete do značky img dokonca pridať „margin: auto“:

img { margin: auto; }

Ak sa chcete dozvedieť, prečo to takto funguje, pozrite sa na Vysvetlenie modelu CSS boxu na W3C .

Ale čo keď chcete vycentrovať text pomocou CSS? Použite tento ukážkový CSS:

.centertext { text-align: center; }

Chcete použiť triedu „centertext“ na vycentrovanie textu v odseku? Jednoducho pridajte túto triedu do súboru

značka:

This text will be centered.

8. Príklady CSS na úpravu polstrovania

Polstrovanie prvku určuje, koľko miesta by malo byť na každej strane. Ak napríklad pridáte 25 pixelov výplne do spodnej časti obrázku, nasledujúci text bude posunutý o 25 pixelov nadol. Mnoho prvkov môže mať výplň, nielen obrázky.

Povedzme, že chcete, aby každý obrázok mal 20 pixelov výplne na ľavej a pravej strane a 40 pixelov v hornej a dolnej časti. Najzákladnejšie spustenie kódu CSS je:

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

Existuje však kratšia inštrukcia CSS, ktorá predstavuje všetky tieto informácie v jednom riadku:

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

Nastaví horné, pravé, spodné a ľavé vypchávky na správne číslo. Vďaka použitiu iba dvoch hodnôt (40 a 25) ju môžete ešte skrátiť:

img { padding: 40px 25px }

Keď použijete iba dve hodnoty, prvá hodnota je nastavená pre hornú a dolnú časť, zatiaľ čo druhá bude vľavo a vpravo.

9. Zvýraznite riadky tabuľky s kódovaním CSS

Vďaka kódu CSS vyzerajú tabuľky oveľa krajšie ako predvolené mriežky. Pridávanie farieb, úprava okrajov a reagovanie vášho stolu na mobilné obrazovky je jednoduché. Tento jednoduchý príklad CSS ukazuje, ako zvýrazniť riadky tabuľky, keď na ne umiestnite kurzor myši.

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

Teraz, keď umiestnite kurzor myši na bunku tabuľky, tento riadok zmení farbu. Ak sa chcete pozrieť na niektoré ďalšie skvelé veci, ktoré môžete robiť, pozrite sa na Stránka W3C o efektných tabuľkách CSS .

10. Príklad CSS na presúvanie obrázkov medzi priehľadnými a nepriehľadnými

Kód CSS vám môže tiež pomôcť urobiť skvelé veci s obrázkami. Tu je príklad CSS, ktorý zobrazuje obrázky pri menej ako plnej nepriehľadnosti, takže pôsobia mierne „vybielene“. Keď umiestnite kurzor myši na obrázky, zobrazia sa úplné nepriehľadnosti:

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

Atribút „filter“ robí to isté ako „nepriehľadnosť“, ale Internet Explorer 8 a starší nerozpoznávajú meranie opacity. V prípade starších prehliadačov je vhodné ho zahrnúť.

Teraz, keď sú obrázky mierne priehľadné, môžete ich po kliknutí myšou urobiť úplne nepriehľadné:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 príkladov CSS so zdrojovým kódom

S týmito príkladmi kódu CSS by ste mali mať oveľa lepšiu predstavu o tom, ako CSS funguje. Šablóny CSS môže pomôcť, ale pochopenie základných prvkov je životne dôležité.

Týchto 10 jednoduchých príkladov kódu CSS zrekapitulovaných:

  1. Jednoduché formátovanie odseku
  2. Zmeňte veľkosť písmen
  3. Zmeňte farby odkazov
  4. Odstráňte podčiarknutie odkazu
  5. Vytvorte odkaz
  6. Vytvorte textové pole
  7. Prvky zarovnané na stred
  8. Upravte polstrovanie
  9. Zvýraznite riadky tabuľky
  10. Urobte obrázky nepriehľadné

Keď ich znova preskúmate, všimnete si niekoľko vzorov, ktoré môžete použiť v budúcom kóde. A vtedy zistíte, že ste sa skutočne stali majstrom CSS. Pamätať si to však môže byť náročné. Túto stránku môžete uložiť ako záložku pre budúce použitie.

zdieľam zdieľam Tweet E -mail Cheat Sheet The Essential CSS3 Properties

Ovládajte základnú syntax CSS s naším cheatovým hárkom vlastností CSS3.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • Vzhľad stránky
  • CSS
  • Skriptovanie
O autorovi Christian Cawley(1510 publikovaných článkov)

Zástupca redaktora pre bezpečnosť, Linux, DIY, programovanie a techniku ​​a skutočne užitočného producenta podcastov s rozsiahlymi skúsenosťami s podporou počítačov a softvéru. Christian, prispievateľ do časopisu Linux Format, je drotár Raspberry Pi, milovník Lega a fanúšik retro hier.

Viac od Christiana Cawleyho

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber