/* https://de.azfonts.net/fonts/palatino-linotype/ heruntergeladen https://www.linotype.com/de/1574462/palatino-schriftfamilie.html Schriftfarbe mit Hintergrund Fonts will be rendered smaller on a screen with higher resolution than on a lower resolution screen. TTF (TrueType) TrueType ist in Windows und Mac OS integriert und unter unixähnlichen Betriebssystemen mit FreeType verfügbar. /usr/share/fonts/truetype/pala.ttf OTF (OpenType) OpenType ist die Weiterentwicklung von TrueType ---------- WOFF (Web Open Font Format) OpenType-/TrueType-Schriftarten deflate-kompremiert - alle Browser EB Garamond 12 (FontForge erstellt und bearbeitet WOFF Schriften, /usr/bin/fontforge|fontimage|fontlint|sfddiff) WOFF2 Brotli kompremiert - (woff2-Programm: TTF -> WOFF 2.0 format. /usr/bin/woff2_decompress(_info) x.woff2 /usr/bin/woff2_compress x.ttf SVG für Webseiten ----------- EOT (Embedded Open Type) Das Format wurde von Microsoft erstellt und wird nur vom Internet Explorer unterstützt ---------------------------- Der Webbrowser benutzt das erste Font Format das er unterstützt. Darum ist es wichtig woff2 vor woff anzuführen @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } #id { font-family: myFirstFont; } --------------------------------- oder mehrere Schriften: ...................................

Zweiter Absatz (Mein toller Font).

----------------------------------- aldrich-regular - latin Your generated archive for Aldrich with charsets [latin] and styles [regular] includes the formats [eot,ttf,svg,woff,woff2] @font-face { font-family: 'Aldrich'; font-style: normal; font-weight: 400; src: url('../fonts/aldrich-v11-latin-regular.eot'); # IE9 Compat Modes src: local(''), url('../fonts/aldrich-v11-latin-regular.eot?#iefix') format('embedded-opentype'), # IE6-IE8 url('../fonts/aldrich-v11-latin-regular.woff2') format('woff2'), # Super Modern Browsers url('../fonts/aldrich-v11-latin-regular.woff') format('woff'), # Modern Browsers url('../fonts/aldrich-v11-latin-regular.ttf') format('truetype'), # Safari, Android, iOS url('../fonts/aldrich-v11-latin-regular.svg#Aldrich') format('svg'); # Legacy iOS } ------------------------------------ 1.BLOCKELEMENT margin-right:auto; margin-left:auto; -> bleibt bei Browserzoom/Fensterveränderung MITTIG Ziel: Fensterbreite-, Schriftänderung oder Zoom ändert Zeilenumbruch Nicht!! Seite optimal ist Blocksatz auf verfügbarer Breite des Anzeigegeräts(Mobiles:) * Erster Seitenaufruf: Schrift, Zoomfaktor, Fensterbreite des Browsers = User: width = 100% = Nutzung des gesamt Verfügbaren in %, The min-width and max-width properties override the width property. Knackpunkt = Bezug zu einer physischen Größe z.B. mm->Pixel->D(P)PI=dots(pixel) per inch |Windows 96dpi|Unix 72dpi|DPR(device pixel ratio) Maßeinheiten siehe unten MASS. Bildschirmauflösung hoch -> Text klein Fonts will be rendered smaller on a screen with higher resolution than on a lower resolution screen. * Gerät auf Zoom=100% * @media only screen and (min-width: 335px) in CSS -> layoutpixel (DPR berechnet) * javascript Abfragen -> devicepixel? However, in case of images its all about how many pixels your device really has. If it has 1000px pixels screen width and the image is displayed at width=100%, it makes sense to load a 1000 pixel width image to satisfy the full quality of your screen. (= Each physical screen pixel gets a real image pixel assigned.) Auflösung 1920 x 1080 font-family:"New Century Schoolbook",serif; Größe 15px -> 1.kunstblock wird 337px -> paßt exakt in GalaxyS10 360 x 760 FONT-SIZE-VERÄNDERT -> VERÄNDERT GRÖSSE DES BLOCKELEMENTS -- GENAU SO WIE PADDING, MARGIN, Letterspacing ZOOM zoomt Alles (ob NUR Schrift, Browsereinstellungen) Bei ZOOM zeigt JavaScript Abfragefunktion nach Bildschirmbreite blocksatz() bewirkt beim (Erneut)Laden eine Anpassung des BLOCKELEMENTS an die physische Browserfensterbreite. font-size: in % orientiert sich an der Browserschriftgröße Schriftgröße absolut: px Die Einheit em richtet sich dabei nach der im Vorfeld bestimmten Größe desjenigen Elements, das mit einem em-Wert dargestellt wird. Falls die Schriftgröße allein mit em definiert wird, richtet sich der Wert nach dem Schriftgrad des Elternelements. em=Schriftgröße des Elternelements oder des aktuellen Elements, 2em=doppelt, usw em Relative to the font-size of the element (2em means 2 times the size of the current font) ex Relative to the x-height of the current font (rarely used) ch Relative to the width of the "0" (zero) rem Relative to font-size of the root element vw Relative to 1% of the width of the viewport* vh Relative to 1% of the height of the viewport* vmin Relative to 1% of viewport's* smaller dimension vmax Relative to 1% of viewport's* larger dimension % Relative to the parent element in px bestimmen wir die Anfangsgröße und können andere Größenangaben im Verhältnis dazu ausdrücken. ein Zoom verändert relativ positionierte Elemente nicht -> daher - soweit möglich: !!! alles in Prozenten der Anfangs-Browser-Schrift! Wichtigsten Einstellungen: Schriftgröße in #body, @media, .inhaltsverzeichnis (der Bücher) #bodyinhaltsverz .titel und .klapp (für Frame Inhaltsverzeichnis) In CSS Selektoren, Pseudoelemente usw. siehe unten CSSEL Die helle Version (dateihell.css) wird erzeugt durch Kopie dieser Datei (dateidunkel.css), anschliesenden Ersetzungen durch Perlskripte (die auch aus den Einzeldateien die Blocksatzdateien (siehe BB unten) und verbundenen Dateien erzeugen) und Umbenennung in dateihell.css. Die 8 Dateien: einzeln(H).html, einzelnblock(H).html, verbunden(H).html, verbundenblock(H).html werden aus einzeln.html durch Perlskript Hellversion.pm erzeugt und unterscheiden sich nur durch ihre Zieladressen in den 2 iframes und dateihell.css entsprechend in ..H.html */ /* #################### Eigene Schriften */ @font-face { font-family: 'Palatino0'; /* font-style: normal; alle Browser: italic; oblique; oblique 30deg; oblique 30deg 50deg; oblique=artificially italic version of the normal font */ /* font-weight: 400; alle Browser: 1-1000; normal=400; bold=700; .. */ src: url('font/Palatino1/palatino-linotype-1.eot'); /*IE9 Compat Modes */ src: local(''), url('font/Palatino0/palatino-linotype-0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/Palatino0/palatino-linotype-0.woff2') format('woff2'), /* Super Modern Browsers */ url('font/Palatino0/palatino-linotype-0.woff') format('woff'), /* Modern Browsers */ url('font/Palatino0/palatino-linotype-0.otf') format('opentype'), url('font/Palatino0/palatino-linotype-0.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/Palatino0/palatino-linotype-0.svg#Palatino') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Palatino1'; /* font-style: normal; alle Browser: italic; oblique; oblique 30deg; oblique 30deg 50deg; oblique=artificially italic version of the normal font */ /* font-weight: 400; alle Browser: 1-1000; normal=400; bold=700; .. */ src: url('font/Palatino1/palatino-linotype-1.eot'); /* E9 Compat Modes */ src: url('font/Palatino1/palatino-linotype-1.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/Palatino1/palatino-linotype-1.woff2') format('woff2'), /* Super Modern Browsers */ url('font/Palatino1/palatino-linotype-1.woff') format('woff'), /* Modern Browsers */ url('font/Palatino1/palatino-linotype-1.otf') format('opentype'), url('font/Palatino1/palatino-linotype-1.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/Palatino1/palatino-linotype-1.svg#Palatino') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Palatino2'; src: url('font/Palatino2/palatino-linotype-2.eot'); /* IE9 Compat Modes */ src: local(''), url('font/Palatino2/palatino-linotype-2.eot?#iefix') format('embedded-opentype'), /* E6-IE8 */ url('font/Palatino2/palatino-linotype-2.woff2') format('woff2'), /* Super Modern Browsers */ url('font/Palatino2/palatino-linotype-2.woff') format('woff'), /* Modern Browsers */ url('font/Palatino2/palatino-linotype-2.otf') format('opentype'), url('font/Palatino2/palatino-linotype-2.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/Palatino2/palatino-linotype-2.svg#Palatino') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Palatino3'; src: url('font/Palatino3/palatino-linotype-3.eot'); /* IE9 Compat Modes */ src: local(''), url('font/Palatino3/palatino-linotype-3.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/Palatino3/palatino-linotype-3.woff2') format('woff2'), /* Super Modern Browsers */ url('font/Palatino3/palatino-linotype-3.woff') format('woff'), /* Modern Browsers */ url('font/Palatino3/palatino-linotype-3.otf') format('opentype'), url('font/Palatino3/palatino-linotype-3.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/Palatino3/palatino-linotype-3.svg#Palatino') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Palatino4'; src: url('font/Palatino4/palatino-linotype-4.eot'); /* IE9 Compat Modes */ src: local(''), url('font/Palatino4/palatino-linotype-4.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/Palatino4/palatino-linotype-4.woff2') format('woff2'), /* Super Modern Browsers */ url('font/Palatino4/palatino-linotype-4.woff') format('woff'), /* Modern Browsers */ url('font/Palatino4/palatino-linotype-4.otf') format('opentype'), url('font/Palatino4/palatino-linotype-4.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/Palatino4/palatino-linotype-4.svg#Palatino') format('svg'); /* Legacy iOS */ } /* #################### BODYZZINFOS = BODY !!! #################### Allgm. Farbangaben SCHRIFT, Hintergrund usw. (Textseiten, zzinfos) mit Nummer ihrer Ersetzung $gelb = "rgba\\(255\\,255\\,130\\,1\\)"; $gelb2 = "rgba\\(255\\,220\\,0\\,1\\)"; $gelb3 = "rgba\\(255\\,255\\,0\\,0\\.6\\)"; $gelb4 = "rgba\\(255\\,200\\,0\\,1\\)"; $gelb5 = "rgba\\(255\\,255\\,0\\,1\\)"; $grau = "rgba\(140\,140\,140\,1\)"; $hervorheb = "rgba\\(237\\,204\\,63\\,1\\)"; $schwarz = "rgba\(0\,0\,0\,1\)"; $schwarz2 = "rgba\(0\,0\,0\,0\.9\)"; $schwarz3 = "rgba\(0\,0\,0\,0\.6\)"; $weiss = "rgba\(255\,255\,255\,1)"; Ersetzungen durch ../cgi-bin/byr/blocksatz-ftp/Hellversion.pm - sub css() Suchmuster sucht Zeilenenden und -anfang UND LEERZEILEN in DIESER Datei hier (z.b. .p08welten). Neue Einträge hier also in Zeilenmitte UND WENN neue Farbangabe dann sub css Farbparameter anpassen! */ #blocknatunver_impressum{ color:rgba(225,169,71,0.8); } /* W.Erni Impressum */ /* 01. Ersetzung durch ../cgi-bin/byr/blocksatz-ftp/Hellversion.pm - sub css() */ #bodyzzinfos, #body { color:rgba(255,255,130,1); background-color:black; } .inverseindex { color:rgba(237,204,63,1); } /* 02. Ersetzung */ #maske2, #maske1, #maske { background-image:url(Bilder_Grafiken/hintergrundmaske.png); } /* 03. Ersetzung */ .paragraph, .paragraphbrev, .paragraphbrevier, .paragraphnachlese1, .blocknatunver, .paragraphwelten, .paragraphnoblock, .p08nachlese1, .p08brevier, .p08, .p08welten { color:rgba(255,220,0,1); } /* 04. Ersetzung */ .besonderheiten, .blocknat2 .blocknat { color:rgba(255,255,130,0.9); } /* keine Ersetzung */ .blocknat .inverse { color:rgba(255,255,0,0.8); } /* 05. Ersetzung rgba(255,200,0,1) */ .kapitelbeginv, .inverseextra, .inverse, .inversewelten, .inverseeng, .inversesehreng, .besonderheiteninv, .inverse10, .inverse15, .inverse20, .inverse25, .inverse30, .inverse40, .inversew1 { color:rgba(255,187,0,1); } /* 06. Ersetzung - Pagination und border-bottom in .seitenangabe */ .seitenangabe { color:rgba(82,0,0,1); } .centerende { color:rgba(248,202,22,1); } /* #################### LINKFARBEN (Textseiten, zzinfos) Allgm. Linkschriftfarbe setzen = rgba(82,0,0,1) = dieselbe wie in den Klassen .seitenangabe und .autor; Unbesuchter Link (Browserdefault: text-decoration:underline) und Besuchter gleich gestalten */ a:link { text-decoration:none; font-weight:normal; color:rgba(82,0,0,1); } a:visited { text-decoration:none; font-weight:normal; color:rgba(82,0,0,1); } .autor a:hover { color:rgba(64,0,0,1); font-weight:bold; } .seitenangabe a:hover { color:rgba(250,208,0,1); font-weight:bold; } /* Links in Rechnerliste - IndividualformateLinks später durch KlassenformateLinks ändern: #bodystyle .erklaerungen1 a:hover */ #bodystyle a:link { color:rgba(252,221,165,0.7); text-decoration:none; } #bodystyle a:visited { color:rgba(252,221,165,0.7); } #bodystyle a:hover { color:rgba(252,221,165,1); } #bodystyle a:active { color:rgba(252,221,165,0.7); } /* */ /* Links in Brevier */ .brevlink:link, .brevlink0:link, .brevlink1:link { color:rgba(250,208,0,0.7); font-weight:bold; } .brevlink:visited, .brevlink0:visited, .brevlink1:visited { color:rgba(250,208,0,0.7); font-weight:bold; } .brevlink:hover, .brevlink0:hover, .brevlink1:hover { color:rgba(250,208,0,1); font-weight:bold; } /* abweichende oder ergänzende Farbangaben bei folgenden Selektoren */ #browserlink a , #naechstkap a:link , #vorigkap a:link { color:rgba(140,0,0,0.4); } #browserlink a , #naechstkap a:visited , #vorigkap a:visited { color:rgba(140,0,0,0.4); } #browserlink a:hover , #naechstkap a:hover , #vorigkap a:hover { color:rgba(140,0,0,0.8); } #zuminhavz a:link { color:rgba(140,0,0,1); } #zuminhavz a:visited { color:rgba(140,0,0,1); } #zuminhavz a:hover { color:rgba(140,0,0,0.8); } .centergebet a:link , #bodyzzinfos a:link, .kapitel a:link { color:rgba(220,194,82,1); } .centergebet a:visited, #bodyzzinfos a:visited, .kapitel a:visited { color:rgba(220,194,82,1); } .centergebet a:hover , #bodyzzinfos a:hover, .kapitel a:hover { color:rgba(220,194,82,0.8); } /* im Buchinhvz. */ .tabelle a:link { color:rgba(0,0,0,1); } .tabelle a:visited { color:rgba(0,0,0,1); } .tabelle a:hover { color:rgba(0,0,0,0.5); } /* Link zur Homepage von Hr. Erni, Originaltextlink in zzzeichnungen.html, Links in Nachlese2 zu ..nicht enthalten mp3, Worte der Meister.pdf*/ .blocknat a:link , .blocknat2 a:link , .blocknatunver a:link { color:rgba(225,169,71,0.5); } .blocknat a:visited , .blocknat2 a:visited , .blocknatunver a:visited { color:rgba(225,169,71,0.5); } .blocknat a:hover , .blocknat2 a:hover , .blocknatunver a:hover { color:rgba(225,169,71,0.8); } /* #uebersicht in zzinfos .tdblack2: Links! Namen der Bilder/Fotos in zzgemaelde.html in zzfotos.html, R.* Schott (Autor) als Link am Beginn der BildTexte .tdblack2titel: Überschrift i. zzgemaelde.html und zzfotos.html, die Titel v. Schott's Werken als Link, Zoomhinweise .tdblackpfeil: Pfeil vor/zurück in zzdateien.html und ZZ-Dateien(B)/ .tdblack2klein: in zz*.html Dateien Nicht-namen */ #uebersicht a:link, .tdblack2 a:link, .tdblack2klein a:link, .tdblack2titel a:link { color:rgba(255,235,125,1); } #uebersicht a:visited, .tdblack2 a:visited, .tdblack2klein a:visited, .tdblack2titel a:visited { color:rgba(255,235,125,1); } #uebersicht a:hover, .tdblack2 a:hover, .tdblack2klein a:hover, .tdblack2titel a:hover { color:rgba(255,235,125,0.8); } .tdblackpfeil a:link { color:rgba(255,235,125,0.4); } .tdblackpfeil a:visited { color:rgba(255,235,125,0.4); } .tdblackpfeil a:hover { color:rgba(255,235,125,0.8); } /* .ublack: 2 Überschriften: "Traumland" + "Fantasien" in zzzeichnungen.html */ .ublack a:link { color:rgba(255,0,0,0.5); } .ublack a:visited { color:rgba(255,0,0,0.5); } .ublack a:hover { color:rgba(255,0,0,0.3); } /* 07. Ersetzung */ /* Keine Farbänderungen in table = display:table Sprungziele/Anker .hervorheben .par .thema = zzinfos-Klassen */ table a:link, .hervorheben a:link, .par a:link, .thema a:link { color:rgba(255,255,0,1); } table a:visited, .hervorheben a:visited, .par a:visited, .thema a:visited { color:rgba(255,255,0,1); } table a:hover, .hervorheben a:hover, .par a:hover, .thema a:hover { color:rgba(255,255,0,1); } .linksinfos a:link { color:rgba(255,255,120,0.7); } .linksinfos a:visited { color:rgba(255,255,120,0.7); } .linksinfos a:hover { color:rgba(255,255,120,0.5); } /* 08 Ersetzung */ /* Links zu den Weltenkreisbildern */ .paragraphwelten a:link, .p08welten a:link { text-decoration:underline; color:rgba(250,208,0,1); } .paragraphwelten a:visited, .p08welten a:visited { text-decoration:underline; color:rgba(250,208,0,1); } .paragraphwelten a:hover, .p08welten a:hover { text-decoration:underline; color:rgba(250,208,0,0.5); } /* #################### BUCHFORMATIERUNG (Textseite) */ /* Abstände zwischen Blockelementen (
) */ .zeilenabstand0 { margin-top:0.3em; } .zeilenabstand05 { margin-top:1em; } /* Kleinstabstände */ .zeilenabstand1 { margin-top:2em; } /* Leerzeile innerhalb normalem Text */ .impressum .zeilenabstand1 { margin-top:0.4em; } .zeilenabstand12 { margin-top:3em; } /* Mittelding zwischen Abstand1 u. Abstand2 */ .zeilenabstand2 { margin-top:4em; } .impressum .zeilenabstand2 { margin-top:0.6em; } .zeilenabstand2 { margin-top:4em; } /* doppelte Leerzeile vor Grossbuchstaben (class = grossbuchs/kapitelanf) */ .zeilenabstand3 { margin-bottom:4em; } /* als grösserer Abstandshalter nach unten */ .zeilenabstand4 { margin-bottom:7em; } /* als grösserer Abstandshalter nach unten */ .zeilenabstand7 { margin-bottom:20em; } /* nur i. Gemälde als grösserer Abstandshalter */ .zeilenabstand9 { margin-bottom:100em; } /* i. zzInfo.html, wwfotos.html zz(maler|lebenundwerk|symbolform|skizzen).html */ /* Blockelemente - Mittige Darstellung von Blockelementen: margin-left:auto; margin-right:auto, BLOCKSATZ (text-align:justify Bestimmende Ausgangs-Schriftgrößen in PX für kleinste Anzeigegeräte(< 335px) in: #einzeln, #body, #bodystyle, #bodyzzinfos, #bodyinhaltsverz u. #bodypdf stufenweise Anpassung dann durch @media oder Javascript. Alle anderen Größen in EM */ /* RECHNERLISTE #bodystyle bei @media */ .logo { margin-left:auto; margin-right:auto; margin-top:6em; margin-bottom:4em; text-align:center; } /* Titelbild headerinhaltsverz2.png width:503px; height:606px; Größenangabe in /Rechnerliste/index.html verhindert mittig wenn nicht margin-left:auto; margin-right:auto; text-align:center; */ #logoimg { max-width:100%; height:auto; } /* ganzes Bild immer sichtbar */ .abstand1 { margin-top:1.3em; } .abstand12{ margin-top:2.5em; } .abstand2 { margin-top:10em; } .erklaerungen { text-align:center; margin-bottom:6em; font-family:'Palatino3'; letter-spacing:0.07em; color:rgba(255,221,165,0.4); } /* bis einschl. Perlenkette, font-family:'Palatino4'; 'Palatino3' font-size:smaller; */ /* margin-left|right ab min-width: 751px in @media !! */ .erklaerungen1, .erklaerungen2 { background-color:rgba(250,250,250,0.05); text-align:justify; margin-left:1em; margin-right:1em; padding:1em; overflow:hidden; border-style:solid; border-width:0.1em; border-left-color:rgba(44,44,54,0.8); border-top-color:rgba(35,35,43,0.8); border-right-color:rgba(21,21,32,0.8); border-bottom-color:rgba(21,21,32,0.8); } /* border-style muss vorher angegeben sein */ .erklaerungen1 { letter-spacing:0.02em; color:rgba(255,221,165,0.7); } #bodystyle .erklaerungen1 a:hover { color:red; } /* - Alle Perlen der Kette weisen.. - Kontakt p { font-size: 85%; } /* > p eine Ebene unterhalb, Kontakt und letzte Änderung*/ .unsichtbar { visibility:hidden; font-size:xx-small; } .filler { color:red; font-size:xx-small; line-height:50%; letter-spacing:80em; visibility:hidden; } /* Der Zeilenhalter für Blocksatz, line-height bezieht sich auf diese Schriftgröße!!! */ .erklaerungen2 { letter-spacing:0.01em; color:rgba(252,221,165,0.7); } /* Technisches font-size: 80%; */ /* Einstiegseite einzeln(block).html mit 2 iframes (für Inhaltsverzeichnis und Inhalt) und DIV-Blockelemente mit fixen Schrift-Größen, Positionen */ #einzeln { position:fixed; top:0px; left:0px; z-index:0; } /* z-index top:0em; left:0em ... nur wirksam, wenn position gesetzt (aber nicht position:static) */ #zuminhavz { font-size:50px; font-family:'Palatino4'; position:fixed; top:0em; right:0.5em; z-index:5; } /* div zum Wechseln zwischen inhaltsverzeichnis.html und den Texten, immer sichtbar, top:0em-Schriftgröße zählt auch */ #framinhvz { position:fixed; top:0px; left:0px; width:100%; height:100%; border:0px; z-index:4; } /* der iframe für das inhaltsverzeichnis.html, wenn relativ positioniert -> nicht das ganze Fenster einnehmend; border:10px dashed silver;*/ #tonanaus { font-size:30px; position:fixed; top:0.5em; left:0.5em; z-index:5; } /* div zum Sichtbarmachen der mp3-Tonverweise im Inhaltsverzeichnis */ #framinhalt{ position:fixed; top:0px; left:0px; width:100%; height:100%; border:0px; z-index:2; } /* der iframe mit dem Buchtext - z-index: bei Überlappung ist die höhere Zahl im Vordergrund */ #texttoconthell{ position:fixed; bottom:1em; left:0.5em; z-index:2; } /* helle Version wird im Text durch javascript zindex() sichtbar, Größe = Bildgröße = 48px */ #texttocontdunkel{ position:fixed; bottom:1em; right:1em; z-index:2; } /* dunkle Version wird im Text durch javascript zindex() sichtbar, Größe = Bildgröße */ #browserlink { font-size:50px; position:fixed; bottom:4.5em; left:0.25em; z-index:2; } /* das L für's Linkerzeugen*/ /* #link { position:absolute; bottom:-2em; left:0.7em; } innerhalb DIV #browserlink, Linkerzeugen mit transparentem Bild id=link Link.png 40 x 400 */ #vorigkap { font-size:50px; position:fixed; bottom:5em; right:0.5em; z-index:2; } /* div zum Kapitelspringen */ #naechstkap { font-size:50px; position:fixed; bottom:4em; right:0.5em; z-index:2; } /* div zum Kapitelspringen position:relative; bottom:2em; right:1em; */ /* DIE TEXTSEITEN - auch: zzzeichnungen.html */ #body{ font-size:12px; text-align:center; line-height:150%; font-family:'Palatino4'; margin-top:0em; margin-left:0em; margin-right:0em; padding:0em; } /* width:100%; nicht gut, weitere Grössenangaben in Blockelementen innerhalb v. body beziehen sich auf body!! background-color: hsla(000,0%,0%,0.7);#ffe000 */ #maske{ margin-right:auto; margin-left:auto; padding-left:0em; padding-right:0em; border:solid 0.1em rgba(82,0,0,0.5); max-width:100%; } /* der Container in dem alles bis zum Buchende steckt (Hintergrund = 2. Ersetzung), ohne max-width bestimmt breitestes Element (bei natürlichem Blocksatz -ohne
) -> bis zum Rand. padding wirkungslos bei erzwungenem Blocksatz. max-width: min-content; */ /* ZUSAMMENFASSUNG UND TECHNIK */ #bodyzzinfos { font-size:16px; text-align:center; line-height:130%; letter-spacing:0em; margin-top:0em; margin-left:0em; } /* für zzinfo und zzinfos, width:100%; nicht gut */ #maske1{ font-family:'Palatino4'; text-align:justify; display:block; margin-right:auto; margin-left:auto; padding-left:1em; padding-right:1em; border:solid 0.1em rgba(82,0,0,0.5); max-width:100%; } /* für zzinfos innerhalb #bodyzzinfos, width:100%; nicht gut */ #maske2{ font-family:'Palatino4'; text-align:justify; display:block; margin-right:auto; margin-left:auto; padding-left:1em; padding-right:1em; border:solid 0.1em rgba(82,0,0,0.5); max-width:100%; } /* für zzinfo innerhalb #bodyzzinfos, width:100%; nicht gut */ /* INHALTSVERZEICHNIS */ #bodyinhaltsverz { font-size:20px; font-family:'Palatino4'; padding-top:2em; background-color:rgba(0,0,0,0.9); margin-top:2em; margin-left:0em; } /* #590000 border:solid green 10px; background-color:hsl(0,0%,17%); hsla(0,0%,17%,0.9); background-image:url(Bilder_Grafiken/hintergrundinhvz.png); background-color:rgb(43,43,43); */ /* PDF-SEITE */ #bodypdf{ font-size:20px; font-family:'Palatino4'; text-align:center; margin-top:0.5em; margin-bottom:8em; background-image:url(Bilder_Grafiken/pdfhintergrundrot.png); color:rgba(230,190,10,0.7); } /* RECHNERLISTE */ #bodystyle { max-width:100%; margin-left:auto; margin-right:auto; direction:ltr; font-size:15px; font-family:'Palatino4'; background-color:#000000; } /* kleine Schriftgröße in #body 12px Beim Laden (oder window resize) SCHRIFTGRÖSSE-anpassung durch JAVASCRIPT ( onload blocksatz()) ): FÜR (ERZWUNGENEN) BLOCKSATZ ANDERE durch @media ihrer bodys body, maske = TEXTSEITEN(auch hortusconclusushtml.html) body maske bodyinhaltsverz = INHALTSVERZEICHNIS body bodypdf = PDF-SEITE body bodyzzinfos, maske1, maske2 = TECHNIK body maske1 ZUSAMMENFASSUNG body maske2 bodystyle, erklaerungen, erklaerungen1 = RECNERLISTE body erklaerungen, erklaerungen1|2 The standard line height in most browsers is about 110% to 120%. Daher line height zwingend bei Riesenbuchstaben! Servers/HTML_einzeln/inhaltsverzeichnis.html:onload="evlistener(anker_zubuch()); evlistener(contentpage()); Servers/HTML_einzeln/< :onload="evlistener(gucken()); evlistener(der_evli1()); evlistener(tonaus()); Servers/HTML_einzeln/ww*.html :onload="evlistener(brevier()); evlistener(fensterver()); evlistener(blocksatz()); Servers/HTML_einzeln/*html.html :onload="evlistener(brevier()); evlistener(fensterver()); evlistener(blocksatz()); Servers/HTML_einzeln/zz*.html :onload="evlistener(brevier()); evlistener(fensterver()); Servers/ZZ-Dateien(B) :onload="evlistener(brevier()); */ @media only screen and (min-width: 335px) { /*min-width: 350 */ #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:13px; } /* 15-13px */ #bodyinhaltsverz { font-size:18px; } #maske, #maske1, #maske2 { max-width:100%; } } @media only screen and (min-width: 400px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:15px; } /* 18-15 */ #bodyinhaltsverz { font-size:21px; } #maske, #maske1, #maske2 { max-width:100%; } } @media only screen and (min-width: 450px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:17px; } /* 20-17 */ #bodyinhaltsverz { font-size:23px; } #maske, #maske1, #maske2 { max-width:100%; } } @media only screen and (min-width: 500px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:19px; } /* 22-19 */ #bodyinhaltsverz { font-size:25px; } #maske, #maske1, #maske2 { max-width:100%; } } @media only screen and (min-width: 550px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:21px; } /* 24-21 */ #bodyinhaltsverz { font-size:27px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:0.7em; margin-right:0.7em; } /* in Rechnerliste */ } @media only screen and (min-width: 600px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:23px; } /* 27-23 */ #bodyinhaltsverz { font-size:29px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:0.8em; margin-right:0.8em; } /* in Rechnerliste */ } @media only screen and (min-width: 650px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:25px; } /* 28-25 */ #bodyinhaltsverz { font-size:31px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:0.9em; margin-right:0.9em; } /* in Rechnerliste */ } @media only screen and (min-width: 700px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:27px; } /* 30-27 */ #bodyinhaltsverz { font-size:33px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:1em; margin-right:1em; } /* in Rechnerliste */ } @media only screen and (min-width: 750px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:29px; } /* 32-29 */ #bodyinhaltsverz { font-size:35px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:1.1em; margin-right:1.1em; } /* in Rechnerliste */ } @media only screen and (min-width: 800px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:31px; } /* 34-31 */ #bodyinhaltsverz { font-size:37px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:1.2em; margin-right:1.2em; } /* in Rechnerliste */ } @media only screen and (min-width: 850px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:33px; } /* 36-33 */ #bodyinhaltsverz { font-size:39px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:1.3em; margin-right:1.3em; } /* in Rechnerliste */ } @media only screen and (min-width: 900px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:35px; } /* 38-35 */ #bodyinhaltsverz { font-size:41px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:1.3em; margin-right:1.3em; } /* in Rechnerliste */ } @media only screen and (min-width: 950px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:37px; } /* 40-37 */ #bodyinhaltsverz { font-size:43px; } #maske, #maske1, #maske2 { max-width:100%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:1.3em; margin-right:1.3em; } /* in Rechnerliste */ } @media only screen and (min-width: 1000px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:35px; } /* 42-39/-35 */ #bodyinhaltsverz { font-size:38px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1050px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:37px; } /* 44-41/-37 */ #bodyinhaltsverz { font-size:40px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1100px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:39px; } /* 46-43/-39 */ #bodyinhaltsverz { font-size:42px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1150px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:40px; } /* 47-44/-40 */ #bodyinhaltsverz { font-size:43px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1200px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:42px; } /* 49-46/-42 */ #bodyinhaltsverz { font-size:45px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1250px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:44px; } /* 51-48/-44 */ #bodyinhaltsverz { font-size:47px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1300px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:46px; } /* 53-50/-46 */ #bodyinhaltsverz { font-size:49px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1350px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:48px; } /* 57-52/-48 */ #bodyinhaltsverz { font-size:51px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1400px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:49px; } /* 56-53/-49 */ #bodyinhaltsverz { font-size:51px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1450px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:51px; } /* 58-55/-51 */ #bodyinhaltsverz { font-size:51px; } #maske, #maske1, #maske2 { max-width:90%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } @media only screen and (min-width: 1500px) { #body, #bodyzzinfos, #bodypdf, #bodystyle { font-size:52px; } /* 59-56/-52 */ #bodyinhaltsverz { font-size:49px; } #maske, #maske1, #maske2 { max-width:88%; } .erklaerungen, .erklaerungen1, .erklaerungen2 { margin-left:2em; margin-right:2em; } /* in Rechnerliste */ } /* -------------------------------------------------------------------------*/ .minisignatur { width: 6.00em; } /* Größe für Unterschrift: signatminigelb.png */ .jehosua_bild { width:13.82em; } /* Größe fürJesusbild: jehosua.jpg */ .paragraph { line-height:150%; text-align:left; display:table; table-layout:auto; overflow:hidden; letter-spacing:0.02em; margin-left:auto; margin-right:auto; margin-top:2em; border:0em; } /* paragraph für die "Flattersatzversion", alleinstehend, blocksatz2.pm -> "p08" */ .paragraphwelten { font-size:70%; line-height:150%; text-align:left; display:table; table-layout:auto; overflow:hidden; letter-spacing:0.01em; margin-left:auto; margin-right:auto; margin-top:1.5em; border:0em; } /* font-size:x% (von body)->line-height:150%, paragraph für die "Flattersatzversion", alleinstehend, blocksatz2.pm -> "p08welten" */ #paragraphbrev1{ font-style:italic; } .paragraphbrev { line-height:120%; display:table; overflow:hidden; text-align:justify; margin-left:auto; margin-right:auto; margin-top:2em; } /* 2 erzwungene vorformatierte Blocksatzparagraphen in Brevier oberhalb und unterhalb .kapitel -> wird durch blocksatz2.pm nicht zu "p08", font-size (von body)->line-height auch von body */ .paragraphbrevier { line-height:150%; text-align:left; display:table; overflow:hidden; letter-spacing:0.02em; margin-left:auto; margin-right:auto; margin-top:1.5em; border:0em; } /* font-size:x% (von body)->line-heightv:150%, paragraph für die "Flattersatzversion", alleinstehend, blocksatz2.pm -> "p08brevier" */ .paragraphnachlese1 { line-height:150%; text-align:left; display:table; table-layout:auto; overflow:hidden; letter-spacing:0.02em; margin-left:auto; margin-right:auto; margin-top:1.5em; border:0em; } /* font-size:x% (von body)->line-height:150%, paragraph für die "Flattersatzversion", alleinstehend, blocksatz2.pm -> ".p08nachlese1" */ .p08 /* zwingend: display:table; aber ? table-layout:fixed; (gibt ja nur allen td in tr den gleichen Raum) */ { line-height:150%;text-align:justify; display:table; overflow:hidden; letter-spacing:0.02em; margin-left:auto; margin-right:auto; margin-top:2em; border:0em; } .p08welten { font-size:70%; line-height:150%; text-align:justify; display:table; table-layout:fixed; overflow:hidden; letter-spacing:0.01em; margin-left:auto; margin-right:auto; margin-top:1.5em; border:0em; } /* font-size:60%, weil Blocksatz durch Javascript */ .p08brevier { line-height:150%; text-align:justify; display:table; overflow:hidden; letter-spacing:0.02em; margin-left:auto; margin-right:auto; margin-top:1.5em; border:0em; } .p08nachlese1 { line-height:150%; text-align:justify; display:table; table-layout:fixed; overflow:hidden; letter-spacing:0.02em; margin-left:auto; margin-right:auto; margin-top:1.5em; border:0em; } /* (nachlese2 hat normales p08) */ .blocknat { display:table; font-size:70%; line-height:120%; text-align:justify; margin-left:auto; margin-right:auto; border:0em; } /* ausserhalb (wird von blocksatz1.pm nicht erfasst) natürlicher/originaler Blocksatz, händisch: OO
innerhalb (wird von blocksatz1.pm ausgeschlossen) natürlicher: händisch: OO
oder wegen Begrenzung als .blocknat2 originaler : händisch: OO
Links (Zeichnungen, Nachlese1) */ .blocknat2 { display:table; font-size:70%; line-height:120%; text-align:justify; margin-top:1.5em; margin-left:5em; margin-right:5em; border:0em; } /* natürlicher Blocksatz alleinstehend, margin hier bestimmt Breite, Nachlese1 */ .blocknat .inverse { font-weight:normal; letter-spacing:0em; } /* inverse im blocknat */ .blocknatunver{ text-indent:3em; font-size:100%; font-weight:lighter; line-height:150%; text-align:justify; width:90%; margin-left:auto; margin-right:auto; } /* natürlicher Blocksatz der Texte von W.Erni,
nur vor
(wwprivat.html - wird vor blocksatzskript ausgelagert ist aber in hortusconclusushtml.html) */ .small{ text-indent:0em; font-size:80%; line-height:100%; } /* 1x innerhalb blocknatunver in unveröffentl. Texte von Werner Erni */ .pararversetzt { padding-left:10%; letter-spacing:0.1em; } /* eingerückter Blocksatz, innerhalb geheimnis (Obrigkeit) */ .pararversetztziel { padding-left:10%; } /* eingerückter Blocksatz, ziel (die Gestirne) */ .parechts { margin-bottom:2em; margin-left:28%; font-size:90%; line-height:100%; letter-spacing:0.02em; } /* innerhalb für 1 Zitat in Wegweiser (Macht der Krankenheilung) */ .parversfunken { width:83%; margin-left:auto; margin-right:auto; } /* eingerückter Blocksatz, 1x innerhalb (paragraph) funken (in der einzelnen Seele) */ .parverstrost { padding-left:3%; } /* eingerückter Blocksatz, innerhalb, in trost (jedem deiner Tage) inverse-Attribute! In blocksatz1.pm u. blocksatz2.pm extra behandelt */ .auflage90 { background-color:rgba(175,169,68,0.1); } /* Textstellen i. wwnachlese (= 1.Band) gemäß der 2.Auflage 1990 durch Skript formatiert - i. blocksatz1.pm und blocksatz2.pm extra behandelt */ .widerstand { border:0em; line-height:100%; display:none; background-color:rgba(128,0,0,1); padding:1em; margin:1em; font-size:50%; font-style:italic; font-weight:normal; } /* div-Container für Verstandeswiderstandkommentare in den markierten Büchern in HTML_struktur display:none */ .kommentar { font-size:50%; line-height:100%; } /* die Anker darin, womit javascript:verstand() aktiviert wird = Einschalten der Kommentare = display:table, u.andere Kommentare */ /* Linksbündig text-align:left */ .paragraphnoblock { text-align:left; margin-left:3.5em; margin-top:2em; border:0em; } /* alleinstehend, eingerückt links, gebet */ .leftleft { text-align:left; } /* absolut links wird von blocksatz.pm durch Bezeichnung nicht erfaßt */ .left { text-align:left; display:table; table-layout:auto; padding:0em; margin-left:auto; margin-right:auto; } /* links innerhalb Container in der Mitte */ .left0{ text-align:left; display:table; table-layout:auto; padding:0em; margin-left:0px; } /* links innerhalb Container-linksbündig, marginalien */ .leftklein{ text-align:left; font-size:60%; line-height:100%; margin-left:2em; margin-top:1em; } /* eingerückt links, innerhalb den verschiedenen Blockbereichen */ .leftklein2{ text-align:left; font-size:90%; line-height:100%; } /* eingerückt links, innerhalb den verschiedenen Blockbereichen */ /* Rechtsbündig text-align:right */ .right { text-align:right; } /* in Briefe -Stundenschlagbeispiel ( + .nicht), zzbrevierhtml.html innerhalb paragraph, Unterschrift von BYR nach 'Ein verschütteter Tempel' in privat.html, .. */ .rightkl { text-align:right; font-size:90%; } /* Zentriert text-align:center */ .seitenangabe { font-size:40%; line-height:100%; letter-spacing:0.5em; padding-bottom:0.3em; margin-left:auto; margin-right:auto; margin-top:2em; font-family:'Palatino4'; border-bottom:solid 0.06em rgba(66,66,66,1); } /* Seitenziffern, alleinstehend, meist als Links, Farbe=Farbe der Links rgba(66,66,66,1); */ .besonderheiten{ font-size:60%; line-height:100%; max-width:90%; margin-left:auto; margin-right:auto; margin-top:1em; } /* Fußnoten, Hinweise alleinstehend */ .ublack{ color:rgba(255,0,0,0.5); padding-top:2em; letter-spacing:0.8em; text-align:center } /* 2 Überschriften: "Traumland" (Link-Farbe) + "Fantasien" in wwzeichnungen.html, */ .centerende{ font-size:90%; text-align:center; padding:4em; } /* für "ENDE" alleinstehend */ .sternchen{ text-align:center; margin-top:2em; margin-bottom:2em;} /* innerhalb */ .sternchengebet{ text-align:center; margin-left:-3.5em; margin-top:1em; margin-bottom:1em; } /* immer innerhalb von paragraphnoblock mit margin-left minus der Einrückung von paragraphnoblock im gebet */ .center{ text-align:center; margin-left:auto; margin-right:auto; } /* behinhaltet manchmal div class=zeilenabstand und steht selbst innerhalb von "paragraph", "p08" (wegzugott). Ausnahme: Funken (nach "pararversetzt", Malerwerkstatt (eingefügtes Jesusbild), Buchtabelle in Nachlese2 */ .centergebet{ text-align:center; margin-left:-3.5em; } /* immer innerhalb von paragraphnoblock mit margin-left minus der Einrückung von paragraphnoblock im gebet */ .centerjoh{ text-align:center; word-spacing:0em; } /* word-spacing: Wortanzahl bestimmt Gesamtbreite, i.Weisheit des Johannes, Sinn des Daseins */ .impressum { display:table; max-width:70%; font-size:60%; line-height:110%; font-weight:normal; letter-spacing:0em; padding-left:4em; padding-right:4em; padding-bottom:6em; margin-left:auto; margin-right:auto; margin-top:2em; margin-bottom:2em; color:rgba(0,0,0,0.6); background-image:url(Bilder_Grafiken/impressum.png); } /* Impressum der Bücher, alleinstehend */ .autor { font-size:120%; font-weight:bold; letter-spacing:0.3em; color:rgba(82,0,0,1); padding-top:2em; margin-bottom:1.5em; margin-top:1.5em; } /* B.Y.R, innerhalb Impressum, color:rgba(82,0,0,1) !important; !important rule, it will override ALL previous styling rules for that specific property on that element! */ .title { color:rgba(225,169,71,0.8); font-size:150%; line-height:130%; letter-spacing:0.2em; } /* Buchtitel innerhalb Impressum color:rgba(255,219,77,0.8);e1a947 */ .bild { margin-top:1em; margin-bottom:3em; } /* Koberlogo innerhalb Impressum */ /* TABELLEN */ .zitiert { margin-left:1em; font-style:italic; } /* Klasse in Tabelle in zzinfos.html */ .tabelle { display:table; font-weight:normal; line-height:120%; padding:2em; padding-bottom:4em; color:rgba(0,0,0,1); margin-left:auto; margin-right:auto; margin-top:5em; margin-bottom:0em; background-color:rgba(237,237,237,1); border-style:solid; border-width:0.2em; border-left-color:rgba(177,163,128,1); border-top-color:rgba(177,163,128,1); border-right-color:rgba(234,229,220,1); border-bottom-color:rgba(234,229,220,1); } /* Klasse in Tabelle ..html.html - alleinstehend, Inhaltsverzeichnisse i. den Büchern */ /* .column1{ width:95%;} .column2{ width:5%; } */ .inhaltsverzeichnis { text-align:center; padding-bottom:2em; padding-top:2em; color:rgba(128,0,0,1); } /* non-links zentriert im Inhaltsverzeichnis der Texte ..) */ .seite { text-align:right; padding-bottom:2em; padding-top:2em; font-size:90%; color:rgba(128,0,0,1); } /* non-link im Inhaltsverzeichnis (Seite) */ .kapabstand { font-size:80%; padding-top:2em; } /* non-link mit Abstand im Inhaltsverzeichnis */ .tabledata { vertical-align:top; text-align:left; padding-right:1em; padding-left:1em; padding-top:0.5em; } /* border-style:solid; border-width:0.06em; border-left-color:rgba(237,237,237,1); border-top-color:rgba(219,219,219,1); border-right-color:rgba(237,237,237,1); border-bottom-color:rgba(188,188,188,1); */ .tabledataright { text-align:right; padding-right:1em; padding-left:1em; padding-top:0.5em; } .tabledatasmall { font-size:70%; } /* Inhaltsverz.i.wwprivat.html */ .hintergrschwarz { display:table; min-height:100%; min-width:100%; background-color:rgba(0,0,0,1); padding:0px; margin-left:auto; margin-right:auto; border:solid 0.1em rgba(82,0,0,1); } /* Hintergrund in zzmaler.-, zzsymbolform.-; zzskizzen.-, zzgemaelde.html */ /* #hintergrschwarz2 { display:table; width:100%; background-color:rgba(82,0,0,1); padding:2em; margin-left:auto; margin-right:auto; border:solid 0.1em rgba(82,0,0,1); } nicht verwendet */ .zzbilder { color:rgba(225,169,71,0.8); text-align:center; } /* nicht verwendet */ .tablecontainer { overflow-x:scroll; } /* ist in von zzzeichnungen.html für horizontale Scrollbalken */ .tablezeichnungen { width:80%; border:solid 0.1em rgba(82,0,0,1); border-spacing:50px; border:solid 0.1em rgba(82,0,0,1); border-spacing:50px; background-color:rgba(0,0,0,1); margin-left:auto; margin-right:auto; } /* TABELLE in zzzeichnungen.html, border-style muss vor border-width angegeben sein, border-spacing für Abstände min-width and max-width properties override a width property. 1. Schriftgröße ändert sich mit Breite des Anzeigegeräts 2. TD ohne width: Text nimmt, was er kriege kann 3. table-layout:auto; -> Zellenbreiten verschieden wie ihre Inhaltbreiten 4. table-layout:fixed; -> alle Zellenbreiten gleich = TD width:50%; (bei 2 TDs und table width = 100%) width:80%; border:solid 0.1em rgba(82,0,0,1); border-spacing:50px; */ .tdblack1 { font-size:80%; color:rgba(219,219,219,1); } /* enthält Bild mit Name in zzzeichnungen.html, Bild füllt ganze TD mit width:100%, border-style muss vor border-width angegeben sein */ .tdblack { font-size:70%; line-height:110%; color:rgba(191,191,191,0.4); text-align:left; vertical-align:top; } /* Begleittext zu den Zeichnungen in zzzeichnungen.html vertical-align:middle;*/ .tdblack2titel { font-size:100%; color:rgba(255,235,125,1); text-align:center; } /* Überschrift i. zzgemaelde.html und zzfotos.html, die Titel v. Schott's Werken als Link i.Inhvz., Zoomhinweise */ .tdblackpfeil { font-size:200%; color:rgba(255,235,125,0.3); text-align:center; } /* Pfeile vor/-zurück in ZZ-Dateien(B) und in 4 zzdateien für Schotts Einstiegseiten*/ .tdblack2 { font-size:80%; color:rgba(255,235,125,1); padding:1em; text-align:center; } /* Links! Namen der Bilder in zzgemaelde.html und Fotos in zzfotos.html, R.Schott (Autor) als Link am Beginn der BildTexte */ .tdblack2klein { font-size:50%; color:rgba(255,235,125,1); text-align:center; } /* in zz*.html Dateien Nicht-namen */ .kapitel { display:table; font-weight:normal; line-height:120%; letter-spacing:0.1em; text-align:center; padding-bottom:0.3em; color:rgba(220,194,82,1); margin-top:3em; margin-bottom:4em; margin-left:auto; margin-right:auto; border-bottom:solid 0.06em rgba(112,0,0,1); } /* Kapitelüberschriften, alleinstehend braucht
und Farbangabe wie Link für Kapitel, weil nicht alle Kapitel(teile) in einem Link stehen. border wird von Linkfarbe nicht berührt */ /* Klassen für Inlineelemente " aber auch DIV-Container (Riesenanfangsbuchstaben..) */ .einrueck30 { margin-left:12em; visibility:hidden; } /* stehen absolut am Zeilenanfang - brauchen ein Zeichen darin, sonst manche Browser ...*/ .einrueck10 { margin-left:4em; visibility:hidden; } /* stehen absolut am Zeilenanfang */ .einrueck5 { margin-left:1em; visibility:hidden; } /* stehen absolut am Zeilenanfang */ .einrueck3 { margin-left:0.7em; visibility:hidden } /* stehen absolut am Zeilenanfang */ /* RIESENBUCHSTABEN IN DIV-Container- mit/ohne Einrückung Größe = relativ zu Schriftgröße im DIV line-height:100%; oder gar nicht, weil schon in DIV */ .kapitelanf { font-size:150%; font-weight:bold; line-height:100%; } /* 1.Riesenbuchstabe ohne Einrückung, steht an Kapitelanfängen manchmal innerhalb inverse (Briefe/Zurück mit euch...) */ .kapitelanfeingerueckt { font-size:150%; font-weight:bold; line-height:100%; } /* 1. Riesenbuchstabe mit Einrückung, steht an Kapitelanfängen nach einrueck5 - manchmal innerhalb inverse */ .grossbuchs { font-size:130%; font-weight:bold; line-height:100%; } /* 1. kleinerer Riesenbuchstabe ohne Einrückung verschachtelt manchmal in display:none (nimmt keinen Raum ein); Javascript: display:inline; letter-spacing aus Buchstabendifferenz, visibility:hidden (nimmt Raum ein); 1em=Schriftgröße des Elternelements (z.B. paragraph, p08, font-size:54px -> 0.1em=5.4px), line-height: 0.01em | 1% bezieht sich auf die Schriftgröße des Elternelements Muss angegeben sein, um die Zeilenhöhe bestimmen zu können: display:inline; visibility:hidden; */ .sehrengen { letter-spacing:0em; word-spacing:0em; font-stretch:ultra-condensed;} /* 1mal in mysteriumgolgatha, wwnachlese1, auch für 2.Zeile verkürzen (bei RIESENBUCHSTABEN) - wwnachlese2 */ .engen { letter-spacing:0em; } /* auch für 2.Zeile verkürzen (bei RIESENBUCHSTABEN) - wwnachlese2 */ .weiter { word-spacing:0.5em; } /* 1.Zeile der RIESENBUCHSTABEN (über 2 Zeilen NICHT INVERS) verlängern und andere NICHT INVERSE Passagen ehe, auferstehung, johannes */ .weiter1 { word-spacing:0.8em; } /* 1.Zeile der RIESENBUCHSTABEN (über 2 Zeilen NICHT INVERS) verlängern, ehe */ .zuruf { font-size:120%; } /* Allen Suchenden dieser Welt - geheimnis */ .kapiteluntertitel { font-size:70%; font-weight:normal; } /* Weg meiner Schüler (Höheres u. Höchstes) , In eigener Sache (Eine Richtigstellung), Gottlosigkeit (HINWEISE), Privat (Unveröffent.Texte) Deutsche Mantra, Nachlese1 (Resume, EIN FUNDBERICHT, EINE NOTWEND. AUFKLÄRUNG), Nachlese2 (von Erika.., an den Herausgeber..,) */ .kapitelunterunter { font-size:60%; font-style:italic; font-weight:normal; } /* Gottlosigkeit(HINWEISE), Nachlese (Jesus wie sie ihn..), Nachlese2 (Scatchered) Kodizil (Joseph Anton...) Privat */ .kleiner { font-size:75%; font-weight:normal; } /* in Tabelle im Buch Nachlese, Hinweise am Ende von Buchseiten */ .iao { vertical-align:baseline; } /* I.A.O Eines in Allem - i. Funken das Bild */ .aufl53 { background-color:rgba(197,197,197,0.4) } /* Textstellen i. Nachlese gemäß der 1.Auflage - ENThält inverse, das interpunktionsrein ist */ .aufl53 { background-color:rgba(197,197,197,0.4) } /* Textstellen i. Nachlese gemäß der 1.Auflage - ENThält inverse, das interpunktionsrein ist */ .aufl90 { background-color:rgba(175,169,68,0.2); } /* Textstellen i. Nachlese gemäß der 2.Auflage - ENThält inverse, das interpunktionsrein ist */ .grosszahl { background-color:rgba(197,197,197,0.2); } .kleinzahl { } /* für Briefe 1.2.3.4.5.6.7 (Stundenschlagbeispiel) font-style:italic; font-weight:bold; */ .nicht{ visibility:hidden; } /* für Briefe 1.2.3.4.5.6.7 (Stundenschlagbeispiel), zzzeichnungen */ .signatre{ text-align:right; float:right; } /* Unterschriftbild(transparent) rechts wwkodizil(Anfang) und Der Verlag (brevier 1.Vorwort) */ .signathoch{ vertical-align: 45%; } /* wwrelationen */ .signat { vertical-align:-45%; } /* für B.Y.R. Unterschriftbild wwgottlosigkeit(ende) wwkodizil(ende) wwmarginalien(nach Vorwort) vertical-align:-35%; */ .brevlink { display:block; text-align:right; vertical-align:bottom; font-size: 70%; } /* für die Verweise im Brevier, die eine Zeile tiefer stehe'n*/ .brevlink0 { display:block; text-align:right; position:relative; bottom:2.5em; vertical-align:bottom; font-size: 70%; } .brevlink1 { font-size: 70%; } /* für die Verweise im Anfangsteil des Breviers */ /* weitere inverse, Farben oben bei Farbangaben deklariert */ .inverseokkimprbyr{ font-weight:bold; } /* wwraetsel impressum Bo Yin Ra hervorheben */ .inverseextra { font-weight:bold; } /* für Hervorhebung in Hervorhebung -sinndesdaseins, 4x i. Das Gebet- interpunktionsrein */ .inversesehreng { letter-spacing:0em; word-spacing:0em; font-stretch:ultra-condensed; } .inversewelten, .inverseeng, .besonderheiteninv { letter-spacing:0em; } /* Texthervorhebungen für Welten, engstehend dann 3x: Sinn des Daseins (endlich zu erreichen), Welten (Die Schlusszeilen), Nachlese2 (Tanzenden) interpunktionsrein und dann: bei Hinweisen, Fußnoten - sollte möglichst eng stehen */ .inversew1 { word-spacing:0.1em; } /* lebendigergott s.246, Nachlese1 */ .inverse10 { letter-spacing:0.1em; } /* Auferstehung,Menschen,Ehe,Gebet,Glück,Jenseits,Johannes,Weg zu Gott,Geheimnis, Golgatha */ .inverse15 { letter-spacing:0.15em; } /* Auferstehung,Menschen,Ehe,Gebet,Glück,Jenseits,Johannes,Weg zu Gott,Geheimnis, Golgatha */ .inverse20 { letter-spacing:0.2em; } /* DER WILLE ZUR FREUDE (königl.Kunst), Golgatha */ .inverse25 { letter-spacing:0.25em; } /* DER WILLE ZUR FREUDE (königl.Kunst), Golgatha */ .inverse30 { letter-spacing:0.3em; } /* Golgatha,NachleseI, Golgatha */ .inverse40 { letter-spacing:0.4em; } /* ############## INHALTVERZEICHNISFORMATIERUNG (linker Frame) */ /* Schriftfamilie und -größen --- bodyinhaltsverz in @media */ #header { width:16em; height:21.5em; text-align:center; padding:0em; font-family:'Times New Roman',Times,serif; margin-left:auto; margin-right:auto; margin-bottom:6em; color:rgba(247,198,0,1); background-image:url(Bilder_Grafiken/headerinhvz.png); border-style:outset; border-width:0.1em 0.1em 0.1em 0.2em; border-right-color:#783434; border-top-color:#783434; border-left-color:#3F1111; border-bottom-color:#3F1111; } /* div-Container für Autor, Hortus Conclusus, Umschlossener Garten, Geistiges Lehrwerk, 32 Bücher Höhe und Breite in em -> relativ zur verwendeten Browserschriftgröße, die im #bodyinhaltsverz festgelegt wird. Die Größenangaben der folgenden divs (eingeschlossen im #header) beruhen darauf */ #zwirah { margin-top:2.5em; margin-bottom:0em; margin-right:0em; margin-left:0em; } /* der Distanzrahmen */ #byr { color:rgba(247,198,0,0.8); font-size:70%; } #hortus { color:#eeca5a; font-size:100%; margin-top:2.5em; line-height:100%; letter-spacing:0.02em; } #garten { color:rgba(247,198,0,0.8); font-size:70%; font-weight:normal; letter-spacing:0.06em; margin-top:1.6em; } #geistiges { color:rgba(247,198,0,0.8); font-size:70%; margin-top:9em; } /* Geistiges Lehrwerk */ #bucher { color:rgba(247,198,0,0.8); font-size:60%; } /* 32 Bücher */ /* DIE BUCHTITEL .titel(=1-32, 2=33-43, 3=44-45, 4=46-49, 5=50-56, 0=Brevier) und Inhalt .klapp */ .titel, .titel2, .titel0, .titel3, .titel4, .titel5 { margin-left:20px; white-space:nowrap; margin-bottom:2em; letter-spacing:0.04em; } .titleeng { font-size:80%; } .titleeng5 { font-size:80%; } .klapp { display:table; width:90%; font-size:90%; font-weight:100; white-space:nowrap; line-height:200%; margin-left:1em !important; padding-right:1.5em; padding-left:1.5em; padding-bottom:1em; padding-top:1em; background-image:url(Bilder_Grafiken/hintergrundklapp.png); border:inset 0.1em rgba(97,77,0,1);} /*
ausklappbarer Container für die Kapitel innerhalb titel, width:100%; padding-left:0.5em; background-color:rgba(40,0,0,1); (5,0,30,1); */ .eng { font-size:90%; letter-spacing:0em; } .Technik { white-space:nowrap; font-size:60%; font-family:monospace; font-weight:normal; line-height:110%; width:100%; text-align:left; margin-left:1em; margin-bottom:6em; } #wwschrifts, #BREV, #postum, #einiges, #andereautoren { font-size:80%; line-height:110%; text-align:center; max-width:40%; border-top:1px solid; border-bottom:1px solid; margin-left:auto; margin-right:auto; padding-top:1em; padding-bottom:1em; margin-bottom:5em; letter-spacing:0.04em; } .blzwtitel { font-size:90%; } /* Anmerkung in POSTHUM */ /* FARBEN der LINKS und der 5 Hauptunterteilungen */ .titel, .titel a:link, .titel a:visited { color:rgba(247,198,0,1); } .titel a:hover { color:rgba(247,198,0,0.6); } #wwschrifts, .titel2, .titel2 a:link, .titel2 a:visited { color:#ffaf00; } .titel2 a:hover { color:rgba(247,195,82,0.6); } #BREV, .titel0, .titel0 a:link, .titel0 a:visited { color:#F7C352; } .titel0 a:hover { color:rgba(247,195,82,0.6); } #postum, .titel3, .titel3 a:link, .titel3 a:visited { color:rgba(235,225,181,1); } .titel3 a:hover { color:rgba(235,225,181,0.6); } .blzwtitel a:link, .blzwtitel a:visited { color:rgba(235,225,181,0.6); } .blzwtitel a:hover { color:rgba(235,225,181,1); } /* #postum-Link für 'keine öffentl. Reden' */ #einiges, .titel4, .titel4 a:link, .titel4 a:visited { color:#EBDDC8; } .titel4 a:hover { color:rgba(235,221,200,0.6); } .schott, .schott a:link, .schott a:visited { color:#9c9c9c; } .schott a:hover { color:#ffffff; } #andereautoren, .titel5, .titel5 a:link, .titel5 a:visited { color:#BABABA; } .titel5 a:hover { color:rgba(186,186,186,0.6); } .titleeng5 { color:rgba(186,186,186,0.6); } .titleeng5 a:link, .titleeng5 a:visited { color:#BABABA; } .titleeng5 a:hover { color:rgba(186,186,186,0.6); } .ziffer { opacity:0.8; font-size:70%; } /* Buchnummerierung, steht innerhalb titel */ .noten { opacity:0.8; font-size:70%; display:none; } /* bei ausgeschaltetem JavaScript unnötig */ .mp3 { opacity:0.8; font-size:70%; font-weight:lighter; letter-spacing:0em; } /* Schriftgrösse der mp3 Links im Kapitel */ .mp3solo { opacity:0.8; font-size:55%; font-weight:lighter; letter-spacing:0em; } /* Schriftgrösse der mp3 Links im Titel */ .pfeiloben { display:none; } /* bei ausgeschaltetem JavaScript sollen sie nicht angezeigt werden */ .pfeilunten { display:none; } .niente { display:none; } /* ... die "-" für Bücher ohne Inhaltsverzeichnis */ .Technik a:link { color:rgba(152,152,152,0.6); } .Technik a:visited { color:rgba(152,152,152,0.6); } .Technik a:hover { color:rgba(255,255,255,0.6); } /* Technische Hinweise */ /* ############# zzinfos und zzInfo FORMATIERUNG - #bodyzzinfos, #maske1 in @media*/ #uebersicht { background-color:rgba(0,0,0,0.5); padding:1.5em; } .klein { font-size:70%; } .thema { box-shadow: inset 0 0 15px 5px #DDD; border-radius: 40px; font-size:120%; font-weight:bold; padding:0.5em; margin-bottom:2em; margin-top:2em; } .par { background-color: rgba(160,160,160,0.5); box-shadow: inset 0 0 15px 5px rgba(200,200,200, .9); border-radius: 40px; margin-bottom:2em; margin-top:3em; padding:0.5em; } .hervorheben { background-color: rgba(180,180,180,0.6); box-shadow: inset 0 0 15px 5px rgba(200,200,200, .9); border-radius: 40px; padding-left:1em; padding-right:1em;margin-bottom:1em; margin-top:1em; } /* schwache Hervorhebung durch Hintergrund */ /* ############## PDFINDEX.HTML FORMATIERUNG #bodypdf in @media */ .tabellepdf{ padding-left:1em; padding-right:1em; padding-bottom:2em; margin-left:auto; margin-right:auto; color:rgba(95,80,3,0.1); background-color:rgba(0,0,0,0.3); border: 0.07em solid rgba(135,34,54,0.6);} .tabellepdf a:link { text-decoration:none; color:rgba(239,194,10,0.8); } .tabellepdf a:visited { text-decoration:none; color:rgba(239,194,10,0.8); } .tabellepdf a:hover { text-decoration:none; color:rgba(239,194,10,0.6); } .tabellepdf a:active { text-decoration:none; } .geistigespdf{ font-size:110%; font-weight:normal; letter-spacing:0.02em; color:rgba(255,213,71,0.8); padding-top:2em; padding-bottom:2em; } /* ist HORTUS CONCLUSUS */ .bucherpdf{ font-size:70%; text-align:center; font-weight:100; color:rgba(185,183,117,0.6); } /* innerhalb geistigespdf: Geistiges Lehrwerk, 32 Bücher, eng an das Lehrwerk anschliessend, die Autorennamen */ .weitereschriftenpdf{ font-size:100%; font-weight:normal; letter-spacing:0.02em; color:rgba(255,213,71,0.8); padding-top:2em; padding-bottom:2em; } /* ist Weitere Schriften */ .autoren{ font-size:70%; padding-top:3em; padding-bottom:2em; font-weight:normal; color:rgba(255,213,71,0.5); } /* Drei Autoren */ .titellinks{ white-space:nowrap; font-size:80%; width:50%; text-align:right; padding-right:0.5em; } /* Buchtitel auf der linken Seite - Schriftfarbe wird durch die Links in .tabellepdf bestimmt */ .titellinkskleiner{ white-space:nowrap; font-size:70%; width:50%; text-align:right; padding-right:0.5em; } /* Buchtitel auf der linken Seite - Schriftfarbe wird durch die Links in .tabellepdf bestimmt */ .titelrechts{ white-space:nowrap; font-size:80%; width:50%; text-align:left; padding-left:0.5em; } /* Buchtitel auf der rechten Seite - Schriftfarbe wird durch die Links in .tabellepdf bestimmt */ .titelrechtskleiner{ white-space:nowrap; font-size:70%; width:50%; text-align:left; padding-left:0.5em; } /* Buchtitel auf der rechten Seite - Schriftfarbe wird durch die Links in .tabellepdf bestimmt */ .zifferpdf{ font-size:80%; color:rgba(255,213,71,0.5); } /* Buchziffern v. titellinks/rechts */ /* #tonweg { position:fixed; bottom:20em; right:1.5em; background-color:rgba(128,0,0,1); padding:0em; margin:0em; border:0em; z-index:0; } der Tonwegmechanismus in den dateihtml.html über der Abspielgrafik */ /* #Soundgrafik { position:fixed; bottom:1.5em; right:1.5em; width:16em; height:8em; display:none; padding:0em !important; margin:0em !important; border:1em !important; overflow:hidden; z-index:0; } */ /* width:2em; height:1em; Ratio muss 2:1 sein per javascript - function on(tondatei) - wird innerHTML von - playlist... - veraendert */ /* */ /* Die Playlisten in xml/..xml: ../../BoYinRa-Ton/23-31/Ueber dem Alltag/Ueber dem Alltag.mp3 Über dem Alltag Ueber dem Alltag im inhaltsvz: href="javascript:on('alltag23-31.xml')" ..alltag23-31.xml als Parameter an dhtml.js: function on(tondatei) */ /* #video_player_html5 { display: table; line-height: 0; font-size: 0; background: #000; } #video_player_html5 video, #video_player_html5 figcaption { display: table-cell; vertical-align: top; } #video_player_html5 figcaption { width: 25%; } #video_player_html5 figcaption a { display: block; opacity: .5; transition: 1s opacity; } #video_player_html5 figcaption a img, figure video { width: 100%; height: auto; } #video_player_html5 figcaption a:hover { opacity: 1; } @media (max-width: 700px) { #video_player_html5 video, #video_player_html5 figcaption { display: table-row; } #video_player_html5 figcaption a { display: inline-block; width: 33.33%; } } */ /* THROW - 4 Javascripts (../src/overthrow-detect.js, ..) in jeder Datei, in der die Klassen .overthrow-enabled .overthrow verwendet werden .overthrow-enabled .overthrow { overflow:auto; -webkit-overflow-scrolling:touch; } -webkit-overflow-scrolling:touch; lets it scroll lazy -webkit-overflow-scrolling:auto; stop scrolling immediately webkit ist kein Standard, setzt für Touchscreens die Scrolleigenschaft .overthrow-enabled #foo { height:28em; } overflow:auto will apply, der Browser entscheidet, ob der Inhalt des Elements mit oder ohne Scrollbalken dargestellt wird */ /* CSSEL Zentrale Formate definieren p { font-size:48pt; color:#FF0000; } h1, p, li { font-size:48pt; color:#FF0000; } h1 i { color:blue; font-style:normal; } div i { color:red; } div > p { color:blue; } nur wenn p eine Ebene unterhalb des div-Elements:

div * b { color:violet; } mindestens zwei Ebenen unterhalb des div-Elements:

div + p { margin-top:100px; } p-Elemente, die unmittelbar auf ein div-Element hin folgen:

Attribut-bedingte Formate p { font-weight:bold; font-family:Tahoma,sans-serif; font-size:14pt; } p[align] { color:red; } p[align=center] { color:blue; text-align:left; } td[abbr~=Berlin] { background-color:#FFFF00 } Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute *[lang|=en] { background-color:#FF0000; color:#FFFFFF; } Diese Syntax findet Teile in Wertzuweisungen an Attribute, die durch Bindestriche getrennt sind Formate für Klassen definieren h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; } h1.hinterlegt { background-color:#FFFF00 } in html-Datei:

*.hinterlegt { background-color:#00FFFF } oder nur .hinterlegt { background-color:#00FFFF } für alle in html-Datei: Individualformate definieren wie Formate für Klassen, aber mit dokumentweit eindeutigem Namen in html-Datei: #hinterlegt { background-color:#00FFFF } h1#hinterlegt { background-color:#00FFFF }

Pseudoformate definieren Pseudoformate können Sie für HTML-Bestandteile definieren, die sich jedoch nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes". Zum Definieren solcher Pseudoformate gibt es eine spezielle Syntax. Bei Pseudoelementen und Pseudoklassen notieren Sie zuerst das betroffene HTML-Element, im Beispiel das a-Element für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe a:link { color:#EE0000; text-decoration:none; font-weight:bold; } a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; } a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; } a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; } a:focus { font-weight:bold; color:#00E000; text-decoration:underline } Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter. Es gibt eine Reihe fester, erlaubter Pseudoformate. p:first-line { font-weight:bold } p:first-letter { font-size:300%; color:red } div { background-color:#E0E0E0 } div p:first-child { background-color:#C0C0C0; } Um eine korrekte Darstellung dieser Pseudoformate zu erreichen, müssen Sie bei der Notierung die folgende Reihenfolge einhalten: :link, :visited, :hover, :active. :focus funktioniert bei anderen Elementen als Verweisen auch. Wenn Sie beispielsweise für h1:focus CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maus geklickt ist, die definierten Eigenschaften an. :first-line, :first-letter, :first-child (Pseudoformate für Absätze) :before, :after (Pseudoformate für automatisch generierten Text) Sie können bestimmen, dass vor oder nach einem Element automatisch Inhalt eingefügt wird. Es kann sich um statischen Text, beliebige Ressourcen (meist Grafiken), aber auch um variable Inhalte handeln. Statischer Text hinter content: muss in Anführungszeichen stehen. Im Beispiel können Sie auch sehen, dass es möglich ist, Angaben zu kombinieren. So bedeutet content:" #"attr(id), dass vor dem Attributwert noch ein statisches Leer- und ein Gatterzeichen eingefügt werden und content:url(../../../src/prev.gif)" ";, dass der Grafik ein Leerzeichen folgt. h1:before { content:url(../../../src/dokx.gif)" "; } h2:before { content:"\2022"; } h2:hover:after { content:" #"attr(id); color:#888; font-size:70%; font-style:italic; }...fügt im Text dann das id-Attribut sichtbar spez.formatiert hinten an *[title]:after { content:" ("attr(title)")"; color:#080; }...fügt im Text dann das titel-Attribut sichtbar grün hinten an

Thema

Einleitung

Text mit title-Attribut

######################################################################## a:link { CSS-Eigenschaft:Wert; ... } noch nicht besuchte Ziele a:visited { CSS-Eigenschaft:Wert; ... } besuchte Ziele a:hover { CSS-Eigenschaft:Wert; ... } Verweise bei "MouseOver" a:active { CSS-Eigenschaft:Wert; ... } Angeklickte Verweise a:focus { CSS-Eigenschaft:Wert; ... } Verweise, die Fokus erhalten Element:hover { CSS-Eigenschaft:Wert; ... } Element bei "MouseOver" Element:active { CSS-Eigenschaft:Wert; ... } Angeklickte Elemente Element:focus { CSS-Eigenschaft:Wert; ... } Elemente, die Fokus erhalten #Name:hover { CSS-Eigenschaft:Wert; ... } Individualformate bei "MouseOver" #Name:active { CSS-Eigenschaft:Wert; ... } Angeklickte Individualformate #Name:focus { CSS-Eigenschaft:Wert; ... } Individualformate, die Fokus erhalten Element:first-line { CSS-Eigenschaft:Wert; ... } erste Zeile Element:first-letter { CSS-Eigenschaft:Wert; ... } erster Buchstabe Element:lang(xy) { CSS-Eigenschaft:Wert; ... } Elemente mit Sprachauszeichnung Element:before { content:Wert; } Vor dem Element einfügen Element:after { content:Wert; } nach dem Element einfügen BB Buchgetreuer Blocksatz (die Zeile eines Blocksatzes soll nicht browserwillkürlich umgebrochen werden): Normaler Zeilenumbruch bei Blocksatz ("text-align:justify") erfolgt am Bildschirmrand (oder Überschreiten einer mit "width" festgelegten Breite des Elements, in welchem die Zeile steht). Das "zu lange" Wort kommt in die nächste Zeile, und der Raum zwischen den Worten der vorigen Zeile wird gleichmässig zwischen diesen aufgeteilt, so dass erster und letzter Buchstabe der Zeile den gesamten verfügbaren Raum einnehmen. Setzt man eine beliebige (aber lange) Zeichenkette nach der Sollumbruchstelle, formatiert diese Zeichen noch dazu "niedrig u. unsichtbar", erzwingt dann einen Zeilenumbruch (z.B mit
) und fährt mit dem normalen Text fort, so beginnt dieser wie gewollt in der neuen Zeile, bis zur nächsten Sollumbruchstelle usw. Die "dünnen" Zwischenzeilen sieht man nicht, und so hat man, was man will. PC-Systeme sind unterschiedlich in der Darstellung von Zeichen, so dass die Festlegung der Zeilenlänge (mittels "width") durch ein JavaScript Programm erfolgt, das die Länge der längsten Zeile am PC des Benutzers "ermittelt. (interessanterweise muss der Text nicht linksbündig dabei ausgerichtet sein, sonder kann schon im Blocksatz angegeben sein). Die Funktion blocksatz() in der Datei dhtml.js erledigt das (overflow:hidden verhindert Scrollbalken, visibility:hidden verbirgt die lange Zeichenkette, aber läßt ihr die raumeinnehmende Funktion (display:none lässt keinen Raum))
kennzeichnet eine kurze - linksbündige - Blockzeile,
einen Zeilenumbruch im Buch. */ /* https://www.w3.org/Style/Examples/007/units.de.html#units MASS - Bildschirmgrößen in Zoll=Inch=2.54cm der Diagonale Formatierungseinheiten absolut 1mm 1cm 1in(ch) 1pt(point)=1/72inch=0,35mm 1pc(pica)=12pt=4,2mm relativ 1px=Bildpunkt (Ausgabegerät abhängig) relativ 1em=Größe der Schrift des Elements oder Elternelements (wenn Schrift schon in em) 1ex=Höhe des Kleinbuchstabens x in diesem Element oder Elternelements (wenn Schrift schon in ex) 1% =Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext: Bsp.: font-size:10pt; line-height:120%; -> von10pt Der Computer muss Formatierungsangaben in Pixel umrechnen für die Ausgabe am Bildschirm->DPI=PPI(Pixel/Inch) Macintosh 1984 (09 Zoll Bildschirmdiagonale=22,86cm, 512 x 324 Pixel Samsung 53,50cm x 31,00cm (24 Zoll Bildschirmdiagonale=61,83cm) max. 1920 x 1080 -> 91 x 88 PPI 21,06in x 12,20in 443x203 Laptop max. 1366 x 768 Betriebssystemabhängige Berechnungsgrundlage für die Darstellung von Schriftarten: Windows 96dpi ("große Schriftarten" 120dpi), Unix 72dpi Zoomen des Browserfensters verändert clientWidth verkehrtproportional: Zoom 100% clientWidth=1900, Zoom 50% clientWidth=3800 */ /* Farbänderungen von dateidunkel.css -> dateihell.css #bodyzzinfos, #body, .signatre color:rgba(255,255,0,1); color:rgba(0,0,0,1); #bodyzzinfos background-color:rgba(0,0,0,1); background-color:rgba(255,255,255,1); #maske background-image:url(Bilder_Grafiken/hintergrundmaske.png); background-color:rgba(255,255,255,1); .paragraph, .paragraphwelten, .paragraphnoblock, .p08, .p08welten color:rgba(255,255,0,0.9); color:rgba(0,0,0,0.9); .blocknat color:rgba(255,255,0,0.8); color:rgba(0,0,0,0.8); .seitenangabe color:rgba(82,0,0,1); .seitenangabe a:link { color:rgba(190,190,190,1); } .seitenangabe a:visited { color:rgba(190,190,190,1); } .seitenangabe a:hover{ color:rgba(250,208,0,1); font-weight:bold; } .kapitelbeginv, .inverseextra, .inverse, .inversewelten, .inverseeng, .besonderheiteninv, .inverse15, .inverse20, .inverse25, .inverse30, .inverse40 color:rgba(255,215,0,1); color:rgba(82,0,0,1); .centerende{ color:rgba(248,202,22,1); } */