Benutzer-Werkzeuge

Webseiten-Werkzeuge


cms:css

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
cms:css [2025/08/12 13:57]
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) ======
  
 +===== Simple.css =====
 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/​. 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/​.
 +
 +===== 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. Hier kann der Code direkt bearbeitet werden. +==== Methode 1: ==== 
-  ​- ​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:+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|}} {{:​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/​
cms/css.1754999829.txt.gz · Zuletzt geändert: 2025/08/12 13:57 von walter