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!
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 (ennk az ID-je legyen: id="enleszekaflexcontainer")
CSS:
#enleszekaflexcontainer {
display: flex;
flex-direction: row;
justify-content: space-around;
}
Eredmény:
.PNG)
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;
}
}
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!
Deutsch
