A CSS, vagy stíluslap az eszköz amivel meg tudod formázni a weboldalad. A CSS minimum alapszintű ismerete ugyanakkor hasonlóan fontos mint a HTML, ha weboldalakkal akarsz foglalkozni (gyakorlatilag bármilyen szinten).
Ez a CSS tananyag segíteni fog téged abban hogy el tudj indulni a tanulási folyamatban, de csak egy kiindulópont. Rengeteg gyakorlás és tanulás áll előtted ha ezt az utat választod, de megéri…
CSS tananyag – 1. Elméleti alapok
Tulajdonképpen mi az a CSS és mire való?
A CSS magyarul stíluslapot jelent. A HTML a weboldal szerkezetét és a felépítését adja meg, majd a CSS ad a natúr HTML kódnak egy vizuális stílust. Méreteket, színeket, betűtípust és még sok mást.
Milyen módszerekkel használhatunk CSS-t egy weboldalon?
<b>Kódot mindig kód tagba tegyél</b>A CSS stíluskódot 3 módszerrel lehet alkalmazni: sorközi CSS, belső CSS és külső CSS
Sorközi CSS:
A sorközi CSS-t, akkor használjuk, ha az adott oldalon csupán egy elemnek szeretnénk stílust adni. Még akkor is jól jöhet, ha egy elem külső CSS stílusát szeretnénk felülírni vele.
<p style="color: red; font-style: italic;">Például egy bekezdésnek szeretnénk adni egy piros színt és egy dőlt stílust</p>
Belső CSS:
A belső CSS alkalmazása szintén, akkor lehet jó, ha egy adott oldalon szeretnénk egy elemnek stílust adni. Például a H1-es címnek meg szeretnénk változtatni a betűszínét és adni akarunk mellé még egy háttérszínt is.
A belső CSS-t mindig a fejrészben helyezzük el a style elemen belül.
<head>
<style>
h1 {
color: white;
background-color: blue;
}
</style>
</head>
Külső CSS:
A külső CSS-t az egész weboldal összes oldalára alkalmazni lehet. Létre kell hozni egy stíluslap.css fájlt, ami tartalmazza a CSS kódunkat. Ez után a a fejrész szakaszban hivatkozni kell rá.
<head>
<link rel=”stylesheet” type=”text/css” href=”stíluslap.css”>
</head>
Hogyan néz ki egy CSS kód?
A CSS kód egy szelektorral vagy egy szelektorlánccal kezdődik. A szelektor után egy kapcsos zárójel között lévő deklorációs rész követ, ami egy tulajdonságból és egy értékből áll. A tulajdonságot és az értéket a kettőspont válasszá el és a pontosvessző zárja le.
h1 {
font-size: 2em;
line-height: 1em;
margin: 1.5em 0 1em;
}
h1, h2, h3 {
color: #333;
font-weight: bold;
text-transform: uppercase;
}
Technikai alapok
Mire való az id és a class Selector, mi a különbség közöttük?
ID selector:
AZ ID-nek egyedinek kell lennie. Ha van egy <div id=popup”> HTML tag-ünk, akkor sehol máshol nem szabad a HTML-ben szerepelnie. Az ID egy egyedi azonosító, amivel egyértelműen meghatározható, hogy konkrétan melyik elemre hivatkozunk. A CSS-ben, akkor érdemes ezt használni, ha biztosak vagyunk, hogy az adott elemből, csak egyetlen darab létezik a HTML kódok között. AZ ID-re #-el kell hivatkozni.
Class selector:
A class-nak nem kell egyedinek lennie. Például ha van egy <div class=”dark-block”> HTML tag-ünk, attól még ez szerepelhet máshol is. Ez akkor hasznos, ha a weboldalunkon több olyan elem van aminek ugyan olyan stílust szeretnénk adni. Ekkor elég a CSS-ben egyszer megadni a hozzá tartozó tulajdonságokat és az értékeket. A class-ra .-al kell hivatkozni.
Származtatott Selector
A CSS származtatott szelektor az elemek között található, amelyek egy másik elemen belül helyezkednek el. Például van egy felsorolásunk, amelynek az elemei leszármazottak. Az <li> tag-ek az <ul> tag leszármazottai.
Például a felsorolásunkban található linknek szeretnénk adni egy stílust, akkor azt így tehetjük meg:
ul li a {
text-decoration: underline;
color: green;
}
A felsoroláson (<ul>) belül, vannak a felsorolás elemei (<li>) és azon belül található linkekre hivatkozunk (<a>).
Hogyan tudok kommentelni a CSS kódban?
Kommentek hozzáadásával egyszerűen meg tudjuk könnyíteni a saját munkánkat és más fejlesztők munkáját is, akik akár később dolgozni fognak vele. Csoportosításra is jó használni vagy csak szimplán egy megjegyzést hagyni magunknak és a fejlesztőknek. Használata egyszerű: egy /-jellel és egy *-al kezdjük majd egy *-al és szintén egy /-jellel fejezzük be.
Lássuk a gyakorlatban:
/*Kapcsolat űrlap stílusai*/
Mit értünk öröklődésen a CSS kód esetében?
Az öröklődés, akkor történik ha egy szülőelemre beállítunk egyes CSS tulajdonságokat, amit a gyermekek is megöröklik. Például ha egy elemre color és font-family tulajdonságokat állítunk be, akkor a fő elemben lévő elemeknek ugyan az lesz a színe és a betűtípusa.
body {
color: #333;
font-family: 'Open Sans', sans-serif;
}
Itt a body tag-ben lévő bekezdéseknek és címeknek ugyan az lesz a színe és a betűtípusa
CSS tananyag – 3.Gyakorlati eljárások
Szöveg manipulációja CSS segítségével
Nézzünk meg példának egy „Glitch” stílusú címet. Elméletben kell nekünk egy cím, egy before és egy after pseudo külön külön színnel, majd el kell tolnunk egymástól őket.
Gyakorlatban így néz ki:
Custom Title Style
h2.custom-title-style {
display: inline; /*Megjelenés egy vonalban*/
position: relative; /**/
font-size: 40px; /*Betű méret*/
letter-spacing: 5px; /*Betű távolság*/
color: rgb(67 209 255 / 80%); /* Betű szín*/
}
h2.custom-title-style:after {
content: "Custom Title Style"; /*Tartalom*/
position: absolute; /*Meghatározott pozíció*/
left: 2px; /*Balról eltolás*/
top: 2px; /*Felülről eltolás*/
color: #23282d; /*Betű szín*/
width: 100%; /*Szélesség*/
}
h2.custom-title-style:before {
content: "Custom Title Style"; /*Tartalom*/
position: absolute; /*Meghatározott pozíció*/
left: 0px; /*Balról eltolás*/
top: 0px; /*Felülről eltolás*/
color: rgb(185 9 0 / 80%); /*Betű szín*/
width: 100%; /*Szélesség*/
}
Átmenetek és méretezések alkalmazása
Ha egy kicsit felszeretnénk dobni a weboldalunkon található elemeket, hogy ne legyenek olyan unalmasak hover alatt, akkor abban a CSS transition, azaz átmenet tud segíteni. Ezzel animálni, elemet mozgatni és mindenféle átmenetet tudunk csinálni.
Vegyünk példának egy egyszerű gombot, ami hover alatt (egeret ráhúzva) megváltoztatja a színét:
Simple hover.button:hover {
background-color: purple;
}
Ez így elég unalmas… Dobjunk rá egy méretnövelést:
Scale hover.button:hover {
background-color: purple;
transform: scale(1.2);
}
Így már egy fokkal jobb, de ez a hirtelen ugrás nem olyan jó. Tegyük kicsit finomabbá:
Smooth hover.button {
transition: 600ms linear;
}
Most hogy van egy megfelelő gombunk, nézzük meg mi mit csinál:
Transform:
A transform a mozgásért felel. Lehet forgatni, méretezni, mozgatni és még sok mást is.
Transition:
A transition az átmeneteket teszi lehetővé, adott idő múlva, adott ideig és adott módon.
Hogyan tovább?
Remélem ez a CSS tananyag meghozta a kedved a CSS megtanulásához. Ha tetszett a cikk jelezd azt megosztással, vagy tedd ki a blogodba hogy minél többen elérjék.
Az emberek többsége sajnos nem jut el eddig a pontig, de ha te kitartottál és elsajátítottál csak 1 dolgot ebből a cikkből, már képes vagy további fejlődésre is. A lényeg hogy ne add fel, sok sikert a továbbiakban.