Règles d'écriture d'une définition Css - Les cours Css

Comment définir une zone css

Délimiter une zone css

En règle générale, les propriétés Css ne peuvent s'appliquer que sur une zone délimitée par une balise (X)HTML, seules les pseudo-éléments échappent à la règle, car ils ciblent des éléments précis comme la première lettre, la première ligne.
Si vous avez besoins d'appliquer une zone Css dans un bloc de texte vous pouvez utiliser la balise neutre de type "en ligne" , mais les autres balises sémantiques dites "en ligne" (b, i, dfn, ...) peuvent être utilisées mais à bon escient.

Exemple de délimitation de zone Css avec une balise span :
<p>fama vulgasset missaeque Caesarem permovissent.</p>

<p>fama vulgasset <span class="maclasse">missaeque</span> Caesarem permovissent.</p>

Si vous avez besoins de regrouper des zones Css, vous pouvez utiliser entre autre la balise neutre de type "bloc" .

Exemple de délimitation de zone css avec une balise span :
<h2>Titre</h2>
<p>fama vulgasset missaeque Caesarem permovissent.</p>
<p>fama vulgasset missaeque Caesarem permovissent.</p>

<div class="maclass">
  <h2>Titre</h2>
  <p>fama vulgasset missaeque Caesarem permovissent.</p>
  <p>fama vulgasset missaeque Caesarem permovissent.</p>
</div>

Comment écrire une définition CSS

Structure d'une déclaration CSS

Pour écrire une propriété feuilles de style css dans un fichier CSS externe ou dans une balise HTML ou XHTML style, vous devez respecter un code d'écrire qui se compose de 3 parties :

Exemple de déclaration CSS :
Chemin de ciblage{
  Propriété CSS : valeur ;
  Propriété CSS : valeur ;
}

  • le chemin de ciblage permet de spécifier à quel élément HTML va être attribué les propriétés de feuilles de style CSS.
  • le bloc conteneur { } permet de spécifier où commence et où finissent les propriétés de feuilles de style CSS assignées à l'identifiant;
  • les ou la propriété CSS sont l'ensemble des propriétés CSS à assigner.
    La propriété Css doit être suivie de ":" et de la valeur que vous voulez donner à la propriété.
    Chaque déclaration d'une propriété CSS doit se finir par un ;
Si vous respecter ces règles d'écriture, alors vous pouvez l'ensemble de la déclaration sur une seule ligne.

Lorsque vous déclarer vos propriétés de feuilles de style css dans l'attribut HTML ou XHTML style, ces propriétés de feuilles de style css prennent le dessus ou se cumulent avec les propriétés déclarées dans votre fichier externe ou dans la balise HTML ou XHTML .

Exemple de déclaration CSS dans un attribut style :
<balise style="Propriété:valeur; Propriété:valeur; ">
  Texte
</balise>

Dans ce cas-là, vous n'avez pas besoin du chemin de ciblage, puisque le style s'applique à la balise qui a l'attribut style. Vous n'avez plus besoin des { } qui sont remplacés par les " ". Mais vous avez toujours besoin de séparer les propriétés Css par un point virgule.

Cumul des propriétés Css

Les propriétés CSS se cumulent entre plusieurs déclarations

Si vous avez plusieurs déclarations qui pointent sur la même cible, toutes les propriétés différentes se cumulent.
Exemple si dans les déclarations suivantes a une nouvelle propriété CSS, alors cette dernière est cumulée avec les précédentes propriétés déclarées, quel que soit le poids des sélecteurs.

Exemple de cumul de propriétés CSS :
.identifiant{
  font-family:arial;
}
/* et plus loin dans votre code */
.identifiant{
  font-size:12px;
}
.identifiant aura donc une police arial de taille 12px.

Héritage des propriétés Css

Héritage des propriétés CSS entre plusieurs déclarations

Dans le cas où, vous avez déclaré une propriété CSS dans deux conteneurs avec le même chemin de ciblage vers un même élément HTML, alors la dernière propriété CSS déclarée remplace l'ancienne.

Exemple de déclaration double :
.identifiant{
  font-family:arial;
}
/* et plus loin dans votre code */
.identifiant{
  font-family:times;
}

Ce sera donc une police times.

Dans le cas où, le chemin de ciblage vers un même élément HTML est différent alors la valeur des propriétés CSS dépendra du poids des sélecteurs.

Exemple de chemin de ciblage différent :
#idattribut .identifiant{
  font-family : arial;
}
/* et plus loin dans votre code */
.identifiant{
  font-family : times;
}

Le poids du sélecteur du premier chemin de ciblage est plus fort, sera donc une police arial.

Regroupement de sélecteurs

Regrouper plusieurs de sélecteurs CSS

Il se peut que plusieurs cibles aient les mêmes propriétés, vous pouvez les regrouper au lieu de dupliquer les propriétés.
Pour cela vous devez lister les cibles en les séparant par une "," (virgule).
Attention : ne pas mettre de "," (virgule) après la dernière cible.

Exemple de regroupements de cibles :
b,
h1 span,
.identifiant
{
  font-family:arial;
}
/* au ieu de */
.identifiant{
  font-family:arial;
}
b{
  font-family:arial;
}
h1 span{
  font-family:arial;
}

Commentaires en CSS

Faire des commentaires en CSS

Vous serez sûrement amené à créer des commentaires CSS pour rendre plus lisible votre feuille de style.
Utiliser /* et */ pour encadrer votre commentaire.
Tout ce qui est entre /* et */ sera considéré comme un commentaire, même sur plusieurs lignes.

Exemple d'écriture de commentaires en CSS :
/* Commentaire */
/* Mon texte
d'explication */

Ne mettez pas de commentaires dans l'attribut HTML style.

La propriété Css n'est pas interprétée

Règle d'interprétation d'une propriété Css

Par définition une propriété inconnue ou dont la valeur est inconnue est ignorée.
Si dans le même "bloc conteneur", vous avez déclaré plusieurs fois une propriété Css mais avec des valeurs différentes; alors c'est la dernière déclaration valide qui prime.

Que faire si une propriété Css n'est pas interprétée

Vérifier que :

  • vous avez pas fait une faute dans l'écriture de la propriété.
  • la valeur assignée à la propriété est valide et bien écrite.
  • vous avez pas oublié de mettre un ";" ou de fermer le "bloc conteneur".
  • que le "chemin de ciblage" cible bien l'élément désiré.
  • que si vous avez un "Regroupement de sélecteurs", il ne se termine pas par une virgule.
Si tous ces cas sont bons, alors c'est que vous avez un problème d'héritage lié au poids des sélecteurs Css ou que la propriété n'est pas applicable sur ce type d'élément ou n'est pas reconnue par le navigateur.

Préciser la version Css

On ne peut pas préciser la version Css

Il n'est pas possible de spécifier la version Css à utiliser.
La seule chose que vous pouvez faire, c'est d'utiliser des propriétés Css préfixées ou des hack CSS pour cibler un navigateur ou une version de navigateur ou une compatibilité.

Il existe plusieurs préfixes (vendor extensions) :
- -o-propriété : pour le navigateur Opera.
- -webkit-propriété : pour les navigateurs de base Webkit (Chrome, nouvelles versions d'Opera)
- -moz-propriété : pour le navigateur Firefox.
- -ms-propriété : pour le navigateur Internet Explorer.
Les propriétés Css préfixées sont non standards et expérimentales et ne passent pas le CSS Validation Service.
Elles peuvent exister sous un navigateur et pas sous un autre, par exemple -webkit-filter n'existe pas dans les autres versions préfixées, ou exister qu'en version préfixée.
Elles peuvent exister sous une version de navigateur et pas sous une autre plus récente.

Exemple schématique des écritures préfixées :
.ma-css{
  -o-propriete : valeur; /* -o- Opera */
  -webkit-propriete : valeur; /* -webkit- Chrome ,  Safari et nouveau Opera */
  -moz-propriete : valeur; /* -moz -Firefox */
  -ms-propriete : valeur; /* -ms- Internet Explorer */
  propriete : valeur; /* Navigateur aux normes w3c */
}

C'est la règle de la dernière déclaration valide qui prime.
Vous devez normalement, toujours finir par la version non préfixée et l'ordre des préfixes a normalement pas trop d'importance, sauf peut être entre -o- et -webkit- à cause d'Opéra donc je vous conseille de garder cet ordre.
Cependant, si pour une raison 'X' vous désirez par exemple que -ms-propriete prenne le dessus sur propriete dans le cas d'Internet Explorer alors vous devez inverser l'ordre.