12. dia CSS Flashcards
Mi a CSS?
Strukturált dokumentumok megjelenítésének leírására szolgáló stíluslap nyelv.
Több eszközre képes megjeleníteni.
A dokumentumok megjelenését szétválasztja a tartalomtól, így egyszerűbb a szerkesztés és karbantartás.
A CSS fejlesztése, CSS szintek
W3C CSS Munkacsoport végzi a fejlesztést.
A CSS-nek nincsenek verziói, csak szintjei. Minden level az előzőn alapul.
CSS Level 1 : Elavultnak tekintik.
CSS Level 2 : Javítása jelenleg fejlesztés alatt. (2.1)
CSS Level 3 :
- Jelenleg fejlesztés alatt.
- Moduláris felépítésű. Minden modul a CSS egy részét definiálja. A CSS 2.1 specifikáció lehetőségeit bővíti. Minden modul eltérő stabilitású.
CSS dobozmodell
CSS Display Modul Level 3-ban
A CSS egy fastruktúrájú dokumentumot kap, amelyet egy rajzvásznon jelenít meg. A megjelenítést egy olyan struktúrával végzi amely dobozfát hoz létre. Ez a szerkezetét ábrázolja. Minden doboz a dokumentum egy eleme, ezekhez az elemekhez 0 vagy több dobozt hoz létre (általában 1-et).
(Szintaktikai elemek) karakterek
Az Unicode karakterkészletet használja.
(Szintaktikai elemek) vezérlősorozatok
Az Unicode karakterek megadásához használhatunk “\hhhhhh” formátumot, hexadecimális formában. Legalább egy és maximum 6 karakterből áll, tehát csak az utolsó számjegyet kell megadni.
“ \ (visszaper)” escapingre is jó.
(Szintaktikai elemek) megjegyzések
/ * Ez egy megjegyzés * /
Tokeneken kívűl bárhol használható, viszont egymásba nem ágyazható.
(Szintaktikai elemek) deklarációs blokk
{ez egy : deklarációs blokk}
Név : érték formátumban egymást követik a deklarációk, egy lista. “ ; “-vel elválasztandók.
(Szintaktikai elemek) at-szabályok
A stíluslap feldolgozását vezérlő speciális szabályok.
“ @ “ karakterrel kezdődnek és “ ; “-vel vagy deklarációs blokkal végződnek.
Pl.: @important
(Szintaktikai elemek) stílus szabályok
Egy kiválasztóból (vagy “ , “-vel elválasztott kiválasztókból) és egy az(oka)t követő deklarációs blokkból állnak.
Tulajdonságok
A CSS által definiált paraméterek, amelyek révén a dokumentumok megjelenítése vezérelhető. 602 db van belőle.
Neve és értéke van.
Össze lehet őket vonni.
Pl.: margin > [margin-top,margin-right,margin-bottom,margin-left]
Kiválasztók
Mintaillesztésre szolgál. Meghatározzák, hogy egy szabály melyik elemekre vonatkozik.
(Kiválasztók) típus kiválasztók
Egyszerű kiválasztó.
A megfelelő nevű elemek illeszkednek rá.
(Kiválasztók) általános kiválasztók
Egyszerű kiválasztó.
Általános kiválasztónak nevezzük a “ * “ formájú kiválasztót. Minden elem illeszkedik rá. Elhagyható olyan egyszerű kiválasztóból, amely további komponenseket is tartalmaz. Viszont nem mindig, az egyértelműsítés érdekében.
(Kiválasztók) attributum kiválasztók
Egyszerű kiválasztó.
[att] : Az att attribútummal rendelkező elemek illeszkednek rá.
[att=val] : Olyan elemek illeszkednek rá, amelyek att attribútumának az értéke pontosan “val”. A “val” azonosító, vagy sztring, tehát bárhogy ( val , ‘val’ , “val” ) adjuk meg ekvivalens.
(Kiválasztók) osztály kiválasztók
Egyszerű kiválasztó.
Használata “ . “ karakterrel “.class_értéke”.
(Kiválasztók) ID-kiválasztók
Egyszerű kiválasztó.
Használata “#” karakterrel. “#main”. Az azonosítót egy ID típusú attribútum kell, hogy kiszolgáltassa a dokumentumban. (HTML-ben “id”)
(Kiválasztók) pszeudo-osztályok
Egyszerű kiválasztó.
Használata “:” karakterrel “:azonosító” vagy “:azonosító(érték)”. Kisbetű-nagybetű érzéketlen. A dokumentumon kívüli információkra alapul vagy nem fejezhető ki más kiválasztóval.
:link - Felhasználó által még nem meglátogatott hivatkozás.
:viseted - már látogatott hivatkozás.
:hover - mutatóeszközzel kijelőlt, de nem feltétlenül aktivált elem.
:active - mutatóeszközzel aktivált elem
:lang(C) - C nyelvű szöveget tartalmazó elemek illeszkednek rá, ahol C egy CSS azonosító.
:is(X) - ahol az X (argumentum) egy kiválasztó lista Olyan elemek illeszkednek rá, amely illeszkedik az argumentum valamelyik kiválasztójára.
:not(X) - Azok az elemek illeszkednek rá, amelyek nem illeszkednek az argumentum listára.
(Pszeudo-osztályok) szerkezeti pszeudo-osztályok (Jelentések…)
Elemek testvérienek listáján való elhelyezkedése.
Elemek számozása 1-től kezdődik.
a, b egész számok.
:root - a dokumentum gyökérelemét választja ki
:only-child - olyan elemeket választ ki, amelyek szülőjének nincs más elemgyermeke
:only-of-type - olyan elemeket választ ki, amelyek szülőjének nincs más az elemmel megegyező kifejtett nevű elemgyermeke.
:empty - olyan elemek amelyek nem tartalmaznak szöveget vagy elemet.
:nth-child(an+b) - an+b-1 megelőző testvére van.
:nth-last-child(an+b) - an+b-1 követő testvére van.
:nth-of-type(an+b) - nem negatív n-re, an+b-1 megelőző azonos nevű elemtestvére van.
:nth-last-of-type(an+b)- nem negatív n-re, an+b-1 követő azonos nevű elemtestvére van.
:first-child = :nth-child(1)
:last-child = :nth-last-child(1)
:fist-of-type = :nth-of-type(1)
:last-of-type = :nth-last-of-type(1)
(Kiválasztók) pszeudo-osztályok (hasznosak)
Páros:
:nth-child(2n+0)
:nth-child(2n)
:nth-child(even)
páratlan
:nth-child(2n+1)
:nth-child(2n-1)
:nth-child(odd)
5. testvér
:nth-child(5)
1, 6, 11
:nth-child(5n+1)
:nth-child(5n-4)
első 5 testvér
:nth-child(-n+5)
utolsó 5 testvér
:nth-last-child(-n+5)
(Kiválasztók) pszeudo-elemek
Lehetővé teszik a dokumentumok olyan részeinek kiválasztását, amelyek más módon nem hozzáférhetőek. Kiválasztónként 1 lehet.
::first-line - egy elem első formázott sorát ábrázolja
::first-letter - egy elem első betű vagy számjegy karakterét ábrázolja, ha azt nem előzi meg más tartalom, pl.: kép.
::before - generált tartalom az elem tartalma elé
::after - generált tartalom az elem tartalma mögé
(Kiválasztók) kombinátorok
Leszármazott kombinátor :
Egyszerű kiválasztók két sorozatát elválasztó whitespace.
Ha 1.-re illeszkedik és 2. pedig valamilyen mélységben leszármazottja és illeszkedik akkor kiválasztja.
Gyermek kombinátor :
Egyszerű kiválasztók két sorozata “>”-el elválasztva.
Ha 1.-re illeszkedik és 2. pedig közvetlen gyermeke és illeszkedik akkor kiválasztja.
Szomszéd testvér kombinátor :
Egyszerű kiválasztók két sorozata “+”-el elválasztva.
Ha 1.-re illeszkedik, akkor a közvetlenül őt követő elemet választja ki, ha az illeszkedik 2.-re.
(Kiválasztók) specifikusság, annak meghatározása
Kiválasztókhoz és deklarációkhoz specifikusság meghatározása.
Három elemű (a,b,c) vektor, ahol a, b és c nem negatív számok.
Meghatározása:
a - A kiválasztóban előforduló ID-kiválasztók száma.
b - A kiválasztóban előforduló attribútum (osztály) kiválasztók és pszeudo-osztályok száma. (:not() nem kell figyelembe venni, de az argumentumát igen.)
c - A kiválasztóban előforduló típus kiválasztók és pszeudo-elemek száma.
(Stíluslap eredet) Felhasználói ágenstől származó, felhasználótól származó, szerzőtől származó.
Különböző származású stíluslapok állnak rendelkezésre dokumentumok megjelenítéséhez.
Növekvő erősségű felsorolás.
(felhasználói ágenstől származó, felhasználótól származó, szerzőtől származó.)
1. Felhasználói ágens biztosít stíluslapot.
2. A felhasználó maga is megadhat saját stíluslapot. Ez a fogyatékkal élőknek segít.
3. A szerző adja meg a stíluslapot.
“Fontos” deklarációk (!important)
Minden más közönséges deklarációt felülír:
Pl.: {color : red !important}
Általában a szerzői stíluslap szabályai nagyobb precedenciával bírnak, mint a felhasználói stíluslap szabályai. Mind a kettő tartalmazhat !important deklarációt, ekkor a precedencia megfordul.
A kaszkád
Konfliktusfeloldái mechanizmus arra az esetre, amikor egy elemhez különböző deklarációk állítanak be értéket.
Folyamata:
Meghatározni a deklarációkat amelyek konfliktusba kerülnek.
Megnézni ezek eredetét és azok erősségét. (Felhasználó, szerző…)
Azonos eredetű deklarációkat rendezzük specifikusság szerint csökkenő sorrendbe.
A fenti sorrend első deklarációja szolgálja a tulajdonság értékét.
Szabályok sorrendje
Számíthat a sorrend ha a precedencia nem dönthető el a specifikusság és az eredet alapján.
A sorrendben utlsó a ‘legerősebb’.
Öröklés
Tulajdonságértékek továbbadását jelenti szülő elemtől gyermek elemhez.
Öröklött : font-family, font-style, font-variant, font-weight, font-size, font
Nem öröklött : margin-top, margin-bottom, margin-right, margin-left, margin
kaszkádolás értékeként lehet inherit kulcsszóval kényszeríteni az öröklést.
Hibakezelés
Ha CSS-ben hiba van, akkor az elemző megpróbál helyreállni, úgy hogy csak minimális tartalmat ne vegyen figyelembe.
Minden érvénytelen konstrukciót figyelmen kívül hagy, és megy tovább a felhasználói ágens.
Dobozméretek meghatározása CSS-ben
box-sizing tulajdonság vezérli, hogyan kerül meghatározásra egy doboz szélessége és magassága. Meghatározza, hogy figyelembe vételre kerül-e a keret és a belső margó (padding).
Értéke :
content-box - keret és margó nem kerül beszámításba, csak a tartalom által elfoglalt terület.
border-box - keret és margó beszámításba kerül, szemmel is látható méretet határoz meg.
widht és height - a dobozok preferált szélességét és magasságát határozzák meg.
min-widht/height - minimális doboz méret..
max-widht/height - maximális doboz méret..
