Polices - CSS - Apprendre HTML de base

Précédent ◈ Suivant

Polices (faces de type) jouent un rôle important dans l'apparence d'une page Web. Si aucune autre modification sont spécifiés, les navigateurs sont programmés pour utiliser une police par défaut:

Ceci est la police par défaut du navigateur (Times New Roman, noir).

Arial
Arial Black
Comic Sans MS
Courrier
Courier New
Impact
Times New Roman
Trebuchet MS
Verdana

Il y a deux façons de changer la police par défaut dans les navigateurs:

Styles HTML polices

styles de police HTML sont la méthode originale de changer la police par défaut (qui fonctionne toujours, par la voie). Cela nécessite entourant le texte avec une étiquettes et en spécifiant le type de police (style de type), la taille et la couleur - dans chaque paragraphe, la sélection de texte ou à la mi-phrase changement de police.

Notez que nous avons ajouté sans-serif à notre sélection de visage de la police:

Ceci est une police.

Cela peut être assez occupé; Notez que les balises de police sont imbriquées (il peut effectivement empirer, mais cela suffit à des fins d'illustration).

C'est un Police de caractère .

Styles CSS polices

C ascading S tyle S euilles: un "style" est un style de police. Entre autres choses, CSS est une méthode de spécifier comment afficher les polices. Les spécifications « en cascade », car les spécifications ultérieures remplacent les précédentes, tout comme un ordre plus tard remplace une précédente.

Il y a trois façons de mettre en œuvre des styles CSS; ceux-ci ont priorité ou « cascade » comme suit, la dernière primauté sur la première:

Cependant, comme avec tous les Web choses, nous vous suggérons de tester vos résultats dans plusieurs navigateurs.

. Styles en ligne

Style en ligne.

Notez que vous n'avez pas généralement de transformer des styles CSS avec une balise de fermeture.

. Styles internes (page à l'échelle)

styles CSS peuvent être appliqués à une page entière.

Mieux encore: vous pouvez spécifier qu'ils appliquent aux balises HTML - et peuvent aussi faire vos propres styles à appliquer où vous le souhaitez.

Tout d'abord, mettre en place la zone CSS dans la marque. Tout d'abord, nous identifions dans un

. Restyling balises HTML

Ensuite, nous allons attribuer un nouveau style à la

tag, qui sera ensuite prendra effet dès que le

tag est utilisé sans que vous ayez à faire quoi que ce soit d'autre. Nous spécifier la couleur. taille de police. et la famille de polices.

Notez que nous utilisons les « accolades » - et -> dans notre cahier des charges de style.

Enfin, notez que vous pouvez attribuer des tailles de police en points (pt) ou pixels (px).

Résultats. le style p prend effet à chaque fois que vous utilisez un

tag - sans ajouter quoi que ce soit d'autre à l'étiquette!

Ceci est le nouveau style p!

. Classes - Styles personnalisés

Nous allons faire un style personnalisé appelé à appliquer où nous voudrons. Styles personnalisés sont appelés « classes ». Notez également que notre style personnalisé, .title. a une période devant elle, ce qui indique qu'il est une classe. Vous pouvez nommer quoi que ce soit des classes que vous voulez, mais ne pas oublier la période!

Pour utiliser notre style personnalisé ou « classe », on ajoute à une balise HTML en utilisant la spécification « classe »; noter que nous n'utilisons la période lors de son insertion dans le code HTML - et qu'il peut être ajouté à une étiquette qui a déjà un style attribué:

Ceci est la balise p avec la classe Titre ajouté.

Modification de styles internes est simple: il suffit de changer les styles dans la marque.

Remarques. le nom du fichier de feuille de style doit se terminer par Css.
Assurez-vous que le lien vers la feuille de style est correct; qui est, si stylesheet.css est dans votre racine ou le dossier « principal », puis les pages des sous-dossiers doivent faire référence comme href = « ../ stylesheet.css » pour indiquer qu'il est un dossier vers le haut.

Le codage des styles dans la feuille de style lui-même est le même que pour les styles en ligne sans aucune autre notations:

C'est tout ce qu'il faut!

. Span Tag

C'est un manifestation phrase.

Ceci est un demonstrationsentence.

. A (courte) liste des styles CSS

Ceci est une très courte liste de styles CSS de:

Gardez à l'esprit qui prennent en charge tous les navigateurs CSS; toujours tester vos pages dans plusieurs navigateurs. Lesquels? Cela dépend de ce que votre public utilise.

Pour créer des liens correspondent à vos styles, les classes peuvent être appliquées aux liens via la balise href.

Voici un lien avec une classe ajouté.

. texte Rollovers

« Rollovers » se réfèrent à des images qui changent lorsque votre curseur sur eux, comme un bouton de menu qui semble enfoncé lorsque vous curseur dessus. Qu'est-ce qui se passe réellement est que, lorsque vous curseur sur le bouton d'origine, il est « troqué » pour une autre image:

un tel menu nécessite le jeu original des images de bouton, un ensemble d'images bouton « déprimé », et un tas de code pour effectuer la transition entre les deux. Cela provoque votre taille de la page et la page globale du temps de téléchargement pour augmenter (réduisant votre marge de manœuvre pour l'utilisation d'autres images) - et nécessite de déconner avec des images chaque fois que vous voulez changer le menu.

Heureusement, CSS nous donne quelques outils ici aussi: la possibilité de faire un lien texte régulier pour changer l'apparence lorsque vous curseur dessus. En CSS, cet effet est appelé vol stationnaire. Pour le démontrer, nous allons faire un lien de menu. Supposons que nous ne voulons pas les liens du menu à souligner d'abord:

Le code pour le lien lui-même (notez que la classe CSS est appliquée sur le lien plutôt que le

marque):

Accueil

Maintenant, le curseur sur notre lien de menu: Accueil
[Note: les renversements de texte n'affichent pas dans Adobe Acrobat,
vous pouvez les voir dans notre menu DianeV Web Design Aide.]

Notre style « vol stationnaire » ci-dessus est appliqué à un. c'est tous un href balises. Si vous voulez attribuer des styles « rollover » séparés pour des liaisons régulières et des liens de menu:

CSS: Questions

Pour plus d'informations sur CSS (et exemples d'usage), visitez w3schools.com. Si vous aimez CSS, préparez-vous à être heureux!

Articles Liés

Précédent ◈ Suivant