Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
cms:css [2025/08/12 13:49] walter [Cascading Stylesheets (CSS)] |
cms:css [2025/08/12 14:10] (aktuell) walter [Methode 2:] |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Cascading Stylesheets (CSS) ====== | ====== Cascading Stylesheets (CSS) ====== | ||
- | Zwei gute CSS-Programme sind: | + | ===== Simple.css ===== |
- | *Simple CSS (https://simplecss.org/)und | + | Die Website simple.css lässt sich in vorhandenen HTML-Code einbinden, sodass anschließend CSS-Befehle leichter zu finden und zu integrieren sind: https://simplecss.org/. |
- | *CSSedit. | + | |
+ | ===== NVU und KompoZer ===== | ||
Besser finde ich allerdings HTML-Programme mit eingebauten CSS-Editoren. Die einzigen Programme dieser Art, die ich kenne und die intuitiv zu bedienen sind, sind | Besser finde ich allerdings HTML-Programme mit eingebauten CSS-Editoren. Die einzigen Programme dieser Art, die ich kenne und die intuitiv zu bedienen sind, sind | ||
*NvU (http://www.nvu.com/) und | *NvU (http://www.nvu.com/) und | ||
*KompoZer ([[https://sourceforge.net/projects/kompozer/]]) | *KompoZer ([[https://sourceforge.net/projects/kompozer/]]) | ||
+ | |||
+ | Voraussetzung dafür, dass man CSS-Einstellungen und ihre Wirkungen in diesen Programmen sehen kann, ist natürlich, dass eine HTML-Datei damit geöffnet wurde (oder dass HTML-Code manuell eingegeben wurde). | ||
Einfach Menü <Ansicht - HTML-Tags> wählen, dann werden alle Tags als gelbe Symbole dargestellt. Nun zwei Möglichkeiten: | Einfach Menü <Ansicht - HTML-Tags> wählen, dann werden alle Tags als gelbe Symbole dargestellt. Nun zwei Möglichkeiten: | ||
- | - Mit rechter Maustaste auf einen Tag klicken und "Erweiterte Eigenschaften" wählen. Im aufgehenden Fenster entweder HTML-Attribute oder "Inline Style (CSS)" wählen. | + | ==== Methode 1: ==== |
- | - In der Statuszeile am unteren Rand des Bildschirms mit rechter Maustaste auf das gewünschte Element klicken und "Inline Styles" wählen. Nun geht ein Fenster mit mehreren Reitern auf, in dem alle denkbaren Eigtenschaften eingestellt werden können. Das Gute an diesem Fenster: Die Auswirkung einer Einstellung wird sogort in einem kleinen Vorschaufenster angezeigt: | + | Mit rechter Maustaste auf einen Tag klicken und "Erweiterte Eigenschaften" wählen. Im aufgehenden Fenster entweder HTML-Attribute oder "Inline Style (CSS)" wählen. Hier kann der Code direkt bearbeitet werden. |
+ | {{:ebook:erweiterte_einstellungen_kompozer.png?400|}} | ||
+ | ==== Methode 2: ==== | ||
+ | In der Statuszeile (falls nötig per Menü <Ansicht - Statuszeile> zum Vorschein holen) am unteren Rand des Bildschirms mit rechter Maustaste auf das gewünschte Element klicken und "Inline Styles" wählen. Nun geht ein Fenster mit mehreren Reitern auf, in dem alle denkbaren Eigenschaften eingestellt werden können. Das Gute an diesem Fenster: Die Auswirkung einer Einstellung wird sofort in einem kleinen Vorschaufenster angezeigt: | ||
+ | |||
+ | {{:ebook:inline_styles_in_kompozer.png?400|}} | ||
+ | |||
+ | ==== Code-Übernahme in andere Datei ==== | ||
+ | Soll Code in eine andere Datei (zum Beispiel in eine style-css-Datei in Sigil) übernommen werden, ist es am besten, die Einstellungen mit Methode 2 vorzunehmen und mit Methode 1 anzuschauen und zu kopieren und dann in die andere Datei einzufügen. | ||
===== CSS für EPUB: ===== | ===== CSS für EPUB: ===== | ||
http://www.data2type.de/xml-xslt-xslfo/epub-ueberblick/ | http://www.data2type.de/xml-xslt-xslfo/epub-ueberblick/ |