introduction aux feuilles de style css - jean-philippe pernin. developpement... · 2014-10-15 ·...

Jean-Philippe PERNIN

Université Stendhal

Département Informatique Pédagogique

Bureau I 113

Mél. : [email protected]

Introduction aux feuilles de style CSS

Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 1

CSS

• Cascaded Style Sheet (actuellement version 3)

• Objectif :

– Séparer la structuration du document de sa mise en

page

– Faciliter la lecture et la mise au point d'un site

complexe

– Offrir la même présentation quel que soit le

navigateur utilisé

– Passer aisément de la conception sur papier à la

réalisation informatique

http://creativecommons.org/licenses/by-nc-nd/2.0/fr/


CSS : 2 objectifs principaux

• Définir en un endroit unique la mise en forme de

toutes les balises de même nom

– Par exemple, toutes les balises <H1> auront la même mise en forme

• Créer des nouveaux styles applicables à toutes

sortes de balise différentes

– Toutes les balises utilisant le même style auront la

même mise en forme



Personnaliser une balise préexistante : <body>, <H1>, <H2>, <p>, <table>? etc.

• Syntaxe : nomBalise {attribut1:valeurAttribut1; attribut2=valeurAttribut2}

Toutes les balises H1, H2 auront la même présentation

Sans style

Avec style



Créer un nouveau style applicable à toutes sortes de balise

• Déclaration du style .nomstyle {attribut:valeurAttribut}

• Utilisation du style : – Ajouter un attribut CLASS à la balise concernée

<html>

<head>

<style type="text/css">

.rougeEtLarge{ color: red ; font-size: large; }

</style>

</head>

<body>

<H1 class=rougeEtLarge> Chapitre 1 </H1>

<H2 > Chapitre 1.1 </H2>

<H3 class=rougeEtLarge> Chapitre 1.2 </H3>

<H1 class=rougeEtLarge> Chapitre 2 </H1>

</body>

</html>

Toutes les balises ayant l'attribut

class= rougeEtLarge

auront la même présentation



CSS : où placer les styles ?

2 méthodes principales

1. Dans la partie <Header>

– Voir exemple page précédente (déconseillé)

2. Dans un fichier séparé suffixé en .css (appel placé dans le <Header>)

<LINK rel=stylesheet type="text/css" href="style.css">

<html>

<head>

<link rel="stylesheet" type="text/css"

href="monstyle.css" />

<title>exemple</title>

</head>

<body>

<h1>Un python tente de dévorer une femme

tête la première</h1>

Fichier HTML

body {

font-family:

Arial,Helvetica,sans-serif;

}

h1, h2, h3 {

color: #406666;

}

Fichier monstyle.css



Quelques attributs CSS de mise en forme

color:#ff0000; : pour définir la couleur, en hexadécimal.

color:red; : pour définir la couleur, en lettres et en anglais.

background-color:#ffffff; : couleur de fond

text-decoration:none; : pas de soulignement.

font-family:arial; : nature de la police des liens.

font-size:8pt; : taille de la police des liens.

font-weight:bold; : caractère de la police (gras, italique...).

letter-spacing:2pt; : espacement des lettres du lien.

text-transform: uppercase; : pour des liens en majuscules.

lowercase; : pour des liens en minuscules. Plan

width:100px; : longueur

height:10px; : hauteur

Consulter la référence :

http://www.w3schools.com/cssref/

Tutoriel OpenClassrooms


http://www.w3schools.com/cssref/

http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mettre-en-place-le-css


Exemple de positionnement de zone la balise DIV représente une zone de code HTML



Niveau

Structuration

Réutiliser les éléments communs

Fichier1.htm

fichier.CSS

Fichier2.htm Fichier3.htm

Partage de règles communes

de présentation



Autre possibilité à connaître

• Utilisation des sélecteurs

– Permet d'affecter un style à UNE SEULE BALISE <p>Le contenu du document HTML</p>

<p id="menu">

<a href="index.html">home</a><br/>

<a href="ex.html">Exos</a><br/>

</p>

/*Sélecteur

d’identifiant*/

#menu{

position: fixed;

top: 0px;

}

• Peut être combiné avec class pour des effets avancés



En résumé

• N'utilisez dans la partie <body> que les balises HTML de base :

– h1, h2, ….h6

– Pour le texte :

• <div>, définit un bloc de texte

• <span>, définit un fragment de texte dans une phrase

• Éventuellement <p> <hr> (à eviter et remplaçable par div>

– Pour les listes

• <ul> <ol> <li>

– Pour les images

• <img>

– Pour des objets multimédias

• <object>, <audio>, <video>

• Pour tout le reste, utiliser les classes, les id dans les feuilles de style externes


Jean-Philippe PERNIN

Université Stendhal

Département Informatique Pédagogique

Bureau I 113

Mél. : [email protected]

Utilisation du site jsfiddle.net pour la mise au point des sites

web (CSS)

Le site jsfiddle.net


Zone pour

le code html

Zone pour le

code javascript

Zone pour

le code css

Zone pour

la visualisation

du résultat


Attention : jsfiddle ne sert qu'à la mise au point


Il n'est pas nécessaire d'indiquer TOUT le code HTML. JSFiddle se charge de rajouter les balises obligatoires <html><head><body><link><script>

http://jsfiddle.net/pernin_prof/ngozmtuu/

Source du fichier http://jsfiddle.net/pernin_prof/ngozmtuu/embedded/result


Procédure pour développer une page HTML à partir d'un test jsfiddle


1. Récupérer une page HTML vierge, cliquer ici 2. Enregistrer la page sous le nom de votre choix 3. Récupérer la partie HTML de JSFIDDLE et intégrer dans la partie <body> 4. Créer un fichier CSS séparé 5. Récupérer la partie CSS de JSFIDDLE et intégrer dans le fichier CSS 6. Créer le lien relatif vers le fichier CSS dans la page HTML

essai.html

style.css

<div> Mon premier essai </div>

div {

color:red;

font-size:14px;

}

"style.css">

jsfiddle


http://jeanphilippepernin.net/ressources/7. developpement web/1. html/documents/pagevierge.html

introduction aux feuilles de style css - jean-philippe pernin. developpement... · 2014-10-15 ·...

Documents