Cours CSS

cours complet sur les CSS


Télécharger cours complet sur les CSS

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


1 introduction

2 principes

3 syntaxe

tout cela manque quand même de style

chaque élément HTML est affiché par le navigateur avec un style par défaut.

sansCSS.html

tout cela manque quand même de style

chaque élément HTML est affiché par le navigateur avec un style par défaut.

sansCSS.html

les éléments <h1> apparaissent avec une police de taille 2em et

« en gras »

les éléments <p> forment des blocs qui s'affichent les uns en dessous des autres avec une marge haute et basse de 1em et leur texte est affiché avec la police par défaut du navigateur les éléments <q> sont encadrés par des guillemets les éléments <strong> sont en gras etc.

4

il est possible de modifier le style par défaut grâce aux CSS

il est possible de modifier le style par défaut grâce aux CSS

il est possible de modifier le style par défaut grâce aux CSS

il est possible de modifier le style par défaut grâce aux CSS

il est possible de modifier le style par défaut grâce aux CSS

il est possible de modifier le style par défaut grâce aux CSS

exemple avec CSS

il est possible de modifier le style par défaut grâce aux CSS

exemple avec CSS

au programme...

1 introduction

2 principes

3 syntaxe

au programme...

1 introduction

2 principes

3 syntaxe

séparation de la forme et du contenu

il faut définir séparément la forme et le contenu

il faut définir séparément la forme et le contenu la structure d'un document et son contenu sont décrits en HTML

il faut définir séparément la forme et le contenu

la structure d'un document et son contenu sont décrits en HTML sa présentation est gérée par les CSS

il faut définir séparément la forme et le contenu

la structure d'un document et son contenu sont décrits en HTML sa présentation est gérée par les CSS

1 on crée le document (contenu et structure) sans se préoccuper de sa mise en forme

séparation de la forme et du contenu

il faut définir séparément la forme et le contenu



la structure d'un document et son contenu sont décrits en HTML sa présentation est gérée par les CSS

1   on crée le document (contenu et structure) sans se préoccuper de sa mise en forme

2   on conc¸oit la (les !) mise(s) en forme puis éventuellement on les modifie/adapte

document HTML et feuille CSS peuvent être définis dans des fichiers séparés

document HTML et feuille CSS peuvent être définis dans des fichiers séparés création plus efficace

document HTML et feuille CSS peuvent être définis dans des fichiers séparés

création plus efficace code HTML plus simple et plus lisible

document HTML et feuille CSS peuvent être définis dans des fichiers séparés

création plus efficace code HTML plus simple et plus lisible on peut changer la feuille de style sans modifier le document

document HTML et feuille CSS peuvent être définis dans des fichiers séparés

création plus efficace code HTML plus simple et plus lisible on peut changer la feuille de style sans modifier le document on peut avoir plusieurs feuilles de style pour un document

document HTML et feuille CSS peuvent être définis dans des fichiers séparés

création plus efficace code HTML plus simple et plus lisible on peut changer la feuille de style sans modifier le document on peut avoir plusieurs feuilles de style pour un document

l'homogénéité visuelle d'un site est facilitée plusieurs pages peuvent partager la même feuille de style

le langage CSS définit un ensemble de propriétés qui ont une influence sur l'affichage des éléments d'une page

le langage CSS définit un ensemble de propriétés qui ont une influence sur l'affichage des éléments d'une page pour chaque propriété il existe un ensemble de valeurs possibles

le langage CSS définit un ensemble de propriétés qui ont une influence sur l'affichage des éléments d'une page pour chaque propriété il existe un ensemble de valeurs possibles

il est possible de fixer ces propriétés pour chacun des éléments d'un document HTML

le langage CSS définit un ensemble de propriétés qui ont une influence sur l'affichage des éléments d'une page pour chaque propriété il existe un ensemble de valeurs possibles

il est possible de fixer ces propriétés pour chacun des éléments d'un document HTML

les propriétés agissent sur l'apparence de la boîte d'un élément le langage CSS définit un ensemble de propriétés qui ont une influence sur l'affichage des éléments d'une page pour chaque propriété il existe un ensemble de valeurs possibles



il est possible de fixer ces propriétés pour chacun des éléments d'un document HTML

les propriétés agissent sur l'apparence de la boîte d'un élément les propriétés concernent l'apparence du contenu (fonte, style, couleur, ...) la taille de la boîte (largeur, marges, ...) le positionnement de la boîte (absolu ou relatif, visibilité)

...

au programme...

1 introduction

2 principes

3 syntaxe

11

au programme...

1    introduction

2    principes

3 syntaxe

 il est possible de regrouper plusieurs règles d'un même sélecteur les définitions sont alors séparées par des points-virgules

il est possible de regrouper plusieurs règles d'un même sélecteur les définitions sont alors séparées par des points-virgules

h1 { « tous les éléments <h1> auront color : blue;

leur texte en bleu et une taille

font-size : 12px;

}                                                                   de police de 12px »

on peut factoriser les règles partagées par des sélecteurs les sélecteurs sont alors séparés par des virgules

on peut factoriser les règles partagées par des sélecteurs les sélecteurs sont alors séparés par des virgules

h1, h2 { « les éléments <h1> et les éléments color : blue;

<h2> auront leur texte en bleu et

font-size : 12px;

}                                                           une taille de police de 12px »

exemple

différentes possibilités :

différentes possibilités :  sans CSS

différentes possibilités : sans CSS

CSS dans le code HTML (beurk)

différentes possibilités : sans CSS



CSS dans le code HTML (beurk) à proscrire !

différentes possibilités : sans CSS

CSS dans le code HTML (beurk) à proscrire !

règles CSS “en dur” dans le document

différentes possibilités : sans CSS

CSS dans le code HTML (beurk) à proscrire !

règles CSS “en dur” dans le document bof, limitant !

différentes possibilités : sans CSS

CSS dans le code HTML (beurk) à proscrire !

règles CSS “en dur” dans le document bof, limitant ! feuille de style externe :

différentes possibilités : sans CSS

CSS dans le code HTML (beurk) à proscrire ! règles CSS “en dur” dans le document bof, limitant !

feuille de style externe : la solution à adopter style 1 – la feuille css 1 style 2 – la feuille css 2

déclaration d'une feuille CSS

dans l'entête (<head>) du document HTML :

<link type="text/css" rel="stylesheet" href="fichier.css" />

ou aussi :

déclaration d'une feuille CSS

dans l'entête (<head>) du document HTML :

<link type="text/css" rel="stylesheet" href="fichier.css" />

ou aussi :

<link type="text/css" rel="stylesheet" href="fichier.css" media="screen"/>

Exemples de propriétés

font-family : le type de police utilisée pour le contenu, font-size : la taille des caractères (en px, em, %, etc.) font-style : normal, italic, oblique font-weight : normal, bold, lighter, etc.

border : la bordure autour du contenu de l'élément (couleur, style, ...)

width : largeur du contenu (%, px, em, cm) color et background-color : couleurs du texte et de l'arrière-plan (rgb(0,128,255), hexa #AAAAAA, symboles prédéfinis (navy, white, ...), hsl,)


82