CSS3 Grid Layout
Le module de positionnement "Grid Layout" est une spécification du W3C à l'état de Candidate Recommandation dont les premiers jets datent de 2004. Sa documentation officielle est actuellement maintenue par trois contributeurs, dont une personne de Microsoft et une personne de Google. Note : ce tutoriel a été initialement rédigé en février 2012. Il a subi une grosse refonte en octobre 2015 pour se mettre à jour. En février 2019 est sorti mon livre entièrement dédié à Grid Layout. Compatibilité navigateurs du module Grid Layout Le positionnement par grille Le concept général de Grid Layout (ou "positionnement en grille") est de diviser virtuellement l'espace en zones majeures dans une page ou une application. On y trouve d'ailleurs de nombreuses références d'affichage "tabulaire" avec lignes et colonnes, rowspan et colspan. Mais la différence la plus flagrante est que la grille consiste en une construction de l'esprit et ne nécessite aucun élément HTML ni balisage pour être élaborée.
Blocs de base en CSS - Apprendre le développement web
Ce cours fait suite aux premiers pas avec CSS : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses. L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme le style de texte et la mise en page CSS. Prérequis Avant de commencer ce cours, nous vous recommandons : D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet. Guides Les articles qui composent ce module traitent la majeure partie du langage CSS. Cascade and inheritance (Cascade et héritage) CSS selectors (sélecteurs CSS) Voir aussi
Une bulle d'aide en CSS - [ Blog des TIC ] de webtolosa.fr
Une bulle d’aide en CSS Plutôt que de surcharger les pages d’explications, une petite bulle d’aide en CSS discrète est souvent bienvenue. Celle que je propose ici est légère, s’active au survol de la souris, et présente l’avantage de pouvoir incorporer des mises en forme HTML (gras, retour à la ligne, etc.) La bulle d’aide en CSS Elle se positionne sur une petite image de votre choix, que je nomme dans mon exemple « pic_aide.png », et je la dépose sur le serveur dans le dossier « image » Quelques exemples : Le code HTML <a class="infobulle"><img src="image/pic_aide.png" alt=" ? Le texte d’aide (et sa mise en forme HTML) est à mettre entre les balises <span> et </span> Le CSS (hautement personnalisable, à votre convenance !) Le résultat
Bonnes pratiques en CSS : BEM et OOCSS
Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS. Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Je raconte dans cet article mon propre cheminement dans leurs travaux en espérant qu'il sera utile à l'intégrateur Web autant qu'au développeur JavaScript. Sommaire Je me suis d'abord tourné vers OOCSS (Object Oriented CSS), un ensemble de bonnes pratiques initiées par Nicole Sullivan (Stubbornella). Le concept de OOCSS est de repérer des « objets CSS », c'est-à-dire des « patterns visuels » qui se répètent, et de définir ainsi des classes réutilisables. OOCSS met en avant deux principes : Pouah ! La propreté
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. CSS allows complete and total control over the style of a hypertext document. Participation Strong visual design has always been our focus. You may modify the style sheet in any way you wish, but not the HTML. Download the sample HTML and CSS to work on a copy locally. Benefits Why participate? Requirements Where possible, we would like to see mostly CSS 1 & 2 usage. Luckily, designing this way shows how well various browsers have implemented CSS by now. We ask that you submit original artwork. This is a learning exercise as well as a demonstration. By Dave Shea.
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web.
CSS : comment centrer une div ? — Codeur Tuto
Centrer une div horizontalement et verticalement peut sembler être une tâche ardue (un peu comme centrer une image !). Pourtant, avec la bonne méthode employée dans le bon contexte, le CSS peut se résumer à 2 ou 3 lignes. Surtout depuis l’apparition des Flexbox, qui règnent en maître du centrage d’élément. Nous allons voir dans cet article plusieurs méthodes pour arriver à vos fins. Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal. Trouver un développeur web Display : block Un élément block qui possède des margin: auto se centrera horizontalement dans son parent. <div class="container"><div class="centered-element"> .centered-element </div></div> Attention, une balise <div> est un élément block par défaut, si vous voulez centrer un autre élément comme une balise <p>, il faudra lui rajouter la propriété CSS display: block. Display : inline-block Cette fois-ci, pas besoin de margin: auto : Vos premiers devis en 15 minutes
