Kurs Tag 10 - HTML & CSS - Box-Modell & Einstieg CSS

Mitschrift 17.04.2014

TAG 10

Wiederholung des gestrigen Tages:

1. Unterscheidung zwischen Inline- und Blockelement

• Um Unterschiede zu sehen, haben wir uns den Firebug installiert. 
• rechts in der Adresszeile finden wir einen kleinen Käfer, der das Programm öffnet
• Hauptaufgabe: Elemente in der Seite zu finden und zu gucken, wie sie formatiert sind.
• wir können aber auch die Unterschiede zwischen Inline- und Blockelement aufzeigen:
• Blockelement:
• dehnt sich über die gesamte Zeile aus, auch wenn die Inhalte kürzer sind. 
• Sollten die Inhalte darüber hinaus gehen, wechselt es automatisch die Zeile
• Es nimmt sich automatisch immer eine neue Zeile (automatischer Umbruch vor und nach dem Element!)
• ich kann es beschränken - bspw. in der Breite (über Style-Definition: style="width: 400px") es ist dann nur 400px breit
• Welche Elemente sind Blockelemente (zur Strukturierung): address | blockquote | center | del | dir | div | dl | fieldset | form | h1-6 | hr | ins | isindex | menu | noframes | noscript | ol | p | pre | table | ul
• Inlineelement
• die maximale Ausdehnung des Elements orientiert sich an der Breite des Inhalts!
• auch wenn wir Inlineelemente untereinander schreiben oder mit Leerzeilen belegen - es nimmt sich keine neue Zeile, sondern reiht sich ans Ende des vorigen Inlineelements
• ich kann es nicht beschränken - da die Ausdehnung sich weiterhin am Inhalt orientiert - es reagiert nicht aus Breitenangaben, weil es strikt die Regel befolgt: Ich bin nur so breit, wie mein Inhalt! (Diese Regel ist dominant)
• Welche Elemente sind Inline (physische Formatierungselemente):
  a | abbr | acronym | applet | b | basefont | bdo | big | br | button | cite | code | del | dfn | em | font | i | img | ins | input | iframe | kbd | label | map | object | q | samp | script | select | small | span | strong | sub | sup | textarea | tt | var

2. Boxmodell:

• Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Seit der  CSS1-Spezifikation des W3-Konsortiums aus dem Jahre 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition 



Grafik1: Quelle: css4you

• der  Breite des Elementinhalts (width),
• des  Innenabstands (padding), - zum Rahmen
• der  Rahmenstärke (border-width) und
• des  Außenabstands (margin). - zum nächsten Element

• Dies gilt analog für die  Höhe (height) sowie generell für alle  Maßeinheiten; diese dürfen auch gemischt angewandt werden. 
• Für jedes Element einer Seite wird nach den CSS-Regeln ein rechteckiger Bereich reserviert, der in dem sog. Boxmodell beschrieben ist.
• Hinweis: Padding und margin sind Kernelemente der CSS-Formatierung! (Also gut merken ;) ) 

Weiter im Thema:

Rahmeneigenschaften

(woraus besteht nachher ein Rahmen?)

• Rahmendicke/-stärke in px (border-width)
• Rahmenfarbe (border-color)
• Art des Rahmens (border-style) 
• solid - durchgehend 
• dotted - gepunktet 
• dashed - gestrichelt
• double - doppelt, groove, ridge, inset, outset...
• Background-Color - weiter unten mehr!

• Der firebug schreibt gleich mehrere Attribute in eine Klammer rein. also anstatt: 

• border-style: solid;
  border-color: red;
  border-width: 10 px;
• border: 10px solid red
  (alles hintereinander ohne Komma! - hat w3 anerkannt)

• Welche Stile gibt es noch innerhalb des Rahmen? - css4you>Rahmen

• border-Style - Rahmenart
• Rahmenposition [top | right | bottom | left] - die Definition ist im Uhrzeigersinn beginnend mit top!
• border-style: solid;
  border-color: red;
  border-top-width: 4px;
  border-right-width: 20px;
  border-bottom-width: 1px;
• wird automatisch von firebug in eine Zeile umgeschrieben als: border-width: 4px 20px 1 px 50px

• Regeln zur kurzen Schreibweisewas, wenn top und bottom den gleichen Wert haben? - der firebug versucht immer zu optimieren/kürzen:

• 1 Wert = umlaufend 20px Rahmen
• 2 Werte = 1. Wert: top & bottom, 2. Wert: right & left
• 3 Werte: 1. Wert: top, 2. Wert: right & left, 3. Wert: bottom
• 4 Werte = top, right, bottom, left

Die verkürzte Schreibweise (im Netz am häufigsten zu finden) kann man anwenden, muss man aber nicht. Man kann sie anwenden auf Rahmenbreite, Rahmenfarbe und Rahmenstil oder auch auf padding, margin...

• border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
• border-style: solid dotted;
  border-color: red green blue orange;
  border-width: 1px 20px 10px

Hier mal die Dozentendatei:
Quelltext:

<!-- Rahmeneigenschaften:
            - Rahmendicke/-stärke in px
            - Rahmenfarbe
            - Art des Rahmens
                solid = durchgehend
                dotted = gepunktet
                dashed = gestrichelt
              
                border: 10px solid red;
              
                border-style: solid;
                border-color: red;
                border-width: 10px;
              
            - Rahmenposition [ top | right | bottom | left ]
          
                border-top-width: 4px;
                border-right-width: 20px;
                border-bottom-width: 1px;
                border-left-width: 50px;
            =>  
                border-width: 4px 20px 1px 50px;
              
            =>    Regeln zur kurzen Schreibweise:
                1 Wert = umlaufend 20px Rahmen
                2 Werte =     1 Wert (top,bottom)
                            2 Wert (left,right)
                3 Werte =    1 Wert ist top
                            2 Wert (left,right)
                            3 Wert ist bottom  
                4 Werte = top, right, bottom, left          
              
        -->
      
      
        <h1 style="width: 400px;
            padding: 30px 200px 5px;
          
            padding-top: 30px;
            padding-right: 200px;
            padding-bottom: 5px;
            padding-left: 200px;

          
            margin: 30px;
          
            border-style: solid dotted;          
            border-color: red green blue orange;
            border-width: 1px 10px 1px;
          
          
        ">Dies ist ein Blockelemente</h1>

Ausgabe:

Dies ist ein Blockelemente

Backgroundcolor:

Änderung erstmal temporär in firebug:

Weg: CSS - Seite im firebug -> Doppelklick ins Feld -> dann wird mir ein neuer Dialog geöffnet -> ich gebe ein: "background-color: silver;" (wird auch autovervollständigt ;))

Hinweis: Die Backgroundcolor geht bis zum Rahmen und nicht nur bis zum Bereich, wo ich meinen Text stehen habe - also Inhalt und Innenabstand/padding werden mit Backgroundcolor gefüllt - siehe "Grafik 1" oben!

Quelltext:
<h1 style="width: 400px; 
padding: 30px 200px 5px; 
margin: 30px; 
border-style: solid; 
border-color: red; 
border-width: 10px; 
background-color: silver;">Dies ist ein Blockelemente</h1>

Ausgabe:

Dies ist ein Blockelemente

Kommen wir zu den Listen:

<ul> ist ein Blockelement - es nimmt sich die gesamte Zeile nimmt
<li> ist ein Blockelement - es nimmt sich die gesamte Zeile nimmt
ABER: das <ul> hat margin vorgegeben und die <li> nicht! - ist so vordefiniert
Also Kombi aus 2 Elementtypen: Block und Block!

Wenn wir hier in die <li> einen Rahmen setzen: <li style="border: 1px solid red;> - wird der Rahmen über die gesamte Zeile gespannt.

Fragen:
Wie bekommen wir mehr Abstand unter der border?
Antwort: margin-bottom verändern: in <li style="border: 1px solid red; margin-bottom: 5px;>

Wie kann ich das Listenelement verkleinern?
Antwort: width verändern: width: <li style="border: 1px solid red; margin-bottom: 5px; width: 200px;>

und jetzt noch ne Background-color setzen:
<li style="border: 1px solid red; margin-bottom: 5px; width: 200px; background-color: orange;">

<ul> 
  <li style="border: 1px solid red; margin-bottom: 5px; width: 200px; background-color: orange;">Beispiellistenelement1</li>
  <li style="border: 1px solid red; margin-bottom: 5px; width: 200px; background-color: orange;">Beispiellistenelement2</li>
</ul>

• Beispiellistenelement1
• Beispiellistenelement2

 
ABER: das Style für jedes Element einzugeben macht den Code unübersichtlich und schlecht zu pflegen - wenn ich in jedem Listenelement Änderungen machen muss, ist es zudem noch zeitaufwändig!

Daher Überleitung zu 

Formatierung über CSS:

=> Selektoren!

• geben dem Browser mit für CSS - wie er mit den einzelnen Elementen bei der Ausgabe verfahren soll.
• werden immer im Head eingetragen!
• wir müssen es in einem style-Tag einrahmen!
• dann sagen, wass passieren soll:
• formatiere mir das li mit den nachfolgenden Werten! (wir wollen das li-Tag formatieren - also sagen wir dem Browser: alle Li-Tags bekommen eine Formatierung:)
• Dann formatiert es alle <li>-Tags mit den Attributen und ihren Values, wie unten.
• Vorteile:
• keine Redundanzen (doppelte Formatierungen im Tag)
• einfache Korrektur möglich
• Trennung zwischen CSS & HTML (ich schreib es nicht mehr ins HTML, sondern definieren einen Selektor - in diesem Fall einen ELEMENT-SELEKTOR)
• Element-Selektor = Formatierung des Elements direkt
• Hinweis: jedes Attribut MUSS mit einem Semikolon abgeschlossen werden!
• Wenn etwas nicht richtig dargestellt wird - überprüfen,
• ob die Klammern alle geschlossen sind
• alle Semikolons und Leerzeichen richtig gesetzt sind!
• !!!ACHTUNG: Keine Kommentare mit <!-- --> in der Style-Definition der Selektoren im Head!!! sondern mit /* */

Lösung:  style-Tag im head!

<head>
        <style type="text/css">
       
        li {
         background-color: #FFA500;
         border: 1px solid #FF0000;
         margin-bottom: 5px;
         width: 200px;
        }

        </style>
</head>


Und das tolle ist, dass jetzt im firebug nicht mehr element... steht sondern h1 oder li...
ERGO: Der Selektor hilft uns auch Dokumente und Formatierungen wiederzufinden, indem es das Dokument und die zugehörige Zeile mit angibt:

Selektorenausgabe in firebug

Über CSS die Schrift vereinheitlichen:

Formen der Schriftformatierung

• Schriftfarbe / color: Über color definiere ich die Schriftfarbe. (hexadezimal oder nummerisch)
• Schriftgröße / font-size: Was jetzt folgt, ist etwas inkonsistent ;)  Es heißt zwar nur color für Schriftfarbe, aber font-size für Schriftgröße! 24px...
• Schriftart / font-family (aus dem alten HTML: font face) Arial, Verdana...
• Schriftstil / font-style: bold, lighter...

weitere Formen unter CSS4YOU (font weight, font variant (Kapitälchen...)
 

h2 {
     color: blue;
     font-size: 24px;
     font-family: arial,helvetica,sans-serif;
     font-style: italic;
     font-weight: bold;
}

da nicht auf allen Systemen alle Schriften vorhanden sind, haben wir die Möglichkeit alternative Schriftarten anzugeben:

• bevorzugte Schriften: am Liebsten benutze Arial, wenn diese nicht geht dann Helvetica und sonst sans-serif!
• Man kann die Werte auch aneinanderreihen und sie mit einem KOMMA separieren! (anders als bei Margin, padding, border!!!

Einschub: Blindtext - lorem ipsum

Tipp für Gesamtdefinition der Selektoren:

Damit wir nicht alle Schriften neu formatieren müssen, können wir die Definition der Elementselektoren zusammenfassen - mit Komma getrennt.
Also die gleiche Schriftart für alle Text führenden Elemente:

p, h1, h2, h3 {
    font-family: arial;
}

Aber was ist, wenn ich einen div-Container habe, in dem nur der Text steht...?!?

Lösung:
Wir formatieren das Element body! :)

body {
     font-family: arial,helvetica,san-serif;
    color: #333333
}

Mischformen

= Elemente, die weder Block- noch Inlineelement sind

=> Das Image-Element:
Eingabe im Body:
<img src"image.jpg" />

Eingabe im Head: 
image {
            width: 260px;
        }

• man könnte sagen, dass es ein Inlineelement ist - da es keine neue Zeile beansprucht
• Eigentlich lassen sich Inlineelemente nicht in der Größe verändern....
• Bilder schon - dasBild ist ein Sonderfall!

Images sind Inline-Blockelemente

• haben Eigenschaften eines echten Inlineelements
• weisen aber auch Eigenschaften auf, die an ein Blockelement erinnern!

-> diese Mischformen machen wir uns zunutze!
z.B. Breite für Links etc einstellen... :)


!!! Wir schreiben jetzt kein Style mehr in den HTML-text, sondern defnieren unsere Style-Angaben nur noch im Header!!!


Nochmal auf unser Formular form-2.html bezogen:
Wir haben in einer Liste strukturiert
label = Steuerelement

Wie wäre es, wenn wir dem Label eine Breite geben könnten?! Dann hätten wir alle Steuerelemente einheitlich in einer Reihe!
 
label{
         width: 200px
}
Es reagiert nicht auf Größenangaben, denn es ist ein klassisches Inlineelemen.
ABER: Es gibt einen Trick!

Transformation eines Inlineelements zu einem Inline-Blockelement

Wir machen aus dem Inlineelement label - ein Inline-Blockelement :)  -> Transformieren!

label{
display: inline-block;        
width: 200px
}

-> dazu muss ich natürlich im Body die Stellen mit <label>-Tag versehen haben!

Was heißt transformieren?
Wir haben die Art des Elements umgebogen durch disply: inline-block

Links transformieren!
a {
display: inline-block;        
width: 200px
}

CSS: Linktransformation über a{ display: inline-block; width: 200px;}

Wir können die Höhe und Breite einstellen, die Ur-Eigenschaft, dass die Folgeelemente hintereinandergereiht sind, bleibt erhalten!

Aufgabe des Tages:
Bilden Sie Folgendes nach, mit den Informationen, die wir heute erhalten haben:

Linien nur mit CSS ziehen, nicht mir hr!

Tipp: 7 CSS-Zeilen eingefügt:
border, bottom-Color, padding, margin, ul...

ich hab selbst nur 6 ;) - hier mein Quelltext:
<style type="text/css">
       
        ul {
            list-style-type: none;
        }
       
        body {
            font-family: arial,helvetica,sans-serif;
            background-color: silver;
        }
       
        fieldset {
            background-color: beige;
        }
       
        legend {
            font-style: arial,helvetica,sans-serif;
            font-weight: bold;
        }
       
        li{
            padding: 15px 0px;
            border-bottom-style: solid;
            border-color: grey;
            border-bottom-width: 1px;
            width: 550px;
        }
       
        label{
            display: inline-block;
            width: 200px
        }
</style>