header

P A b s ä t z e

Das <p> steht für das englische „paragraph“ = Absatz
Ein Absatz hält einen Abstand zum nachfolgenden Element.
Man kann auch den Absatz auf unterschiedliche weise gestalten und formatieren.
Hier ein paar Beispiele

mehr zum Thema ...

<p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">
</p>

dotted

Textabsatz mit Rahmendicke medium und Typ dotted.


<p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">
</p>

dashed

Textabsatz mit Rahmendicke medium und Typ dashed.

<p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">
</p>

solid

Textabsatz mit Rahmendicke medium und Typ solid.

<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
</p>

Textabsatz mit Rahmendicke medium und Typ double.

double

<p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;">

</p>

groove

Textabsatz mit Rahmendicke 12px und Typ groove.

<p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;">
.</p>

ridge

Textabsatz mit Rahmendicke 12px und Typ ridge

<p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;">
.</p>

inset

Textabsatz mit Rahmendicke 12px und Typ inset

Textabsatz mit Rahmendicke 12px und Typ outset <p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">
</p>

outset

Textabsatz mit Rahmendicke 12px und Typ outset.


In Praxis sieht  das so aus das man   einen  gewünschte Code erstellt,  und Dazwischen  einen Text einfügt ..
hier ein B..
<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
Hier kommt das gewünschte Inhlat
</p>

Markieren

und so sieht das dann aus

Hier kommt das gewünschte Inhlat

Die Gestaltung Möglichkeiten sind sehr viele .
Voraussetzung dafür ist : ein wenig CSS Kenntnisse sind .

Hier drei Beispiele

Hier ist ein P Absatz mir breite vom 30%

<p style="border: 12px ridge rgb(102, 204, 102); padding: 5px;width:30%;">
Hier kommt das Inhalt
</p>

Markieren

Hier Ist ein Absatz mit rammen dicke 5px , rammen Typ Solid breite 50% , innnen Abstand 3% , einen farbigen Hintergrund ,Schrift Farbe ist auch bestimmt so wie Schrift größe

<p style="border: 5px solid #00FF00; padding: 3%;width:50%; background-color:#FF00FF ; color:#800080;font-size:1.3em;">
Code zum mitnehmen !
</p>

Markieren

Noch das Gleiche ,nur mit eine Grafik in den Hintergrund

Hier Kommt das Inhalt

<p style="border: 5px solid #00FF00; padding: 3%;width:50%;background-image: url( BILD URL );
    background-repeat: repeat; ; color:#800080;font-size:1.3em;">
   Hier Kommt das Inhalt </p>

Markieren

gif Ich habe ein einfaches Rezept um fit zu bleiben - Ich laufe jeden Tag Amok. Hildegard Knef

Wünsche allem viel spaß beim üben lernen und gestallten .Einfach immer sch ön am Ball bleiben :-)


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p style=" padding:2%; border: 1px solid #000080; width: 96%; ">
   <img src=" BILD URL " style="border: 0px;float: left; margin:2%" />
  Text Text
   </p>

Markieren

Nach oben

Design by HomepageHelfer.org and © Hinweise & TEAM