Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML. Si vous souhaitez parcourir le tutoriel CSS, veuillez cliquer ici.
Ci-dessus: Disposition de la langue-CSS du marquage . Chapitre 13 Spécifiez un style de texte
Je pense que c'est une bonne idée de discuter de la pratique de l'utilisation de CSS pour définir les styles de texte dans un chapitre. D'une manière générale, le traitement du contenu du texte est probablement l'endroit où CSS est le plus utilisé, même pour les sites Web qui ne sont pas entièrement conformes aux normes. Supprimer les balises récurrentes sur les pages Web était autrefois (maintenant) très attrayante pour les concepteurs, et il n'est pas difficile de voir l'énorme avantage de l'utilisation de CSS pour contrôler l'impression de texte, c'est-à-dire en séparant davantage les méthodes de contenu et d'affichage.
D'après de nombreux exemples précédents, nous savons que CSS peut gérer de nombreuses situations, et la définition de styles de texte est le moyen le plus simple d'ajouter des éléments de conception pour les pages Web les plus élémentaires. Dans le même temps, l'ajout de CSS au texte peut également nous empêcher d'ajouter des images inutiles dans la page.
Dans ce chapitre, nous verrons comment CSS prend un morceau de texte ennuyeux et ordinaire à une autre hauteur (dans de nouvelles couleurs, tailles et polices). Comment rendre l'hypertexte plus frais?
La spécification des styles de texte est l'un des meilleurs travaux dans lesquels CSS est bon, même lorsqu'il est confronté à des navigateurs qui sont légèrement anciens et qui prennent en charge incomplètement les fonctions avancées CSS. Dans le passé, les concepteurs et les développeurs pourraient vouloir créer des pages Web insupportables et difficiles à utiliser selon les normes d'aujourd'hui lors de la conception de textes pour obtenir des effets de taille et de gras (avez-vous déjà vu des pages Web où les textes sont principalement représentés par des images? Mais vous utilisez des navigateurs de texte ...)
Afin de vous fournir quelques alternatives à l'utilisation d'images et de répondre à la question ci-dessus, dans ce chapitre, vous commencerez par un paragraphe de texte qui n'a pas encore été stylé, et y ajouterez progressivement diverses règles CSS, ce qui en fait une conception convaincante. Les temps en constante évolution
Commencez par regarder un texte qui sera traité dans la police prédéfinie du navigateur. Dans mon cas, la police prédéfinie est de 16 pixels. Utilisez le navigateur Safari sur Mac OS X. Si vous utilisez Windows XP et démarrez ClearType, vous pouvez voir un effet similaire.
Les temps (ou variant les temps New Roman) sont des polices prédéfinies pour de nombreux navigateurs, cependant, cela est facilement modifié par les utilisateurs en leurs propres polices préférées, vous ne pouvez donc certainement pas compter sur cette valeur prédéfinie.
La figure 1301 montre le contenu texte que nous avons utilisé dans ce chapitre qui n'a pas été ajouté avec le style: un titre simple marqué avec <h1>, et voici trois conseils pour la décoration domestique.
Figure 13-1 Le navigateur affiche le titre, et l'effet prédéfini du texte modifie la hauteur de la ligne
L'un des effets de style de texte les plus simples et les plus efficaces est l'attribut linéaire-hauteur. L'ajout d'espace supplémentaire entre chaque ligne de texte peut rendre les paragraphes de texte plus faciles à lire, plus attrayants et également apporter de merveilleux effets à votre page.
Vous pouvez compléter cette technique en ajoutant les règles CSS suivantes à la balise <body>. Bien sûr, vous pouvez également ajouter cette règle à d'autres balises, telles que le simple fait de changer la hauteur de la ligne de <p>.
corps {
hauteur de ligne: 1.5EM;
}
La signification de ce code est: la hauteur de ligne du texte sur la page doit être 1,5 fois la hauteur du texte. J'aime utiliser des unités EM lors de la spécification de la hauteur de ligne, car elles changeront avec la taille de la police.
La figure 13-2 montre l'effet après avoir ajouté la hauteur de ligne.
Figure 13-2 Effet après le texte préréglé plus la hauteur de ligne
Il a fière allure et les résultats qu'un petit hauteur de ligne peuvent atteindre sont incroyables.
Page précédente 2 3 3 4 5 Page suivante Lire le texte intégral