Beispiel:CSS-logisch-5.html

<!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: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>

Logische Eigenschaftswerte
am Beispiel text-align

   <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"> 

<section>

Webdesign

Mit CSS kannst du Webseiten gestalten! Mit CSS kannst du Webseiten gestalten! Mit CSS kannst du Webseiten gestalten! Mit CSS kannst du Webseiten gestalten! Mit CSS kannst du Webseiten gestalten! Mit CSS kannst du Webseiten gestalten! Mit CSS kannst du Webseiten gestalten!

</section>

<section dir="rtl" lang="ar">

تصميم المواقع

يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS! يمكنك تصميم مواقع الويب باستخدام CSS!

</section>

<section dir="ltr" lang="ja">

ウェブデザイン

CSSでウェブサイトをデザインできます！

</section>

</body> </html>