Workshop #2Initiation au CSS Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
La Coopérative des TilleulsConception, développement et formation :● Applications web● Plate-formes e-commerce● Intégratio...
Lesprit coopératif● Société coopérative Scop● Entreprise détenue à 100% par celles et  ceux qui y travaillent● Prises de d...
Workshop #1● Définition dinternet et du web● Présentation des standards du web● Découverte du langage de balisage HTML● Le...
CSS● Cascading Style Sheet (feuilles de style en  cascade)● Permet de décrire la présentation dun  document HTML ou XML● S...
Principes● Séparation de la présentation et de la  structure du document● La présentation varie en fonction du  récepteur ...
Les mains dans le codeÉtudions ensembles ces quelques fichiersHTML accompagnés de leur feuille de styleCSS :https://github...
Syntaxesélecteur1, sélecteurN {  propriété1: valeur;  propriété2: valeur;}
Lien avec le documentHTML● Directement dans la page HTML avec la  balise <style>● En tant quattribut dune balise HTML avec...
SélecteursIls permettent de sélectionner un ou plusieurséléments du document (noeuds de larbreDOM).Exemple :#mon-id {  col...
Formatage de texte●   font-size : taille de la police●   font-family : famille de police●   font-style : style de police (...
Positionnement● display : affichage des élèments en-ligne et  en blocs● position: relative : Position relative des  élèmen...
Couleurs●   color : Couleur du texte●   background-color : couleur de fond●   border : bordures●   background-image : imag...
Pour aller plus loin● Compass (en) : http://compass-style.org/● Sass (en) : http://sass-lang.com/● Less (en) : http://less...
Crédits● Wikipédia● yoyodesign.org●
http://la-cooperative-des-tilleuls.com
Atelier #2 initiation à css
Atelier #2 initiation à css
Prochain SlideShare
Chargement dans…5
×

Atelier #2 initiation à css

1 719 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 719
Sur SlideShare
0
Issues des intégrations
0
Intégrations
250
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Atelier #2 initiation à css

  1. 1. Workshop #2Initiation au CSS Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
  2. 2. 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
  3. 3. Lesprit 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 douverture vers les habitants et les travailleurs du secteur (ex. : cet atelier)
  4. 4. Workshop #1● Définition dinternet 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
  5. 5. CSS● Cascading Style Sheet (feuilles de style en cascade)● Permet de décrire la présentation dun 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...
  6. 6. 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 sappliquer à un même élément : cest la cascade● Chaque élément du document est représenté par une boîte● Les boîtes sont positionnées successivement (flux)
  7. 7. Les mains dans le codeÉtudions ensembles ces quelques fichiersHTML accompagnés de leur feuille de styleCSS :https://github.com/coopTilleuls/workshopHTML
  8. 8. Syntaxesélecteur1, sélecteurN { propriété1: valeur; propriété2: valeur;}
  9. 9. Lien avec le documentHTML● Directement dans la page HTML avec la balise <style>● En tant quattribut dune balise HTML avec latrtibut style● Recommandé : dans un fichier externe .css, lié au document HTML avec une balise <link>
  10. 10. SélecteursIls permettent de sélectionner un ou plusieurséléments du document (noeuds de larbreDOM).Exemple :#mon-id { color: red;}
  11. 11. 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
  12. 12. 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
  13. 13. Couleurs● color : Couleur du texte● background-color : couleur de fond● border : bordures● background-image : image de fond● Remplacement de texte
  14. 14. 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/
  15. 15. Crédits● Wikipédia● yoyodesign.org●
  16. 16. http://la-cooperative-des-tilleuls.com

×