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:50]
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. Hier kann der Code direkt bearbeitet werden. +==== 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/​
cms/css.1754999429.txt.gz · Zuletzt geändert: 2025/08/12 13:50 von walter