L'élément de blocage commence toujours une nouvelle ligne. Il occupe l'espace horizontal et vertical complet. L'espace vertical est égal à la hauteur du texte. Nous avons de nombreux éléments de bloc disponibles dans CSS tels que «

"," ","

","
","
• ". Tous les titres sont des exemples de l'élément de bloc. Ils occupent autant d'espace que possible, et ils occupent l'espace par défaut. Lorsque nous utilisons la balise de paragraphe à chaque fois qu'il y a un

  Tag, il démarre une nouvelle ligne pour ce paragraphe. Il en va de même pour tous les éléments de bloc.

  Dans ce guide, nous utiliserons tous ces éléments de bloc dans nos codes et les expliquerons en détail. Nous présenterons également quelques exemples dans ce guide.

  Exemple 1

  Pour utiliser ces éléments de bloc dans notre code HTML, nous devons créer un fichier HTML. Pour cela, nous devons ouvrir le code Visual Studio, ouvrir un nouveau fichier, sélectionner la langue comme HTML et commencer le codage dans ce fichier. Dans ce guide, nous fournirons une démo de ces exemples en utilisant le logiciel Visual Studio Code. Donc, nous écrivons le code HTML et l'enregistrons. L'extension de fichier à utiliser ici est le «.html ”.

  Dans cet exemple, nous utilisons les deux éléments de bloc «

  " et "". Nous créons deux paragraphes et deux éléments «div» dans le fichier html. Nous définissons les noms des paragraphes comme «Element1» et «Element2». Nous avons également défini les noms de la classe «Div» à «D1» et «D2». Nous utiliserons ces noms dans le code CSS. La première "

  ”Occupe la ligne horizontale complète tandis que la prochaine« »commence à partir de la nouvelle ligne. Nous appliquons un peu de style à ces éléments de blocs en utilisant les propriétés CSS.

  Code CSS:

  Le code suivant est le code CSS que nous utilisons dans le style des éléments de bloc précédents. Nous utilisons ici les différentes propriétés de style.

  Nous utilisons le nom du premier paragraphe qui est «Element1» et l'écrivons comme «P.élément1 ”. Ensuite, nous appliquons les propriétés de style pour ce paragraphe. Alors que nous utilisons la «frontière» pour appliquer la frontière autour du paragraphe, vous verrez que cette frontière est rendue sur la ligne complète. Ici, le «3px» définit la largeur de la frontière, «solide» définit le type de la frontière, et «orange» est pour définir la couleur de la bordure du paragraphe. La «Font-Family» du paragraphe est établie sur «Algérien». Et le style de cette police est «italique». La taille de la police est définie sur «25px».

  Nous utilisons les mêmes propriétés et les mêmes valeurs pour le deuxième paragraphe. Nous appliquons ces propriétés sur «div». Tout d'abord, nous avons fixé le nom du div sur «Div.d1 ”puis appliquez les propriétés ici. Nous créons également la bordure autour des classes div. Pour Div, nous avons une bordure «pointillée» de «4px» en couleur «rouge». La «font-famille» de cette «div» est «Times New Roman». Nous alignons également le texte du «div» dans le «Centre». Nous avons réglé sa «taille de police» sur «30px». Toutes ces propriétés que nous avons utilisées dans le «D1» sont également utilisées dans le «D2». Ainsi, le style des deux classes div est le même.

  Sortir:

  Les deux paragraphes de cette sortie semblent être les mêmes. Vous remarquerez peut-être que la frontière occupe la ligne complète tandis que le paragraphe et Div suivant commence à partir de la nouvelle ligne. Les deux éléments div sont du même style et apparaissent dans une ligne distincte. La bordure des deux div occupe également le plein espace horizontal. Ainsi, les deux paragraphes sont des éléments de bloc.

  Exemple n ° 2

  Dans l'exemple 2, nous avons à nouveau deux paragraphes et deux div. Mais ici, les noms des paragraphes sont «E1» et «E2». Et les noms des éléments div sont «div1» et «div2».

  Code CSS:

  L'arrière-plan du paragraphe est «orange». La «Font-Family» que nous utilisons ici est «Cambria» avec une taille de «30px». La couleur de son texte est «vert». Nous utilisons les propriétés et les valeurs de ces propriétés pour le paragraphe 2. Après cela, nous stylisons le «div». Pour la div, nous utilisons une famille de police «fantastique» et la «couleur fond» de la div est définie sur «rose». La taille du texte est définie comme «taille de police: 32px». Sa couleur est réglée sur «bleu». Pour le deuxième div, les valeurs des propriétés que nous définissons pour Div 1 sont utilisées.

  Sortir:

  Ici, les couleurs d'arrière-plan pour les paragraphes et les éléments div montrent que ce sont des éléments de bloc. La couleur d'arrière-plan est appliquée à la ligne horizontale complète et à l'espace vertical.

  Exemple n ° 3

  Nous utilisons les éléments de bloc ici. Nous créons deux titres différents nommés «

  " et "

  », Et deux paragraphes différents nommés« A1 »et« A2 ». Après cela, nous avons une classe «». À l'intérieur de cette classe «», nous utilisons le «

  " et "
  • "Pour créer la liste. Tous ces éléments sont des éléments de bloc.

    Code CSS:

    Nous définissons la frontière du «div» sur «2px» qui décrit sa largeur. Le type de bordure est défini sur «solide». Et la couleur de la bordure est définie sur «violet». Le «H1» est aligné dans le «centre». La «Font-Family» que nous utilisons pour les titres est «algérien». La «couleur» décrit la couleur de la police qui est définie sur «bleu». Pour le deuxième titre, nous utilisons «l'orchidée» comme couleur du texte. Ensuite, nous avons le «Li» qui représente la liste des éléments. La «Font-Family» de cette liste est «Arial» et réglée sur «18px» en taille. La couleur du texte de la liste est définie sur «vert». Après cela, nous appliquons le style aux paragraphes, dans lesquels nous utilisons le «Times New Roman» comme «Font-Family». Le «19px» est la «taille de police» et la «couleur» du texte est définie sur «orange-rouge». Toutes les mêmes propriétés sont appliquées au deuxième paragraphe.

    Sortir:

    Exemple n ° 4

    Ici, nous avons le «» de la «liste1». À l'intérieur de ce «», nous créons le «

    ","

    ", et "

  • ", Puis fermez ce premier" ". Après cela, nous créons un autre «», un autre «

    ", et un autre "

    "Avec le nom" P2 "et un"

  • ". Encore une fois, à l'intérieur du deuxième "". Tous ces éléments que nous utilisons ici sont les éléments de bloc.

    Code CSS:

    La «couleur d'arrière-plan» de la div est définie sur «vert clair». La frontière est réglée sur «vert» et «solide» avec une largeur «4px». Le «H3» est défini comme «italique». Pour cette rubrique, nous avons réglé la «Font-Family» à «Times New Roman». La «couleur» du «H3» est «bleu». Maintenant, nous devons appliquer le style sur le «Li» qui est utilisé pour la liste. La «Font-Family» de la liste est «sans-serif», elle est de taille «20px» et de couleur «maroon». Nous utilisons le même «style de police» pour les deux titres qui est «algérien» et alignons les deux titres sur le «centre». La «couleur arrière-plan» de l'autre «div» est «rose légère». La frontière extérieure est «magenta» et est «4px» en largeur.

    Sortir:

    Ici, vous pouvez voir que la couleur d'arrière-plan que nous avons utilisée pour la div est également appliquée au paragraphe, à la tête et à la liste depuis que nous avons écrit tous ces éléments à l'intérieur du «div». La couleur de fond et la bordure sont appliquées à tous les éléments. Vous pouvez également remarquer que chaque paragraphe, le titre et la liste des articles apparaissent dans la nouvelle ligne tandis que chaque élément occupe l'espace horizontal et vertical complet. Donc, ce sont tous des éléments de bloc.

    Conclusion

    Dans ce guide, nous avons discuté du concept d'élément bloc. Nous avons appris que les éléments de blocs utilisent toujours l'espace horizontal et vertical complet, et l'élément de bloc suivant commence toujours à partir de la nouvelle ligne. Nous avons également appris qu'ils occupent l'espace par défaut. Nous avons exploré les quatre codes de ce guide, dans lesquels nous avons utilisé les propriétés HTML et CSS.Nous avons discuté de ces codes en détail dans ce guide. Nous avons également montré la sortie et expliqué les éléments de bloc en détail. Nous avons mentionné les éléments de bloc et utilisé ces éléments de bloc dans nos codes.