Workshop #2 Initiation 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é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
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)
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
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...
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)
Les mains dans le codeÉtudions ensembles ces quelques fichiers HTML accompagnés de leur feuille de style CSS : https://github.com/coopTilleuls/workshopHTML
Syntaxe
sélecteur1, sélecteurN { propriété1: valeur; propriété2: valeur;}
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>
SélecteursIls permettent de sélectionner un ou plusieurs éléments du document (noeuds de l'arbre DOM).
Exemple :#mon-id { color: red;}
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
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
Couleurs● color : Couleur du texte● background-color : couleur de fond● border : bordures● background-image : image de fond● Remplacement de texte
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/
Crédits● Wikipédia● yoyodesign.org●
http://la-cooperative-des-tilleuls.com