"," ","

","
","
• ”. Alle Überschriften sind Beispiele für das Blockelement. Sie belegen so viel Platz wie möglich und belegen standardmäßig Platz. Wenn wir das Absatz -Tag jedes Mal verwenden, wenn es ein gibt

  Tag, es startet eine neue Zeile für diesen Absatz. Das gleiche gilt für alle Blockelemente.

  In diesem Leitfaden verwenden wir alle diese Blockelemente in unseren Codes und erläutern sie im Detail. Wir werden auch einige Beispiele in diesem Leitfaden demonstrieren.

  Beispiel 1

  Um diese Blockelemente in unserem HTML -Code zu verwenden, müssen wir eine HTML -Datei erstellen. Dazu müssen wir den Visual Studio -Code öffnen, eine neue Datei öffnen, die Sprache als HTML auswählen und in dieser Datei mit dem Codieren beginnen. In diesem Handbuch werden wir mit der Visual Studio -Code -Software eine Demo dieser Beispiele angeben. Also schreiben wir den HTML -Code und speichern ihn. Die hier zu verwendende Dateierweiterung ist die “.HTML ”.

  In diesem Beispiel verwenden wir die beiden Blockelemente “

  " Und "". Wir erstellen zwei Absätze und zwei "Div" -Anlemente in der HTML -Datei. Wir setzen die Namen der Absätze als "Element1" und "Element2". Wir setzen auch die Namen der "Div" -Klasse auf "D1" und "D2". Wir werden diese Namen im CSS -Code verwenden. Der erste "

  ”Nimmt die volle horizontale Linie ein, während der nächste„ “von der neuen Linie beginnt. Wir wenden mit den CSS -Eigenschaften einige Styling auf diese Blockelemente an.

  CSS -Code:

  Der folgende Code ist der CSS -Code, den wir verwenden, um die vorherigen Blockelemente zu stylen. Wir verwenden hier die verschiedenen Styling -Eigenschaften.

  Wir verwenden den Namen des ersten Absatzes, der „Element1“ ist, und schreiben ihn als „P.Element1 ”. Dann wenden wir die Styling -Eigenschaften für diesen Absatz an. Wenn wir die „Grenze“ verwenden, um die Grenze um den Absatz anzuwenden. Hier definiert das „3px“ die Breite des Grenze, „solide“, definiert den Typ der Grenze, und „orange“ besteht darin, die Grenzfarbe des Absatzes festzulegen. Die "Schriftfamilie" des Absatzes ist auf "algerisch" eingestellt. Und der Stil dieser Schrift ist "kursiv". Die Schriftgröße ist auf "25px" eingestellt.

  Wir verwenden die gleichen Eigenschaften und die gleichen Werte für den zweiten Absatz. Wir wenden diese Eigenschaften auf "Div" an. Zuerst setzen wir den Namen der Div auf „Div.D1 ”und dann die Eigenschaften hier anwenden. Wir schaffen auch die Grenze um die Div -Klassen. Für DIV haben wir einen "gepunkteten" Rand von "4px" in "rot" Farbe. Die „Schriftfamilie“ dieses „Divs“ ist "Times New Roman". Wir richten auch den Text des „DIV“ im „Zentrum“ aus. Wir setzen seine „Schriftgröße“ auf „30px“. All diese Eigenschaften, die wir im „D1“ verwendet haben, werden auch im „D2“ verwendet. Das Styling beider Div -Klassen ist also das gleiche.

  Ausgang:

  Beide Absätze in dieser Ausgabe scheinen gleich zu sein. Sie werden vielleicht feststellen, dass die Grenze die volle Linie einnimmt, während der nächste Absatz und Div von der neuen Linie startet. Beide Divelelemente sind im gleichen Stil und erscheinen in einer separaten Linie. Die Grenze beider Div nimmt auch den vollen horizontalen Raum ein. Beide Absätze sind also Blockelemente.

  Beispiel #2

  In Beispiel 2 haben wir wieder zwei Absätze und zwei Divelemente. Aber hier sind die Namen der Absätze "E1" und "E2". Und die Namen der Divelemente sind "Div1" und "Div2".

  CSS -Code:

  Der Hintergrund des Absatzes ist "orange". Die „Schriftfamilie“, die wir hier verwenden, ist "Cambria" mit einer Größe von "30px". Die Farbe seines Textes ist „grün“. Wir verwenden die Eigenschaften und Werte dieser Eigenschaften für Absatz 2. Danach stylen wir das „Div“. Für die DIV verwenden wir eine „Fantasy“ -Fontfamilie, und die „Hintergrundfarbe“ der DIV ist auf „Pink“ eingestellt. Die Textgröße wird als "Schriftgröße: 32px" festgelegt. Seine Farbe ist auf "blau" eingestellt. Für die zweite Div werden die Werte der für Div 1 festgelegten Eigenschaften verwendet.

  Ausgang:

  Hier zeigen die Hintergrundfarben für die Absätze und Divelelemente, dass dies Blockelemente sind. Die Hintergrundfarbe wird auf die volle horizontale Linie und den vertikalen Raum angewendet.

  Beispiel #3

  Wir verwenden die Blockelemente hier. Wir erstellen zwei verschiedene Überschriften mit dem Namen “

  " Und "

  "Und zwei verschiedene Absätze mit dem Namen" A1 "und" A2 ". Danach haben wir eine „“ Klasse. In dieser „“ Klasse verwenden wir die “

  " Und "
  • ”Um die Liste zu erstellen. Alle diese Elemente sind Blockelemente.

    CSS -Code:

    Wir setzen den Rand des „Div“ auf „2PX“, der seine Breite beschreibt. Die Art des Randes ist auf "solide" eingestellt. Und die Randfarbe ist auf "lila" eingestellt. Das "H1" ist im "Mitte" ausgerichtet. Die "Schriftfamilie", die wir für die Überschriften verwenden, ist "algerisch". Die „Farbe“ beschreibt die Farbe der Schriftart, die auf „Blau“ eingestellt ist. Für die zweite Überschrift verwenden wir die „Orchidee“ als Farbe des Textes. Als nächstes haben wir das „li“, das die Liste der Elemente darstellt. Die „Schriftfamilie“ dieser Liste ist „arial“ und auf „18px“ festgelegt. Die Farbe des Textes der Liste ist auf "Grün" gesetzt. Danach wenden wir den Stil auf die Absätze an, in denen wir die „Times New Roman“ als „Schriftfamilie“ verwenden. Das "19px" ist die "Schriftgröße" und die "Farbe" des Textes ist auf "orange-rot" eingestellt. Alle die gleichen Eigenschaften werden auf den zweiten Absatz angewendet.

    Ausgang:

    Beispiel #4

    Hier haben wir das "" der "Liste1". In diesem „“ erstellen wir die “

    ","

    ", Und "

  • ", Und schließen Sie dann das erste" ". Danach erstellen wir ein weiteres "", ein anderes "

    ", und ein anderer "

    "Mit dem Namen" P2 "und einem" "

  • ”. Wieder im zweiten "". Alle diese Elemente, die wir hier verwenden, sind die Blockelemente.

    CSS -Code:

    Die "Hintergrundfarbe" des DIV ist auf "hellgrün" gesetzt ". Der Rand ist auf „grün“ und „fest“ mit einer „4px“ -Breite eingestellt. Das "H3" wird als "kursiv" eingestellt. Für diese Überschrift setzen wir die „Schriftfamilie“ auf „Times New Roman“,. Die "Farbe" des "H3" ist "blau". Jetzt müssen wir den Stil auf dem „Li“ anwenden, der für die Liste verwendet wird. Die "Schriftfamilie" der Liste ist "sans-serif", sie ist "20px" und "Maroon" in Farbe. Wir verwenden das gleiche "Schriftstil" für beide Überschriften, die "algerisch" sind und beide Überschriften auf das "Zentrum" ausrichten. Die "Hintergrundfarbe" des anderen "Div" ist "leichte Pink". Die äußere Grenze ist "Magenta" und "4px" in Breite.

    Ausgang:

    Hier können Sie sehen, dass die Hintergrundfarbe, die wir für das DIV verwendet haben, auch auf den Absatz, die Überschrift und die Liste angewendet wird, da wir alle diese Elemente in das „DIV“ geschrieben haben. Die Hintergrundfarbe und der Rand werden auf alle Elemente angewendet. Sie können auch feststellen, dass jeder Absatz, jede Überschrift und jede Liste der Elemente in der neuen Zeile angezeigt wird, während jedes Element den vollständigen horizontalen und vertikalen Raum einnimmt. Das sind also alles Blockelemente.

    Abschluss

    In diesem Leitfaden haben wir das Blockelement -Konzept besprochen. Wir haben gelernt, dass die Blockelemente immer den vollständigen horizontalen und vertikalen Raum verwenden, und das nächste Blockelement startet immer von der neuen Linie. Wir haben auch gelernt, dass sie standardmäßig Platz belegen. Wir haben die vier Codes in diesem Handbuch untersucht, in denen wir die Eigenschaften von HTML und CSS verwendeten.Wir haben diese Codes in diesem Leitfaden ausführlich besprochen. Wir haben auch die Ausgabe gezeigt und die Blockelemente im Detail erläutert. Wir haben die Blockelemente erwähnt und diese Blockelemente in unseren Codes verwendet.