1
Q
Mi a CSS?
A
- 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.
2
Q
A CSS fejlesztése
A
A W3C CSS Munkacsoportja fejleszti.
3
Q
CSS szintek
A
- 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.
4
Q
CSS dobozmodell
A
- 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.
5
Q
Tulajdonságok
A
- 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)
6
Q
karakterek
A
Az Unicode karakterkészlet használata.
7
Q
vezérlősorozatok
A
- 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.
8
Q
megjegyzések
A
A /* és */ határólók között lehet megadni
megjegyzéseket.
9
Q
deklarációs blokk
A
’{‘ és ‘}’ karakterek határolják, melyek
között deklarációk egy listája kötelező.
10
Q
at-szabályok
A
- 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.
11
Q
stílus szabályok
A
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.
12
Q
Kiválasztók:
A
- Mintaillesztésre szolgálnak.
- Meghatározzák, hogy egy szabály mely elemekre vonatkozik.
- Kisbetű-nagybetű érzéketlenség az ASCII tartományban
13
Q
típus kiválasztó
A
- Egy CSS minősített név, a gyakorlatban
tipikusan egy azonosító. - A megfelelő nevű elemek illeszkednek rá.
14
Q
általános kiválasztó
A
- Á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.
15
Q
attribútum kiválasztók
A
- [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.
16
Q
ID-kiválasztó
A
- # 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.
17
Q
pszeudo-osztályok
A
- :azonosító vagy :azonosító(érték) formájú kiválasztók.
- kis es nagybetu erzeketlen
18
Q
:link
A
a felhasználó által még nem meglátogatott hiperhivatkozásokra
vonatkozik.
19
Q
:visited
A
a felhasználó által meglátogatott hiperhivatkozásokra
vonatkozik.
20
Q
:hover
A
a felhasználó által mutatóeszközzel kijelölt, de nem feltétlenül aktivált elemre vonatkozik.
21
Q
:active
A
a felhasználó által mutatóeszközzel aktivált elemre vonatkozik.
22
Q
:lang(C)
A
A C nyelvű szöveget tartalmazó elemek illeszkednek rá.
- C egy CSS azonosító (nyelvkód). (pl en, hu, en-GB)
23
Q
negáció pszeudo-osztály
A
:not(X) formában adható meg, ahol az argumentum egy olyan egyszerű kiválasztó, melyben nem megengedett a negáció pszeudo-osztály.
24
Q
:is()
A
Minden olyan elem illeszkedik rá, mely illeszkedik a lista
argumentum valamely kiválasztójára.
25
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
26
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 {}
27
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.
28
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.
29
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.
30
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.
31
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
32
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ő.
33
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
34
szerzőtől származó
- link fejlec elemmel, vagy style fejlec elemben deffinialt stiluslap
- xml eseten a xml-stylesheet utasitassal adhato meg
35
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.
36
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”.
37
Ö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
38
box-sizing
- meretezesi tulajdonsagokkal megadando
- auto, %, ertek, min-content, max-content, fit-content
39
width, height
- a doboz szelessege es magassaga
40
min-width, min-height
- a doboz minimum szelessege es magassaga
41
max-width, max-height
- a doboz maximum szelessege es magassaga
42
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
43
CSS előfeldolgozók közös jellemzői
- // egysoros megjegyzesek
- bongeszotol elteroen kezelik az @import szabalyokat
44
SCSS szintaxis
- a css szintaxist terjeszti ki
- python szeru behuzasos szintaxis, amit a sass-bol vett at
- kifejezesek, valtozok hasznalata
- logikai es null adattipus
45
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
webtech
flashcards
Decks in class (12)
# Cards
