Définit un en-tête de tableau |
| |
Définit la date ou l'heure |
|
Définit le titre du document |
|
| Définit une ligne de table |
|
Définit les pistes de texte pour audio ou vidéo |
|
Définit une liste non ordonnée |
|
Définit un fichier vidéo ou une vidéo |
|
|
|
L'anatomie des feuilles de style en cascade (CSS) |
|
Les feuilles de style en cascade (CSS) sont un langage de feuille de style utilisé pour décrire la sémantique de présentation des éléments d'un document Web. écrit dans un langage de balisage simple. |
La syntaxe CSS est composée de deux parties: le
sélecteur
et le
bloc entre accolades. Dans le bloc de déclaration, vous pouvez avoir plusieurs déclarations. Chaque déclaration est composée de deux parties - la propriété et la valeur :
p {font-face: Géorgie, Tahoma; color: # ffcc00;} Dans cet exemple:
p est le sélecteur.
{font-face: Géorgie, Tahoma; color: # ffcc00;} est le bloc de déclaration.
font-face: Géorgie, Tahoma; et couleur: # ffcc00; sont des déclarations séparées.
-
font-face est une propriété et en Géorgie, Tahoma est sa valeur.
-
la couleur est une seconde propriété et # ffcc00; est sa valeur.
-
Quatre types de feuilles de style en cascade dans la conception Web
-
Les feuilles de style en cascade (CSS) se répartissent en quatre types (ou styles) différents. Lorsque vous comprendrez le fonctionnement de ces quatre types différents, vous styliserez plus efficacement vos pages Web.
-
Pour que votre feuille de style reste organisée, utilisez les balises de commentaire CSS pour identifier les différentes sections de CSS dans votre feuille de style. Par exemple, vous pouvez avoir une section pour les styles d'en-tête, pour les styles de barre latérale, pour les styles de navigation et pour les styles de pied de page. Les commentaires CSS utilisent la syntaxe / * … * /:
/ * Ceci est un commentaire * /
Style de classe (aka style personnalisé)
Les styles de classe peuvent être appliqués sélectivement à n'importe quel élément HTML en utilisant class = " customname "syntaxe. Par exemple, vous pouvez créer un style de classe appelé highlight qui a une couleur de fond jaune vif:
. highlight {background-color: # FFFF33;}
Pour appliquer ce style à n'importe quel contenu, vous devez simplement utiliser l'attribut class:
class =
"
highlight
" >> Ceci est vraiment important Les styles d'ID ID sont automatiquement appliqués à un élément HTML sur la page avec le même ID. Par exemple, si vous voulez ajouter un tag pour contenir le contenu de votre sidebar, vous donneriez à ce conteneur un ID sémantique tel que sidebar: #sidebar {background-color: # 66CCFF;} Votre code pourrait alors regarde quelque chose comme ça:
id =
"
barre latérale
" >>
Services de conception Web personnalisés … Balise Les styles de balises vous permettent de créer automatiquement redéfinissez le style et le positionnement de toute balise HTML existante, telle que body, p, h1 ou li. Par exemple, vous pouvez définir les styles de police pour toutes vos balises sur l'ensemble de votre site ou dans une section particulière:
h1 {font-family: Arial, Helvetica, sans-serif; taille de police: 1. 2em; font-weight: gras; couleur: # 8c9292; text-transform: majuscule;}
Composé
Les styles composés sont également automatiquement appliqués à un élément en fonction de son emplacement dans la page, comme toutes les balises
à l'intérieur de l'ID de la barre latérale, qui se trouve dans un conteneur parent avec l'ID de l'emballage:
#wrapper #sidebar h1 {color: # CC3300; font-family: "Times New Roman", Géorgie, Serif;}
Placer CSS dans votre conception Web
Vous pouvez utiliser les feuilles de style en cascade (CSS) dans vos pages Web de trois façons: externe, interne et en ligne.Ce que vous utilisez dépend de la façon dont vous voulez que votre design fonctionne.
CSS externe
External est le moyen préféré d'utiliser CSS. Idéalement, vous placez tous vos styles CSS dans un fichier CSS externe, puis ajoutez un lien dans toutes les pages de votre site. C'est le moyen le plus efficace de travailler, car toutes les pages reposeront sur un seul fichier CSS, ce qui rendra votre travail plus facile quand il s'agit de modifier vos styles sur l'ensemble d'un site Web.
Un lien vers un fichier CSS externe est ajouté au code sur chaque page avant la balise de fermeture:
Pour
importer
une feuille de style externe au lieu de la lier à une, insérez les balises de style et de commentaire avant la balise de fermeture:
@import url ("stylesheet.css");
-> CSS interne interne est bon pour l'utilisation d'une seule page et pendant le développement, mais pas pour les sites Web finis. Parfois, les concepteurs incluent une feuille de style CSS interne sur une seule page pour remplacer les liens vers des fichiers CSS externes. Pour ajouter en interne CSS à une seule page, placez vos styles CSS entre une paire de balises avant la balise de fermeture de votre page: 999 {background-image: url ("images / pattern.gif");} p {font -family: verdana, arial, sans-serif;}
Inline CSS Il peut arriver que vous deviez surcharger les styles CSS internes et externes à l'aide de CSS en ligne. Inline n'est pas conseillé sauf si c'est le meilleur ou le seul moyen d'appliquer un style à un objet ou un élément dans le code HTML. Pour ajouter du CSS en ligne avec votre code, ajoutez la définition du style à votre balise HTML d'ouverture: style = "couleur: # 3399CC; taille-police: 18px;" >> Le système solaire
Neuf catégories CSS de base à utiliser dans la conception Web
La plupart des styles CSS se répartissent en neuf catégories de style et de positionnement de base. Cette liste peut vous aider à garder une trace de tout ce que vous pouvez faire avec CSS:
TYPE: Famille de police, taille, style, poids, couleur, décoration
CONTEXTE: Couleur de fond, position de l'image et répétition > BLOC: Espacement des mots et des lettres, alignement du texte, affichage du bloc
BOÎTE: Largeur, hauteur, marge et marge d'un élément, flottant, clair
BORDER: Style de bordure, largeur, couleur pour quatre côtés un élément LISTE: Styles de listes, puces personnalisées, position de la balle
POSITIONNEMENT: Position, taille, visibilité, index z, placement et clip des éléments
EXTENSIONS: Effets spéciaux de curseur et de filtre, saut de page
|