CSS CHAPITRE 2 - SYNTHAXE

Les Regles du CSS

Le CSS comprend des règles de style qui sont interprétées par le navigateur et ensuite appliquées aux éléments correspondants dans votre document. Une règle de style est composée de trois parties:

Le Sélecteur (Selector en anglais ):Un sélecteur est une balise HTML à laquelle un style sera appliqué. Il peut s'agir de n'importe quelle balise comme <h1> ou <table> etc.
La Propiete (Property en anglais ) :Une propriété est un type d'attribut de balise HTML. En termes simples, tous les attributs HTML sont convertis en propriétés CSS. Ils peuvent être des couleurs, des bordures, etc.
La Valeur (Value en anglais ) : Des valeurs sont attribuées aux propriétés. Par exemple, la propriété couleur peut avoir la valeur red ou #F1F1F1 c'est genial .vous pouvez mettre la syntaxe de la règle de style CSS comme suit :

selector {property:value }

Ou encore vous pouvez définir une bordure de tableau comme suit :

table{ border :3px solid #C00; }

Le tableau ci-dessus est un sélecteur et la bordure est une propriété et la valeur donnée 3px solide #C00 est la valeur de cette propriété. Vous pouvez définir les sélecteurs de différentes manières simples en fonction de votre confort.

Laissez-moi vous présenter ainsi ces sélecteurs un par un .

Les sélecteurs universels

Plutôt que de sélectionner des éléments d'un type spécifique, le sélecteur universel correspond tout simplement au nom de n'importe quel type d'élément :

color:#000000;

}

Cette règle de style vas rendre le contenu de chaque élément de notre document en noir.

Les sélecteurs de descendants

Supposons que vous vouliez appliquer une règle de style à un élément particulier uniquement lorsqu'il se trouve à l'intérieur d'un élément particulier. Comme indiqué dans l'exemple suivant, la règle de style s'appliquera à l'élément <em> uniquement lorsqu'il se trouve à l'intérieur de la balise <ul>.

ul em {

color:#000000;

}

Les sélecteurs de descendants

ul em {

color:#000000;

}

Les sélecteurs de classe

Vous pouvez définir des règles de style basées sur l'attribut de classe des éléments. Tous les éléments ayant cette classe seront formatés selon la règle définie.

.black {

color:#000000;

}

Cette règle de style rend le contenu en noir pour chaque élément dont l'attribut de classe est défini en noir dans notre document. Vous pouvez la rendre un peu plus précise. Par exemple :

h1.black{

color:#000000;

}

Cette règle de style rend le contenu en noir uniquement pour les éléments <h1> dont l'attribut de classe est fixé à toblack. Vous pouvez appliquer plus d'un sélecteur de classe à un élément donné. Prenons l'exemple suivant :

Coucou Panda Codeur , ton paragraphe est style par le centre des classes et en gras Genial.

</p>

Les sélecteurs d'ID ( d'identité )

Vous pouvez définir des règles de style basées sur l'attribut id ( d'identité ) des éléments. Tous les éléments ayant cet identifiant seront formatés selon la règle définie.

#black {

color:#000000;

}

Cette règle rend le contenu en noir pour chaque élément dont l'attribut est défini en noir dans notre document. Vous pouvez la rendre un peu plus précise. Par exemple :

h1#black {

color:#000000;

}

Cette règle rend le contenu en noir pour seulement <h1> les éléments dont l'attribut id est toblack.la vraie puissance des idselectors est lorsqu'ils sont utilisés comme base pour les sélecteurs descendants.par exemple :

#black h2 {

color:#000000;

}

Dans cet exemple, toutes les rubriques de niveau 2 seront affichées en noir lorsque ces rubriques se trouveront dans des balises dont l'attribut d'identification est défini par la couleur noire.

Les sélecteurs d'enfants

Vous avez vu les sélecteurs de descendants. Il existe un autre type de sélecteur, qui est très similaire aux sélecteurs de descendants, mais dont les fonctionnalités sont différentes. Prenons l'exemple suivant :

body >p {

color:#000000;

}

Cette règle rendra tous les paragraphes en noir s'ils sont un enfant direct de l'élément <body>. D'autres paragraphes placés à l'intérieur d'autres éléments comme <div> ou <td> n'auraient aucun effet de cette règle.

Les sélecteurs d'attributs

Vous pouvez également appliquer des styles aux éléments HTML ayant des attributs particuliers. La règle de style ci-dessous permet de faire correspondre tous les éléments d'entrée ayant un attribut de type avec la valeur du texte :

input[type="text"]{

color:#000000;

}

L'avantage de cette méthode est que l'élément <input type="submit" /> n'est pas affecté et que la couleur n'est appliquée qu'aux champs de texte souhaités.

Les règles suivantes s'appliquent à l'attribut selector

p[lang]-Sélectionne tous les éléments de paragraphe ayant un attribut alang. p[lang="fr"]-Sélectionne tous les éléments de paragraphe dont l'attribut alang a une valeur exactement "fr".
p[lang~="fr"]-Sélectionne tous les éléments de paragraphe dont l'attribut alang contient le mot "fr".
p[lang|="en"]-Sélectionne tous les éléments de paragraphe dont l'attribut alang contient des valeurs qui sont exactement "en", ou commencent par "en-".

Règles de style multiples

Vous pouvez avoir besoin de définir plusieurs règles de style pour un seul élément. Vous pouvez définir ces règles pour combiner plusieurs propriétés et les valeurs correspondantes en un seul bloc comme défini dans l'exemple suivant :

h1 {

color:#36C;

font-weight:normal;

letter-spacing:.4em;

margin-bottom:2em;

text-transform:lowercase;

}

Ici, toutes les paires de propriétés et de valeurs sont séparées par un point-virgule ( ; ). Vous pouvez les conserver sur une seule ligne ou sur plusieurs lignes. Pour une meilleure lisibilité, nous les gardons sur des lignes séparées. Pendant un certain temps, ne vous préoccupez pas des propriétés mentionnées dans le bloc ci-dessus. Ces propriétés seront expliquées dans les prochains chapitres et vous pouvez trouver le détail complet des propriétés dans les références du CSS.

Regroupement des sélecteurs

Vous pouvez appliquer un style à plusieurs sélecteurs si vous le souhaitez. Il suffit de séparer les sélecteurs par une virgule, comme indiqué dans l'exemple suivant:

h1,h2,h3 {

color:#36C;

font-weight:normal;

letter-spacing:.4em;

margin-bottom:1em;

text-transform:lowercase;

}

Cette règle de style définie sera également applicable aux éléments h1, h2 et h3. L'ordre de la liste n'est pas pertinent. Tous les éléments du sélecteur se verront appliquer les déclarations correspondantes.

Vous pouvez combiner les différents sélecteurs de classe comme indiqué ci-dessous :

#content, #footer, #supplement {

position:absolute;

left:510px;

width:200px;

}