Wie style ich einen Link? - Eine Schritt-für-Schritt-Anleitung (Tutorial)

Was haben wir hier gemacht?

Der Stilesheet ist derselbe. Wir haben in den Kopfteil nur ein kleines Detail eingefügt, ein Meta-Tag. Unten wurde noch ein Test-Paragraph eingefügt mit einem Artikel von Wikipedia über CSS, für Anfänger etwas zu kompliziert, wie ich finde, davon abgesehen, dass das DOM keine Sprache, sondern ein model ist, eine Art Schablone für das HTML-Element als Objekt im physischen Speicher des Computers. Auch die beiden Bilder sind noch einmal zu sehen, die die Kaskade veranschaulichen sollen. Was sollen sie noch zeigen? Durch das Meta-Tag wird dem Handy mitgeteilt, dass es die Webseite so skalieren soll, dass sie vernünftig angezeigt wird. Probiere den Unterschied auf deinem Handy aus. Toll, denn mittlerweile sind sogar unsere Links anklickbar, also brauchbar. Übrigens findest du die Farbcodes hier. Den Sourcecode der Seite hier.


<meta name=viewport content="width=device-width, initial-scale=1">

Zum Vieport-Meta und CSS-Pixel

Was sagt Mozilla zu diesem Meta-Tag?

Die Eigenschaft width setzt die Größe des Viewports. Man kann es auf eine bestimmte Größe setzen, z.B. width=600 oder auf den besonderen Wert der Gerätebreite (width=device-width). Die Gerätebreite (device-width) ist die Breite des Bildschirms in CSS-Pixeln bei einem Maßstab von 100%. In den letzten Jahren sind Bildschirmauflösungen stark gestiegen, so dass einzelne Pixel mit dem menschlichen Auge sehr schwer auszumachen sind. Z. B. haben neue Smartphones häufig 5-Inch-Bildschirme mit Auflösungen, die oberhalb von 1920-1080 Pixeln liegen (~400 dpi). Deswegen zeigen viele Browser ihre Seiten kleiner an, indem sie Hardware-Pixel in sogenannte "CSS-Pixel" umrechnen.

Es gibt noch andere Eigenschaften, mit denen du die Zoom-Möglichkeiten deiner User auf ihrem Mobilgerät beeinflussen kannst. Davon würde ich aber die Finger lassen. Keiner mag es, wenn ihnen die Möglichkeit zum Zoomen genommen wird.

Viewport Meta

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel".

Du findest diesen Artikel (nur zur Hälfte Übersetzt) auf dieser Seite.

Wikipedia-Text zu CSS

Cascading Style Sheets, kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs. Sie ist ein sogenannter „living standard“ (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML (zum Beispiel bei SVG) eingesetzt werden. CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z. B. Layout, Farben und Typografie). Gab es anfangs nur einfache Darstellungsanweisungen, so wurden im Verlauf komplexere Module hinzugefügt, mit denen z. B. Animationen und für verschiedene Ausgabemedien verschiedene Darstellungen definiert werden können. Elemente eines Dokumentes können aufgrund verschiedener Eigenschaften identifiziert werden. Dazu zählen neben dem Elementnamen (z. B. a für alle Hyperlinks), ihrer ID und ihrer Position innerhalb des Dokumentes (z. B. alle Bildelemente innerhalb von Linkelementen) auch Details wie Attribute (z. B. alle Linkelemente, deren href-Attribut mit www.example.com beginnen) oder die Position in einer Menge von Elementen (z. B. das 7. Element einer Liste). Mit CSS-Anweisungen können für jede solcher Elementegruppen Vorgaben für die Darstellung festgelegt werden. Diese Festlegungen können zentral erfolgen, auch in separaten Dateien, so dass sie leichter für andere Dokumente wiederverwendet werden können. Außerdem enthält CSS ein Vererbungsmodell für Auszeichnungsattribute, das die Anzahl erforderlicher Definitionen vermindert. Mit CSS können für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorgegeben werden. Das ist nützlich, um z. B. die Verweisadressen von Hyperlinks beim Drucken aufzuführen, und um für Geräte wie PDAs und Mobiltelefone, die kleine Displays oder eine geringe Bildauflösung haben, Darstellungen anzubieten, die schmal genug und nicht zu hoch sind, um auf solchen Geräten lesbar zu bleiben. CSS ist die Standard-Stylesheet-Sprache im World Wide Web. Früher übliche, darstellungsorientierte HTML-Elemente wie font oder center gelten als „überholt“ (englisch obsolete), das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden. So gelten diese u. a. seit HTML 4 (1997) als „unerwünscht“ und mit HTML5 als veraltet (englisch deprecated).

Kaskade zur Veranschaulichung der CSS-Kaskade Bildrechte Kaskade zur Veranschaulichung der CSS-Kaskade Bildrechte