Beispiel:CSS-Anw-zitate-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
    <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
    <title>Zitate gestalten 5</title>
    <style>
@import url(http://fonts.googleapis.com/css?family=Chewy);
	
main {
  padding-left: 4em; 
}	
	
blockquote { 
  margin: 0;
  padding: 1em 0 2em;
  width: 90%;
  position: relative;
}

cite {
  display: block;	
  text-align: right;	
}

blockquote::before, blockquote::after {
  position: absolute;	
  display: block; 
  font-family: 'Chewy', sans-serif;
  font-size: 10em;
  color: #c32e04;  
}

blockquote::before {
  content: '“';
  left: -0.4em;
  top: -0.2em;
}

blockquote::after {
  content: '— ”';
  bottom: -0.4em;
  right: -0.4em;
}
  
    </style>
</head>
<body>

<h1>Zitate gestalten 5</h1>
<main>
  <p>Unter hängender Interpunktion oder Zeichensetzung versteht man in der Typografie eine Technik, die zu ruhigeren Kanten führen soll. 
     Dabei werden Interpunktionszeichen wie Anführungszeichen, die am Zeilenanfang oder -ende gesetzt werden müssen, außerhalb des 
     Spaltenrands geschoben, so dass die Buchstaben, die vor oder nach den Interpunktionszeichen stehen, wieder am Spaltenrand abschließen. 
     Dadurch stören diese Zeichen nicht den Fluss des im Blocksatz formatieren Texts. Dieser Stil wurde in der Gutenberg-Bibel, dem ersten 
     gedruckten Buch verwendet. 
  </p>

  <blockquote>
    <p>
       Das World Wide Web ist eine großräumige Hypermedia-Initiative zur Informationsbeschaffung mit dem Ziel, 
       den allgemeinen Zugang zu einer großen Sammlung von Dokumenten zu erlauben.</p>
    <p><cite>Tim Berners-Lee</cite></p>
  </blockquote>
  
  <p>Unter hängender Interpunktion oder Zeichensetzung versteht man in der Typografie eine Technik, die zu ruhigeren Kanten führen soll. 
     Dabei werden Interpunktionszeichen wie Anführungszeichen, die am Zeilenanfang oder -ende gesetzt werden müssen, außerhalb des 
     Spaltenrands geschoben, so dass die Buchstaben, die vor oder nach den Interpunktionszeichen stehen, wieder am Spaltenrand abschließen. 
     Dadurch stören diese Zeichen nicht den Fluss des im Blocksatz formatieren Texts. Dieser Stil wurde in der Gutenberg-Bibel, dem ersten 
     gedruckten Buch verwendet. 
  </p>    
</main>

</body>
</html>