Le meilleur didacticiel Fondation CSS Référence en 2024, dans ce didacticiel, vous pouvez apprendre par défaut Fondation,texte,Alignement du texte,Aligner différentes tailles d'écran,autre,
Fondation d'utiliser la taille navigateur par défaut de la police ( font-size:100%
). Pour la plupart dispositif de navigateur de bureau, la taille de la police par défaut est 16px. Pour le navigateur pour les appareils mobiles, la taille de la police par défaut est 12px. La police par défaut est "Helvetica Neue"
, la ligne de hauteur par défaut à 1.5
.
Ces paramètres sont appliqués à <body>
élément dans l'élément.
En outre, <p>
élément extérieur et le fond de la distance (marge inférieure) est 1.25rem, hauteur de ligne de 1,6.
Les éléments HTML suivants, Fondation mis en place un style distinct rendant à ne pas utiliser le style par défaut du navigateur. Cliquez sur "essayer" pour voir par exemple en ligne.
élément | description | exemples en ligne |
---|---|---|
<H1> - <h6> | h1 - h6 rubriques | essayer |
<a> | liens bleu clair, déplacez la souris sur le lien seront soulignés | essayer |
<Small> | Lumière texte gris sous-titres | essayer |
<Blockquote> | module Citation | essayer |
<Strong> | Le texte en gras | essayer |
<Em> | italique | essayer |
<Abr> | Spécifiez le mot abréviation, utilisez l'élément apparaît en pointillés texte souligné, déplacez la souris vers le haut incitera | essayer |
<Kbd> | Recevoir les commandes d'entrée de clavier: CTRL + P | essayer |
<Hr> | niveau | essayer |
<Code> | fragment | essayer |
<Ul> | liste non ordonnée | essayer |
<Ol> | Liste Ordonné | essayer |
<Dl> | Liste descriptive | essayer |
Utilisez classe CSS pour modifier l'alignement du texte:
catégorie | description | Exemples |
---|---|---|
.text gauche | texte aligné à gauche | essayer |
.text droite | texte aligné à droite | essayer |
.text-centre | centre | essayer |
.text-justify | Justifié | essayer |
Utilisez classe CSS pour modifier l'alignement du texte des différentes tailles d'écran:
catégorie | description | Exemples |
---|---|---|
gauche | ||
.small-text-gauche | Toutes les dimensions de l'écran gauche | essayer |
.small-only-text-gauche | Petit écran gauche (largeur inférieure à 40em) | essayer |
.medium-text-gauche | La largeur est plus grande que la taille de l'écran 40.0625em Gauche | essayer |
.medium-only-text-gauche | largeur 40.0625em aligné à gauche de l'écran 64em de taille | essayer |
.Grand-text-gauche | La largeur est plus grande que la taille de l'écran 64.0625em Gauche | essayer |
.Grand-only-text-gauche | largeur 64.0625em aligné à gauche de l'écran 90em de taille | essayer |
.xlarge-text-gauche | La largeur est plus grande que la taille de l'écran 90.0625em Gauche | essayer |
.xlarge-only-text-gauche | largeur 90.0625em aligné à gauche de l'écran 120em de taille | essayer |
.xxlarge-text-gauche | La largeur est plus grande que la taille de l'écran 120em Gauche | essayer |
Aligner à droite | ||
.small-text-droite | Toutes les dimensions de l'écran justifié à droite | essayer |
.small-only-text-droite | Petit écran d'alignement à droite (largeur inférieure à 40em) | essayer |
.medium-text-droite | Largeur supérieure à la taille de l'40.0625em aligné à droite écran | essayer |
.medium-only-text-droite | largeur 40.0625em aligné sur la droite de l'écran 64em de taille | essayer |
.Grand-text-droite | Largeur supérieure à la taille de l'64.0625em aligné à droite écran | essayer |
.Grand-only-text-droite | largeur 64.0625em aligné sur la droite de l'écran 90em de taille | essayer |
.xlarge-text-droite | Largeur supérieure à la taille de l'90.0625em aligné à droite écran | essayer |
.xlarge-only-text-droite | largeur 90.0625em aligné sur l'écran de droite 120em taille | essayer |
.xxlarge-text-droite | Largeur supérieure à la taille de l'120em aligné à droite écran | essayer |
aligner | ||
.small-text-centre | Aligner toutes les tailles d'écran | essayer |
.small-only-text-centre | La petite taille de l'écran centré (largeur inférieure à 40em) | essayer |
.medium-text-centre | Une largeur supérieure à la taille de l'écran, centrée 40.0625em | essayer |
.medium-only-text-centre | largeur 40.0625em à des tailles d'écran 64em centré | essayer |
.Grand-text-centre | Une largeur supérieure à la taille de l'écran, centrée 64.0625em | essayer |
.Grand-only-text-centre | largeur 64.0625em à des tailles d'écran 90em centré | essayer |
.xlarge-text-centre | Une largeur supérieure à la taille de l'écran, centrée 90.0625em | essayer |
.xlarge-only-text-centre | 90.0625em Largeur à 120em tailles d'écran centré | essayer |
.xxlarge-text-centre | Une largeur supérieure à la taille de l'écran, centrée 120em | essayer |
Justifié | ||
.small-text-justify | Toutes les tailles d'écran est justifié | essayer |
.small-only-text-justify | Justifier la petite taille de l'écran (largeur inférieure à 40em) | essayer |
.medium-text-justify | La largeur est plus grande que la taille de l'écran 40.0625em Justifier | essayer |
.medium-only-text-justify | Alignez les deux extrémités de la largeur de l'écran à la taille 64em 40.0625em | essayer |
.Grand-text-justify | La largeur est plus grande que la taille de l'écran 64.0625em Justifier | essayer |
.Grand-only-text-justify | Alignez les deux extrémités de la largeur de l'écran à la taille 90em 64.0625em | essayer |
.xlarge-text-justify | La largeur est plus grande que la taille de l'écran 90.0625em Justifier | essayer |
.xlarge-only-text-justify | Aligner les deux extrémités de la largeur de la 90.0625em taille de l'écran à 120em | essayer |
.xxlarge-text-justify | La largeur est plus grande que la taille de l'écran 120em Justifier | essayer |
catégorie | description | Exemples |
---|---|---|
.left | Gauche-élément flottant | essayer |
.right | éléments droit flottant | essayer |
.clearfix | Float clair - doit être ajouté à l'élément élément parent flottant | |
.hide | élément caché (le CSS display: none ) | essayer |
.list-inline | Tous les éléments disposés dans la même rangée | essayer |
.lead | Soit <p> élément est plus important | essayer |
.subheader | Réglage de la lumière colorée <h1> - <h6> éléments | essayer |