10 egyszerű CSS -példa, amelyet 10 perc alatt megtanulhat

10 egyszerű CSS -példa, amelyet 10 perc alatt megtanulhat

Ha elkezdte a HTML -t, akkor valószínűleg további vizuális pontozást szeretne hozzáadni a weboldalakhoz. A CSS a legjobb módja ennek. A CSS lehetővé teszi a módosítások alkalmazását az egész oldalon anélkül, hogy a belső stílusra kellene támaszkodnia.





Íme néhány egyszerű CSS -példa, amelyek megmutatják, hogyan lehet néhány alapvető stílusmódosítást végrehajtani a weboldalon.



1. Az egyszerű CSS -kód az egyszerű bekezdésformázáshoz

A CSS formázás azt jelenti, hogy nem kell stílust megadni minden egyes elem létrehozásakor. Csak annyit mondhat, hogy „minden bekezdésnek meg kell felelnie ennek a stílusnak”, és készen áll.



Tegyük fel, hogy minden bekezdést szeretne (

, az egyik HTML -címke, amelyet mindenkinek tudnia kell), hogy valamivel nagyobb legyen a szokásosnál. És sötétszürke szöveggel, fekete helyett.

Összefüggő: A HTML Cheat Sheet



Ennek CSS kódja:

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

Egyszerű! Most, amikor a böngésző megjelenít egy bekezdést, a szöveg örökölni fogja a méretet (a normál 120 százaléka) és a színét („halvány”).



Ha kíváncsi arra, hogy mely egyszerű szöveges színeket használhatja, nézze meg ezt CSS színlista a Mozilla -tól.

2. CSS példa a karakterek megváltoztatására

Kijelölést szeretne létrehozni azokhoz a bekezdésekhez, amelyeket kisbetűvel kell írni? Erre egy CSS -minta lenne:



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

Ha teljesen kisbetűs bekezdést szeretne készíteni, használjon kissé eltérő HTML -címkét. Így néz ki:

Your paragraph here.

Pont és osztálynév hozzáadása az elemhez az adott elem által az osztály által meghatározott altípust határozza meg. Ezt megteheti szöveggel, képekkel, linkekkel és bármi mással.

Ha egy adott esetet szeretne egy esetre módosítani, használja ezeket a CSS -kód példákat:

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

Az utolsó minden mondat első betűjét nagybetűvel kezdi.

A stílusváltozások nem korlátozódnak a bekezdésekre. A linkhez négy különböző szín rendelhető: szabványos szín, látogatott szín, lebegő szín és aktív szín (amely akkor jelenik meg, amikor rákattint). Használja ezt a minta CSS kódot:

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

Linkek esetén minden „a” betűt kettőspont követ, nem pedig pont.

Ezen nyilatkozatok mindegyike megváltoztatja a link színét egy adott kontextusban. A link színének megváltoztatásához nincs szükség a link osztályának megváltoztatására.

Míg az aláhúzott szöveg egyértelműen hivatkozást jelez, néha szebbnek tűnik az aláhúzás törlése. Ez a „text-decoration” attribútummal érhető el. Ez a CSS -példa bemutatja, hogyan távolíthatja el az aláhúzásokat a linkeken:

a { text-decoration: none; }

A link („a”) címkével ellátott elemek aláhúzás nélkül maradnak. Szeretné aláhúzni, amikor a felhasználó fölé húzza? Egyszerűen add hozzá:

a:hover { text-decoration: underline; }

Ezt a szövegdekorációt hozzáadhatja az aktív linkekhez is, hogy az aláhúzás ne tűnjön el a linkre kattintáskor.

Szeretne több figyelmet vonzani linkjeire? A link gomb nagyszerű módja ennek. Ehhez még néhány sor szükséges:

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

Magyarázzuk el ezt a CSS mintakódot.

Mind a négy linkállapot belefoglalása biztosítja, hogy a gomb ne tűnjön el, amikor a felhasználó lebeg vagy rákattint. Különböző paramétereket is beállíthat a lebegés és az aktív linkek számára, például a gomb vagy a szöveg színének megváltoztatása.

A háttérszín háttérszínnel, a szöveg színe pedig színnel van beállítva. A kitöltés határozza meg a doboz méretét --- a szöveg függőlegesen 10, vízszintesen pedig 25 képpont méretű.

A szövegigazítás biztosítja, hogy a szöveg a gomb közepén jelenjen meg, nem pedig az egyik oldalon. A szövegdíszítés, mint az utolsó példában, eltávolítja az aláhúzást.

iphone 12 pro max vs pro

A CSS kód 'display: inline-block' egy kicsit bonyolultabb. Röviden, lehetővé teszi az objektum magasságának és szélességének beállítását. Azt is biztosítja, hogy a beillesztéskor új sort kezd.

6. CSS Példakód szövegdoboz létrehozásához

Egy sima bekezdés nem túl izgalmas. Ha egy elemet szeretne kiemelni az oldalon, akkor érdemes szegélyt hozzáadnia. Ezt az egyszerű CSS kódsorozat segítségével teheti meg:

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

Ez egyenes. Egy szilárd, lila szegélyt hoz létre, öt képpont széles körben, bármely fontos osztály körül. Ahhoz, hogy egy bekezdés örökölje ezeket a tulajdonságokat, csak deklarálja így:

Your important paragraph here.

Ez működni fog, függetlenül attól, hogy milyen nagy a bekezdés.

Sokféle szegélystílus alkalmazható; a „szilárd” helyett „pöttyözött” vagy „kettős”. Eközben a szélesség lehet „vékony”, „közepes” vagy „vastag”. A CSS kód akár egyenként is meghatározhatja az egyes szegélyek vastagságát:

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

Ez azt eredményezi, hogy a felső szegély öt képpont, a jobb, nyolc, az alsó három, a bal szegély mérete kilenc képpont.

7. Középre igazító elemek az alapvető CSS kóddal

Gyakori feladatok esetén a CSS kódú központosító elemek meglepően intuitívak. Ha már néhányszor megtette, sokkal könnyebb lesz. Pár különböző módja van a dolgok középpontba állítására.

Blokkelem (általában kép) esetén használja a margin attribútumot:

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

Ez biztosítja, hogy az elem blokkként jelenjen meg, és a margó mindkét oldalon automatikusan legyen beállítva. Ha egy adott oldal összes képét középre szeretné helyezni, akkor akár hozzáadhatja a „margin: auto” értéket az img címkéhez:

img { margin: auto; }

Hogy megtudja, miért működik így, nézze meg a CSS doboz modell magyarázata a W3C -n .

De mi van akkor, ha a szöveget CSS -sel szeretné középre helyezni? Használja ezt a CSS mintát:

.centertext { text-align: center; }

A 'centertext' osztályt szeretné használni a szöveg középpontba helyezéséhez? Egyszerűen adja hozzá ezt az osztályt a

címke:

This text will be centered.

8. CSS példák a párnázás beállításához

Az elem párnázása határozza meg, hogy mennyi hely legyen mindkét oldalon. Például, ha 25 képpont kitöltést ad hozzá a kép aljához, akkor a következő szöveg 25 képponttal lesz lefelé tolva. Sok elemnek lehet párnázata, nem csak képeknek.

Tegyük fel, hogy azt szeretné, ha minden kép bal és jobb oldalán 20, a tetején és alján 40 képpont párnázás lenne. A legalapvetőbb CSS -kódfuttatás ehhez:

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

Van azonban egy rövidebb CSS utasítás, amely ezeket az információkat egyetlen sorban mutatja be:

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

Ez a felső, jobb, alsó és bal oldali párnázásokat a megfelelő számra állítja. Csak két értéknek (40 és 25) köszönhetően még rövidebbé teheti:

img { padding: 40px 25px }

Ha csak két értéket használ, az első érték a felső és alsó, míg a második balra és jobbra lesz beállítva.

9. Jelölje ki a táblázat sorait CSS kódolással

A CSS -kód segítségével a táblázatok sokkal szebbek, mint az alapértelmezett rácsok. A színek hozzáadása, a szegélyek beállítása és az asztal mobil képernyőre való reagálása egyszerű. Ez az egyszerű CSS -példa bemutatja, hogyan kell kiemelni a táblázat sorait, amikor az egérrel rájuk viszünk.

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

Most, amikor az egérmutatót egy táblázat cella fölé viszi, a sor színe megváltozik. Ha látni szeretné a többi remek dolgot, nézze meg a W3C oldal divatos CSS táblákon .

10. Példa CSS a képek áttetsző és átlátszatlan közötti váltására

A CSS -kód segíthet a képeken is jó dolgokat csinálni. Íme egy CSS -példa, amellyel a képeket a teljes átlátszatlanságnál kisebb mértékben lehet megjeleníteni, így kissé „fehéredve” jelennek meg. Ha az egeret a képek fölé viszi, azok teljesen átlátszatlanok lesznek:

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

A „filter” attribútum ugyanazt teszi, mint az „opacity”, de az Internet Explorer 8 és korábbi verziók nem ismerik fel az opacitásmérést. A régebbi böngészőknél célszerű felvenni.

Most, hogy a képek kissé átlátszók, egérmutatóval teljesen átlátszatlanná teheti őket:

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

10 CSS példa forráskóddal

Ezekkel a CSS -kódpéldákkal sokkal jobban meg kell ismernie a CSS működését. CSS sablonok segíthet, de a nyers elemek megértése létfontosságú.

Ez a 10 egyszerű CSS -példa példája összefoglalva:

  1. Egyszerű bekezdésformázás
  2. Változtassa meg a kis- és nagybetűket
  3. A link színének módosítása
  4. Távolítsa el a link aláhúzásait
  5. Készítsen link gombot
  6. Hozzon létre egy szövegdobozt
  7. Középre igazított elemek
  8. Állítsa be a párnázást
  9. Jelölje ki a táblázat sorait
  10. Tegye átláthatatlanná a képeket

Újra áttekintve számos mintát észlel, amelyeket alkalmazhat a jövőbeli kódokra. És ekkor tudod, hogy valóban CSS -mester lettél. De emlékezni nehéz lehet. Érdemes lehet könyvjelzővel ellátni ezt az oldalt a későbbiekben.

Részvény Részvény Csipog Email Az alapvető CSS3 tulajdonságok csalólapja

Az alapvető CSS szintaxis elsajátítása a CSS3 tulajdonságok csalólapjával.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • Web Design
  • CSS
  • Forgatókönyvírás
A szerzőről Christian Cawley(1510 megjelent cikk)

Szerkesztőhelyettes a biztonságért, Linuxért, barkácsolásért, programozásért és technikai magyarázatokért, és valóban hasznos podcast -gyártó, nagy tapasztalattal rendelkezik asztali és szoftveres támogatásban. A Linux Format magazin munkatársa, Christian a Raspberry Pi barkácsolója, a Lego szerelmese és a retro játék rajongója.

További részletek Christian Cawley -től

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide