CSS Flashcards

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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

A CSS fejlesztése

A

A W3C CSS Munkacsoportja fejleszti.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

karakterek

A

Az Unicode karakterkészlet használata.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

megjegyzések

A

A /* és */ határólók között lehet megadni
megjegyzéseket.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

deklarációs blokk

A

’{‘ és ‘}’ karakterek határolják, melyek
között deklarációk egy listája kötelező.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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á.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

pszeudo-osztályok

A
  • :azonosító vagy :azonosító(érték) formájú kiválasztók.
  • kis es nagybetu erzeketlen
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

:link

A

a felhasználó által még nem meglátogatott hiperhivatkozásokra
vonatkozik.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
Q

szerkezeti pszeudo-osztályok

A
  • 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
Q

leszármazott kombinátor

A
  • 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
Q

gyermek kombinátor

A
  • 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
Q

szomszéd testvér kombinátor

A
  • 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
Q

specifikusság

A
  • 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
Q

specifikusság meghatározása

A

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
Q

Stíluslap eredet

A

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
Q

felhasználói ágenstől származó

A

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
Q

felhasználótól származó

A

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
Q

szerzőtől származó

A
  • link fejlec elemmel, vagy style fejlec elemben deffinialt stiluslap
  • xml eseten a xml-stylesheet utasitassal adhato meg
35
Q

kaszkád

A
  • 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
Q

Szabályok sorrendje

A
  • 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
Q

Öröklés

A

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
Q

box-sizing

A
  • meretezesi tulajdonsagokkal megadando
  • auto, %, ertek, min-content, max-content, fit-content
39
Q

width, height

A
  • a doboz szelessege es magassaga
40
Q

min-width, min-height

A
  • a doboz minimum szelessege es magassaga
41
Q

max-width, max-height

A
  • a doboz maximum szelessege es magassaga
42
Q

CSS előfeldolgozó fogalma

A
  • 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
Q

CSS előfeldolgozók közös jellemzői

A
  • // egysoros megjegyzesek
  • bongeszotol elteroen kezelik az @import szabalyokat
44
Q

SCSS szintaxis

A
  • a css szintaxist terjeszti ki
  • python szeru behuzasos szintaxis, amit a sass-bol vett at
  • kifejezesek, valtozok hasznalata
  • logikai es null adattipus
45
Q

sass főbb lehetőségek

A
  • 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