La meilleure façon de commencer avec des styles en CSS3 est de les voir simplement comme un moyen de mise en forme des informations à l'écran. Parce que la plupart des informations que vous allez travailler avec du texte, il est plus facile de commencer avec du texte comme base pour la compréhension de styles. Commençons par cette page de base HTML5 formaté:

Un titre simple
Le texte simple pour aller avec le titre.

À l'heure actuelle, la rubrique et le paragraphe sont plutôt ordinaire. Le texte apparaît dans quelque police par défaut que vous avez choisi pour votre navigateur. Typiquement, le texte est en noir sur un fond blanc, sauf si vous avez choisi une combinaison de couleur différente.

À ce stade, vous pouvez commencer à jouer avec la page un peu pour voir comment formater différemment. La procédure suivante vous permet de modifier la page de base de sorte qu'il ressemble un peu plus intéressant. Vous pouvez utiliser n'importe quel éditeur de texte que vous voulez, tant que ne pas ajouter aucun formatage. Cependant, en utilisant un produit tel que Komodo Edit rendra la tâche beaucoup plus facile.

1. Créer un nouveau fichier de HTML5 avec votre éditeur de texte.

   Votre éditeur ne peut pas supporter les fichiers HTML5. Tout fichier texte va faire. L'utilisation d'un type de fichier spécifique signifie généralement que l'éditeur insère une partie du code pour vous automatiquement, ce qui vous fera économiser temps à taper.

2. Tapez le code de la page HTML.

   Assurez-vous que vous tapez le code exactement comme il apparaît plus tôt dans cette section.

3. Insérez le code suivant immédiatement après la

   
   
   
   
   

   La

   L'attribut type indique au navigateur la

4. Dans les entrées, tapez le code suivant.

   p {font-family: cursive-font-size: large couleur: # 0000ff-background-color: # ffff00-}

   Ce semble compliqué, mais il est vraiment pas. Le p signifie pour le

   (paragraphe) tag. Tout dans cette entrée affectera la

   balises dans votre document.

   Les accolades ({}) indiquent au navigateur que toutes les instructions de formatage entre les appliquer aux

   balises dans le document. Vous incluez toujours les accolades dans le cadre de la définition du style.

   Dans les accolades, vous voyez attribuer paires nom et valeur. Par exemple, font-family est le nom d'un attribut CSS qui définit la police à utiliser. Dans ce cas, l'attribut spécifie la police cursive par défaut pour la plate-forme et le navigateur. En utilisant les noms génériques CSS garantit que votre demande sera de produire des résultats génériquement compatibles sur toutes les plateformes, en utilisant n'importe quel navigateur.

   L'attribut font-size définit une taille relative. Dans ce cas, un grand spécifie que vous voulez faire la police grande par rapport à sa taille par défaut. Vous ne spécifiez pas une taille de police spécifique, ce qui signifie que chaque plate-forme et le navigateur peuvent rendre la police plus grande que la normale pour cet environnement particulier.

   L'attribut spécifie une couleur, vert, bleu rouge valeur à utiliser pour la couleur de la police. La valeur est précédé d'un dièse (#) suivi par les valeurs de couleur hexadécimales de 0 à ff. Dans ce cas, la police sera la plus brillante bleu soutenu par la plate-forme. De même, l'attribut background-color spécifie l'arrière-plan pour le texte, qui sera jaune dans ce cas.

5. Enregistrez la page et de le charger dans votre navigateur.

   Vous voyez les effets de la modification de style comme le montre la Figure 1-2. Votre page peut être différente de celle sur cette page parce que votre plate-forme ou un navigateur peuvent utiliser des valeurs différentes pour la famille de la police ou la taille de police.

   

6. Tapez le code suivant après la p style au sein de la

   h1 {font-family: "Times New Roman", la Géorgie, serif-font-size: 40px; text-align: center-text-decoration: underline-color: # FF0000-background-color: # 00ffff-}

   Ce style affecte le

   entrées de variables et il a beaucoup des entrées utilisées pour la

   style de tag. Toutefois, notez que cette fois l'attribut font-family contient trois entrées: La valeur Times New Roman est le plus spécifique, suivie par la Géorgie, suivie de la moins spécifique - serif. Lorsque vous travaillez avec une valeur qui contient des espaces, vous devez placer la valeur entre guillemets, comme illustré.

   En utilisant l'approche à trois entrée vous donne plus de contrôle sur l'apparence de la sortie, mais permet encore pour les navigateurs qui ne supportent pas une police spécifique pour afficher le contenu correctement. Lors de la fourniture d'une police spécifique, assurez-vous que vous fournissez également des polices moins spécifiques pour les navigateurs qui ne disposent pas de l'accès à votre police spécifiée.

   L'attribut font-size est également différente. Cette fois, le style utilise une taille spécifique de 40 pixels. Même si une valeur spécifique, il peut être possible de créer des effets spéciaux à l'écran, en utilisant une valeur spécifique crée également des problèmes. Une entrée de 40px fonctionnera très bien sur le bureau ou un ordinateur portable, mais peut causer des problèmes avec une tablette, et va certainement faire l'impossible pour afficher le contenu sur un smartphone.

   Ce style comprend également certaines entrées qui changent l'apparence du texte. L'attribut text-align détermine l'endroit où le texte est placé sur l'écran, tandis que l'attribut text-decoration détermine les fonctionnalités de polices spéciales. Dans ce cas, la police est affiché centré à l'écran avec un trait de soulignement.

7. Enregistrez la page et de le charger dans votre navigateur.

   Vous voyez les effets de la modification de style comme le montre la Figure 1-3. Le titre apparaît en rouge sur un fond bleu pâle, et le paragraphe est affiché comme du texte bleu sur un fond jaune.