Seite mit CSS-Datei formatieren In den Anfängen des Webdesign wurde der body-Tag für den Inhaltsbereich ergänzt, etwa durch die Einstellung einer Hintergrundfarbe. Das kann man auch heute noch machen, es funktioniert technisch. Aber es wird dringend empfohlen, stattdessen mit der externe CSS-Datei zu arbeiten und die Formatierungen über diese externe Datei durchzuführen. Daher braucht es im Kopfteil das Integrieren dieser Datei, damit der Browser sie gleich mitlädt und die entsprechenden Formatierungen übernehmen kann. Andernfalls würde die Darstellung nicht so erfolgen, wie man sich das gewünscht hat. CSS-Code einbauen - CSS-Link in die Webseite einbauen. HTML-Seite mit CSS gestalten Das Beispiel zeigt die Einbindung der CSS-Datei im Kopfteil und im Anschluss die Formatierung in der CSS-Datei selbst, die durch die Einbindung für die Seite wirksam wird. Fakt ist, dass die große Veränderung zu den zuvor präsentieren Möglichkeiten, den Inhalt der HTML-Seite generell zu formatieren, darin besteht, dass eine externe Datei eingebunden wird. Typischerweise nennt man sie, sie könnte aber auch lauten.
Es gibt drei Möglichkeiten, CSS in HTML einzubinden: 1. Inline-Formatierung: Einzelne Bereiche einer Seite sollen mit CSS formatiert werden. Beispiel: Eine Überschrift soll in roter Farbe dargestellt werden.
Was passiert und warum?
TypoScript Funktionen zur Einbindung von CSS Dateien auf verschiedene Weise nutzen TYPO3 bietet von Hause aus die nötigen TypoScript Funktionen, die die Einbindung von CSS Dateien ermöglichen. Hier wird erläutert, wie sich mittels TypoScript CSS Dateien in den Quelltext integrieren lassen. Das kann auf zwei verschiedene Arten oder als Kombination erfolgen. Css im body einbinden model. Externe CSS Dateien einbinden Die TypoScript Funktionen includeCSS und includeCSSLibs sind zur Einbindung externer CSS Dateien gedacht und bieten verschiedene Möglichkeiten zur Konfiguration. Die komplette Liste der Paramter zur Konfiguration findet sich hier.
Wenn nun aber viele Absätze rote Schrift haben sollen und vielleicht noch weitere Attribute, gibt es zwei Probleme: Zum einen müssten Sie das Ganze an jedem Absatz tippen. Zum anderen wird es wieder aufwändig, wenn später all diese Absätze grüne Schrift bekommen sollen. Also lagert man diese Design-Definitionen aus. Mit CSS definieren Sie im HEAD-Bereich der HTML-Seite Styles für vorhandene HTML-Elemente oder eigene Kreationen. Im BODY-Bereich, also zum Beispiel an den einzelnen Absätzen, fügen Sie dann lediglich eine Referenz zu einem Ihrer Styles hinzu. Ein ganz simples Beispiel: HEAD-Bereich: BODY-Bereich:
Ein Absatz mit rotem Hintergrund. Css im body einbinden program.
Hier wird für das Paragraphen-Tag ganz allgemein bestimmt, dass der Hintergrund rot sein soll. Daher muss im BODY-Bereich auch keine explizite Referenz angegeben werden. Hier spricht man von einem Typen-Selektor, weil die Definition eben für einen ganzen HTML-Typen gilt. Interssanter ist es aber, wenn Sie einzelne Inhalte umgestalten: