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


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. 

Front-end
Back-end
Javascript

CSS:
a:hover {
background-color: yellow;
}

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