docCours de css
download 
Plainte Transcription
Cours de css
Cours de css
I/ Présentation du css :
1) Objectif du css :
Css signifie « Cascading Style Sheet » ce qui peut se traduire par feuille de style en cascade.
Les fichiers css permettent de délocaliser la mise en forme des pages web. En effet, alors que le fichier HTML va
renfermer le contenu de la page web, le fichier css, lui, va contenir les informations de mise en forme de la page.
Il est alors extrêmement simple de changer la mise en forme du contenu simplement en modifiant le fichier css.
Cela permet, en outre, de n’avoir qu’un seul fichier css pour tout un site web ce qui permet d’alléger considérablement
la taille du fichier css.
De plus, le css permet d’obtenir une mise en forme plus évoluée que par la simple utilisation du HTML.
2) Quelques dates :
II/ Insérer du css dans une page web :
1) Dans une balise :
Attribut : « style »
Valeur : « propriété css : valeur css ; »
2) Dans <HEAD> :
<style>
Propriétés css : valeurs css ;
</style>
3) Dans un fichier externe :
Très fortement recommandé.
Avantage : externaliser la mise en page du site
- 1 fichier contenu (HTML)
- 1 fichier mise en forme (CSS)
4) Adapter la mise en forme au support d’affichage :
Devant la multiplicité des écrans d’affichage (téléphone intelligent, écran 16/9, écran 4/3 voire plus exotique), il est
devenu indispensable d’adapter la mise en forme au type de média.
Pour chaque média peut correspondre un fichier css particulier.
a) Depuis la balise <LINK> :
Attribut
Média
<link media=”screen” href=”style1.css”/>
<link media=”handheld” href=”style2.css”/>
Ecran d’ordinateur
Appareil portatif (téléphone portable)
Notion de media queries :
Il est possible de précisément de manière encore plus précise le support d’affichage grâce à des opérateurs :
And, not, only.
media="screen and (max-width: 640px)"
media="screen only (width: 640px)"
b) Depuis le fichier .css :
@media screen and (max-width: 640px){
…
}
Ecriture :
@media TypeDeMédia opérateurLogique (propriété :valeur){
…
}
III/ Chemin d’accès :
1) Le principe :
Sélecteur
prédéfini
class
personnalisée
div
Personnalisée
2) Présentation des sélecteurs :
a) Les sélecteurs prédéfinis :
le nom d’une balise html
h1
a
b) Les sélecteurs personnalisés :
- les class : peut s’appliquer à plusieurs éléments dans le document HTML
.maclasse
- les div : ne peut s’appliquer qu’à un seul élément dans le document HTML
#mondiv
<a class= ‘’ ….’’>…</a>
<a id=’’…’’>…</a>
c) le sélecteur universel :
* : le sélecteur universel
3) Cibler précisément un élément :
Une mise en page structurée d’une page web va faire apparaitre des structure redondante du type :
<h1>…
<h3>…
<a>…
Sélecteur
universel
Dans ce cas, il est possible de cibler précisément chacun des éléments :
h1 h3 a
Dans ce cas, je cible le lien a qui se trouve uniquement après un h1 puis un h3.
Mais aussi :
b p.class1 : désigne tous les éléments p ayant la classe1 situé après une balise b.
ou
a b p#div1 : désigne l’éléments p ayant l’id div1 situé après une balise a puis b
4) Le css « événementiel » :
Du css qui s’applique lors d’un événement précis.
a :hover
III/ Bloc conteneur :
1) Modifier le style d’un élément HTML :
Une fois le ciblage effectuée, il faut définir le bloc conteneur. Il contient tout simplement l’ensemble des propriétés et
leur valeur.
h1 h3 a {
propriété 1 : valeur 1;
propriété 2 : valeur 2 ;
}
Quelques exemples :
propriétés
valeurs
background-color
margin-left
border-size
#000000
50px
3px
2) Ajouter des commentaires :
/* commentaire */
