12. dia CSS

Question 1

Mi a CSS?

Answer 1

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 s zerkesztés és karbantartás.

Question 2

A CSS fejlesztése, CSS szintek

Answer 2

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ú.

Question 3

CSS dobozmodell

Answer 3

CSS Display Modul Level 3-ban (2023 március 30)
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).
(margin > border > padding > <tartalom>)</tartalom>

Question 4

(Szintaktikai elemek) karakterek

Answer 4

Az Unicode karakterkészletet használja.

Question 5

(Szintaktikai elemek) vezérlősorozatok

Answer 5

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.
“" escapingre is jó.

Question 6

(Szintaktikai elemek) megjegyzések

Answer 6

/Ez egy megjegyzés/
Tokeneken kívűl bárhol használható, viszont egymásba nem ágyazható.

Question 7

(Szintaktikai elemek) deklarációs blokk

Answer 7

{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.

Question 8

(Szintaktikai elemek) at-szabályok

Answer 8

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

Question 9

(Szintaktikai elemek) stílus szabályok

Answer 9

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.

Question 10

Tulajdonságok

Answer 10

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]

Question 11

Kiválasztók

Answer 11

Mintaillesztésre szolgál. Meghatározzák, hogy egy szabály melyik elemekre vonatkozik.

Question 12

(Kiválasztók) típus kiválasztók

Answer 12

Egyszerű kiválasztó.
Egy CSS minősített név, a gyakorlatban tipikusan egy azonosító. A megfelelő nevű elemek illeszkednek rá.

Question 13

(Kiválasztók) általános kiválasztók

Answer 13

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.

Question 14

(Kiválasztók) attributum kiválasztók

Answer 14

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.

Question 15

(Kiválasztók) osztály kiválasztók

Answer 15

Egyszerű kiválasztó.
Használata “ . “ karakterrel “.class_értéke”.

Question 16

(Kiválasztók) ID-kiválasztók

Answer 16

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”)

Question 17

(Kiválasztók) pszeudo-osztályok

Answer 17

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) - ahol az argumentum egy olyan egyszerű kiválasztó, amelyben nem megengedett a negáció pszeudo-osztály. Azok az elemek illeszkednek rá, amelyek nem illeszkednek az argumentum listára.

Question 18

(Pszeudo-osztályok) szerkezeti pszeudo-osztályok (Jelentések…)

Answer 18

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.
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)

Question 19

(Kiválasztók) pszeudo-osztályok (hasznosak)

Answer 19

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)

Question 20

(Kiválasztók) pszeudo-elemek

Answer 20

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é

Question 21

(Kiválasztók) kombinátorok

Answer 21

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.

Question 22

(Kiválasztók) specifikusság, annak meghatározása

Answer 22

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.

Question 23

(Stíluslap eredet) Felhasználói ágenstől származó, felhasználótól származó, szerzőtől származó.

Answer 23

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.

Question 24

“Fontos” deklarációk (!important)

Answer 24

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.

Question 25

A kaszkád

Answer 25

Konfliktusfeloldái mechanizmus arra az esetre, amikor egy elem/tulajdonság kombinációhoz 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.

Question 26

Szabályok sorrendje

Answer 26

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’.

Question 27

Öröklés

Answer 27

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.

Question 28

Hibakezelés

Answer 28

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.

Question 29

Dobozméretek meghatározása CSS-ben

Answer 29

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..