Atelier #2 initiation à css

  • 1,029 views
Uploaded on

Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,029
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Workshop #2Initiation au CSS Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
  • 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. 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. 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. 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. 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. Les mains dans le codeÉtudions ensembles ces quelques fichiersHTML accompagnés de leur feuille de styleCSS :https://github.com/coopTilleuls/workshopHTML
  • 8. Syntaxesélecteur1, sélecteurN { propriété1: valeur; propriété2: valeur;}
  • 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. SélecteursIls permettent de sélectionner un ou plusieurséléments du document (noeuds de larbreDOM).Exemple :#mon-id { color: red;}
  • 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. 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. Couleurs● color : Couleur du texte● background-color : couleur de fond● border : bordures● background-image : image de fond● Remplacement de texte
  • 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. Crédits● Wikipédia● yoyodesign.org●
  • 16. http://la-cooperative-des-tilleuls.com