Ligne verticale CSS
Exemple 1
Nous utilisons le code Visual Studio pour générer un nouveau fichier. Le fichier vierge s'ouvre, et nous devons choisir une langue. Nous faisons d'abord du code HTML, nous choisissons donc la langue HTML. Après cela, le fichier produit est un fichier html. Nous n'avons pas besoin de donner une extension de fichier lors de l'enregistrement. Maintenant, mettez les balises HTML de base (ou vous pouvez mettre le «!”Mark pour générer automatiquement ces balises). Si vous mettez "!"Et puis appuyez sur" Entrée ", vous obtiendrez immédiatement toutes les balises fondamentales du HTML. Dans le corps, vous pouvez voir qu'il y a une rubrique et un conteneur div. Le «v1» est le nom du conteneur div. Nous lions également ce fichier HTML avec le CSS en utilisant la balise «lien» dans la «tête» de ce code HTML.
Nous décorions le titre et l'utilisons la propriété «text-decoration» et la définissons sur «souligner». Ainsi, en utilisant cette propriété, le titre sera souligné. Nous utilisons également la propriété «couleur» qui définit la couleur du texte de l'en-tête et la définissait sur «bleu-violet». Dans la ligne suivante, nous avons la propriété «Font-Family» que nous avons définie comme «Times New Roman». Ensuite, nous plaçons le nom du conteneur div qui est «v1» et dessinons la ligne verticale dans ce conteneur div. Nous pouvons tracer la ligne verticale en utilisant la propriété «Border».
Ainsi, nous utilisons cette propriété de propriété «border-gauche» qui nous aide à tracer une ligne verticale. Comme c'est la propriété «border-gauche», nous devons définir la «largeur», le «type» et la «couleur» pour cette propriété à: «10px» dans sa «largeur», «solide» dans «type» et «Rouge» en «couleur». Il rendra une ligne verticale sur l'écran de la largeur de 10px et en rouge. Nous avons également réglé la «hauteur» de cette ligne verticale comme «400px». Maintenant, nous allons produire la sortie de ce code en cliquant sur le bouton droit de la souris, puis en sélectionnant «Ouvrir dans le navigateur par défaut». Ou, vous pouvez utiliser le raccourci qui est «Alt + B» pour obtenir la sortie.
La sortie est indiquée ci-dessous. Vous pouvez voir la ligne verticale. Cette ligne est rendue sur le côté gauche car nous avons utilisé la propriété «Border-Left» pour tracer cette ligne verticale.
Exemple 2
Dans l'exemple 2, nous ajoutons un paragraphe dans le code HTML ci-dessus. Maintenant, nous avons une rubrique, un paragraphe et un conteneur Div dans ce code HTML. Après cela, nous nous dirigeons vers le fichier CSS pour générer le code CSS.
Décorez un peu le titre en appliquant la propriété «text-decoration» et en le définissant sur «pointillé» et en utilisant le «rouge» comme valeur de la propriété «couleur». L '«Algérien» est utilisé comme «Font-Family». Maintenant, appliquez un peu de style au paragraphe et définissez sa «taille de police» à «20px». Nous utilisons «vert» comme valeur de la propriété «couleur». Utilisez également «Calibri» comme «Font-Family». Le mot-clé «audacieux» est utilisé ici comme «poids de police».
Utilisez le div nommé «V1» et mettez la propriété «Border-Left». Cette propriété aide à tracer une ligne verticale à l'intérieur du récipient Div. La «largeur» de la ligne verticale est «10px». Cette ligne apparaît en type «solide» car nous définissons «solide» comme type de propriété frontalière. La couleur de la ligne verticale est «orange». La «hauteur» détermine la hauteur de la ligne que nous avons définie comme «400px». La «position» de la ligne verticale est «absolue». Nous avons réglé la «gauche» à «50%» afin que cette ligne verticale apparaisse sur la moyenne du côté gauche à 50% au centre. Le «marge-gauche» est «-3px». Cette propriété est utilisée pour définir l'espace à l'extérieur de l'objet sur le côté gauche. Nous avons également réglé le «haut» de la ligne verticale comme le «50px».
La ligne verticale apparaît à 50% du côté gauche de l'écran de sortie car nous définissons cette valeur dans le CSS et nous avons utilisé la propriété «Border-Left» pour tracer cette ligne.
Exemple 3
Maintenant, nous allons tracer deux lignes verticales. Nous avons donc mis deux conteneurs Div différents dans ce code HTML. Nous utiliserons chaque div pour dessiner des lignes verticales séparément. Les étiquettes de cap et des paragraphes sont les mêmes que ci-dessus et nous modifions simplement le texte qui est écrit dans les balises de paragraphe.
Dans ce cas, la «Font-Family» est «algérienne» pour le titre. Définissez la «taille de police» du paragraphe sur «20px» et appliquez plus de style. Pour la «couleur», nous utilisons le «violet». Utilisez également «Times New Roman» comme «Font-Family». Le mot-clé «Bold» est utilisé comme «poids de police». Nous «soulignons» également le texte du paragraphe en utilisant la «décoration de texte». Nous utilisons la propriété «Border-Left» sur la div nommée «V1."Cet attribut permet de tracer une ligne verticale dans le conteneur div. La «largeur» de la ligne verticale est «12px» et la ligne est «solide» en apparence car le type de propriété frontalière est «solide». Dans ce cas, la ligne verticale est colorée «bleu». La hauteur de la ligne spécifie dans la «hauteur», que nous mettons à «400px». La «position» de la ligne verticale est «absolue». Nous avons réglé la «gauche» à «50%», donc cette ligne verticale se présentera du côté gauche à 50%, qui est au milieu. Le «-3px» est le «marge-gauche."Le" Top "ici est" 130px ".
Maintenant, nous utilisons à nouveau les mêmes propriétés pour la deuxième div en créant une autre ligne verticale dans la deuxième div. Nous avons réglé la propriété «Border-Left» sur «12px Solid Green» et la «hauteur» pour cette ligne est la même que la première ligne verticale qui est «400px». Nous avons réglé sa propriété «gauche» à «20%» et cette ligne apparaîtra à 20% sur le côté gauche. La «marge-gauche» et le «haut» sont les mêmes que la première ligne verticale.
Nous pouvons voir que deux lignes verticales rendent sur l'écran de sortie. Les deux sont rendus dans une position différente dans la sortie alors que nous définissons cette position dans le code CSS.
Exemple 4
Nous mettons une rubrique et une div dans le corps et nous écrivons également du texte dans le conteneur div. Nous tracerons également une ligne verticale en CSS et lierons les deux fichiers.
Ajustez la propriété «Text-Decoration» à «souligner» et «vert» comme «couleur» pour ajouter un flair supplémentaire à l'en-tête. La «Font-Family» de l'en-tête est «algérienne» dans cet exemple et elle est alignée dans le «centre». Sur la div, nous utilisons l'attribut «frontseur-droit». Dans le conteneur Div, cet attribut permet de tracer une ligne verticale. La «largeur» de la ligne verticale est «10px» et la ligne apparaît «solide» car le type de la propriété frontalière est «solide». La ligne verticale est colorée «Goldenrod» dans ce code. La «hauteur» indique la hauteur de la ligne, que nous avons ajustée à «500px». Nous utilisons la couleur «marron» pour la «couleur». Modifier la «taille de police» du texte à «23px» et y ajouter une décoration supplémentaire. Le mot-clé «audacieux» est utilisé comme «poids de police» ici. De plus, en tant que «Font-Family», utilisez «Sans-Serif».
Dans cette capture d'écran, la ligne verticale est rendue sur le côté droit de l'écran de sortie parce que nous avons utilisé la propriété «bordure-droite» dans cet exemple.
Conclusion
Le but de présenter ce guide est de vous aider à comprendre la «ligne verticale» dans CSS. Nous avons parcouru cette notion en détail et vous avons donné plusieurs exemples de la façon dont nous avons tracé cette ligne verticale dans CSS. Nous avons expliqué que nous avons utilisé la propriété «border-gauche» ou «border droite» pour rendre cette ligne verticale dans l'écran de sortie. Nous avons écrit ici sur la façon de rendre les lignes verticales. Nous avons utilisé quatre exemples distincts ici, et nous avons donné la sortie dans ce guide.