Latest web development tutorials

Fondation CSS Référence

par défaut Fondation

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.


texte

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

Alignement du texte

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

Aligner différentes tailles d'écran

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

autre

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