Thorie CSS Flashcards
The anatomy of CSS
- selector
- rule
- property
- value
- declarations
Basic examples
Type
h2
p
body
Basic examples
class
.content
Basic examples
id
main
Basic examples
attribute
[type=date]
input [type=date]
Basic examples
universal
*
to make elements look related you need a…
…style guide
Frontend Frameworks to the rescue:
specialised soulutions for particular problems
- blueprint
- grid960
Frontend Frameworks to the rescue:
multi-purpose Frameworks
- twitter’s bootstrap
- Zurb’s foundation
Bootstrap Feature Overview
- 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
Customizing Bootstrap
either
- add CSS after bootstrap
or
- use the bootstrap source
Wie verlinkt man CSS datei ins HTML datei
Danach verlinkt man diese css-Datei mit dem html-Datei im “head”:
wann soll man Klassen und wann IDs benützen
Um mehrere Tags zu bearbeiten, sollte man denen den gleichen “class” vergeben. Bei einmaligen Ereignissen sollte man “id”s verwenden.
wie verwendet man Klassen
Werden in den Tags vergeben. Um diese in CSS zu verwendet, verwendet man immer vor dem Namen des Tags einen Punkt “.”.
Z.b.: .p2{
wie verwendet man ID’s
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{
wie sind die Grössenordnung der ID, Klassen und Tags
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
Wie kann man z.B. Farben bestimmen
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
wie kann man Bilder als Farben verwenden
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”);
wie kann man Texte formatieren
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;
