CSS an der LMU München | Karteikarten & Zusammenfassungen

Lernmaterialien für CSS an der LMU München

Greife auf kostenlose Karteikarten, Zusammenfassungen, Übungsaufgaben und Altklausuren für deinen CSS Kurs an der LMU München zu.

TESTE DEIN WISSEN

i) How does the CSS parsing work? 

ii) What is the cascade process? 

iii) What are the sources of CSS?

iv) How does the browser know which rule to apply?

Lösung anzeigen
TESTE DEIN WISSEN

i)

1. Step: Resolve conflicting CSS declarations (Cascade)


2. Step: Process final CSS values (from e.g. % values to px)


ii) The cascade process combines different stylesheets and resolves conflicts between different CSS rules (selector+declaration) and declarations, when more than one rule applies to a certain element.


iii)

1. Author/Developer

2. User (through e.g. clicking on button)

3. Browser (user agent) (e.g. links are blue and underlined)


iv) 

Importance (weight) > Specificity > Source order


Importance: 

important! keyword > author >  user > browser


Specificity:

Inline > IDs > classes, pseudo-classes, attribute > elements, pseudo-elements


Order:

The last written rule gets applied.

Lösung ausblenden
TESTE DEIN WISSEN

What is a build-process in CSS? Which steps does it include?

Lösung anzeigen
TESTE DEIN WISSEN

It contains several steps to unify code and minifies it to make it deployable.


compilation -> concatenation -> prefixing -> compressing

Lösung ausblenden
TESTE DEIN WISSEN

How are stacking contexts in CSS created?

Lösung anzeigen
TESTE DEIN WISSEN

through z-index, transform, opacity, filter, ...

Lösung ausblenden
TESTE DEIN WISSEN

What is the difference between 100% and 100vh or vw?


Lösung anzeigen
TESTE DEIN WISSEN

vh/vw of the viewport

% of the parent

Lösung ausblenden
TESTE DEIN WISSEN

Some flex box properties:

Lösung anzeigen
TESTE DEIN WISSEN

flex: flex-grow(1) flex-shrink(1) flex-basis(%);


flex-wrap


align-self (e.g. to stretch entire height)

Lösung ausblenden
TESTE DEIN WISSEN

What are some useful CSS functions?

Lösung anzeigen
TESTE DEIN WISSEN

- darker(var, %)

- lighter(var, %)

Lösung ausblenden
TESTE DEIN WISSEN

How to build more modular code?

Lösung anzeigen
TESTE DEIN WISSEN

By e.g. using the inherit und currentColor keywords


e.g. border: 1px solid currentColor (when changing the font color on hover, the border behaves accordingly)

Lösung ausblenden
TESTE DEIN WISSEN

What are the positioning schemes: normal flow, floats and absolute positioning?

Lösung anzeigen
TESTE DEIN WISSEN

1. normal flow

- default is position: static

- according to source order


2. floats

- element is removed from normal flow

- text & inline elements will wrap around the floated element

- container will not adjust its height to the element


3. relative positioning
- top, left, right, bottom can be applied


4. absolute positioning

- element is removed from normal flow

- no impact on surrounding elements

- position with top, left, bottom, right relatively to container

- position: absolute, fixed

Lösung ausblenden
TESTE DEIN WISSEN

What is important to notice when using the z-index property?

Lösung anzeigen
TESTE DEIN WISSEN

It only works when the position is given

Lösung ausblenden
TESTE DEIN WISSEN

How to move elements to side ends when using flexbox?

Lösung anzeigen
TESTE DEIN WISSEN

with margin-right: auto on left element.

Lösung ausblenden
TESTE DEIN WISSEN

What is the Visual Formatting Model?

Lösung anzeigen
TESTE DEIN WISSEN

Algorithm wich calculates boxes and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page.


Factors that matter:


1. box model (content-box, border-box)

2. Box type: inline, block, inline-block

3. floats, position (absolute, relative)

4. stacking contexts

5. other elements in the render tree

6. viewport size, dimensions of images, etc.

Lösung ausblenden
TESTE DEIN WISSEN

How can you position an image in a grid cell?

Lösung anzeigen
TESTE DEIN WISSEN

- put the img in a parent container which is the grid-item

- height and width have to be set

- set the img to object-fit

Lösung ausblenden
  • 563319 Karteikarten
  • 8061 Studierende
  • 556 Lernmaterialien

Beispielhafte Karteikarten für deinen CSS Kurs an der LMU München - von Kommilitonen auf StudySmarter erstellt!

Q:

i) How does the CSS parsing work? 

ii) What is the cascade process? 

iii) What are the sources of CSS?

iv) How does the browser know which rule to apply?

A:

i)

1. Step: Resolve conflicting CSS declarations (Cascade)


2. Step: Process final CSS values (from e.g. % values to px)


ii) The cascade process combines different stylesheets and resolves conflicts between different CSS rules (selector+declaration) and declarations, when more than one rule applies to a certain element.


iii)

1. Author/Developer

2. User (through e.g. clicking on button)

3. Browser (user agent) (e.g. links are blue and underlined)


iv) 

Importance (weight) > Specificity > Source order


Importance: 

important! keyword > author >  user > browser


Specificity:

Inline > IDs > classes, pseudo-classes, attribute > elements, pseudo-elements


Order:

The last written rule gets applied.

Q:

What is a build-process in CSS? Which steps does it include?

A:

It contains several steps to unify code and minifies it to make it deployable.


compilation -> concatenation -> prefixing -> compressing

Q:

How are stacking contexts in CSS created?

A:

through z-index, transform, opacity, filter, ...

Q:

What is the difference between 100% and 100vh or vw?


A:

vh/vw of the viewport

% of the parent

Q:

Some flex box properties:

A:

flex: flex-grow(1) flex-shrink(1) flex-basis(%);


flex-wrap


align-self (e.g. to stretch entire height)

Mehr Karteikarten anzeigen
Q:

What are some useful CSS functions?

A:

- darker(var, %)

- lighter(var, %)

Q:

How to build more modular code?

A:

By e.g. using the inherit und currentColor keywords


e.g. border: 1px solid currentColor (when changing the font color on hover, the border behaves accordingly)

Q:

What are the positioning schemes: normal flow, floats and absolute positioning?

A:

1. normal flow

- default is position: static

- according to source order


2. floats

- element is removed from normal flow

- text & inline elements will wrap around the floated element

- container will not adjust its height to the element


3. relative positioning
- top, left, right, bottom can be applied


4. absolute positioning

- element is removed from normal flow

- no impact on surrounding elements

- position with top, left, bottom, right relatively to container

- position: absolute, fixed

Q:

What is important to notice when using the z-index property?

A:

It only works when the position is given

Q:

How to move elements to side ends when using flexbox?

A:

with margin-right: auto on left element.

Q:

What is the Visual Formatting Model?

A:

Algorithm wich calculates boxes and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page.


Factors that matter:


1. box model (content-box, border-box)

2. Box type: inline, block, inline-block

3. floats, position (absolute, relative)

4. stacking contexts

5. other elements in the render tree

6. viewport size, dimensions of images, etc.

Q:

How can you position an image in a grid cell?

A:

- put the img in a parent container which is the grid-item

- height and width have to be set

- set the img to object-fit

CSS

Erstelle und finde Lernmaterialien auf StudySmarter.

Greife kostenlos auf tausende geteilte Karteikarten, Zusammenfassungen, Altklausuren und mehr zu.

Jetzt loslegen

Das sind die beliebtesten CSS Kurse im gesamten StudySmarter Universum

CG

Fachhochschule Oberösterreich

Zum Kurs

Die all-in-one Lernapp für Studierende

Greife auf Millionen geteilter Lernmaterialien der StudySmarter Community zu
Kostenlos anmelden CSS
Erstelle Karteikarten und Zusammenfassungen mit den StudySmarter Tools
Kostenlos loslegen CSS