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.

" />

Hírek

A 3 legfontosabb CSS kód

2019.08.29.

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:
<body>
<h1>Az oldalunk alapvető háttérszíne innentől kezdve világoskék lesz.</h1>
</body>

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:
<div id="enleszekaflexcontainer">
<h2>Front-end</h2>
<h2>Back-end</h2>
<h2>Javascript</h2>
</div>

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:

<a href=”../html.php">Front-end</a>
<a href=”../php.php">Back-end</a>
<a href="../javascript.php”>Javascript</a>

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

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