Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:css:css_nyelv

< CSS

CSS

  • Szerző: Sallai András
  • Copyright © Sallai András, 2011, 2012, 2013, 2014, 2015, 2016
  • Licenc: GNU Free Documentation License 1.3

Bevezetés

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 létrehozásánál érzékelhető. A webet eredetileg is úgy tervezték, hogy szétválasszák a szerkezetet és a kinézetet meghatározó elemeket.

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

HTML verzió

HTML 4.01

A HTML verzió megadásánál jelezzük, hogy a weblapot nem elavult HTML elemekkel akarjuk formázni, hanem lépcsőzetes stíluslapok használatával. Ekkor a dokumentum típusdefiníció 4.01 HTML verzió esetén így néz ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

A sorba a Strict kulcsszót szúrjuk be, lecserélve a Transitional szót.

HTML5

<!DOCTYPE html>

A HTML5 esetén jelenleg ennél többet nem kell megadni.

Stíluslapkészítés

A CSS használata során, elsőként meg kell adnunk melyik HTML elem tulajdonságait akarjuk beállítani, vagyis szelektort adunk meg. 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

Mi most a External definícióval foglalkozunk.

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 helye 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 oldalba 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" />

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

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

Szöveg igazítása

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. Szelektor az elem neve:

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 adju meg:

h1 {
    text-align: center;
} 

Lorem ipsum

Szöveg színezése

h1 {
    color: blue;
} 

Háttér

background-color:#990000;
background-image: url(hatter.png);
background-repeat: repeat-x;

A background-repeat további lehetséges értékei:

Tulajdonság Lehetséges értékek
background-color #RGBszínkód
background-image url(kepneve.kit)
background-repeat no-repeat, repeat-x, repeat-y, repeat
background-position left, center, right, top, bottom
background-attachment scroll, fixed
background-size méret pl.: 140px 300px vagy „cover”, „contain”

background-position

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

Két háttér

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

Karakterkódolás beállítása

Általános szintaxis:

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

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

@charset "UTF-8";

Font

Stílus

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

Italic:

Lorem ipsum dolorest amet.

Oblique:

Lorem ipsum dolorest amet.

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.

Vastagság

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

Méret

body { font-size: 14px; } 

Csoportban

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

Árnyék

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

Fontcsalád

font-family: serif;
Font család Megjelenés Leírás
serif serif Talpas fontok
sans-serif sans-serif Talpatlan fontok
monospace monospace Fix betűszélességű fontok
cursive cursive Kurzív fontok
fantasy fantasy Fantázia fontok

Lorem ipsum dolores amet - serif

Lorem ipsum dolores amet - sans-serif

Lorem ipsum dolores amet - monospace

Lorem ipsum dolores amet - cursive

Lorem ipsum dolores amet - fantasy

Fontvariációk

font-variant: small-caps;
normal Normál font. Alapértelmezett
small-caps Kiskapitális
inherit A szülőelemtől örökölt fontvariáció

Néhány ötlet

001

Lorem ipsum dolores amet

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

002

Lorem ipsum dolores amet

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

003

Lorem ipsum dolores amet

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

004

Lorem ipsum dolores amet

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

004

Lorem ipsum dolores amet

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

005

Lorem ipsum dolores amet

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

006

Lorem ipsum dolores amet

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

007

Lorem ipsum dolores amet

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

Szövegbeállítások

color szöveg színe
direction szöveg iránya ltr, rtl, inherit
letter-spacing betűk közötti távolság
line-height sor magassága
text-align szöveg vízszintes igazítása left, center, right, justify
text-decoration szöveg dekoráció hozzáadása none, overline, line-through, underline, blink
text-indent az első sor behúzása pl.: 50px
text-shadow árnyék
text-transform kis és nagybetűs uppercase, lowercase, capitalize
unicode-bidi
vertical-align függőleges igazítás
white-space a white-space karakterek viselkedése
word-spacing szavak közötti távolság normal, pre, nowrap, pre-wrap, pre-line

Dekoráció

body {
  text-decoration: undrline;
}

Lehetséges értékei

  • none
  • underline
  • overline
  • line-through
  • blink

szöveg - text-decoration: underline

szöveg - text-decoration: overline

szöveg - text-decoration: line-through

Szavak közötti távolság

normal A whitespacek összvonása. A sordobozt kitölti.
pre Csak ott lesz sortörés, ahol a forrásban is sortörés van. Közök nem lesznek összevonva
nowrap Közök összevonása. Szövegen belül nincs sortörés
pre-wrap Közök nem lesznek összevonva. Sortörés, ahol forrásban is van, vagy ahol a sordoboz kitöltése megköveteli.
pre-line Közök összevonása. Sortörés, ahol a forrásban új sor kezdődik, vagy ahol a sordoboz kitöltése megköveteli.

Dobozmodell

Minden HTML elemet doboznak tekintünk.

Minden doboznak lehet szöveges tartalma, amelynek állíthatjuk a színét. Minden doboz háttérét beállíthatjuk, színnel, képpel. 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 ezen tulajdonságát külön tudjuk állítani, felül, alul, jobbra és balra.

Overflow

Egyszerű túlfolyás-kezelés

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.

overflow: scroll;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.

overflow: none;

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.


Az x és y tag

overflow-x: hidden;
overfloa-y: hidden;
Érték Leírás
visible A tartalmat nem bántjuk a görgető sáv a dobozon kívül lesz.
hidden A tartalom nyírva lesz, a görgető sáv rejtve
scroll A tartalom nyírva lesz, a görgető sáv megjelenik
auto A görgetősáv megjelenése a tartalomtól függ
no-display Ha a tartalom nem tölti ki a dobozt, akkor doboz törölve lesz.
no-content Ha a tartalom nem tölti ki a dobozt, akkor tartalom elrejtésre kerül

Csak függőleges scroll:

overflow-y: scroll;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.

Keret tulajdonságok

border

.doboz {
    border: 2px solid black;
}

style

border-style: solid;

Lehetséges értékei

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

border-width

Lehetséges értékei

  • thin
  • medium
  • thick
  • érték

border-collapse

  • separated
  • collapse

Lista tulajdonság

list-style-image

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

list-style.position

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.

list-style-type

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

Megjelenítés

h1.hidden {
  visibility:hidden;
}

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

h1.hidden {
  display:none;
}

A display:none viszont teljesen kiveszi a szövegfolyamból az elemet. Az ott többet nem fog létezni.

A blokk és az inline elemek

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>

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.

Inline elemekre példa:

  • <span>
  • <a>

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

Pozicionálás

A position lehetséges értékei:

  • static (alapértelmezett)
  • relative
  • absolute
  • fixed

Értékek

A static érték

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 relative érték

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.

Az absolute érték

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

A fixed érték

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

Példa

Static

Adott a következő weblap

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pozicionálás</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
 
<h1>Lorem ipsum</h1>
 
<p>
Lorem bekezdés
</p>
 
 
</body>
</html>

A hozzátartozó CSS:

style.css
body {
	border-style: solid;
}
h1 {
	border-style: solid;
}
 
p {
	border-style: solid;
	position: static;
}

A p elemen a position tulajdonság static beállítása nem változtat mert ez az alapértelmezett. A bekezdés a tartalom folyamába illeszkedve megjelenik.

A bekezdések szegélyeit csak az átláthatóság miatt lettek beállítva.

Relative

Most javítsuk ki a postion tulajdonságot relative értékre:1

style.css
body {
	border-style: solid;
}
h1 {
	border-style: solid;
}
 
p {
	border-style: solid;
	position: relative;
}

Hatása ebben a formában megegyezik a static értékkel.

Viszont lehetővé teszi további tulajdonságok megadását. Ilyen például a top és a left tulajdonság.

style.css
body {
	border-style: solid;
}
h1 {
	border-style: solid;
}
 
p {
	border-style: solid;
	position: relative;
        top: 100px;
}

Beállítottuk a top tulajdonságot 100 pixelre. A p elem által alkotott doboz 100 pixellel lejjebb jelenik meg, saját helyétől számítva. Saját helyén azonban az üres hely ott marad. A következő elem az üres hely után jelenik meg.

Egészítsük ki az alábbi div elemmel a weblapunkat. Illeszük a p elem után:

<div>aa</div>

Weblapunk ekkor így néz ki:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pozicionálás</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
 
<h1>Lorem ipsum</h1>
 
<p>
Lorem bekezdés
</p>
 
<div>aa</div>
 
 
</body>
</html>

Láthatjuk, hogy a div elem marad a szövegfolyamban, de p elem helyét meghagyva (üres rész után) jelenik meg.

Absolute

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. A h1 elem után nem marad meg a p elem helye. A h1 elem után a div elemünk jelenik meg.

Állítsuk be style.css állományban az absolute értéket, majd frissítsük a weblapot, nézzük merre mozdul el a p elem által létrehozott doboz.

style.css
body {
	border-style: solid;
}
h1 {
	border-style: solid;
}
 
p {
	border-style: solid;
	position: absolute;
        top: 100px;
}

Fixed

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.

Állítsuk be style.css fájlban a fixed értéket:

style.css
body {
	border-style: solid;
}
h1 {
	border-style: solid;
}
 
p {
	border-style: solid;
	position: fixed;
        top: 100px;
}

Az index.html állomány végére (a </body> előtt) szúrjunk be még legalább harmincat a következő div elemből:

<div>aa</div>

Erre csak azért van szükség, hogy legyen mit görgetni a böngésző ablakában a teszteléshez.

Az index.html ekkor így fog kinézni:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pozicionálás</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
 
<h1>Lorem ipsum</h1>
 
<p>
Lorem bekezdés
</p>
 
 
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
 
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
 
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
 
 
</body>
</html>

Pozicionálás példa 2

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.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 dobozt középre igazítottuk.

Pozicionálás példa 3

style.css
div#egyik{
	color: blue;
	border: 1px solid green;
	width: 50%;
	left: 25%;
	position: absolute;
	top: 5%;
}
 
div#masik{
	border: 1px solid blue;
	position: absolute;
	left: 2%;
	width: 20%;
	top: 5%;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
 
 
<div id="egyik">alma</div>
<div id="masik">körte</div>
 
 
 
</body>
</html>

alma
körte




Lebegtetés

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

A float

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;
}
<p>
<img src="kep.png" alt="kep" class="osztalynev"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

A clear

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

Lehetséges értékei:

left A balra úsztatás törlése
right A jobbra úsztatás törlése
both Egyik oldalra sem lehet úsztatni
none Úsztatás mindkét oldalon megengedett

Blokk elemek igazítása

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

Jobbra igazítás

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

Jobbra floattal:

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

Vágás

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.

Ál-osztályok

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

Az ál-osztályok szintaxisa

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

Példa

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

Az összes ál-osztály

Szelektor Példa A példa leírása
:link a:link Meg nem látogatott linkek.
:visited a:visited Látogatott linkek.
:active a:active Aktív linkek.
:hover a:hover link amely felett az egér tartózkodik.
:focus input:focus Az input elem, ha fókuszba került.
:first-letter p:first-letter A p elem első betűje.
:first-line p:first-line A p elem első sora.
:first-child p:first-child A p elem közül az, amely a szülő első eleme.
:before p:before Minden p elem elé tartalmat szúr be.
:after p:after Minden p elem után tartalmat szúr be.
:lang(nyelv) p:lang(hu) Minden p elem a lang tulajdonsággal
és hu értékkel lesz beállítva.

Átlátszóság

Az opacity tulajdonság

div.atlatszodoboz {
    height: 150px; 
    width: 220px;
    background-color: #ffffff;
    opacity: 0.6;
    filter: alpha(opacity=60); /* IE8 és későbbi verziók */
}

Az rgba színek

Az rgba színek a következő böngészők támogatják: IE9+, Firefox 3+, Chrome, Safari és Opera 10+.

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:

#azonosito {
   background-color:rgba(255,0,0,0.3);
} 

Táblázatok

Táblázat beállítások

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;
}
td {
    width: 50px;
    background-color: yellow;
}

Cella közötti, cella és tartalma közötti tér

Cellák közötti tér

table {
    border-spacing: 20px;
}

A cella és tartalma közötti tér

td {
    padding: 50px;
}

A szegély összeolvasztása vagy elkülönítése

table {
    border-collapse: collapse;
}

Lehetséges értékei:

collapse A szegély összeomlik egyetlen vonallá, amikor lehetséges. (border-spacing és a empty-cells beállítások nem működnek)
separate A szegély különálló (border-spacing és empty-cells beállítások működnek). Alapértelmezett
inherit A border-collapse tulajdonság a szülő elemtől öröklött.

Cella tartalmának színe, igazítása

td {
    text-aling: center;
    color: yellow;
}

Példa

table, td, th {
    border-collapse: collapse;
    border-width:1px;
    border-style: solid;
    border-spacing: 20px;
}
td {
    padding:15px;
 
}

Z-index

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

z-index: 3
z-index: 2
z-index: 1

z-index: 1
z-index: 2
z-index: 3

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

Mértékegységek

Relatív hosszmérték
em A releváns karakter mérete
px képpont; eszközfüggő
ex A releváns karakter x-magassága
%
ch A „0” (zero) szélességhez relatívan
rem A root elem fontszélességéhez relatívan
vw A viewport szélességének 1%-hoz relatívan
vh A viewport magasságának 1%-hoz relatívan
vmin A viewport kisebb dimenziójához képest 1%-al
vmax A viewport nagyobb dimenziójához képest 1%-al

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

Abszolút hosszérték
in inch; hüvelyk; 25,4 mm
cm centiméter
mm milliméter
pt pt; pont; 1/72 hüvelyk; kb.: 0,352 mm
pc pica; 12 pont, 3/18 hüvelyk; kb.: 4,23 mm

Példák:

h1 {
    margin: 0.3in;
    line-height: 2cm;
    word-spacing: 5mm;
    font-size: 10pt;
}
Mikor ajánlott hasznli
Ajánlott Alkalmanként Nem ajánlott
Képernyő px, em, % ex mm, cm, in, pt, pc
Nyomtatott mm, cm, in, pt, pc, em, % px, ex

At-szabályok

@import "masik.css";

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

Függelék

Értékek

Egész és valós számok

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.

Relatív hosszértékek

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

Abszolút hosszérték

  • 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

Százalékérték

p {
  font-size: 120%;
}

Számlálók

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

Fejezetenként újraszámozva:

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

Bekezdések számozása:

  <p>Első</p>  
  <p>Második</p>
body {
  counter-reset: section; 
}
p:before {
  counter-increment: section;
  content: counter(section)".) "; 
}

Űrlap

<form id="egy">
    <label for="user">Felhasználónév:</label>
    <input type="text" name="user" /><br />
 
    <label for="pass">Jelszó:</label>
    <input type="password" name="pass" /><br />
    <input type="submit" value="Bejelentkezés" />
<form>
form#egy label {
    width: 200px;
    display: inline-block;
}

Az input elemek tördelése a br elem mellett lehet div elemmel vagy p elemmel. Ez utóbbiról tudni kell, hogy nagyobb távolságot hagy a kettő között.

Űrlap 2

#urlap {
   text-align: center;	
}
 
form {
	background-color: #996600;
	padding: 15px;
	display: inline-block;
	border-radius: 5px;
}
 
fieldset {
	border-style: none;
	background-color: orange;
	border-radius: 5px;	
}
 
legend {
	color:white;
	background-color: blue;
	font-family: sans-serif;
	border-style: none;
	border-radius: 5px;
	text-align: center;
	padding: 3px;
}
 
form#egy label {
	display: inline-block;
	width: 100px;
	text-align: left;
}
<div id="urlap"> 
<form id="egy">
<fieldset>
<legend>Azonosítás</legend>
 
 
<label for="user">Felhasználónév: </label><input type="text" name="user" required />
<br>
 
 
<label for="pass">Jelszó: </label><input type="password" name="pass" >
<br>
 
<div>
<input type="submit" value="Bejelentkezés" />
</div>
 
</fieldset>
</form>
</div>

Átlátszó szegély

Szükséges hozzá valamilyen heterogén háttér. Például a GIMP-ben mintával kiöntött kis kép.

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

A calc() egy CSS függvény, amely paraméterként a következőket várja: <length>, <frequency>, <angle>, <time>, <number> vagy <integer>.

A calc() segítségével egy CSS tulajdonság értéke számítható ki. A calc() függvényen belül lehet egy másik calc() függvény, vagyis egymásba ágyazhatók.

Szintaktika:

calc(kifejezés)

Használható operátorok:

+ Összeadás
- Kivonás
* Szorzás
/ Osztás

Használatára példa:

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

Konkrét példa:

index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Oszlopok</title>
<style>
#oszlopdoboz {
	width: 200px;
	height: 200px;
}
.col {
	width: calc(100% / 3);
	width: -moz-calc(100% / 3);
	height: 200px;
	float:left;   
}
#col1 {
	background-color: blue;	
}
#col2 {
	background-color: yellow;
}
#col3 {
	background-color: #bbbbbb;
}
 
</style>
</head>
<body>
 
<div id="oszlopdoboz">
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
</div>
 
</body>
</html>

Függőleges igazítás

Amit szoktak ajánlani az a display: table-cell és vertical-align: middle használata. Ez azonban nem minden böngészőben működik az elvártaknak megfelelően, hiszen a vertical-align eredetileg táblázat celláján belüli igazításra és szövegközi igazításokra tervezték.

#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>

alma

Működik: Chrome verzió: 31, Firefox 25.0.1

A következő példában a szöveget egy belső dobozba teszem és ennek a doboznak állítok 50%-os felső távolságot. Így persze nem lesz középen, de ha kivonom a felét, azaz 0.5em-et akkor majdnem a felénél lesz.

Ez persze csak akkor működik, ha szöveg egy soros. Ha már két sor van, akkor a 1em mértéket kell kivonni. Szükségünk lesz a calc() függvényre is, amelyet esetleg régebbi böngészők még nem támogatnak.

#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>

Működés:

alma

Talán a legkorrektebb megoldás ha span elemként kezeljük a középre igazítandó szöveget, majd mellé teszünk egy másik span elemet, amelynek a magasságát 50%-ra állítjuk be. Pixelre még így sincs pont középen, ezért a középre igazítandó span elemen beállítom a vertical-align: middle értéket.

Kódolva:

#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>

Működés:

alma

Ha vízszintesen is középre igazítunk mint a példában, a span elem extra margója miatt nem lesz pixelre pontosan középen. Ezen segíthetünk, ha margin-right: -4;-t állítunk be, vagy ha lehet a szülődoboz számára font-size:0; értéket állítunk.

Doboz és szöveg

#doboz {	
 	color: #656565;
        height: 200px;
	width: 150px;
	display: table-cell;
	vertical-align: middle;
	text-align: justify;
	font-size: 11px;
	border: 1px dotted #656565;
	padding: 10px;
}
<div id="doboz">
Lorem ipsum ...
</div>

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.
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.

Extra margó

A li és a span elemek alapértelmezésként 2 pixeles extra margót kapnak. Ez kényelmetlen lehet, ha például ebből szeretnék menüt készíteni, és nem szeretnénk azokat az extra margókat.

Az extra margók akkor jelentkeznek a fenti elemeknél, ha azokat inline-block elemmé tesszük, és szeretnénk elkerülni a float:left beállítást. Mi tehetünk?

Negatív jobb margó

Az egyik lehetőség az igazítandó elemek számára egy -4 pixeles jobb-margót állítása.

span {
  background-color: navy;
  color: white;
  padding: 4px;
  margin-right: -4px;
}
  <span>Egy</span>
  <span>Kettő</span>

Egy Kettő

Azért nem a legjobb megoldás, mert a Firefox újabban 5px extra margót használ (2015).

jQuery megoldása

Eltávolíthatjuk egy jQuery kóddal:

<p class="removeTextNodes">
    <span> Foo </span>
    <span> Bar </span>
</p>
$('.removeTextNodes').contents().filter(function() {
    return this.nodeType === 3;
}).remove();

Szülő elem fontmérete

Hatékony megoldás, ha a szülőelem fontméretét 0 értékre állítom, a span vagy a li elem méretét pedig a kívántra. Alapértelmezett méret a böngészőkben 16px.

<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

Rugalmas méretű dobozokkal is megoldható.

<div id="amaz">
    <span>egy</span>
    <span>kettő</span>
    <span>három</span>
</div>
#amaz {
   display: flex;
}

Régebbi típusú böngészők esetén:

-webkit-box -moz-box -ms-flexbox -webkit-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 */

Külső hivatkozások

oktatas/web/css/css_nyelv.txt · Utolsó módosítás: 2019/11/09 19:52 szerkesztette: admin