SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:CSS-Initial-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
  <style>
p {
  columns: 2 25em;
  min-height: 106px;
  color: #3983ab;
}
 
p::first-line {
  line-height: 1em;
}
 
p::first-letter{
/* Image-Replacement */ 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent;
}

p span {
  display: inline-block;
  float: left;
  width: 98px;
  height: 106px;
  margin-right: .3em; 
 
/* Hintergrundbild */
  background-image: url("/images/7/77/Initiale_E.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

h2 {
  color: red;
  text-shadow: 1px 1px 2px black;
  padding: .2em .2em .2em 2em;
  text-align: center;
}
  </style>
  <title>Initiale 5</title>
</head>
<body>
<h1>Beispiel 5: Initiale mit Hintergrundgrafik</h1>
 
  <h2>Rotkäppchen</h2>
  <p>
     <span>E</span>s war einmal eine kleine süße Dirne, die hatte jedermann lieb, der sie nur ansah, am allerliebsten aber ihre Großmutter, 
     die wusste gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil 
     ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen. Eines Tages sprach seine Mutter 
     zu ihm:<br> 
     <br>
     »Komm, Rotkäppchen, da hast du ein Stück Kuchen und eine Flasche Wein, bring das der Großmutter hinaus; sie ist krank und schwach und wird sich daran laben. Mach dich auf, bevor es heiß wird, und wenn du hinauskommst, so geh hübsch 
     sittsam und lauf nicht vom Weg ab, sonst fällst du und zerbrichst das Glas, und die Großmutter hat nichts. Und wenn du in
     ihre Stube kommst, so vergiss nicht, guten Morgen zu sagen, und guck nicht erst in alle Ecken herum.« 
  </p>   

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Initial-5.html&oldid=82665“