Montag, 20. Dezember 2010

29: Text styling with CSS


Zusammengefasst nach dem Artikel von Ben Henick
Quelle: http://dev.opera.com/articles/view/29-text-styling-with-css/
29: Text styling with CSS



Schriften Eigenschaften im CSS

Ein Designer hat im Internet eine geringere Kontrolle über die Typographie einer Webseite als beim traditionellen Printdesign. Doch auch hier ist es wichtig, auf die verschiedenen Eigenschaften von Schriften einzugehen, besonders um eine gute Leserlichkeit bereitzustellen. Es gibt im CSS verschiedene Möglichkeiten, um die Typografie einer Seite zu verändern.


font-size

Am häufigsten wird in einem Text die Schriftgröße geraucht. Im CSS wird diese mithilfe von der Eigenschaft „font-size“ definiert.

Beispiel:
body {font-size: 14px;}

Die Standard Schriftgröße eines Browsers beträgt 16 pixel. Die am häufigsten genutzten Einheiten der Schrfitgröße sind: pixels (px), ems (em), Prozent (%) und Punkt (pt). Der unterschied der verschiedenen Einheiten ist, dass es relatvie und absolute Schrifteinheiten sind.
Absolute Größen (px, pt) werden in Layouts verwendet, in denen die Relation zur Dokumentenfläche nicht ändert - auch fixe, statische oder „Ice“ Layouts.
Relative Größen (em, %) sollten in nicht statischen Layouts verwendet werden.

Üblicherweise entspricht em der Höhe eines großen „M“ in der angegeben Schrift. Im CSS entspricht jedoch em der Höhe einer Zeile, also einem Element in der Schriftgröße von 14px:
1em = 100% = 14px = 10.5pt

Will man nun die Schriftgröße vergrößern oder verkleinern, multipliziert man einfach den Wert dazu: 1.143em = 114.3% ≈ 16px = 12pt

Schlagwörter
Es können auch Schlagwörter von xx-small bis zu xx-large verwendet werden, um die Größe zu definieren.


font-family

Nach der Größenwahl kann nun die Schriftart definiert werden, dabei sollten gewisse Regeln beachtet werden:
Schriftarten müssen genauso benannt sein wie in der Schriftenbibliothek.
Alle Schriftarten müssen durch ein Komma getrennt werden
Besteht eine Schriftart aus mehr Wörtern, muss diese von Anführungszeichen umschlossen sein.
Bei mehreren Schriftarten sollte der Favorit immer als erster genannt werden.


Details bearbeiten

 
font-style: die Schrift wird italic, ohne das „i“ Element zu verwenden; Werte: italic, oblique und normal.

font-variant: der Text wird in Kapitälchen dargestellt; Werte: small-caps und normal
font-weight: kann die Stärke bzw. Dicke einer Schrift definiert werden


Schriften Kürzel

Die Text Eigenschaften können auch mit einem einzigen Kürzel im CSS definiert werden:
h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

Es sollte jedoch immer eine bestimmte Reihenfolge eingehalten werden: font-style, font-variant, font-weight, font-size und font-family


Weitere CSS Definitionen

  • text-align: die Laufrichtung eines Textes wird definiert: links, rechts, mittig und bündig.
  • etter-spacing und word-spacing: der Weißraum zwischen Buchstaben und Wörtern kann verändert werden
  • text-indent: Einzug von Paragraphen; die Werte werden gleich wie bei der Schriftgröße angegeben.
  • text-transform: hier kann die Groß- bzw. Kleinschreibung definiert werden
  • text-decoration: erzeugt einen Strich über, unter oder durch den Text
  • line-height: der Weißraum zwischen den Zeilen kann verändert werden - Zeilenabstand

Freitag, 10. Dezember 2010

30: The CSS layout model - boxes, borders, margins, padding


Zusammengefasst nach dem Artikel von Ben Henick
Quelle: http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
30: The CSS layout model - boxes, borders, margins, padding

Weißraum um ein Objekt setzen: margin

Margin:
Margin kann für oben, rechts, unten und links entweder jeweils einzeln oder für alle zusammen eingestellt werden. Die Werte dazu werden meistens in px oder em angegeben. Bei Prozentangaben muss beachtet werden, dass sich der Wert auf das Elternelement bezieht und nicht auf die Breite des gesamten Dokumentes.
Das auto margin kann dazu verwendet werden, dass definierte Element automatisch in der Mitte des Dokumentes zu zentrieren.
Es können auch negative margins vergeben werden. Wenn einem Element dann ein hoher negativ margin gegeben wird, kann es auch schon mal zu einer Überlappung von zwei Elementen kommen.
Bei angrenzenden Block - Elementen mit einem margin von größer als null, wird nur der größere der zwei margins angewandt. Listen und Überschriften sind keine Block - Elemente und somit wird der kleinere margin nicht in den anderen verschwinden.

Ränder:
Es gibt auch bei Ränder einen Kürzel, bei dem dann alle relevanten Einstellungen vorgenommen werden können. Dabei können bis zu 4 verschiedenen Einstellungen vorgenommen werden. Dies ist aber nur sinnvoll, wenn um das Objekt ein konsistenter Rahmen gezogen werden will. Mit den Ränder Einstellungen kann die dicke, die Strichart, Farbe und die Abstände definiert werden. Natürlich kann auch für jede einzelne Seite der Rand individuell gestaltet werden (border-bottom, border-top, border-right, border-left).

padding:
Das padding erzeugt einen Abstand zwischen dem margin oder Umrandung eines Elements und dessen Inhalt.


Arbeiten mit den Elementen „width“ und „height“

 
Um in einem CSS file die Ausmaße eines Elementes zu beeinflussen, werden width, height, min-widht, max-width, min-height und max-height verwendet. Jedoch gibt es ein paar Dinge zu beachten:
width und height können nicht bei inline Elementen (span, strong, em) angewandt werden.
bei Bildern kann jedoch eine width oder height angegeben werden, auch wenn es ein inline Element ist
widht und height sind nur zwei Möglichkeiten um die Ausmaße eines Elementes zu beeinflussen

Manchmal ist es auch wichtig, die Ausmaße eines Elementes einzuschränken, um damit zum Beispiel die Leserlichkeit einer Textspalte zu gewährleisten. Hierfür werden bei width oder height die min- und max- Werte davor gehängt.

Wenn nun widht und height festgelegt worden sind, ist es auch manchmal nötig zu überlegen, was mit einem Inhalt passiert, der mehr Platz braucht als vorhanden. Mit der overflow Eigenschaft mit seinen vier Werten - visible, hidden, auto und scroll hand, wird das gehandhabt.
visible: beeinflusst der zu lange Inhalt nicht den Fluss oder margin der angrenzenden Elemente.
hidden: alle Inhalte oberhalb des Elementes werden verborgen.
atuo:
der Überfluss des Elements wird wie beim hidden gehandhabt, nur dass ein Scrollbar erzeugt wird.
scroll: vertikale wie auch horizontale Scrollbars werden hinzugefügt, auch wenn sie nicht gebraucht werden.
Wenn nun die width und height Werte verändert werden, muss man beachten, dass der Inhalt des Elementes, plus seinem margin, padding und Umrandung, noch immer in die definierte Breite hineinpasst.


Arbeiten mit dem Dokumenten flow

 
Bei einer Gestaltung einer mehrspaltigen Webseite sind die Begriffe: display, float und clear sehr wichtig. Bei der display Eigenschaft spielen vor allem inline und block Elemente eine wichtige Rolle. Wenn ein Element nun die display Eigenschaft erhält, werden sich inline Elemente wie block Elemente verhalten oder umgekehrt.
Die float Eigenschaft definiert, wie anschließende Inhalte eines Elementes um diesen herumfließen soll. Dabei können die Werte float: left, float: right oder float: none eingestellt werden.
Wie auch beim float werden bei der clear Eigenschaft die Werte left, right oder none hinzugefügt. Diese Eigenschaft definiert jedoch, wie ein Element um all seine Nachbarn fließen soll. 

28: Inheritance and Cascade

Zusammengefasst nach dem Artikel von Tommy Olsson
http://dev.opera.com/articles/view/28-inheritance-and-cascade/
28: Inheritance and Cascade



Vererbung
 
Mit Vererbung im CSS wird gemeint, dass bestimmte Eigenschaften von einem Eltern Element an sein Kinder weitervererbt wird. Jedoch sind nicht alle CSS Eigenschaften vererbbar, da es bei diesen keinen Sinn machen würde, wie zum Beispiel beim margin.


Warum Vererbung sinnvoll ist

 
Die Vererbung ist sehr hilfreich beim stylen eines HTML Dokumentes mithilfe des CSS. Würde es diese Funktion nämlich nicht geben, müssten Eigenschaften wie font-family, font-size und Textfarbe für jedes einzelne Element definiert werden.
Mit der Vererbung ist es dann möglich, zum Beispiel für html oder body die Text Eigenschaften zu definieren und diese Definitionen werden dann von allen anderen Elementen übernommen. Dies kann dann auch bei bestimmten Containern angewandt werden, welche dann ihre Eigenschaften auf alle Elemente innerhalb dieses Containers übertragen.


Wie Vererbung funktioniert

 
Jedes Element innerhalb eines HTML Dokumentes bekommt die Eigenschaften des Eltern Elements vererbt, ausgenommen vom html, da es kein Eltern Element hat.
Jedoch muss beachtet werden, dass vererbte Eigenschaften überschrieben werden können. Wenn zum Beispiel im html font-size: 16px; angegeben ist aber im body nur 14px; wird das letztere das vorherige überschrieben. Daraus kann man sich merken, dass das untere Element alle gleichen Eigenschaften vom oberen überschreibt. Es zählt immer das, was als letztes angegeben wurde.


Vererbung erzwingen

 
Vererbung kann auch erzwungen werden, wenn bei einer Eigenschaft „inherit“ dazugestellt wird:

Beispiel:
p {
  background: inherit;
}
Bei diesem Beispiel werden alle Paragraphen die Hintergrund Eigenschaften vom Eltern Element übernehmen.

Das erzwingen einer Vererbung sollte aber mit bedacht verwendet werden, da Microsoft Internet Explorer diese Eigenschaft nicht unterstützt.


Der Wasserfall

 
Schon aus dem Namen CSS - Cascading Style Sheet kommt heraus, dass der Wasserfall ein wichtiges Konzept ist. Damit wird der Mechanismus gemeint, welcher das Endergebnis kontrolliert, wenn mehrere, widersprüchliche CSS Erklärungen für dasselbe Element verwendet werden. Es gibt drei Konzepte, welche die Ordnung von CSS Erklärungen kontrollieren:

  • Wichtigkeit
  • Spezifität
  • Grundordnung
  • Wichtigkeit

Wichtigkeit:Die Wichtigkeit einer CSS Erklärung hängt davon ab, wo sie festgelegt wurde. Die widersprüchlichen Erklärungen werden in dieser Ordnung angewandt:
  • User agent style sheets
  • Normal declarations in user style sheets
  • Normal declarations in author style sheets
  • Important declarations in author style sheets
  • Important declarations in user style sheets
User agent style sheet: ist der bereits existierende style sheet des Browsers. Jeder Browser hat automatisch Definitionen, wie verschiedene HTML Elemente angezeigt werden sollen, wenn keine anderen Eigenschaften vom Benutzer oder Designer angegeben werden.

User style sheet: ist der vom Benutzer definierte style sheet. Nicht alle Browser unterstützen user style sheets, aber sie können vor allem für Personen mit bestimmten Einschränkungen von Vorteil sein.

Author style sheet: ist der vom Autor der Seite erstellte style sheet, oder des Webdesigners.

Normal declarations: sind genau das, was der Begriff sagt, normale Erklärungen. Der Gegensatz dazu sind important declarations, welche Erklärungen sind, die von einem !important Anweisung gefolgt sind. Important declarations übertrumpfen alle anderen style sheets.

Grundsätzlich ist aber zu sagen, dass ein Designer nicht zu viel über die Wichtigkeit von Style Sheets nachdenken sollte. Es ist nicht möglich zu wissen, ob ein Benutzer ein user style sheet definiert hat, welches das CSS vom Designer überschreibt.

Spezifität:
Wenn mehrere Eigenschaften eines Elementes nicht übereinstimmen, und jede hat die gleiche Wichtigkeit, dann wird die Eigenschaft gewinnen, welche die beste spezifische Zuweisung hat. Eine Zuweisung mit geringer Spezifität trifft auf mehrere Elemente zu, wie *, eine hohe nur auf ein Element der Seite, wie id oder nav.

Grundordnung:
Wenn nun zwei Erklärungen auf ein Element zutreffen und beide die gleiche Wichtigkeit und Spezifität hat, dann entscheidet die Grundordnung. Die Erklärung, welche später im style sheet aufkommt, gewinnt.
Wenn nur mit einem externen style sheet gearbeitet wird, dann wird bei einem Konflikt die untere Erklärung die obere überschreiben. Wenn ein Konflikt bei mehreren style sheets entsteht, entscheidet die Ordnung, wie diese mit dem html verlinkt wurde. Auch hier wird wieder der untere style sheet den oberen überschreiben.

20: HTML forms - the basics

Zusammengefasst nach dem Artikel von Jenifer Hanen
Quelle: http://dev.opera.com/articles/view/20-html-forms-the-basics/
20: HTML forms - the basics



Mit einem Formular im Internet ist ein Feld gemeint, in der man Informationen auf einer Webseite hineinschreiben kann. Entweder gibt man in ein Textfeld einen Text oder Nummern ein, markiert eine Checkbox, füllt einen Radio Button oder wählt etwas von einem Drop - Down Menü aus. Das ausgefüllte Formular wird dann mithilfe des Absenden - Buttons an die Webseite verschickt.


Der elementare Code


Das Formular fängt immer mit dem <form> Tag an, hört mit dem </form> Tag auf und dazwischen sind die restlichen Formularfelder. Die grundlegendsten Felder eines Formulars sind welche, in dem der User sein Feedback geben kann. Dazu braucht man einfach nur zwei <input> felder für die Daten des Users (Name, E-Mail) und eine <textarea> für das Kommentar.

Beispiel:
<form>
Name: <input type=“text“ name=“name“ id=“name“ value=““ />
Email: <input type=“text“ name=“email“ id=“email“ value=““ />
Comments: <textarea name=“comments“ id=“comments“ cols=“25“ rows=“3“></textarea>
<input type=“submit“ value=“submit“ />
</form>

Mit <input> definiert man einfach das Feld, in dem die Informationen hineingeschrieben werden können. Jeder <input> Tag muss eine „type“ Eigenschaft besitzen, um festzulegen, was hier erhalten wird: text, button,  checkbox, file, hidden, image, password, radio, reset or submit. Des weiteren muss braucht jeder <input> Tag einen Namen, der vom Programmierer entschieden wird. Am besten sollte es immer nach der Funktion des Feldes benannt werden, bsp.: name=“name“ or name=“email“. Des weiteren braucht jedes <input> Tag ein „value“ Eigenschaft. Wenn value auf blank gestellt wird - value=“„ - wird dem bearbeiteten Script gesagr, alles einzufügen, was der Besucher in das Feld hineinschreibt. Bei den anderen „type“ Eigenschaften kann beim value das eingegeben werden, was beim Formular als erstes angekreuzt, ausgewählt ect. sein soll.

Es gibt auch noch eine spezielle Art von <input> Elementen, nämlich die mit dem value=“submit“ Eigenschaft. Anstelle eines einzeiligen Textfeldes wird hier ein Button generiert. Beim value wird das eingegeben, was den Button definiert, Beispiel: value=“yes“ für yes, value=“submit“ für einen Senden Button, value=“reset“ für einen Rückgängig Button ect.

Nach den zwei <input> Elementen kommt ein <textarea> Element. Dieses Feld ist nicht mehr wie beim <input> Element nur eine Zeile sondern es stellt eine größere Box aus mehreren Zeilen zu verfügen, in der dann der Text hineingeschrieben werden kann. Um zu definieren, wieviele Zeilen bzw. Spalten eine textarea sein soll, braucht man die „cols“ und „rows“ Eigenschaft.


Struktur und Verhalten hinzufügen

 
Wenn jetzt auf den submit Button gedrückt werden würde, würde nichts passieren. Es fehlt nämlich noch die „action“ oder „method“ Eigenschaft. Die „method“ Eigenschaft definiert, wie die Daten an das Script gesendet wird, welche diese verarbeitet. Dafür gibt es zwei Möglichkeiten beim „method“: GET & POST. Die GET method sendet die Daten in die URL der Webseite. Es ist jedoch besser diese Variante nicht zu benützen, da es kein sicherer Weg ist, da jeder die Informationen sehen kann. Bei POST werden die Daten mithilfe des vom Formular benützten Script an eine E-Mail Adresse des Verwalters gesendet oder in einer Datenbank für die spätere Verwendung gespeichert.
Um wirkliche 100% Sicherheit der versendeten Daten zu gewährleisten, wie zum Beispiel bei einer Kreditkartennummer, sollte ein https Protokoll verwendet werden. Das bedeutet die Daten werden über ein https Protokoll und nicht über ein http Protokoll versendet, wo die Übertragen zwar etwas langsamer ist aber diese dafür verschlüsselt werden.
Die „action“ Eigenschaft definiert, zu welchem script file die Formular Daten zur Weiterverarbeitung gesendet werden sollen.

Nach dem absenden eines Formulars ist es auch immer von Vorteil, den User automatisch auf eine neue Seite weiterzusenden, zum Beispiel zu einer „Dankeschön“ Seite oder zurück zur Startseite.

Beispiel:
<input type=“hidden“ name=“redirect“ value=“http://www.opera.com“ />
Diese Zeile definiert im speziellen, dass der User nach dem absenden des Formulars auf die Startseite von Opera zurückgeschickt wird.

Um die Struktur eines Formulars zu verbessern, ist es möglich, diese in eine ungeordnete Liste zu setzen. Damit kann dem Formular übersichtlicher Aufbau gegeben werden und mithilfe des CSS das ganze noch gestylt werden. Natürlich kann die Struktur und das Aussehen auch mithilfe von einer Definition Liste oder gleich mithilfe des CSS die <input> <label> Tags bearbeitet werden. Das bleibt jedem selbst überlassen.
Als letztes sollte einem jedem Formularfeld ein label zugewiesen werden. Diese labels sind mit den  jeweiligen Formular Elementen dadurch verbunden, dass jedem input oder textarea Element eine id zugefügt wurde, mit demselben Wert wie die „for“ Eigenschaft des labels. Das ist besonders hilfreich, da es auch ganz offensichtlich darstellt, worum es bei diesem Formularfeld geht.
Beispiel:
<ul>
        <li>
            <label for=“name“>Name:</label>
            <input type=“text“ name=“name“ id=“name“ value=““ />
        </li>
</ul>


Hinzufügen von Semantik, style und mehr Struktur

 
Das <fieldset> Elements ermöglicht es, das Formular semantisch korrekt aufzubereiten. Es kann zum Beispiel für jeden größeren Abschnitt in einem Formular ein <fieldset> gesetzt werden, wei zum Beispiel für Informationen über die Adresse, Zahlungsarten, Kundenpreferenzen ect.
Das <legend> Element ermöglicht es dem <fieldset> einen Namen zuzuweisen.

<form id=“contact-form“ action=“script.php“ method=“post“>
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for=“name“>Name:</label>
        <input type=“text“ name=“name“ id=“name“ value=““ />
      </li>
    </ul>
  </fieldset>
</form>