Stylesheets (CSS) Bitte beachten: Die SELFHTML-Dokumentation ist in Teilen leider nicht mehr auf dem neuesten Stand der Webtechnologien. Als Nachfolger dieses bewährten Kompendiums bietet das SELFHTML-Wiki fortlaufend aktualisierte Informationen rund um die Erstellung von Webseiten. Die aktualisierten Inhalte dieser Seite finden Sie im Wiki unter CSS. Sinnvolle Vorkenntnisse zum Verständnis: HTML. Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. CSS 4 You - The Finest in Stylesheets. Startseite • Peter Kröner • Webtechnologie. CSS/Media Queries – SELFHTML-Wiki. Eine Stärke von CSS liegt darin, dass die Darstellung eines Dokuments für verschiedene Ausgabemedien festgelegt werden kann. Die Zuordnung eines Stylesheets zu einem Medium erfolgt mit Hilfe von Medienabfragen (Media Queries). Als Medienabfrage wird eine Liste von Kriterien bezeichnet, die ein Ausgabemedium erfüllen muss, damit ein Stylesheet zur Verarbeitung eingebunden wird.
Medienabfragen bestehen aus einem Medientyp (z.B. Bildschirm oder Drucker), einem Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem. Medienabfragen können an allen Stellen verwendet werden, wo Stylesheets eingebunden werden bzw. dort, wo eine Medienangabe abgefragt wird. [Bearbeiten] Anwendung Die Angabe eines Medientyps erfolgt als einfaches Schlüsselwort, z.B. screen. Beachten Sie: Wird keine Medienabfrage angegeben oder besteht die angegebene Abfrage nur aus Leerzeichen, so gilt der Standardwert all. [Bearbeiten] Einbindung Beispiel: Medienabfrage im HTML-Dokument Beispiel [Bearbeiten] siehe auch. CSS3 Generator - dein Weg, zu einem perfekten Design! CSS3.de | Informationen, Übungen und Beispiele zum Thema CSS3. Cascading Style Sheets { Grundlegendes : Dokumentstammbaum }
CSS 2.1 ::Grundlegendes Wozu ein Stammbaum? Der Dokumentstammbaum 1) beschreibt die Struktur einer HTML-Datei, ähnlich wie ein Familienstammbaum das Verhältnis verwandter Familien zueinander darstellt. Auch die Bezeichnungen, mit der die Beziehungen der Elemente untereinander definiert werden, sind aus diesem Kontext entlehnt: es gibt u. a. Eltern-, Kind- und Geschwisterelemente. Wie im realen Leben ist eine genau definierte Abstammung eine Voraussetzung für die Festlegung der Vererbung von Eigenschaften. Insgesamt gesehen haben wir es aber hier mit einem deutlich einfacheren Gefüge zu tun, denn im Unterschied zum Familienstammbaum hat hier jedes Element nur ein Elternelement. Definitionen Die Bedeutung der verwendeten Ausdrücke lässt sich zwar aus der Familienforschung einfach herleiten, soll aber der Vollständigkeit halber im Folgenden kurz auf HTML- Dokumente bezogen werden: Kindelement (child element): Ein Element A ist das Kindelement des Elementes B, wenn A direkt von B abstammt.
CSS Spielereien. Meine Spielwiese. CSS Einführung: Regeln, Schreibweise, Einbinden. CSS3 & HTML5 - Einstieg in die neuen Webstandards. Wichtige Seiten zu HTML5 und CSS3 - F-LOG-GE. In meinem letzten Projekt fiel mir genau wie in meiner letzten Schulung auf, dass vielen Kollegen der Überblick über wirklich hilfreiche und wichtige Links fehlt. Insbesondere der Umgang mit CSS3 und HTML5 erfordert das ständige Nachschlagen nach Browsersunterstützung und der Suche nach passenden Alternativen. Es ist zudem aber auch wichtig, inhaltlich am Ball zu bleiben. Dafür benötigen wir inspirierende und gerne auch informative Artikel. Die gibt es in der gewünschten Güte und Qualität (leider) nur im englischsprachigen Web. Ich gebe hier mal eine Übersicht der mir besonders wichtigen Referenzen und Informationsseiten. Diese Übersicht ist nicht komplett, nur auf das Wesentliche eingedampft. Ich bin überzeugt, dass jeder an moderner Webentwicklung Interessierte diese Auswahl in seinen Bookmarks haben sollte.
Referenzen CSS3-Files.comHTML5Doctor: in meinen Augen die beste Seite mit Basisinformationen zu HTML5. Infoseiten Demoseiten Blogs Tools Dies ist nur eine grobe Auswahl. Struktur - HTML5 Struktur Elemente & Attribute. Das primäre Ziel der neuen HTML5 Spezifikation ist es, Webseiten eine verbesserte semantischen Bedeutung: semantischender Bedeutung, dem Sinn entsprechend Strukturierung des Quelltextes zu verleihen und den Inhalten eine eindeutige Gewichtung zu geben.
Diese soll künftig dazu führen, dass unterschiedlichste Browser oder andere User Agents wie Screenreader den Inhalt eines Dokuments richtig erkennen und gegebenenfalls nach dessen Relevanz ausgeben können. Derzeit werden HTML-Dokumente vor allem mit Hilfe von <div>-Elementen strukturiert. Die Formatierung und Positionierung dieser "Container" erfolgt meist mittels CSS. Dies soll mit den neuen Elementen zur semantischen Bedeutung: semantischender Bedeutung, dem Sinn entsprechend Strukturierung erfolgen. Neue Elemente in HTML5 - Eine Übersicht aller neuen HTML5-Tags. HTML5 ist im Vergleich zu seinem Vorgänger eine Erweiterung. Es wurden also nicht nur Elemente entfernt oder geändert, sondern auch neue Elemente der Beschreibungssprache hinzugefügt. Somit lassen sich in Zukunft mit HTML5 Zeit- und Datumsangaben auszuzeichnen. Hierfür steht das <time> -Tag zur Verfüguing. Mit dem datetime-Attribut, das momentan das einzige Attribut (ausgenommen der Standard-Attribute und Events) für dieses Element darstellt, lässt sich präzise eine Datum oder eine Zeit angeben.
Wird das datetime-Attribute weggelassen so muss die Angabe im Inhalt erfolgen. Die folgende Auflistung zeigt alle neuen, in HTML5 verfügbaren, Elemente und eine kurze Beschreibung ihrer Funktion: [modernes Typo3-Webdesign mit HTML5, CSS3 und Suchmaschinenoptimierung: Jongo WebAgentur GbR] Blog | elf acht - Teil 1794. Stylesheets / CSS-Eigenschaften / Schriftformatierung. Allgemeines zur Schriftformatierung Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht, Zeichen- und Wortabständen usw. zu verstehen. Sinnvoll sind solche Angaben für alle HTML-Elemente, die Text enthalten können. Dazu gehören alle Elemente, die im Kapitel Absatztypen und Text beschrieben werden, aber auch beispielsweise Elemente für Tabellen. Auch auf das html- und das body-Element lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Text-Elemente der HTML-Datei. font-family (Schriftart) Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw.
Bei der hier beschriebenen Eigenschaft können Sie Schriftarten angeben, ohne sich darum kümmern zu müssen, ob und wie die Schriftart beim Anwender angezeigt werden kann. Schriftformatierung mit Schriftartendatei beschrieben. Beispiel: Anzeigebeispiel: So sieht's aus <! Erläuterung: Trennen Sie mehrere Schriftartennamen durch Kommata. <! <! <!