CSS Flashcards
Mi a CSS?
- Strukturált (például HTML és XML) dokumentumok
megjelenítésének leírására szolgáló stíluslap nyelv. - Szétválasztja a dokumentumok megjelenítési
stílusát a dokumentumok tartalmától.
A CSS fejlesztése
A W3C CSS Munkacsoportja fejleszti.
CSS szintek
- A szó hagyományos értelmében a CSS-nek nincsenek verziói, hanem szintjei vannak (jelenleg a level 3 a hasznalatos)
- A CSS minden egyes szintje az előzőn alapul, annak definícióit finomítja és új lehetőségeket vezet be.
CSS dobozmodell
- A CSS egy fastruktúrájú dokumentumot kap, melyet egy rajzvásznon (például a képernyőn) jelenít meg egy olyan közbülső struktúrát, a dobozfát (box tree) előállítva, mely a megjelenített dokumentum formázási szerkezetét ábrázolja.
- Minden egyes doboz a fában a dokumentum egy megfelelő
elemét (vagy pszeudo-elemét) ábrázolja térben és/vagy
időben a rajzvásznon.
Tulajdonságok
- A CSS által definiált paraméterek, melyek révén a dokumentumok megjelenítése vezérelhető.
- A tulajdonságoknak neve és értéke van.
- osszevont tulajdonsag: tobb css tulajdonsag erteket allitja be egyidejuleg (pl margin a margin-right… helyett)
karakterek
Az Unicode karakterkészlet használata.
vezérlősorozatok
- Unicode karakterek megadásához használhatunk \hhhhhh
formájú vezérlősorozatokat, ahol hhhhhh az Unicode karakter kódpontját ábrázoló legalább egy és legfeljebb 6 karakterből álló hexadecimális számjegysorozat. - ez roviditheto /9 = /09 = /0000009
- Speciális karakterek jelentésének
elnyomásához használjuk a ‘' karaktert.
megjegyzések
A /* és */ határólók között lehet megadni
megjegyzéseket.
deklarációs blokk
’{‘ és ‘}’ karakterek határolják, melyek
között deklarációk egy listája kötelező.
at-szabályok
- A stíluslap feldolgozását vezérlő speciális
szabályok. - ’@’ karakterrel kezdődnek, melyet egy azonosító
követ, és ‘;’ karakterrel vagy egy deklarációs
blokkal végződnek.
stílus szabályok
Egy kiválasztóból (vagy ‘,’ karakterekkel elválasztott kiválasztókból) és egy az(oka)t követő deklarációs blokkból állnak.
Kiválasztók:
- Mintaillesztésre szolgálnak.
- Meghatározzák, hogy egy szabály mely elemekre vonatkozik.
- Kisbetű-nagybetű érzéketlenség az ASCII tartományban
típus kiválasztó
- Egy CSS minősített név, a gyakorlatban
tipikusan egy azonosító. - A megfelelő nevű elemek illeszkednek rá.
általános 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, mely további
komponenseket is tartalmaz.
attribútum kiválasztók
- [att] Az att attribútummal rendelkező elemek illeszkednek rá.
- [att=érték] Olyan elemek illeszkednek rá, melyek att attribútumának értéke pontosan érték.
ID-kiválasztó
- # azonosító formájú kiválasztó, az adott azonosítójúelem illeszkedik rá.
- Az azonosítót egy ID típusú attribútum kell, hogy
szolgáltassa a dokumentumban.
pszeudo-osztályok
- :azonosító vagy :azonosító(érték) formájú kiválasztók.
- kis es nagybetu erzeketlen
:link
a felhasználó által még nem meglátogatott hiperhivatkozásokra
vonatkozik.
:visited
a felhasználó által meglátogatott hiperhivatkozásokra
vonatkozik.
:hover
a felhasználó által mutatóeszközzel kijelölt, de nem feltétlenül aktivált elemre vonatkozik.
:active
a felhasználó által mutatóeszközzel aktivált elemre vonatkozik.
:lang(C)
A C nyelvű szöveget tartalmazó elemek illeszkednek rá.
- C egy CSS azonosító (nyelvkód). (pl en, hu, en-GB)
negáció pszeudo-osztály
:not(X) formában adható meg, ahol az argumentum egy olyan egyszerű kiválasztó, melyben nem megengedett a negáció pszeudo-osztály.
:is()
Minden olyan elem illeszkedik rá, mely illeszkedik a lista
argumentum valamely kiválasztójára.
szerkezeti pszeudo-osztályok
- Amikor megállapításra kerül, egy elem helye a testvéreinek listájában, akkor csak az elemeket kell a listában figyelembe venni.
pl, - :root (dokumentum gyoker leme)
- :only-child (szulonek nincs mas gyereke)
- :only-of-type
- :empty
- nth-child
- nth-last-child
- nth-of-type
- nth-last-of-type
leszármazott kombinátor
- Egyszerű kiválasztók két sorozatát elválasztó whitespace.
– Ha P és Q egyszerű kiválasztók két sorozata, akkor a P Q kiválasztóra a Q-ra illeszkedő olyan elemek illeszkednek, melyek a P-re illeszkedő elemek leszármazottai. - pl thead th {}
gyermek kombinátor
- Egyszerű kiválasztók két sorozatát elválasztó ‘>’ karakter.
– Ha P és Q egyszerű kiválasztók két sorozata, akkor a P > Q kiválasztóra a Q-ra illeszkedő olyan elemek illeszkednek, melyek a P-re illeszkedő elemek gyermekei.
szomszéd testvér kombinátor
- Egyszerű kiválasztók két sorozatát elválasztó ‘+’ karakter.
– Ha P és Q egyszerű kiválasztók két sorozata, akkor a P + Q kiválasztóra a Q-ra illeszkedő olyan elemek illeszkednek, melyek a P-re illeszkedő elemet követnek közvetlenül a
dokumentumban.
specifikusság
- Kiválasztókhoz és deklarációkhoz specifikusság meghatározása.
- A specifikusság egy háromelemű (a, b, c) vektor, ahol a, b és c nemnegatív egészek.
- A vektorok rendezése lexikografikusan történik.
specifikusság meghatározása
A specifikusság egy (a, b, c) vektor, ahol:
– a a kiválasztóban előforduló ID-kiválasztók száma.
– b a kiválasztóban előforduló attribútum kiválasztók és pszeudo-osztályok száma.
- A negáció pszeudo-osztályt figyelmen kívül kell hagyni,
azonban az argumentumát nem!
– c a kiválasztóban előforduló típus kiválasztók és pszeudo-elemek száma.
Stíluslap eredet
Egy stíluslap eredete szerint lehet:
– A felhasználói ágenstől (böngészőtől) származó stíluslap
– A felhasználótól származó stíluslap
– A dokumentum szerzőjétől származó stíluslap
felhasználói ágenstől származó
A felhasználói ágensek biztosítanak alapértelmezett stíluslapot.
– Például olyan stílus szabály tartalmazása, mely az em HTML elem megjelenítéséhez kurzív betűtípust ír elő.
felhasználótól származó
A felhasználó megadhat saját stíluslapot adott dokumentum megjelenítéséhez.
fogyatekossaggal elok szamara fontos, pl chromium, firefox es opera Stylish kiterjesztese
szerzőtől származó
- link fejlec elemmel, vagy style fejlec elemben deffinialt stiluslap
- xml eseten a xml-stylesheet utasitassal adhato meg
kaszkád
- Több különböző deklaráció szolgáltathatja egy tulajdonság értékét egy elemhez.
- A kaszkád az a folyamat, melynek során meghatározásra kerül, hogy a vonatkozó deklarációk közül melyik határozza meg egy adott elem egy adott tulajdonságának értékét.
Szabályok sorrendje
- Akkor számíthat a sorrend, ha egy elemre egynél több azonos specifikusságú stílus szabály
vonatkozik.
– Ezek közül mindig a sorrendben utolsó a „legerősebb”.
Öröklés
Az öröklés a tulajdonságértékek továbbadását jelenti a szülő elemektől a gyermek elemekhez.
- Bizonyos tulajdonságok öröklöttek, ami azt jelenti, hogy az értékük öröklés révén kerül meghatározásra, feltéve, hogy a kaszkád nem eredményez egy értéket.
- oroklodott a font-*
- nem oroklodik a margin, width
- az inherit kulcsszo kikenyszeriti
box-sizing
- meretezesi tulajdonsagokkal megadando
- auto, %, ertek, min-content, max-content, fit-content
width, height
- a doboz szelessege es magassaga
min-width, min-height
- a doboz minimum szelessege es magassaga
max-width, max-height
- a doboz maximum szelessege es magassaga
CSS előfeldolgozó fogalma
- A CSS előfeldolgozók olyan programok, melyek CSS kódot generálnak a CSS írására szolgáló saját szintaxisukból.
- A CSS-t új lehetőségekkel egészítik ki, mint például változók, egymásba ágyazás, függvények, mixinek.
- pl Less, PostCSS, Sass, Stylus
CSS előfeldolgozók közös jellemzői
- // egysoros megjegyzesek
- bongeszotol elteroen kezelik az @import szabalyokat
SCSS szintaxis
- a css szintaxist terjeszti ki
- python szeru behuzasos szintaxis, amit a sass-bol vett at
- kifejezesek, valtozok hasznalata
- logikai es null adattipus
sass főbb lehetőségek
- string, array, object, boolean tipusok
- valtozot a $nev: ertek;-el hozunk letre
- az ertek lehet a fentiek kozuli, vagy pl 0.25em, vagy %, stb…
- a mixinek abban segitenek, hogy ujra felhasznalhato stilusokat hozzunk letre, hasznalat @mixin nev{}
-a @extend egy stilust tud kiboviteni egy masikkal
