Thorie CSS

Question 1

The anatomy of CSS

Answer 1

• selector
• rule
• property
• value
• declarations

Question 2

Basic examples

Type

Answer 2

h2

p

body

Question 3

Basic examples

class

Answer 3

.content

Question 4

Basic examples

id

Answer 4

main

Question 5

Basic examples

attribute

Answer 5

[type=date]

input [type=date]

Question 6

Basic examples

universal

Answer 6

*

Question 7

to make elements look related you need a…

Answer 7

…style guide

Question 8

Frontend Frameworks to the rescue:

specialised soulutions for particular problems

Answer 8

• blueprint

- grid960

Question 9

Frontend Frameworks to the rescue:

multi-purpose Frameworks

Answer 9

• twitter’s bootstrap

- Zurb’s foundation

Question 10

Bootstrap Feature Overview

Answer 10

• a grid system for responsive layouts
• is Mobile first
• Typography settings: headings, paragraphs, lists, …
• predefined designs for tables, forms, navigation, buttons,…
• components for progress bars, modal dialogs, alerts…
• a set of icons
• various optional extensions

Question 11

Customizing Bootstrap

Answer 11

either
- add CSS after bootstrap

or
- use the bootstrap source

Question 12

Wie verlinkt man CSS datei ins HTML datei

Answer 12

Danach verlinkt man diese css-Datei mit dem html-Datei im “head”:

Question 13

wann soll man Klassen und wann IDs benützen

Answer 13

Um mehrere Tags zu bearbeiten, sollte man denen den gleichen “class” vergeben. Bei einmaligen Ereignissen sollte man “id”s verwenden.

Question 14

wie verwendet man Klassen

Answer 14

Werden in den Tags vergeben. Um diese in CSS zu verwendet, verwendet man immer vor dem Namen des Tags einen Punkt “.”.

Z.b.: .p2{

Question 15

wie verwendet man ID’s

Answer 15

Werden ebenfalls in den Tags vergeben. Um diese in CSS zu verwendet, verwendet man immer vor dem Namen des Tags einen # Zeichen.

Z.b.: #p2{

Question 16

wie sind die Grössenordnung der ID, Klassen und Tags

Answer 16

Alles was man über eine ID verwendet ist das wichtiger als Class und wenn man was über Class verändert ist dieser wichtiger als Tag. Also;

Tag < Class < ID

Question 17

Wie kann man z.B. Farben bestimmen

Answer 17

Man kann die Farbe in verschiedenen Arten bestimmen:

1. Color: Namederfarbe;
	a. Z.B. color: yellow;
2. Color: rgb( x, y, z) --> dabei müssen die Farben jeweils zwischen 0 und 255 sein.
	a. Z.B. color: rgb (15, 26, 255);
3. Color: #xxxxxx --> hashtag und 6 Ziffern (erste und zweite Ziffer für rot, dritte und vierte für grün und die letzten zwei Ziffern für blau). Hier gehen die Farben von 0 bis FF (Hexadezimale-System --> 0-9 und A - F).
	a. Z.B. color: #AFA9CD

Question 18

wie kann man Bilder als Farben verwenden

Answer 18

Man kann auch ein Bild als Hintergrund nehmen. Dazu muss man im selben Ordner ein Bild ablegen. Danach gibt man den URL mit.
Z.B. background-image: url (“Bild.jpg”);

Question 19

wie kann man Texte formatieren

Answer 19

Hier geht es darum die Richtung des Texts zu bestimmen:
- Text-align: left; (hier hat man auch die Möglichkeit center, justify usw.)

Unterstreichen, Überstreichen usw.:
- Text-decoration: underline;