A 3 legfontosabb CSS kód

Cikkünkből senki nem fogja tudni megtanulni a CSS teljes használatát, viszont megmutat három olyan kódot, amit mindenféleképpen érdemes elsajátítania minden kezdő webfejlesztőnek.

Mielőtt belevágnánk, az alapok

A CSS kódokkal formázni, manipulálni tudjuk HTML kódjainkat. A CSS kódokat általában egy külön css fileba gyűjtjük. A kódot a manipulálni kívánt elem definiálásával kezdjük, ennek legegyszerűbb módja, hogy szimplán leírjuk az azt jelölő taget, ami az alábbi példában a body. Kinyitunk egy { kapcsos zárójelet, a zárójelen belül leírjuk a kódunkat, ami jelen esetben legyen a background-color, ezzel meg tudjuk adni az elemek háttérszínét. A kódok után kettőspontot rakunk és utána leírjuk az adott kód tulajdonságát. Például, hogy a háttérszínünk legyen világoskék. Végül pontosvesszőt ; rakunk és bezárjuk } a kapcsos zárójelet.

HTML:

Az oldalunk alapvető háttérszíne innentől kezdve világoskék lesz.

CSS:

body {
background-color: lightblue;
}

Most pedig nézzük meg a 3 leggyakrabban használt, leghasznosabb CSS kódot!

1. Rendelkezésre álló hely kitöltése Flexbox-szal

Mielőtt létrejött volna a Flexbox három layout mód volt (block, inline, table). A flexbox célja az volt, hogy egyszerűbben ki lehessen alakítani a kívánt layoutot a körülményes positioning és float nélkül. Jelen példánkban azt adjuk meg, hogy h2 taggel ellátott elemeink egy sorban, a sort kitöltve legyenek rendezve. Ez jól jöhet például menüpontok vízszintes elhelyezésénél.

HTML: tegyük be a menüpontjainkat egy-egy divbe, az egész menüt pedig egy másik div-be.

CSS:

#enleszekaflexcontainer {
display: flex;
flex-direction: row;
justify-content: space-around;
}

Eredmény:

2. Alkalmazkodás a képernyő méretéhez Media Query-vel

Ezzel a kóddal megadhatjuk, hogy hogyan nézzen ki weboldalunk az általunk megadott képernyő szélességekben. Használatához ezt kell beírnunk @media only screen and (...) majd ezt követően írjuk a css kódot a fent már megismert formátumban. A zárójelbe írjuk be a feltételt. Nézzünk egy példát: Most beállítjuk, hogy 600 pixeles szélesség alatt (pl. mobilon) ne egymás mellett, hanem egy oszlopban, középre rendezve jelenjenek meg a h2 elemeink:

@media only screen and (max-width: 600px) {
#enleszekaflexcontainer {
display: flex;
flex-direction: column;
align-items: center;
}
}

3. Hover beállítása Pseudo classokkal

A pseudo classokkal képesek vagyunk az elemeknek csak a kijelölt részét formázni pl: első szó, utolsó szó, linkek, activ linkek stb. Ebben a példában, ha a kurzort rávisszük az adott linkre, az kapni fog egy sárga háttérszínt. 

HTML: az a taggel csináljunk menüpontjainkból linket. 
 

<_a href="/html-css-tanfolyam">Front-end<_/a>
<_a href="/php-programozas">Back-end<_/a>
<_a href="/javascript-tanfolyam">Javascript <_/a>

CSS:

a:hover {
background-color: yellow;
}

KEDVET KAPTÁL? Akkor jelentkezz front-end tanfolyamunkra, ahol mindent megtanulsz a CSS-ről!