A legfontosabb, legalapvetőbb CSS parancsok, utasítások

Ebben a leckében a legfontosabb CSS utasításokról, parancsokról lesz szó. Átbeszéljük, hogy mely formázási lehetőségek számítanak a legfontosabbnak és a legalapvetőbbnek a stílusbeállítások között. A teljes lista nagyon hosszú lenne és egy részére valószínűleg sosem lenne szükséged, így csak a legnélkülözhetetlenebbekről lesz szó.

(Fontos, hogy ezeket az utasításokat inline CSS-ként fogom megadni az egyszerűség és átláthatóság végett. De nagyon fontos, hogy bármilyen CSS megadási módszerrel használhatod.)

Betűre vonatkozó CSS utasítások, parancsok

Talán ez a legalapvetőbb CSS utasítás, nagyon fontos szerepet tölt be a weboldal egészében. Segítségével olyan dolgokat szabhatunk meg, mint például a betűtípus, a betűméret vagy a betűvastagság. Persze még hosszasan folytathatnám a listát.

Példa

<p style="font-family:Fantasy;">Betűtípus</p>
<p style="font-size:50px;">Betűméret</p>
<p style="font-weight=bold;">Betűvastagság</p>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Szövegre vonatkozó CSS utasítások, parancsok

Most egy szinttel feljebb lépünk. Előbb még csak a betűkkel kapcsolatos utasításokat néztük meg, most pedig már a szöveg egészére vonatkozó parancsokat fogjuk átnézni. A szöveg egészére olyan CSS formázásokat alkalmazhatunk, mint például a szövegigazítás, szövegdekoráció, szövegárnyék vagy a szövegszín.

Példa

<p style="text-align:right;">Jobbra igazítás.</p>
<p style="text-shadow: 2px 2px red;
">Árnyékolt szöveg.</p>
<p style="color:red;">Jobbra igazítás.</p>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Háttérre vonatkozó CSS utasítások, parancsok

A háttérre vonatkozólag nagyon sok utasítás található a CSS-ben. A legalapvetőbbnek és legfontosabbnak a következők mondhatók: háttérszín, háttérkép.

Példa

<div style="background-color:yellow;"<p>Sárga háttere van ennek a div-nek.</p></div>

<div style="background-image:url('https://webiskola.hu/kep.jpg');"<p>Egy kép a háttere ennek a div-nek.</p></div>
Code language: JavaScript (javascript)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Keretre vonatkozó CSS utasítások, parancsok

A CSS segítségével tulajdonképpen bármit bekeretezhetünk, akár képeket, szövegeket is. A keretezéshez több utasítás is tartozik. Talán a leggyakrabban használtak: a keret szélesség és a keretszín.

Példa

<p style="border:2px solid black;">Ez a szöveg 2 pixel vastag fekete színű kerettel van körbe véve.</p>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Méretre vonatkozó CSS utasítások, parancsok

A méretre vonatkozó parancsokkal megszabhatjuk, hogy mekkora legyen egy kép vagy div szélessége és/vagy magassága. Ezeket a méreteket megadhatjuk pixelben vagy akár százalékban is.

Példa

<div style="background-image:url('https://webiskola.hu/kep.jpg'); width:100px; height:200px;"></div>

<div style="background-image:url('https://webiskola.hu/kep.jpg'); width:200px; height:100px;"></div>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Margóra vonatkozó CSS utasítások, parancsok

A CSS-ben két margót különböztetünk meg. Az általános körökben is ismert margót, itt is margónak hívják, angolul margin. Míg a másik, kevésbé ismertet belső margónak szokás fordítani, angolul padding. Fontos, hogy a mind a két margó értékeit megadhatjuk egységesen, azaz egy értéket adunk meg, amelyet mind a négy oldalra alkalmaz. Vagy megadhatjuk az egyes oldalakra külön-külön is.

Példa

<p>Nincs margó.</p>
<p style="margin:20%;">Mind a négy oldal egy 20%-os margót kap.</p>
<p style="margin-left:20%;">Csak a bal oldal kap egy 20%-os margót kap.</p>
<p style="padding:20%;">Mind a négy oldal egy 20%-os belső margót kap.</p>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Hogy jobban szemügyre vehető legyen a margók működése, így bekereteztem az egyes p elemeket. Így jobban látszik, hogy mi történik pontosan.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!