Atelier #2 initiation à css

18
Workshop #2 Initiation au CSS Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls

description

Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls. Au menu cette fois-ci une initiation à l'intégration web grâce aux feuilles de style CSS. Après avoir appris lors du premier atelier à créer et à structurer des pages web grâce à HTML, nous verrons comment les mettre en forme avec les feuilles de style en cascade CSS. Nous découvrirons ensembles : - les fondements du langage CSS (syntaxe, cascade, sélecteurs) - quelques balises et attributs HTML utiles pour la CSS - le formatage de texte (police, couleur, gras, italique...) - le positionnement des éléments - les couleurs et images de fond

Transcript of Atelier #2 initiation à css

Page 1: Atelier #2 initiation à css

Workshop #2 Initiation au CSS

Par Kévin Dunglas (@dunglas)La Coopérative des Tilleuls

Page 2: Atelier #2 initiation à css
Page 3: Atelier #2 initiation à css

La Coopérative des TilleulsConception, développement et formation :● Applications web● Plate-formes e-commerce● Intégration aux places de marché● Intégration aux SI bancaires, transporteurs...● Jeux Facebook, advergames, serious games● Applications mobiles● Identités graphiques● Clients : Walibuy, Pictime, Geophyle,

Wokine, 6 PEO, Agence 1984

Page 4: Atelier #2 initiation à css

L'esprit coopératif● Société coopérative Scop● Entreprise détenue à 100% par celles et

ceux qui y travaillent● Prises de décisions démocratiques● Esprit et ambiance favorisant la coopération,

l’entraide et la solidarité● Soutien à des projets culturels, artistiques,

associatifs, syndicaux...● Démarche d'ouverture vers les habitants et

les travailleurs du secteur (ex. : cet atelier)

Page 5: Atelier #2 initiation à css

Workshop #1● Définition d'internet et du web● Présentation des standards du web● Découverte du langage de balisage HTML● Les slides : http://slideshare.

net/coopTilleuls/atelier-initiation-au-html5● Les exemples : https://github.

com/coopTilleuls/workshopHTML

Page 6: Atelier #2 initiation à css

CSS● Cascading Style Sheet (feuilles de style en

cascade)● Permet de décrire la présentation d'un

document HTML ou XML● Standard du W3C● CSS3 : dernière version de CSS ajoutant de

nombreuses fonctionnalités : nouveaux sélecteurs, media queries, polices persos, dégradés, transitions...

Page 7: Atelier #2 initiation à css

Principes● Séparation de la présentation et de la

structure du document● La présentation varie en fonction du

récepteur : écran, tablette, smartphone...● Différentes règles peuvent s'appliquer à un

même élément : c'est la cascade● Chaque élément du document est

représenté par une boîte● Les boîtes sont positionnées

successivement (flux)

Page 8: Atelier #2 initiation à css

Les mains dans le codeÉtudions ensembles ces quelques fichiers HTML accompagnés de leur feuille de style CSS : https://github.com/coopTilleuls/workshopHTML

Page 9: Atelier #2 initiation à css

Syntaxe

sélecteur1, sélecteurN { propriété1: valeur; propriété2: valeur;}

Page 10: Atelier #2 initiation à css

Lien avec le document HTML● Directement dans la page HTML avec la

balise <style>● En tant qu'attribut d'une balise HTML avec

l'atrtibut style● Recommandé : dans un fichier externe .css,

lié au document HTML avec une balise <link>

Page 11: Atelier #2 initiation à css

SélecteursIls permettent de sélectionner un ou plusieurs éléments du document (noeuds de l'arbre DOM).

Exemple :#mon-id { color: red;}

Page 12: Atelier #2 initiation à css
Page 13: Atelier #2 initiation à css

Formatage de texte● font-size : taille de la police● font-family : famille de police● font-style : style de police (italique...)● font-weight : graisse de la police● text-decoration : décoration du texte● text-align : alignement du texte● @font-face (CSS3) : police personnalisée● Il existe un grand nombre de propriétés

CSS, se référer à la documentation

Page 14: Atelier #2 initiation à css

Positionnement● display : affichage des élèments en-ligne et

en blocs● position: relative : Position relative des

élèments les uns par rapport aux autres● float : Flottement des boîtes● position: absolute : Positionnement absolu● position: fixed : Positionnement fixe● width, height : Largeur et hauteur des boîtes● margin, padding : Marges extérieurs et

marges intérieures

Page 15: Atelier #2 initiation à css

Couleurs● color : Couleur du texte● background-color : couleur de fond● border : bordures● background-image : image de fond● Remplacement de texte

Page 16: Atelier #2 initiation à css

Pour aller plus loin● Compass (en) : http://compass-style.org/● Sass (en) : http://sass-lang.com/● Less (en) : http://lesscss.org/● Blueprint (en) : http://blueprintcss.org/● Twitter Bootstrap (en) : http://twitter.github.

com/bootstrap/● Openweb (fr) : http://openweb.eu.org/● Alsacréations (fr) : http://www.alsacreations.

com/

Page 17: Atelier #2 initiation à css

Crédits● Wikipédia● yoyodesign.org●

Page 18: Atelier #2 initiation à css

http://la-cooperative-des-tilleuls.com