Beispiel:CSS-Initial-3.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>
main {
  background: transparent;
  height: 550px;
}

h2 {
  color: red;
  text-shadow: 1px 1px 2px black;
  padding: 0.2em 0.2em 0.2em 2em;
}

p {
  width: 18em;
  color: #3983ab;
  float: left;
  margin-left: 4em;
}

p::first-line {
  line-height: 100%;
}

p::first-letter {
  color: white;
  background-color: #3983ab;
  font-size: 300%;
  font-weight: bold;
  padding: 0.2em 0.1em;
  margin: 0.2em 0.2em 0 0.1em;
  border: 2px dashed white;
  box-shadow: 0 0 0 .1em #3983ab;
  float: left;
  line-height: 1.5em;
}

p.mittig::first-letter {
  line-height: 1.0em;
  margin: -0.5em 0.2em 0 0.1em;
}

p.links {
  clear: left;
}

p.links::first-letter {
  margin-left: -1.1em;
}
  </style>
  <title>Initiale 3</title>
</head>
<body>
<h1>Beispiel 3: Positionierung von Initialen </h1>

<main>
  <h2>Rotkäppchen</h2>
  <p >
     Es 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. 
  </p> 
  <p class="mittig">
     Es 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. 
  </p>   
  <p class="links">
     Es 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. 
  </p> 

</main>
</body>
</html>