CSS

• Szerző: Sallai András
• Copyright © 2011, Sallai András
• Szerkesztve: 2011-2024
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

A CSS a Cascading Style Sheets betűszavaiból alkotott mozaikszó. Magyarul Lépcsős stíluslapok néven fordítható.

A CSS egy egyszerű mechanizmus amellyel stílust (pl.: fontok, színek, helyek) határozhatunk meg webes dokumentumainkhoz.

A CSS legelterjedtebb használata a weboldalak alakításánál legismertebb. A webet Tim Berners-Lee eredetileg is úgy tervezte, hogy szétválasszák a szerkezetet és a kinézetet meghatározó elemeket. A kezdeti böngészők viszont erre nem voltak képesek. Kezdetben a HTML elemekkel adtak stílusinformációkat a weblapokhoz, ami sokáig nem is változott.

Tim Berners-Lee 1990 év, második felében elkészítette az első böngészőt, amit WorldWideWeb-nek nevezett el, majd később átnevezték Nexus névre. A böngésző NeXTSTEP operációs rendszerre készült.

Marc Andreessen és Eric Bina az NCSA-nál fejleszteni kezdik a Mosaic böngészőt Unix operációs rendszeren, X Window System felületre, ekkor még xmosaic a neve. Az első kiadás 1993-01-23-án készült el. A Mosaic böngészőt később portolják AmigaOS, OpenVMS, Classic Mac OS, MS Windowsra.

1994 október 10-én, Hákon Wium Lie közzétette lépcsőzetes stíluslapok nevű nyelvet. 1994 október 13 Marc Andreessen bejelenti a Mosaic böngésző támogatja a lépcsőzetes stíluslapokat, amely kezdetben csak a középre igazítást támogatja. A Mosaic-ból későbbi tovább fejlesztés eredményeképpen létrejön a Netscape böngésző. A Mosaic-ot közben (1995) megvásárolja a Microsoft, akik Internet Exploler nevű böngészőt hozzák belőle létre.

Mára a böngészők CSS képessége messze túlhaladja a HTML elemekkel lehetséges stílusbeállításokat.

A CSS használata során, elsőként meg kell adnunk melyik HTML elem tulajdonságait akarjuk beállítani, vagyis választanunk kell egy szelektort. A szelektorhoz egy vagy több tulajdonság-értékpárt rendelünk.

Szelektor lehet például a h1 elem, ha h1 fejezet címmel meghatározott tartalomra szeretnék stílust meghatározni. Magát a stílusinformációt kapcsos zárójelek közzé teszem. Pl.:

szelektor {
      tulajdonság1: érték1;
      tulajdonság2: érték2;
}

Láthatjuk, hogy a kapcsos zárójelen belül a tulajdonságok és az értékek között kettőspont (:) szerepel szeparátorként. Minden tulajdonság-érték párt pontosvesszővel (;) zárunk.

CSS-t több szereplő is megadhat.

A CSS lehet

• Szerzői
  • a webmester beállításai
• Felhasználói
  • a felhasználó saját beállításai
• Kliens
  • a böngésző beállításai

Mi a szerzői stíluslapokkal foglalkozunk.

A szerzői stíluslapokat három módon köthetjük HTML dokumentumunkhoz:

• Inline
  • attribútum stílus
  • helyben felülírva a általános stílus
• Internal
  • tag stílus
  • beágyazva a dokumentumba
• External
  • külső stílus
  • fájl a dokumentumból hivatkozva

Ebben az írásban előnyben részesítjük az External módon megadott CSS-t.

Externál stílusmeghatározásnál a stílusinformációk külön állományban vannak. A HTML dokumentumban csak egy hivatkozást teszünk rá. Ez a legelőnyösebb, ha egy több HTML oldalból álló webhelyet akarunk készíteni. Ha változtatni akarunk weblapjaink stílusán csak egyetlen helyen kell a változtatást megtenni.

A stílusinformációkat tartalmazó állomány kiterjesztése:

.css

Ha csak egy ilyen állományunk van szokásos neve:

style.css

A HTML oldalon, a head elemek közzé kell elhelyezni a hivatkozást egy link elem segítségével:

<link href="style.css" type="text/css" rel="stylesheet" />

A HTML5 esetén nem kötelező a type attribútum használta.

Újabban, már ebben a formában is illeszthetünk stílusinformációkat tároló állományokat:

<style>
@import url("style.css");
</style>

Fentebb már láttuk, hogy a szelektorral válasszuk ki, melyik HTML elemre szeretnénk beállítani stílust.

Ha van egy H1 elemünk, akkor:

h1 {
  /* ide jön a stílus információ */
}

Vagy H2 elemek esetén:

h2 {
  /* ide jön a stílus információ */
}

Egyszerre felsorolhatunk több HTML elemet is, vesszővel tagolva:

h1, h2, h3 {
  /* ide jön a stílus információ */
}

Mi van akkor ha több h2, vagy p elemünk van, de csak az egyikre szeretnénk stílusinformációt beállítani?

Ekkor a HTML kódban azonosítót, vagy osztályt rendelünk a kívánt elemhez.

Nézzünk egy példát h2 elemmel, ahol osztályt állítok be „egyik” néven:

<h2 class="egyik">Valami</h2>

A CSS kódban, ezek után így hivatkozhatok rá:

h2.egyik {
  /* ide jön a stílus információ */
}

Az elem neve után (h2) egy (.) pontot írunk, majd jön az osztály neve.

A HTML elemek számára azonosítót is megadhatunk. A következő példában a h2 elem az „egyik” nevű azonosítót kapja.

<h2 id="egyik">Valami</h2>

A CSS kódban, ezek után így tudunk rá hivatkozni:

h2#egyik {
  /* ide jön a stílus információ */
}

Leírjuk a HTML elem nevét (h2, majd (#) kettőskereszt után jön az azonosító neve.

A class és az id között az a különbség, hogy egy id attribútum értéke, egy weblapon belül csak egyszer szerepelhet, az osztály neve többször is szerepelhet.

Ha CSS kódban azonosítóra vagy osztálynévre hivatkozom, a HTML elem neve elhagyható.

.egyik {
  /* ide jön a stílus információ */
}

#masik {
  /* ide jön a stílus információ */
}

A szöveg igazítását h1 elem tartalmán nézzük meg. Szeretném a h1 elemek között elhelyezett főcímünk középre legyen igazítva. Szelektornak adjuk meg az elem nevét, ami esetünkben h1:

h1 {
 
}

A szöveg igazítását a text-align tulajdonsággal lehet állítani, középre igazításhoz a center értéket adjuk meg:

h1 {
    text-align: center;
} 

Próbáljuk ki az alábbi szövegen az igazítás változtatását.

h1 {
    color: blue;
} 

Próbálja ki az alábbi szöveg színezését. A szín választása után, kattintsunk a a színválasztón kívül.

A következő táblázat tartalmazza, milyen lehetőségeink vannak:

background-color:#990000;

Próbálja ki az alábbi szöveg hátterének színezését.

background-image: url(hatter.png);

Egy lehetséges háttérkép:

Az ismétlést a backgorund-repeat tulajdonsággal állítjuk.

background-repeat: repeat-x;

Próbáljuk ki az ismétlési lehetőségeket:

no-repeat repeat-x repeat-y repeat

Pozíciót a background-position tulajdonsággal állítok.

body {    
    background-position: right;
}

Egyszerre két értéket is beállíthatok, de ennek csak akkor van értelme, ha a background-repeat tulajdonság például no-repeat;

body {
    background-repeat: no-repeat;
    background-position: right top;
}

left center right top bottom left top left bottom right top right bottom no-repeat repeat repeat-x repeat-y

A méret a background-size tulajdonsággal állítok.

body {    
    background-size: cover;
}

100px 10px 20px 30px 40px 50px 200px 300px 400px 500px 50px 50px 100px 100px 200px 200px 400px 400px auto cover contain no-repeat repeat repeat-x repeat-y virag2.png kopasz-hegy.jpg

Két háttérkép is betehető egyszerre.

body {
  background-image: url(kep001.jpg), url(kep003.jpg);
  background-size: 50px 50px;
  background-repeat: repeat-x, repeat-y;
 
}

A példában az egyiket vízszintesen, másikat függőlegesen ismételtük.

Pozíció megadásával:

body {
  background-image: 
    url(kep001.jpg), 
    url(kep003.jpg);
  background-size: 50px 50px;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
 
}

Általános szintaxis:

@charset "<IANA által definiált karakterkészlet neve>";

UTF-8 kódolás beállítása:

@charset "UTF-8";

body { font-style: italic; } /* normal, italic, oblique, inherit */

Italic:

Oblique:

Az Oblique lenne a kurzív, de tipográfiában a kurzív betűt úgy írják, hogy a tollat nem emelik meg, amit pedig mi kapunk nem valódi kurzív. A kurzív tehát egy külön fontkészlet lenne.

Az oblique itt azt jelenti a számítógép mesterségesen, fonttól függetlenül megdönti a betűket. A italic pedig a dőlt betűs fontkészletet tölti be.

body { 
  /* normal, bold, bolder, lighter, 100, 200, 300, ..., 900, inherit */
  font-weight: bold; 
} 

div { font-size: 0.8rem; } 

Mértékegységnek ajánlott a px helyett a rem vagy az em használata. Ha px-t használunk az akadálymentesítést nehézségekbe ütközhet. A példa kedvéért a Google Chromban, a „Beállítások” között, vegyük a „Megjelenítés”-t és a „Betűméret”-t. Ha valaki beállítja „Nagyon nagy”-ra, px esetén nem történik semmi. Ha maradunk a rem mértékegységnél: 1rem a gyökér elem (html) aktuális méretét jelenti. Ez alapértelmezetten 16px szokott lenni a böngészőkben.

font-family: serif;

body { 
  font: italic bold 14px Arial, Helvetica, sans-serif; 
}  

font-variant: small-caps;

A kis-kapitális beállítás hatására minden betű nagybetűs lesz, de a normál betűmagasságtól kisebb méretű, kivéve az első betű magassága.

/* kis-kapitális */
font-variant-caps: small-caps;
 
/* minden betű kis-kapitális méretű nagybetű */
font-variant-caps: all-small-caps;

• https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps (2021)

Minta a font-variant: small-caps; beállításra:

Minta a font-variant-caps: all-small-caps; beállításra:

color: #333333;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

color: #333333;
font-family: Century Gothic, sans-serif;

color: #333333;
font-family: Tahoma, Geneva, sans-serif;

color: #333333;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;

color: #333333;
font-family: ‘Lucida Console’, Monaco, monospace;

color: #333333;
font-family: ‘Courier New’, Courier, monospace;

color: #333333;
font-family: Arial, Helvetica, sans-serif;

color: #333333;
font-family: Georgia, Serif;

body {
  text-decoration: underline;
}

Lehetséges értékei

szöveg - text-decoration: underline

szöveg - text-decoration: overline

szöveg - text-decoration: line-through

szöveg - text-decoration: underline overline

szöveg - text-decoration: underline overline wavy blue;

body {
  text-decoration-line: underline;
}

body {
  text-shadow: 5px 5px 3px #222222;
}

p {
  text-decoration: underline;
  text-decoration-color: red;
}

div {
    text-decoration-style: solid;
}

Lorem ipsum - text-decoration-style: solid;

Lorem ipsum - text-decoration-style: double;

Lorem ipsum - text-decoration-style: dotted;

Lorem ipsum - text-decoration-style: dashed;

Lorem ipsum - text-decoration-style: wavy;

A keret vagy szegély a border tulajdonsággal szabályozható.

.doboz {
    border: 2px solid black;
}

Az első a szegély vastagsága, a második a stílusa, a harmadik a színe.

border-style: solid;

Lehetséges értékei

• none
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

Lehetséges értékei

• thin
• medium
• thick
• érték

Táblázat szegélyek esetén használható.

• separated
• collapse

A span elemek szélessége és magassága nem állítható, mivel inline elemek. A szélességüket a tartalom határozza meg. Ha szeretnénk állítani a szélességét és a magasságát, a display tulajdonságot állítsuk inlin-block vagy block értékre.

.container {
  width: 200px;
  height: 200px;
  display: inline-block;
 
  background-color: lightblue;
  border: 2px solid blue;
}

style.css

.container {
    max-width: 600px; /* Maximum szélesség 600 pixel */
    margin: 0 auto; /* Középre igazítás */
    padding: 20px; /* Belső margó */
    background-color: lightblue; /* Háttérszín */
    border: 2px solid blue; /* Keret */
}

<div class="container">
    <h2>Példa a max-width használatra</h2>
    <p>
        Ez a konténer maximum 600 pixel széles lesz. 
        A tartalom automatikusan igazodik a maximális 
        szélességhez.
    </p>
    <p>
        Próbáld ki szélesebbre húzva az ablakot, hogy 
        lásd a max-width hatását!
    </p>
</div>

Próbaverzió:

• https://szit.hu/m/maxwith/

Minden HTML elemet doboznak tekintünk.

A dobozok jellemzői:

• Minden doboznak lehet szöveges tartalma, vagy lehet benne egy másik doboz.
• Minden doboz szövegének állíthatjuk a színét, nagyságát, fontját.
• Minden doboz háttérét beállíthatjuk, színnel, képpel.
• Minden doboznak kezelhetjük a szélességét és magasságát.
• Minden doboznak van szegélye.
• Minden doboznak állíthatunk belső margót (a tartalom és a doboz belső széle közötti távolság).
• Minden doboznak van margója.
• A dobozok tulajdonságát külön tudjuk állítani, felül, alul, jobbra és balra.

A CSS2-ben a doboz kapott egy körvonalat a szegély köré.

.doboz {
    margin: 10%;
    background-color: blue;
    color: white;
}

.doboz {
    padding: 30px;
    background-color: blue;
    color: white;
}

A szöveg túlfolyik a dobozon. Ezt kezelhetjük az overflow tulajdonsággal. Következő értékeket veheti fel: visible, hidden, scroll, auto. Az alapértelmezett a visible.

overflow: hidden;

A hidden érték esetén a túlfolyt szöveg egyszerűen eltűnik.

overflow: scroll;

overflow: none;

Az alapértelmezett "none" érték esetén a szöveg túlfolyik ha nem fér el a dobozban:

overflow-x: hidden;
overfloa-y: hidden;

Csak függőleges scroll:

overflow-y: scroll;

A számozott és számozatlan listák többféle tulajdonságát tudjuk beállítani CSS-ből.

Megadhatjuk, hogy számozott legyen vagy számozatlan. A számozott milyen alakzattal jelenjen meg, esetleg milyen képpel. A számozott listánál, megadhatjuk római vagy latin számokat, ábécét, kis vagy nagy betűvel.

ul {
  list-style-type: circle;
}

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none

ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
 
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}

Próbálja ki a következő beépített HTML részlettel:

ul {
  list-style-image: url(listajel.png);
}

ul {
  list-style-position: inside;
}

• inside
• outside

Az inside esetén a lista előtti alakzatot a lista tartalmazza. Az outside esetén azon kívül van. Ez a gyakorlatban úgy látszik, hogy outside esetén egy kicsit előrébb kezdődik, mint egy inside elrendezéssel formázott lista.

A dobozok megjelenését két tulajdonsággal lehet szabályozni:

• visibility
• display

h1.hidden {
  visibility:hidden;
}

A visibility:hidden elrejti az elemet, de az elem helye megmarad.

h1.hidden {
  display:none;
}

A display:none viszont teljesen törli a szövegfolyamból az elemet.

Egy blokkelem kitölti a rendelkezésre álló teljes szélességet, a következő elem már új sorban fog megjelenni.

Blokk elemekre példa:

• <h1>
• <p>
• <div>

<p>

Egy inline elem csak a számára szükséges helyet foglalja el, a következő elem azonos sorban jelenik meg, ha elfér. Az inline elemek nem reagálnak a width, height tulajdonságok beállításaira.

Inline elemekre példa:

• <span>
• <a>

<span>

A display tulajdonsággal megcserélhetjük az elem láthatóságának tulajdonságát.

Köztes állapot az inline-block elem:

display: inline-block;

Az inline-block elemek sem töltik ki a rendelkezésre álló helyet, mint az inline elemek, viszont használhatók vele a width, height tulajdonságok is.

<style>
span {
  display: inline-block;
  width: 200px;
}
</style>

<span>

A position lehetséges értékei:

• static (alapértelmezett)
• relative
• absolute
• fixed
• sticky (új)

Az alapértelmezett érték. A doboz a tartalom folyamban kerül elhelyezésre. Nem használhatók a left, right, top, bottom tulajdonságok.

A doboz a statichoz hasonlóan kerül elhelyezésre tartalom-folyamban, de a folyamhoz képest igazítható a helyzete. A következő elem ehhez képest fog igazodni.

A doboz a tartalom-folyamtól függetlenül kerül elhelyezésre. A következő elem nem veszi figyelembe ennek helyét.

A doboz a tartalom-folyamtól függetlenül kerül elhelyezésre, hasonlóan az absolute értékhez. A következő elem nem veszi figyelembe ennek helyét. A különbség az absoluthoz képest, hogy a doboz rögzítésre kerül a képernyőhöz képest. A tartalom görgetéskor elgördül a dobozhoz képest.

div.osztalynev {
	position: absolute;
	top: 0;
	left: 0;	
}

A doboz a helyén marad, amíg el nem éri a felső részhez 5px-re.

.doboz {
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    position: sticky;
    top: 5px;    
}

A következő CSS fájlban beállítottam top és left tulajdonságot is, de azok hatástalanok, ha a position: static érték van beállítva.

static.css

div.doboz {
    position: static;
    background-color: rgba(255, 255, 0, 0.9);
    top: -20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}

static.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="static.css">
</head>
<body>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<div class="doboz">
Relatív poziciónálás
</div>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
</body>
</html>

Láthatjuk, hogy a szövegdoboz a helyén maradt.

relative.css

div.doboz {
    position: relative;
    background-color: rgba(255, 255, 0, 0.9);
    top: -20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}

relative.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="relative.html">
</head>
<body>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<div class="doboz">
Relatív poziciónálás
</div>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
</body>
</html>

A következő példa, beépített weblapon mutatja a relatívan pozicionált szöveget, amelyet kicsit fel, és jobbra eltoltunk.

Látható, hogy megmaradt az elemek folyamában a doboz helye, és saját magához képest lett eltolva fel és jobbra irányba.

Az absolute megegyezik a relatív beállításokkal, kivéve, hogy honnan számítjuk a top vagy left értékeket. Az absolute beállításnál a top tulajdonságot a body elemhez képest számoljuk. A szöveget így kivettük a tartalomfolyamból.

absolute.css

div.doboz {
    position: absolute;
    background-color: rgba(255, 255, 0, 0.9);
    top: 20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}

absolute.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="absolute.css">
</head>
<body>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<div class="doboz">
Abszolút pozicionálás
</div>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
</body>
</html>

Görgetéskor jól látszik, hogy a szövegdoboz gördül a tartalommal együtt.

A fixed megegyezik az absolute beállítással, kivéve, hogy az adott elem által létrehozott doboz a képernyőhöz lesz rögzítve, azaz görgetéskor nem mozdul.

fixed.css

div.doboz {
    position: fixed;
    background-color: rgba(255, 255, 0, 0.9);
    top: 20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}

fixed.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="fixed.css">
</head>
<body>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<div class="doboz">
Relatív poziciónálás
</div>
 
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
</body>
</html>

Figyeljük meg, hogy görgetéskor a szövegdoboz kezdeti pozícióban marad.

Középre igazított dobozt láthatunk az alábbi példában.

kozepre.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="kozepre.css" rel="stylesheet">
</head>
<body>
 
 
<div id="doboz1">körtekecskefaisvan</div>
 
 
</body>
</html>

style.css

div#doboz1 {
	color: blue;
	border: 1px solid green;
	width: 50%;
	left: 25%;
	position: absolute;
	top: 5%;
}

A lebegtetés vagy másként úsztatás a float tulajdonsággal lehetséges.

Egy elemet jobbra vagy balra tudunk lebegtetni, vagy másként úsztatni.

A float lehetséges értékei:

• left
• right
• none

div.osztalynev {
	float: right;
}

Lássunk egy példát:

lebegtetes.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="lebegtetes.css">
</head>
<body>
 
<p>
    <img src="kerekpar.png" alt="kerékpár">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
 
 
</body>
</html>

A CSS fájl:

lebegtetes.html

p img {
    float:left;
}

Ahogy láthatjuk a képet balra úsztatjuk a szövegben.

Az objektum nem úsztatható az előtte lévő objektumon hiába van beállítva float érték.

Lehetséges értékei:

Adott két bekezdés. Az első bekezdésben van egy úsztatott kép. Az úsztatás miatt a második bekezdés is körbefolyik a kép körül.

<p>
    <img src="haz.png" alt="kerékpár">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="ketto">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

p img {
    float:left;
}

Az eredmény:

Most töröljük a második bekezdésről az úsztatást:

leveg2.css

p img {
    float: left;
}
 
.ketto {
    clear: left;
}

Blokk elemek:

• <h1>
• <p>
• <div>

A blokk elemek igazítását a jobb és bal margók megadásával végezhetjük el.

Példa a középre igazításra:

.kozepre
{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
}

A középre igazítást a beépített weblon is láthatjuk:

Jobbra igazítás

.jobbra
{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #b0e0e6;
}

Jobbra floattal:

.jobbra
{
    float:right;
    width:300px;
    background-color:#b0e0e6;
}

A láthatóság határainak beállítása.

Egy képet adott formára vágunk. Jelenleg téglalap alakúra, bár jelenleg nem támogatott más forma:

img { 
    position: absolute;
    clip: rect(20px, 460px, 351px, 30px); 
} 

A vágást csak abszolút pozíciónálású elemen lehet végrehajtani.

Tetejét, jobboldalát, alját és baloldalát adjuk meg.

Az ál-osztályokkal néhány elemhez speciális effektusokat rendelhetünk.

szelektor:ál-osztály {beállítás:érték;} 

De használható így is:

szelektor.osztály:álosztály {beállítás:érték;}

a:link {color:#FF0000;}      /* még nem látogatott linkek */
a:visited {color:#00FF00;}  /* látogatott linkek */
a:hover {color:#FF00FF;}  /* ha az egér felé megy */
a:active {color:#0000FF;}  /* aktuális linkek */

• Megjegyzés
  • Az a:hover az a:link és az a:visited után kell következzen a CSS definícióban!
  • Az a:active az a:hover után kell következzen.
  • Az állosztályok nem kisbetű-nagybetű érzékenyek

.doboz {
    opacity: 0.6;
}

Elavult beállítás IE-ben:

.doboz {
    filter: opacity(0.6);
}

.doboz {
    height: 150px; 
    width: 220px;
    background-color: #ffffff;
    opacity: 0.6;
}

Az rgba, az rgb kiterjesztése egy alfa csatornával, amely egy objektum átlátszóságát adja meg.

Egy rgba szín megadása a következő szintaktika szerint történik.

rgba(piros, zöld, kék, alfa)

Az alfa paraméter egy szám 0.0 (teljesen átlátszó) és 1.0 (teljesen átlátszatlan) között.

Példa:

.doboz {
   background-color:rgba(255, 0, 0, 0.3);
} 

Vegyünk egy táblázatot, amelyen szeretnénk beállításokat végezni.

<table>
    <tr>
        <th>Név</th>
        <th>Település</th>
    </tr>
    <tr>
        <td>Peres János</td>
        <td>Szeged</td>
    </tr>
    <tr>
        <td>Timp István</td>
        <td>Szeged</td>
    </tr>
    <tr>
        <td>Lazi Ferenc</td>
        <td>Miskolc</td>
    </tr>
</table>

A szegély beállítása a táblázaton is értelmezhető művelet. Ha viszont csak a table elemet jelölöm meg, akkor a cellák között nem lesz szegély.

table {
    border: 1px solid black;
}

A következő példában a fejléc és az adatcellák között is beállítom a szegélyt:

table, th, td {
    border: 1px solid black;
}

Alapértelmezetten a cellák egymástól elszeparáltan kis távolságra jelennek meg. Ha szeretem az egybeolvasztásukat a border-collapse (kicsit lentebb többet is megtudhatunk erről) tulajdonságot kell beállítanunk:

table {
    border-collapse: collapse;
}
 
table, th, td {
    border: 1px solid black;
}

A változatosság kedvéért a td cellák szélességét állítsuk 100px-re, színüket orange színre.

td {
    width: 100px;
    background-color: orange;
}

Ha a cellák összeomlasztása helyett, szeretnénk növelni azok közötti teret, akkor használjuk a border-spacing tulajdonságot.

table {
    border-spacing: 20px;
}

td {
    padding: 30px;
}

A teljes CSS fájl jelenleg így néz ki:

table.css

table {
    border-spacing: 20px;
}
 
table, th, td {
    border: 1px solid black;
}
 
td {
    width: 100px;
    background-color: orange;
    padding: 30px;    
}

td {
    text-aling: center;
}

col vagy colgroup esetén használható tulajdonságok:

• background
• border
• visibility
• width

Kerülő megoldás:

th:first-child, td:first-child {
    color: white;
    background: blue;
}
th:nth-child(2), td:nth-child(2) {
    color: yellow;
    background: braun;
}
th:last-child, td:last-child {
    font-weight: bold;
    background: orange;
}

<table>
    <tr>
        <th>#</th>
        <th>Név</th>
        <th>Fizetés</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Erős István</td>
        <td>342</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Rege Zoltán</td>
        <td>394</td>
    </tr>
</table>

tr:nth-child(odd) {
    background: orange;
}
 
tr:nth-child(even) {
    background: gold;
}

<div id="egy" >z-index: 1</div>
<div id="ketto">z-index: 2</div>
<div id="harom">z-index: 3</div>

#egy {
    position: relative; left: 0px; top:0px; width:100px; height:100px; 
    background: #f00;
    z-index:3;
}
 
#ketto {
    position: relative; left: 50px; top:-50px; width:100px; height:100px; 
    background: #0f0;
    z-index:2;
}
 
#harom {
    position: relative; left: 100px; top:-100px; width:100px; height:100px; 
    background: #00f;
    z-index:1;
}

Az utóbbi példában a dobozok z-indexét megfordítottuk:

#egy {
    position: relative; left: 0px; top:0px; width:100px; height:100px; 
    background: #f00;
    z-index:1;
}
 
#ketto {
    position: relative; left: 50px; top:-50px; width:100px; height:100px; 
    background: #0f0;
    z-index:2;
}
 
#harom {
    position: relative; left: 100px; top:-100px; width:100px; height:100px; 
    background: #00f;
    z-index:3;
}

A vmax értéket az Inernet Exploler a nem általános vm névvel támogatja, a Safari nem támogatja.

A pixel is relatív hosszmérték, hiszen nagyobb felbontású kijelzőkön, nyomtatókon az eszköz pixelmérete kisebb lesz, mint 1 pixel. Reszponzív weboldalak esetén a relatív mértékegységek használata ajánlott, kivéve a pixel. Ezért sokan az abszolút hosszértékhez sorolják, hiszen ha valamit beállítok 100 pixeles méretre, abból nem lesz rugalmas doboz.

¹⁾

Példák:

h1 {
    margin: 0.3in;
    line-height: 2cm;
    word-spacing: 5mm;
    font-size: 10pt;
}

Újabb mértékegységek:

A szülőelem betűméretéhez képest.

Ha például a body elemet beállítjuk 16px-re, a benne található „p” elem betűmérete 1em beállítás esetén 16 pixel lesz.

body {
  font-size: 16px; /* Az alapértelmezett betűméret beállítása */
}
p {
  font-size: 2em;
}

• 1em 16px
• 2em 32px
• 0.5em 8px

A rem „r” betűje a root szóból van. A root elem betűnagyságára utal.

Ha az alapértelmezett betűnagyság 16px vagy erre állítjuk be HTML gyökér elemét, akkor 1rem az egyenlő 16px-el.

html {
  font-size: 16px; /* Alapértelmezett betűméret beállítása */
}

2rem ebben az esetben 32px. 0.5rem 8px.

@import "masik.css";

Az import sorok meg kell, hogy előzzék az összes szabályt.

Az import segítségével, más CSS fájlokat emelhetünk a jelenlegihez.

Az at-szabályok segítségével médiafüggő beállításokat hozhatunk létre.

/* A szöveg alapértelmezett színe */
body {
  background-color: blue;
}
 
/* 900px vagy kisebb kijelző esetén */
@media screen and (max-width: 900px) {
  body {
    background-color: green;
  }
}
 
/* Képernyőn és 700px vagy annál kisebb kijelzőn */
@media screen and (max-width: 700px) {
  body {
    background-color: yellow;
  }
}

Az egész számok 0-9 közötti számjegyek.

A valós számok lehetnek egész számok, 0 vagy több számjegy, amelyet egy pont, azt pedig újabb számjegyek követnek.

Az egész és a valós számokat megelőzhetik (-) vagy (+) karakterek.

• em: a releváns karakter mérete
• ex: a releváns karakter x magassága
• px: pixel vagy képpont

Például:

p {
  font-size: 1em
}

• cm: centiméter
• mm: milliméter
• in: inch - hüvelyk 25,4 mm
• pc: pica - 12 pont, vagyis 3/18 hüvelyk, kb. 4,23 mm
• pt: point - 1/72 hüvelyk, kb. 0,352 mm

p {
  font-size: 120%;
}

<h2>A haladás előnye</h2>
<p>Lorem ipsum dolor est amet</p>
 
<h2>A haladás veszélyei</h2>
<p>Lorem ipsum dolor est amet</p>
 
<h2>Érintkezés</h2>
<p>Lorem ipsum dolor est amet</p>
 
<h2>Társalgás</h2>
<p>Lorem ipsum dolor est amet</p>

h2 {
  counter-increment: section;
}
h2:before {
  content:counter(section, upper-roman)". ";
}

Bekezdések számozása

p {
  counter-increment: par-num;
}
p:before {
  content:counter(par-num, upper-roman)".";
}

p {
  counter-increment: par-num;
}
h2 {
  counter-reset: par-num;
}
p:before {
  content:counter(par-num, upper-roman)".";
}

  <p>Első</p>  
  <p>Második</p>

body {
  counter-reset: section; 
}
p:before {
  counter-increment: section;
  content: counter(section)".) "; 
}

Átlátszó szegély

szelektor {
   border-radius: 5px;    
   box-shadow:
        0 2px 2px rgba(0,0,0,0.2),        
        0 1px 5px rgba(0,0,0,0.2),        
        0 0 0 12px rgba(255,255,255,0.4);
}

Számított érték

calc(kifejezés)

  width: 90%;               /* ha egy böngésző nem támogatja a calc() függvényt */
  width: calc(100% - 80px);

  width: 130px;             /* ha egy böngésző nem támogatja a calc() függvényt */
  width: calc(100% / 6);

  width: 98%;               /* ha egy böngésző nem támogatja a calc() függvényt */
  width: calc(100% - 1em);

Függőleges igazítás

A vertical-align használata

#doboz {
	background-color: blue;
 	color: white;
        height: 100px;
	width: 100px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 5px;
}

<div id="doboz">
  alma
</div>

Belső 50%-os doboz

#kulso {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
}
#doboz {
	background-color: blue;
	position:relative;
	top:calc(50% - 0.5em);        
        text-align: center;
}

<div id="kulso">
  <div id="doboz">
    alma
  </div>
</div>

Span elem 50%-al

#kulso {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
	text-align: center;
}
#doboz {
	background-color: blue;
}
.hely {
	display: inline-block;
	height: 50%;
	width: 0;
	margin-right: -4px;
}

<div id="kulso">
  <span class="hely"></span>
  <span id="doboz">alma</span>  
</div>

Transzformáció

#kulso {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
	text-align: center;
	position: relative;
}
#doboz {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div id="kulso">
    <div id="doboz">
        alma
    </div>
</div>

Flex doboz

<div class="doboz">
alma
</div>

.doboz {
    border-radius: 5px;
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

Rugalmas magasság esetén

.doboz {
   padding: 50px 0;
}

Sor magasság

.doboz {
    line-height: 100px;
}

Szövegdobozok egymás mellett

.dobozEgyDotted {
 	color: #656565;
    height: 200px;
	width: 150px;
	display: table-cell;
	vertical-align: middle;
	text-align: justify;
	font-size: 11px;
	border: 1px dotted #656565;
	padding: 10px;
}
 
.dobozKetto {
        height: 200px;
	width: 10px;
	display: table-cell;
}

    <div class="dobozEgyDotted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
    Vivamus posuere massa euismod libero varius et mollis velit aliquam. Donec ultrices placerat consequat.
    Phasellus sit amet est non lorem vestibulum placerat iaculis vitae justo.
    </div>
 
    <div class="dobozKetto"></div>
 
    <div class="dobozEgyDotted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
    Vivamus posuere massa euismod libero varius et mollis velit aliquam. Donec ultrices placerat consequat.
    Phasellus sit amet est non lorem vestibulum placerat iaculis vitae justo.
    </div>

Extra margó

Negatív jobb margó

span {
  background-color: navy;
  color: white;
  padding: 4px;
  margin-right: -4px;
}

  <span>Egy</span>
  <span>Kettő</span>

jQuery megoldása

<p class="removeTextNodes">
    <span> Foo </span>
    <span> Bar </span>
</p>

$('.removeTextNodes').contents().filter(function() {
    return this.nodeType === 3;
}).remove();

Szülő elem fontmérete

<div id="ez">
    <span>egy</span>
    <span>kettő</span>
    <span>három</span>
</div>

#ez {
  font-size: 0;
}
#ez span {
  font-size: 16px; 
}

Flex doboz használata

<div id="amaz">
    <span>egy</span>
    <span>kettő</span>
    <span>három</span>
</div>

#amaz {
   display: flex;
}

display: flex;         /*  Opera, Firefox, Chrome */
display: -moz-box;     /* Firefox */
display: -webkit-box;  /* iOS, Safari, Chrome */
display: -webkit-flex; /* Későbbi Chrome */
display: -ms-flexbox;  /* IE 10 */

inline-block elemek közötti white-space

A szülő elem fontmérete

<div class="doboz">
    <div>egy</div>
    <div>kettő</div>
    <div>három</div>
</div>

.doboz {
   font-size: 0;
}
.doboz div {
    display: inline-block;
    background-color: navy;
    padding: 3px;
    color: white;
    font-size: 1rem;
}

Megjegyzések beszúrása

<div class="doboz">
    <div>egy</div><!--
    --><div>kettő</div><!--
    --><div>három</div>
</div>

Külső hivatkozások