Beispiel:CSS-logisch-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" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Logische Eigenschaftswerte</title>
  <style>
section {
    border-inline-start: thick solid #c32e04;
    padding-inline-start: 1em;
    inline-size: 25em;
}

[lang=ja]{
    writing-mode: vertical-rl;
}
.menu {
    inline-size: 4.5em;;
      }
.menu input {
    float: inline-end;
}     
  </style>	
<script>
document.addEventListener('DOMContentLoaded', function () {
let textAlignline = document.getElementsByName("textAlign");
for (const item of textAlignline) {
	item.addEventListener ("click", function () {
		document.querySelector(".stage").style = "text-align:" + this.value;
		console.log('text-align: '+ this.value);
	})
}
});
    </script>
</head>
 
<body>
<h1>Logische Eigenschaftswerte<br>am Beispiel <code>text-align</code></h1>
    
<div class="menu">
    <label for="start">start</label>
    <input type="radio" name="textAlign" id="start" value="start"> 
    <label for="center">center</label>
    <input type="radio" name="textAlign" id="center" value="center"> 
    <label for="end">end</label>
    <input type="radio" name="textAlign" id="end" value="end"> 
	<label for="justify">justify</label>
    <input type="radio" name="textAlign" id="justify" value="justify"> 
</div>

<div class="stage">
<section>
    <h2>Webdesign</h2>
    <p>Mit CSS können Sie Webseiten gestalten! Mit CSS können Sie Webseiten gestalten! Mit CSS können Sie Webseiten gestalten! Mit CSS können Sie Webseiten gestalten! Mit CSS können Sie Webseiten gestalten! Mit CSS können Sie Webseiten gestalten! Mit CSS können Sie Webseiten gestalten!</p>
</section>
    
<section dir="rtl" lang="ar">
    <h2>تصميم المواقع</h2>
    <p>يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS!</p>
</section>

<section dir="ltr" lang="ja">
    <h2>ウェブデザイン</h2>
    <p>CSSでウェブサイトをデザインできます！</p>
</section>
</div>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-logisch-5.html&oldid=83217“