html stylen

Kommentar verfassen / css, html, Informatik / Von /

Man kann html mittels css formatieren. Dabei gibt es drei Möglichkeiten, die ich derzeit nutze:

  • css direkt in das Element schreiben
  • css in den head der html-Datei schreiben
  • css als externe Datei einbinden

css direkt in das Element schreiben

Um css direkt einem Element zuzuweisen, notiert man im öffnen Tag ein style-Attribut mitsam der geüwnschten css- Eigenschaften. Zum Beispiel so: <p style="color:green;"> blabla </p>

Das sieht dann so aus:

blabla

Eine Liste von css-Möglichkeiten, die man gut lesen kann, gibt es auf w3, deutsch gibt es das auf selfhtml.

css in den html-head notieren

Das ist die saubere Art, wenn man eine bestimmte Formatierung immer wieder verwenden will. Nach dem meta-Tag ergänzt man einen style-Tag, und notiert darin, welche Eigenschaften welches Element bekommt.

<style>
   div {
    border: 1px solid black;
    max-width:1000px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px; }
p {
    font-family: Georgia, serif;
    font-size: 2 em;  
}

Das em ist übrigens eine Bezugsgröße; 1 em entspricht „normal großer Schrift“ und die Zahl davor ist ein Faktor. Neu habe ich heute gelernt, dass man den css-Zugriff nicht nur auf die hauptsächlichen html-Elemente legen kann, sondern sie auch an die id eines Elementes oder an die Klasse binden kann. Ich kann mir also munter Klassen ausdenken und darüber meine Formatierung strukturieren. Im Style-Tag steht dann .ask{ color:#193666;}und im Text: <p class="ask">Es ist ein Fragetext. </p> Und schon werden alle Texte, die eine Frage darstellen, dunkelblau.

css in einer zusätzlichen Datei bereitstellen

Will man denselben Stil auf vielen Seiten anbieten, macht es total Sinn, eine css-Datei zu erstellen und sie im head in das html einzubinden. Auch bootstrap funktioniert so. (Nur dass da auch noch jacascript-Elemente eingebunden werden.)

Bootstrap: Man lädt die Kompotenten herunter. Das jquery findet man auf github, man muss nur drauf achten, die fertige kompilierte Version herunterzuladen und nicht den Quellcode. Ich glaube, es geht auch von hier. Den Rest findet man auf getbootstrap.com.

<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>

Eine eigene css-Datei bindet man so ein (1. Beispiel von Selfhtml):

<link rel="stylesheet" href="stylesheet.css"> oder
<link href="css/meinstil.css" rel="stylesheet"

In css-Dateien kann man der Übersicht halber auch wieder andere css-dateien einbinden, das geht mit @import ‚mycss.css‘, wenn die Dateien im selben Ordner liegen, oder auch komplexer.

Über den generellen Aufbau schrieb ich schon: Grundgerüste.

Kommentar verfassen