Leider ist dieser Beitrag bisher nur in Englisch verfügbar. Bitte schaue später noch einmal vorbei oder schaue ihn Dir auf Englisch an.
Im zweiten Teil des Tutorials werden wir den CSS-Code erstellen und die Webseite responsive machen. Falls Ihr den ersten Teil des Tutorials, in dem der Aufbau der HTML-Struktur und das Einbinden der benötigten Skripts erklärt wird, noch nicht gelesen habt, solltet Ihr dies tun bevor Ihr mit dem zweiten Teil anfangt.
Image may be NSFW.
Clik here to view.
Wir haben ja bereits im letzten Teil unseren CSS Reset eingebunden. Der Reset sorgt dafür, dass wir keine vorgegebenen Stylings für HTML-Elemente haben, die in jedem Browser unterschiedlich ausfallen können. Wir können nun also anfangen unsere Seite von Grund aus aufzubauen, müssen aber natürlich darauf achten, dass z.B. Paragraphen nicht mehr automatisch einen vom Browser vorgegebenen Innenabstand haben und wir somit jeden Wert selbst definieren müssen.
Erstellen des Stylings – Definieren der globalen Regeln
Wenn wir ein Stylesheet erstellen, ist es wichtig mithilfe von Kommentaren die Datei in verschiedene Bereiche einzuteilen. Der erste Bereich ist der globale oder generelle Bereich, in dem wir generelle Stylings einfügen, die auf der ganzen Webseite verwendet werden und sich im Allgemeinen nicht verändern. Das erste Element, das wir stylen, ist das body-Element. Wie Du auf der Webseiten-Vorschau sehen kannst, soll die Seite einen orangenen Streifen am oberen Rand erhalten. Dieser Streifen wird durch einen 5px dicken Rand dargestellt, den wir in unserer Regel für das body-Element definiert haben. Lass uns außerdem unsere Hintergrundfarbe sowie die allgemeine Schriftart und -farbe festlegen.
body
{border-top: 5px solid #e56038;
background: #ebe8de;
font-family: 'Open Sans', sans-serif;
color: #333333;}
Als nächstes stylen wir unsere Eingabefelder. Da wir möchten, dass die Eingabefelder auf allen Seiten der Webseite gleich aussehen, positionieren wir die Regel hierfür ebenfalls in den globalen Bereich unserer CSS-Datei. In unserem Webseiten-Beispiel haben wir nur zwei verschiedene Arten von Eingabefeldern: ein Eingabefeld vom Typ “text” und eines vom Typ “submit”. Aus diesem Grund werden wir eine generelle Regel definieren, die auf alle unterschiedlichen Typen von Eingabefeldern angewendet wird und eine zweite nur für den Submit-Button.
input
{font-family: 'Open Sans', sans-serif;
font-size:16px;
padding: 7px;
outline: 0;
border:0;
width:250px;
background: #EBE8DE;
border-radius:5px;}
input[type=submit]
{width:auto;
padding: 5px 18px;
line-height:25px;
text-shadow:none;
cursor:pointer;
box-shadow: none;
background: #333333;
color: #fff;}
The post Wie man eine HTML5 Webseite aufbaut – Teil 2 appeared first on Lingulo.de.