Atelier #2 initiation à css
0 j'aime2,501 vues
Le document décrit un atelier d'initiation au CSS dirigé par Kévin Dunglas, organisé par la Coopérative des Tilleuls, qui se spécialise dans le développement d'applications web et de plateformes e-commerce. L'atelier couvre les principes fondamentaux des feuilles de style en cascade (CSS), les sélecteurs, et les techniques de formatage de texte, ainsi que des ressources supplémentaires pour approfondir les connaissances. La coopérative se distingue par son modèle coopératif, favorisant la coopération et l'entraide au sein de ses activités.
Atelier #2 initiation à css
- 1. Workshop #2 Initiation au CSS Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
- 3. La Coopérative des Tilleuls Conception, 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
- 4. 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)
- 5. 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
- 6. 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...
- 7. 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)
- 8. Les mains dans le code Étudions ensembles ces quelques fichiers HTML accompagnés de leur feuille de style CSS : https://github.com/coopTilleuls/workshopHTML
- 9. Syntaxe sélecteur1, sélecteurN { propriété1: valeur; propriété2: valeur; }
- 10. 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>
- 11. Sélecteurs Ils permettent de sélectionner un ou plusieurs éléments du document (noeuds de l'arbre DOM). Exemple : #mon-id { color: red; }
- 13. 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
- 14. 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
- 15. Couleurs ● color : Couleur du texte ● background-color : couleur de fond ● border : bordures ● background-image : image de fond ● Remplacement de texte
- 16. 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/