CSS an der LMU München

Karteikarten und Zusammenfassungen für CSS an der LMU München

Arrow Arrow

Komplett kostenfrei

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

Lerne jetzt mit Karteikarten und Zusammenfassungen für den Kurs CSS an der LMU München.

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

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?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What is the Visual Formatting Model?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What do block, inline and inline-block mean?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

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

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

How are stacking contexts in CSS created?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What is a mixin?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What are some useful CSS functions?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What is the difference between @mixins and placeholders ?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

Some CSS properties:

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

1. What are responsive images? 

2. When to use responsive images? 

3. What is important to make images responsive? How do you make them responsive?

4. What is the difference between html images and css images?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

When to use the 'inherit' keyword?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

Some pseudo-classes:

Kommilitonen im Kurs CSS an der LMU München. erstellen und teilen Zusammenfassungen, Karteikarten, Lernpläne und andere Lernmaterialien mit der intelligenten StudySmarter Lernapp. Jetzt mitmachen!

Jetzt mitmachen!

Flashcard Flashcard

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

CSS

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?

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.

CSS

What is the Visual Formatting Model?

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.

CSS

What do block, inline and inline-block mean?

1. block

- take up 100% parent's width

- create new line

- block, flex, table, list-item all create blocks

- box model applies


2. inline

- only takes up what it needs

- no line breaks,

- no heights and widths

- only horizontal paddings & margins


3. inline-block

- only takes up what it needs

- no line breaks

- box model applies


CSS

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

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

CSS

How are stacking contexts in CSS created?

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

CSS

What is a mixin?

It is a bunch of code which can be reused throughout the code.


Mixins can have params to customise them. It is also possible to write not only mixing but whole functions to calculate stuff.

CSS

What are some useful CSS functions?

- darker(var, %)

- lighter(var, %)

CSS

What is the difference between @mixins and placeholders ?

the mixing code gets copied to the selector,  the selector of the extend gets copied to the placeholder.

CSS

Some CSS properties:

- backface-visibility (e.g. hidden)

- clear

- outline

- perspective

- background-blend-mode

- box-decoration-break

- shape-outside

- filter

- object-fit

- column-count

- hyphens

- display: table-cell

- backdrop-filter

- fill (to use for svg)

- mask-image

- mask-size

CSS

1. What are responsive images? 

2. When to use responsive images? 

3. What is important to make images responsive? How do you make them responsive?

4. What is the difference between html images and css images?

1. The goal of responsive images is to serve the right image for the right screen size and device, in order to avoid downloading unnecessary large images on smaller screens.


2.

1. Resolution switching (from big to small screen)

2. Density switching (from high to low resolution)

3. Art direction (different img depending on screen size)


3. They have to get a width

HTML-tag <picture>, attributes: 'srcset', 'media', 'sizes'

4. HTML images are defined with the <img> tag, CSS images are the ones defined with "background-image".

CSS

When to use the 'inherit' keyword?

When some styles are not inherited from parents and have to be manually inherited.


E.g. the ::before and ::after pseudo elements don't inherit the styles like "box-sizing" from their parent.

CSS

Some pseudo-classes:

:invalid

:placeholder-shown

:root

Melde dich jetzt kostenfrei an um alle Karteikarten und Zusammenfassungen für CSS an der LMU München zu sehen

Singup Image Singup Image
Wave

Andere Kurse aus deinem Studiengang

Für deinen Studiengang CSS an der LMU München gibt es bereits viele Kurse auf StudySmarter, denen du beitreten kannst. Karteikarten, Zusammenfassungen und vieles mehr warten auf dich.

Zurück zur LMU München Übersichtsseite

Was ist StudySmarter?

Was ist StudySmarter?

StudySmarter ist eine intelligente Lernapp für Studenten. Mit StudySmarter kannst du dir effizient und spielerisch Karteikarten, Zusammenfassungen, Mind-Maps, Lernpläne und mehr erstellen. Erstelle deine eigenen Karteikarten z.B. für CSS an der LMU München oder greife auf tausende Lernmaterialien deiner Kommilitonen zu. Egal, ob an deiner Uni oder an anderen Universitäten. Hunderttausende Studierende bereiten sich mit StudySmarter effizient auf ihre Klausuren vor. Erhältlich auf Web, Android & iOS. Komplett kostenfrei. Keine Haken.

Awards

Bestes EdTech Startup in Deutschland

Awards
Awards

European Youth Award in Smart Learning

Awards
Awards

Bestes EdTech Startup in Europa

Awards
Awards

Bestes EdTech Startup in Deutschland

Awards
Awards

European Youth Award in Smart Learning

Awards
Awards

Bestes EdTech Startup in Europa

Awards

So funktioniert's

Top-Image

Individueller Lernplan

StudySmarter erstellt dir einen individuellen Lernplan, abgestimmt auf deinen Lerntyp.

Top-Image

Erstelle Karteikarten

Erstelle dir Karteikarten mit Hilfe der Screenshot-, und Markierfunktion, direkt aus deinen Inhalten.

Top-Image

Erstelle Zusammenfassungen

Markiere die wichtigsten Passagen in deinen Dokumenten und bekomme deine Zusammenfassung.

Top-Image

Lerne alleine oder im Team

StudySmarter findet deine Lerngruppe automatisch. Teile deine Lerninhalte mit Freunden und erhalte Antworten auf deine Fragen.

Top-Image

Statistiken und Feedback

Behalte immer den Überblick über deinen Lernfortschritt. StudySmarter führt dich zur Traumnote.

1

Lernplan

2

Karteikarten

3

Zusammenfassungen

4

Teamwork

5

Feedback