Háttérkép beállítása
Sajnos a háttérképek kirajzolása időt vesz igénybe, akkor is ha egyetlen nagy kép van, és akkor is ha egy kis kép
ismétlődik sokszor. A weboldalak váltása között mindenképp látható egy villogás, akkor is ha ugyanaz a kép.
Helyette jobb a színátmenetes háttér, mert villogásmentesen gyorsan rajzolja ki a böngésző.
Háttérszín beállítása színátmenettel
Az átmenet iránya tetszőleges lehet (default: felülről lefelé), fokban is megadható. Példák:
Táblázat cella border egyesítés, melyet a <table> elemhez kell rendelni.
Így a táblázat celláinál nem lesz dupla vastagságú keret a cellák széleihez képest.
border-radius
Lekerekítés a box szélén, például 5 pixel-re:
border-spacing
Táblázat cellák közötti hézag, melyet a <table> elemhez kell rendelni, például:
box-shadow
Box árnyékolás, például jobbra és lefele 5 pixellel:
<center>
A régi módszer a html-ben megadott <body><center>...</center></body> volt.
Ez így helyettesíthető css-sel:
cursor
Egér kurzor alakjának beállítása.
Néhány lehetséges beállítás:
display
block
A teljes szélességet elfoglalja.
Ez a default beállítás a <div> és a <p> elemre.
Elemek egymásba ágyazása: a gyerek elemek függőleges margói kilógnak a szülő elemből.
Margók megjelenése: a gyerek elemek szomszédos margói egybeolvadnak: margin collapse.
1. gyerek elem
32 pixeles margóval minden irányban
2. gyerek elem 32 pixeles margóval minden irányban
flow-root
A teljes szélességet elfoglalja.
Elemek egymásba ágyazása: helyes.
Margók megjelenése: a gyerek elemek szomszédos margói egybeolvadnak: margin collapse.
1. gyerek elem
32 pixeles margóval minden irányban
2. gyerek elem 32 pixeles margóval minden irányban
grid
A teljes szélességet elfoglalja.
Elemek egymásba ágyazása: helyes.
Margók megjelenése: helyes.
Hátrány: ha az elem magassága nagyobbra van állítva mint a gyerek elemek összmagassága,
akkor a gyerek elemeket függőlegesen széthúzza.
1. gyerek elem
32 pixeles margóval minden irányban
2. gyerek elem 32 pixeles margóval minden irányban
inline
Ez a default beállítás több html elemre, mely egy soron belül helyezkedik el, például: <span>
Nem veszi figyelembe a width, height, margin-top, margin-bottom jellemzőket !
Ha ezek a jellemzők mégis szükségesek, használjunk az elemre inline-block-ot.
Lehetséges hogy egy elem úgy néz ki mindenképp van egy eltüntethetetlen alsó margója.
Ez azért van, mert az elem alapból inline beállítású, és így a baseline-hoz (alapvonalhoz) igazodik,
vagyis fenntartja a helyet az olyan betűknek amik túlnyúlnak az alapvonalon.
Ez látható ha egy image mellett betűk is vannak.
list-item
Ez a default beállítás a <li> elemre.
Az elem előtt egy kör (vagy szám) jelenik meg.
flex
Flexibilis elrendezés. Például egy elég magas div-ben vízszintesen és függőlegesen is középre
tudjuk igazítani a benne lévő szöveget.
Egy flexibilis <div>-re vonatkozó jellemzők általában:
Az elem nem jelenik meg, függetlenül attól hogy a visibility hogy van beállítva.
font
Fontok keresése pl. itt lehetséges: Google Fonts
Azonban innen csak a fontok truetype változata tölthető le, melyek nagy fájl-méretűek.
Ennél jobb ha woff fájlokat használunk, melyek innen tölthetők le:
Google Webfonts Helper
A font kiválasztás után jelöljük ki a latin és latin-ext charset-et is,
az utóbbiban vannak benne a magyar ékezetes karakterek egy része.
A stílusnál szükséges a regular (font-weight = 400) mellett kiválasztani az
italic és bold (font-weight = 700) változatokat is.
Ha nem választunk bold-ot, akkor a böngésző próbálja megrajzolni, így viszont a font kinézete nem szép !
A html-ben a <b> 700-as font-weight -et jelent, azonban lehetséges hogy jobban néz ki a 600-as font-weight.
Ezesetben érdemes a 600-ast letölteni és ezt használni bold-nak.
Ezesetben át kell definiálni a <b> jelentését 600-ra.
A @font-face elemmel hivatkozhatunk egy külső fontra, mely nem az operációs rendszer része. font-family -nek egy tetszőleges név adható, melyre később hivatkozhatunk.
A fent definiált fontokra pedig lehet hivatkozni egy css-ben.
A <b> jelentését átdefiniáljuk 600-ra:
vagy lehet hivatkozni html-ben:
Egyes fontoknál lehetséges hogy nem tartalmaznak magyar őű karaktereket,
ekkor a böngésző helyettesíti őket más betűtípussal.
@media
Amennyiben a weboldal nyomtatásához más stílust szeretnénk, esetleg az adott fonttal nem lehet nyomtatni,
használjuk a sans-serif -et, így megadva:
outline
A html elemek kerete (border) körül megjelenhet mégegy keret, nevezzük outline-keret -nek.
Ilyen eset amikor az elemre rákerül a fókusz.
Ez az outline-keret az outline jellemzővel szabályozható.
Az outline-keret letiltása:
overflow
Az overflow jellemzővel beállítható, hogy egy befoglaló html-elem belső tartalma hogy jelenjen meg,
főleg akkor ha a tartalom nagyobb méretű.
Az overflow jellemzőt a befoglaló elemre kell helyezni.
overflow: hidden
A belső tartalom csak azon része látszik, mely belefér a befoglaló elembe.
A nem látott belső tartalom nem tekinthető meg, nincs hozzá scroll-bár.
overflow: scroll
A belső tartalom mindenképp megtekinthető scroll-bár segítségével.
Ha a belső tartalom nagyobb a befoglaló elemnél, akkor megjelenik egy scroll-bár.
Ha a belső tartalom kisebb a befoglaló elemnél, akkor a böngészőtől függ a scroll-bár megjelenítése.
overflow: visible
A belső tartalom "erőszakos" megjelenítése.
A belső tartalom teljes egészében látható, olyan áron is, hogy kilóghat a befoglaló elemből.
Ugyanez a megjelenés történik akkor is, ha a befoglaló elemnek nincs overflow jellemzője.
overflow: auto
Automatikus megjelenés. A tartalom nem lóg ki a befoglaló elemből. Leginkább a scroll beállításhoz hasonló.
padding
A padding-gal az állítható be hogy az elem (az elem border-e) és az elem belsejében lévő tartalom(content)
között mekkora távolság legyen.
Tehát nem az elem külsejére, hanem a belsejére van hatással.
position
static
Ez a default beállítás, az elemek a normál helyükön vannak. A top, bottom, left, right beállításnak nincs hatása !
fixed
Az elem a böngésző ablakhoz viszonyítva fix helyen van, innen nem mozdul el, a scroll sincs rá hatással.
Az elem helye a top, bottom, left, right jellemzőkkel állítható be.
Az elem nem marad része az oldal folyamnak.
Az elem átfedhet más elemeket.
Adjuk meg a top, bottom, left, right jellemzők közül az összeset amit tudunk,
inkább ezeket használjuk a width, height helyett!
Alapból nem kapunk scrollbar-t, ha szükség van rá, akkor használjuk az overflow-y: auto; jellemzőt.
Példa: mindig a jobb alsó sarokban lévő elem, mely scrollbár esetén is helyesen jelenik meg:
relative
Az elem a normál (static) helyéhez viszonyítva eltolható a top, bottom, left, right jellemzőkkel.
Az elem ugyanúgy része marad az oldal folyamnak.
Az elem átfedhet más elemeket.
Gyakran használjuk olyan esetben amikor a gyerek eleme absolute pozicionált.
absolute
Az elemet a top, bottom, left, right jellemzőkkel pozicionáljuk ahhoz az első szülő elemhez,
melynek a pozíciója nem static.
Ha nincs ilyen szülő elem akkor a <html> a szülő.
Az elem nem marad része az oldal folyamnak.
Az elem átfedhet más elemeket.
Ezzel pl. megoldható hogy az elem a (relative vagy fixed) szülő elem mellé kerüljön a bal vagy jobb sarokba.
sticky
Az elemet a top, bottom, left, right jellemzőkkel pozicionáljuk, ezek közül legalább egyet adjunk meg.
Az elem része marad az oldal folyamnak.
A böngésző úgy jeleníti meg az elemet, hogy scrollozáskor negmarad a képernyő látható részén.
Az elem átfedhet más elemeket.
Figyelem: ha a position: relative beállítást egy táblázatban a <th>
vagy <td> elemre alkalmazzuk,
és a táblázatban cella border egyesítés van, akkor a cella eltolódva, látszólag hibásan jelenik meg.
Megoldás: a cellában létre kell hozni egy belső <div> elemet,
és erre kell alkalmazni a position: relative beállítást például:
selector
Példák
Prioritás példa
Összetett selector esetén szabad használni könnyen olvasható osztályneveket, mint például empty.
A lenti példában, ha egy date-picker osztállyal ellátott tagon belül van egy empty osztállyal ellátott tag,
arra csak az összetett selector fog vonatkozni, az egyszerűbb nem, így nem lesz piros a háttérszíne.
Tehát az összetett selector erősebb, mint az egyszerűbb.
<tbody>
Mivel a böngészők automatikusan betesznek a <table> elemen belülre egy <tbody> elemet (vagy mégsem),
és minden ezen belülre kerül,
így lehet biztosan hivatkozni a <th> és <td> gyerekelemekre:
text-shadow
Szöveg árnyékolás, például jobbra és lefele 1 pixellel piros színnel:
tábla padding átállítás
Ugyanazon jellemzőkkel rendelkező táblázatnál változtatni lehet a tábla cellájának padding jellemzőjét,
például egy osztály hozzáadásával !
Html, nagy padding-os (5 pixeles) táblázat:
Html, kis padding-os (2 pixeles) táblázat:
A hozzájuk tartozó css:
user-select
A user-select használatával letiltható, hogy egy szöveget ki lehessen jelölni az adott elemen belül.
Hasznos lehet, ha egy olyan link-re kattintunk, mely az oldalon marad, és a kattintás után ne lássuk
a link szövegét kijelölve, mert úgy nem szép.
var()
A var() függvénnyel olyan változóra lehet hivatkozni, melyet definiáltunk a css elején,
vagy olyan css-ben, melyet a weblapon használunk.
A példában a bootstrap piros színére hivatkozunk, melyet a bootstrap definiál a bootstrap.min.css fájlban,
a következő módon:
vertical-align
Vertikális igazítás, például középre:
Ezt a beállítást nem a befoglaló konténerre kell alkalmazni, hanem a konténerben lévő egy-egy elemre.
Így például egy <div>-en belül lehet vegyes elrendezés, top-ra, bottom-ra, center-re illesztett elem is.
visibility
Ezt a jellemzőt nem érdemes használni!
A display jellemzőhöz hasonlóan szabályozható, hogy az elem megjelenjen-e a weboldalon, azonban ha nem
jelenik meg (hidden vagy collapse érték esetén), akkor is üres helyet hagy a html oldalon.
white-space
pre
Ezzel lehet elérni, hogy egy tetszőleges nem <pre> elem is ugyanúgy törje a sorokat,
megtartsa a space-eket mintha egy <pre> elem lenne.
pre-wrap
Hasonló a pre-hez, de itt a sortörések is engedélyezve vannak ott ahol a tartalom nem fér bele a tároló konténerbe.
Ha a sor túllógna a képernyőn (konténeren), akkor megtörik, így nem kell vízszintesen scrollozni.
nowrap
Táblázat cella sortörésének letiltása
width, height
A width, és height jellemzőkkel a belső content szélessége és magassága adható meg,
melyre rájön még a padding + border + margin is, így alakul ki a teljes méret.
Létezik még a min-width, max-width, min-height, max-height jellemző is.
A px és pt mértékegységekkel sem lehet abszolút méretű html elemeket készíteni.
A velük méretezett html elemek a megjelenítő eszközökön (pc, tablet, telefon) különböző méretekben jelennek meg.
A vw és vh (viewport widht, viewport height) mértékegységekkel a böngészőablakhoz viszonyítunk.
1vw = a böngészőablak szélességének 1/100 része
1vh = a böngészőablak magasságának 1/100 része
A % csak a szülő elemhez viszonyított méret, nem a bőngészőablakhoz viszonyított méret!
Példa: a <div> elem magassága minimálisra csökken, ha nem tartalmaz egyetlen karaktert sem.
De ha ezt a css jellemzőt a <div>-hez rendeljük, akkor annak magassága legalább
a font magasság 1.25-szerese lesz:
Példa: egy html elem magassága legyen legalább a böngészőablak magasságával egyenlő:
z-index
A z-index a 3. dimenzió.
Alapesetben minden elemnek 0 a z-indexe, és az kerül felülre amelyiket később rajzolja ki a böngésző.
Ezen lehet változtatni a z-index beállításával egy adott elemre, mely negatív és pozitív érték is lehet.
A nagyobb z-indexű elem takarja a kisebb z-indexű elemet, így látszólag közelebb van a szemünkhöz.