Cascading Style Sheets (CSS) : Définition et Utilisation, Essays (high school) of Cyberlaw and Internet Law

Download Cascading Style Sheets (CSS) : Définition et Utilisation and more Essays (high school) Cyberlaw and Internet Law in PDF only on Docsity!

CSS

C A S C A D I N G S T Y L E S H E E T S

DEFINITION

CSS(Cascading Style Sheets ou feuille de style en cascade) est un standard développé par le CSS, Le CSS est incrémenté par niveaux et non par versions Le niveau 3 réutilise et étend les niveaux 1 et 2 , Le principe est de séparer le fond de la forme. Une feuille de style en cascade va permettre la mise en forme de la page HTML

ECRITURE D’UNE FEUILLE DE STYLE

INCLUSION CSS

Définition de la CSS dans le fichier via la balise O n ajoute dans l’en-tete du fichier HTML la ligne suivante: < link href=”fichier.css” rel=”stylesheet” type=”text/css”> Définition de la CSS dans le fichier via la balise

COULEURS

Il existe 3 façon de designer une couleur :

• par son nom :red, blue, green, orange
• par les fonctions rvb : rgb(r, g, b) avec valeurs de 0 à 255 rgb(r%, g%, b%) avec valeurs de 0 à 100
• par les fonctions rvb+ transparence : rgba(r, g, b, a) avec valeurs de 0 à 255, et transparence (a) entre 0 et 1
• en hexidécimal : #FF0000, #0000FF, #ADD8E

L’ARRIERE-PLAN

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

LES LISTE

• list-style-type
• list-style-image
• ist-style-position

IDENTIFIANTS ET CLASSES

Identifiants: Syntaxe HTML : Syntaxe CSS : h1 #titre{.. .} Utilisation unique (un seul id=titre dans la page HTML) Classes: Syntaxe HTML : Syntaxe CSS : h1.titre{.. } Utilisation multiple (plusieurs class=titre autorisés dans la page HTML)

IDENTIFIANTS ET CLASSES

Feuille de style : h2 { font−styl e : i t a l i c ; } #premier { color : red ; } .bleu { color : blue ; }

HERITAGE

Les propriétés CSS héritent des propriétés parentes Héritage par raffinement de propriété :

• h2 #premier hérite de h
• h2 .bleu hérite de h2 (mais pas de h2 #premier) Héritage par propriété sémantiquement parente : h2 hérite de body

MARGES ET BORDURES : EXEMPLE

< p class="boiteorange">Ce pétit exemple est tiré du Wikibook sur CSS ( Cascading Style Sheets ).

p.boiteorange { border : 1px dotted black; padding−top : 1 em; padding−right : 2 em; padding−bottom : 3 em; padding−left : 4 em; background−color :#fc9 ; text−align : justify }

## POSITIONNEMENT

Positionnement statique: Static

• Valeur par défaut,
• les éléments apparaissent dans le même ordre que dans le code HTML,
• cet ordre est appelé le flux de la page HTML,
• impossible d’utiliser les valeurs : top, left, right, bottom.
• la largeur par défaut d’un type block est la largeur du conteneur. Positionnement relatif: relative :exemple( position: relative; top: x px; left: y px; )
• Les valeurs : top, left, right, bottom indiquent la position par rapport a` celle que l’elément aurait du avoir dans le flux.
• ne modifie pas l’affichage des autres éléments dans le flux,
• garde les mêmes dimensions et marges que pour static.

OBJET FLOTTANT

Un objet flottant que l’on peut placer a droite ou à gauche de son conteneur. Le contenu des autres éléments évite alors de se superposer avec l’ élément flottant.

LES PSEUDOS CLASSES

Permet de spécifier un état particulier d’une balise. Quelques exemples:

• Interaction avec la souris: ❑:hover la souris passe sur la balise ❑:active clic maintenu sur la balise.
• Les liens hypertextes : ❑:link lien non visite. ❑:visited lien visite. Les des formulaires ❑:valid les valeurs sont valides. ❑:invalid les valeurs sont invalides.