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" span, mais les autres balises sémantiques dites "en ligne" (b, i, dfn, ...) peuvent être utilisées mais à bon escient.
<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" div.
<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 :
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 ;
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 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.
.identifiant{
font-family:arial;
}
/* et plus loin dans votre code */
.identifiant{
font-size: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.
.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.
#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.
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.
/* 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.
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.
.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.