Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Border</title>
	<style>
		body {
			display:flex;
			margin:0;
		}
		p {
			background: #ccc;
			border: 1px solid #fff;
			padding:10px;
		}
		p.box1 {
			border: 1px solid #fff;
		}
		p.kreis {
			display:none;
		}
	</style>
</head>
<body>
	<p class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repudiandae est dignissimos vitae laborum.</p>
	<p class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repudiandae est dignissimos vitae laborum.</p>
	<p class="kreis"></p>
</body>
</html>


 

            

Aufgabe 10 > weiter

Im Editor sind zwei Absätze vorbereitet. Beide sind im body nebeneinander platziert und haben einen Grauen Hintergrund. Sie besitzen keine individuellen Grössenangaben, daher teilen sie ihren Platz gleichmässig (Flex-Box-verhalten). Es wurden aber unterschiedliche Border gesetzt.

p.box1 > border: 1px solid #fff;
p.box2 > border: 1px solid #fff;

Die Eigenschaft "border" setzt sich aus drei Werten zusammen: Dicke - Linientyp - Farbe.

Dicke der Kontur: Werte in px, em
Typen der Kontur: dotted, dashed, solid, double, groove
Farben der Kontur: red (Bezeichnung), #ff000 (Hexadezimal), rgb(255,0,0,0.5) (RGB+Transparenz)

Verändere die Werte und setze zusätzliche Eigenschaften, um das Verhalten zu prüfen!

Verändere die Werte von "border" für "p.box1" und "p.box2", beachte wie sich die beiden Boxen verhalten.

Du kannst verschiedene Werte für die einzelnen Richtungen eingeben. Beispiel:

        p.box1 {
            border-top: 1px solid red;
            border-right: 10px dotted red;
            border-bottom: 1px solid red;
            border-left: 10px dotted red;
        }

Du kannst das gleiche auch als Kuzschreibweise hinterlegen. (im Uhrzeigersinn: oben, rechts, unten, links) Beispiel:

        p.box1 {
            border: 1px solid red;
        }

Füge "p.box1" und "p.box2" zusätzlich Werte für die Breite und Höhe dazu. Beispiel:

        p.box1 {
            border: 5px groove red;
            width:200px;
            height:100px;
            background-color: rgba(255,0,0,0.5);
        }

Einen zusätzliches Verhalten von Border ist der radius. Beispiel:

        p.kreis {
            border:5px solid red;
            width:60px;
            height:60px;
            border-radius:60px;
        }

Prüfe das Verhalten im HTML-Bereich.