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

===== 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. {{:oktatas:web:css:clip_bemutatasa.png|}} ===== Á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 */


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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

==== Az rgba színek ==== 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);
}

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



    
        Név
        Település
    
    
        Peres János
        Szeged
    
    
        Timp István
        Szeged
    
    
        Lazi Ferenc
        Miskolc

Név	Település
Peres János	Szeged
Timp István	Szeged
Lazi Ferenc	Miskolc

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

{{:oktatas:web:css:tablazat_01.png|}} Táblázat 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;
}

{{:oktatas:web:css:tablazat_02.png|}} Táblázat szegélyezése cellákkal 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;
}

{{:oktatas:web:css:tablazat_03.png|}} Cellák összeomlasztása ^ A border-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. | 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;
}

{{:oktatas:web:css:tablazat_04.png|}} Színezett td elemek ==== Cella közötti, cella és tartalma közötti tér ==== === Cellák közötti tér === 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;
}

{{:oktatas:web:css:tablazat_05_cellakkozottitav.png|}} A cellák között tér === A cella és tartalma közötti tér ===


 
td {
    padding: 30px;
}

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


table {
    border-spacing: 20px;
}

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

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

{{:oktatas:web:css:tablazat_06_cellabelulitav.png|}} A cella és tartalma közötti távolság állítása ==== Cella tartalmának igazítása ====


td {
    text-aling: center;
}

==== Oszlop stílusok ==== 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;
}



    
        #
        Név
        Fizetés
    
    
        1
        Erős István
        342
    
    
        2
        Rege Zoltán
        394

#	Név	Fizetés
1	Erős István	342
2	Rege Zoltán	394

==== Sorok csíkozása ====


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

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

{{:oktatas:web:css:tablazat_07_csikozas.png?400|}} ===== Z-index =====



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


#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: 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. (szülőelemtől örökölt) | | ex | A releváns karakter x-magassága | | % | | | ch | A "0" (zero) szélességhez relatívan | | rem | A root elem fontméretéhez relatívan | ^ A Viewporthoz kapcsolódó mértékegységek ^^ | 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 és mégis relatív hosszmérték ^^ | px | képpont; eszközfüggő | 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. {{:oktatas:web:css:egy_pixel.png|}} ((A rajzot a W3C oldala ihlette: https://www.w3.org/TR/css-values-3/)) ^ 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;
}


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 ==== rem ==== 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. ===== At-szabályok =====


@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. ==== Média beállítások ==== 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;
  }
}

===== 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 ==== === Fejezetek számozása ===


A haladás előnye
Lorem ipsum dolor est amet

A haladás veszélyei
Lorem ipsum dolor est amet

Érintkezés
Lorem ipsum dolor est amet

Társalgás
Lorem ipsum dolor est amet


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

A haladás előnye

Lorem ipsum dolor est amet

A haladás veszélyei

Lorem ipsum dolor est amet

Érintkezés

Lorem ipsum dolor est amet

Társalgás

Lorem ipsum dolor est amet

=== Bekezdések számozása ===


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

Fejezetenként újraszámozva:


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

Bekezdések számozása:


  Első  
  Második


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

A haladás előnye

Lorem ipsum dolor est amet

A haladás veszélyei

Lorem ipsum dolor est amet

==== Á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);
}


  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:






Oszlopok

==== Függőleges igazítás ==== Tekintsük át mit tehetünk egy fix méretű 100x100 pixeles dobozban, a függőleges igazításért. 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. === 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;
}

Ügyeljünk, hogy be legyen állítva a "display: table-cell;" tulajdonság.



  alma

alma

Működik: Chrome verzió: 31, Firefox 25.0.1 === Belső 50%-os doboz === 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;
}



  
    alma

Működés:

alma

=== Span elem 50%-al === 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;
}



  
  alma

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. === 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%);
}



    
        alma

alma

=== Flex doboz ===



alma


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

alma

=== Rugalmas magasság esetén === Ha doboz magassága nem fix méretű, vagyis a tartalomtól függ, akkor használható a padding felül-alul beállítva.


.doboz {
   padding: 50px 0;
}

=== Sor magasság === Egy soros szöveg esetén a sor magasságát beállíthatjuk a doboz magasságára.


.doboz {
    line-height: 100px;
}

==== Szövegdobozok egymás mellett ==== Dobozok 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;
}


    
    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.

Működés közben:

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


  Egy
  Kettő

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:



     Foo 
     Bar


$('.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.



    egy
    kettő
    három


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

=== Flex doboz használata === Rugalmas méretű dobozokkal is megoldható.



    egy
    kettő
    három


#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 ==== Ha van két inline-block elemünk, és azok két külön sorban vannak, közöttük lesz egy white-space karakter. Ha a két inline-block dobozt közvetlenül egymás mell szeretnénk tenni, ez nem várt hatást eredményez:

egy

kettő

három

Többféle megoldás létezik. Lehet float vagy flex dobozt használni. Itt most két olyan megoldást nézünk meg, ahol megmaradunk az inline-block tulajdonság mellett. === A szülő elem fontmérete === Az egyik megoldás lehet, ha a szülő elem fontméretét 0-ra állítjuk.



    egy
    kettő
    három


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

egy

kettő

három

=== Megjegyzések beszúrása === Beszúrhatunk a white-space helyére üres megjegyzéseket.



    egy
kettő
három

egy

kettő

három

===== Külső hivatkozások ===== * http://www.w3.org/International/questions/qa-css-charset * http://caniuse.com (Kompatibilitási összehasonlítások) * http://www.sitepoint.com/css-position-sticky-introduction-polyfills/ (Pozicionálás sticky példa; csak Firefox)

Valami

Valami

A haladás előnye

A haladás veszélyei

Érintkezés

Társalgás

A haladás előnye

A haladás veszélyei

Érintkezés

Társalgás

A haladás előnye

A haladás veszélyei