Feuilles de style CSS – JavaScript (initiation)

Formation feuilles de style CSS, tutoriel & guide de travaux pratiques en pdf.

Les feuilles de style CSS (Cascading Style Sheet) :

Les feuilles de style CSS permettent :
– dans le cas d’une page HTML, d’associer des propriétés d’affichage aux balises HTML prédéfinies : utiliser la balise link : <link href= »… » rel= »styleSheet » type= »text/css »>
– dans le cas d’une page XML, d’associer des propriétés d’affichage aux balises XML :
utiliser la balise xml-stylesheet : <?xml-stylesheet
href= »… » type= »text/css » ?>

Types de redéfinitions possibles :
– red´efinition du style associ´e `a une balise HTML prédéfinie : nom_de_la_balise {…}
– red´efinition du style de plusieurs balises HTML pr´ed´efinies : nom_balise_1, … {…}
– red´efinition du style d’une balise HTML fille d’une autre balise HTML : nom_balise_1 nom_balise_2 {…} ou nom_balise_1 > nom_balise_2 {…}
– redéfinition du style des balises HTML filles d’une autre balise HTML : nom_balise_mère > * {…}
– redéfinition du style des balises HTML conditionnées par la valeur d’une propriété : nom_balise[nom_propri´et´e=valeur] {…} – d´efinition d’une nouvelle classe de style :
– une classe peut ˆetre universelle si elle peut s’appliquer `a n’importe quelle balise : .maClasseDeStyle {liste de propriétés} → cette classe est appliqu´ee `a toutes les balises dot´ees d’un attribut de nom class et de valeur maClasseDeStyle
– ou sp´ecifique si elle ne peut ˆetre associ´ee qu’`a un nombre d´etermin´e de balises :
balise.maClasseDeStyle {…} – les pseudo-classes et les pseudo-´el´ements : lié `a un ´ev´enement particulier ou `a des positions relatives :. – modification de la pr´esentation d’un lien suivant son ´etat → la pseudo-classe A : A:link : lien hypertexte normal A:hover : lien hypertexte sélectionné lorsque la souris le pointe exemple : A:hover {text-decoration: none; color: red;}
A:active : lien hypertexte actif A:visited : lien hypertexte visit´e
– Formatage du texte d’un paragraphe → les pseudo-éléments appliqués `a la balise <P> : Exemple : P:first-line { text-transform: uppercase; } pour mettre en majuscule la premi`ere lettre de chaque paragraphe.

Quelques propriétés css courantes
– structuration : display, valeurs possibles : block, inline, invisible, none – marges : margin-top, margin-bottom, margin-left, margin-right – positionnements : position, left, top – nom de la police : font-family, valeurs possibles : times, arial … – taille de la police : font-size, valeurs possibles :
– symbolique : xx-small, x-small, small, medium, large, x-large, xx-large – en points : 10pt, …
– poids de la police : font-weight (valeurs possibles : lighter, normal, bolder, bold)
– alignements : text-align (valeurs possibles : left, right, center, justify) – couleur d’avant-plan : color
– couleur ou image d’arri`ere-plan : background-color, background-image
– propri´et´es sur les listes :
– type de puce : list-style-type (none pour supprimer les puces, decimal, lower-roman, …) – image en guise de puce : list-style-image (url(…))