Style de contenu en HTML – PHPGurukul
- in JavaScript
Style de texte
Le style de texte comprend la famille de polices, la taille de la police, le style de la police, l’épaisseur de la police, la variante de la police.
| Police de caractère | Valeur |
| famille de polices | Arial, Times New Roman, Courier New, Géorgie, Verdana |
| taille de police | 9px, 10px …………… .Grand |
| le style de police | Normal, italique, oblique |
| Poids de la police | Normal, gras, nombre |
| Variante de police | Normal, petites capitalisations |
Exemple 1
Content Style
Hello Friend's Welcome to PHPGurukul
Production
Bonjour ami Bienvenue à PHPGurukul
Explication
«Font-family, font-size, font-style, font-weight, font-variant» spécifie le style de texte de la police.
Espacement
le épaisseur de ligne peut spécifier l’espacement des lignes.
le espacement des mots peut spécifier l’espacement des mots.
le l’espacement des lettres peut spécifier l’espacement des lettres.
Exemple 2
Content Style
Line Spacing Sample.
Word Spacing Sample.
Letter Spacing Sample.
Production
Échantillon d’espacement des lignes.
Exemple d’espacement des mots.
Échantillon d’espacement des lettres.
Explication
« hauteur de ligne: 500%} » spécifie la hauteur de la ligne à 500%.
«Word-spacing: 10px» spécifie l’espacement des mots sur 10px.
«Letter-spacing: 5px» spécifie l’espacement des lettres comme 5px.
Style divisé
La division
les balises sont utilisées pour regrouper leurs éléments de contenu sous forme de blocs.
le
Exemple 3
Content Style
AAAAA
BBBBB
CCCCC
EEEEEE
FFFFFF
GGGGGG
Production
Explication
est divisé en premier groupe qui contient trois paires de
ils utilisent le style «.d1».
est divisé en deuxième groupe qui contient trois autres paires de
balises ils utilisent le style «# d2».
Style de portée
peut être utilisé pour regrouper des éléments à des fins de style (en utilisant l’attribut class ou id).
le La balise peut avoir un attribut id et class dans le style CSS.
Exemple 4
Content Style
This is AAAAA text,This is BBBBB text,This is CCCCC text, This is DDDD text,This is EEEEE text
Production
Ceci est un texte AAAAA,Ceci est du texte BBBBB,Ceci est le texte CCCCC, Ceci est du texte DDDD,Ceci est un texte EEEEE
Explication
Les utilisations ci-dessus balises pour définir le style css de deux morceaux de texte dans un paragraphe contenus dans un bloc.
ressemble beaucoup à
Style de bordure
border-style: value«Border-style: value» peut définir le style de bordure en spécifiant une valeur différente. La «valeur» peut être «solide, double, pointillé, pointillé, rainure, crête, encart, départ».
Exemple 5
Content Style
This is solid border
This is double border
This is dashed border
This is dotted border
This is groove border
This is ridge border
This is inset border
This is outset border
Production
C’est une frontière solide
C’est une double frontière
C’est une bordure en pointillés
C’est une bordure pointillée
C’est la frontière de la rainure
C’est la frontière de la crête
C’est une bordure incrustée
C’est la frontière de départ
Explication
Le «style de bordure: valeur» peut être «solide, double, pointillé, pointillé, rainure, crête, encart, départ».
Le paramètre «border-width: 10px» spécifie la largeur de la bordure à 10 px.
Couleur de la bordure
border-color: value«Border-color: value» peut définir les propriétés de bordure pour la couleur.
Exemple 6
Content Style
This is groove border
This is ridge border
Production
C’est la frontière de la rainure
C’est la frontière de la crête
Explication
«Border-color: value» peut définir la couleur de la bordure.
Style de rembourrage
Le remplissage est la zone autour du contenu du texte dans une zone de contenu. La largeur de remplissage peut être spécifiée avec un attribut de remplissage.
padding:valueExemple 7
Content Style
This is solid border
This is double border
Production
C’est une frontière solide
C’est une double frontière
Explication
«Padding-value» peut définir la largeur de remplissage.
Style de marge
La marge est la zone autour des bords de la bordure.
La largeur de la marge peut être spécifiée avec un attribut margin.
margin:valueExemple 8
Content Style
This is solid border
This is double border
Production
C’est une frontière solide
C’est une double frontière
Explication
«Margin: value» peut définir la largeur de la marge.
Positionnement absolu
La position du contenu peut être spécifiée par l’attribut de position.
position: absolute ; top: value; left: value;«Position: absolue» définit l’emplacement précis du contenu.
«Top: value» définit la distance par rapport au bord supérieur de la fenêtre.
«Left: value» définit la distance par rapport au bord gauche de la fenêtre.
Exemple 9
Content Style
This is position 1
This is position 2
Production
C’est la position 1
Explication
«Position: absolue; haut: valeur; gauche: valeur; » spécifie la distance absolue par rapport au bord de la fenêtre du navigateur.
Positionnement relatif
position:relative;top:percentage;left:percentage«Position: relative» définit l’emplacement relatif du contenu en fonction de la résolution du navigateur ou de la taille de la fenêtre.
«Top: pourcentage» définit la distance par rapport au bord supérieur de la fenêtre. «Gauche: pourcentage» définit la distance par rapport au bord gauche de la fenêtre.
Exemple 10
Content Style
This is relatived position
Production
C’est la position relative
Explication
« Position: relative; haut: 3%; gauche: 5%} » spécifie la position relative en fonction de la résolution ou de la taille de la fenêtre du navigateur.
You Might Like
