background preloader

CSS

Facebook Twitter

404

Tutoriels XHTML, CSS, Accessibilité, JavaScript - Alsacréations. Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Vue & Nuxt Vue.js et Nuxt Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin. CSS Débutant : cours et tutoriels sur les feuilles de style CSS.

Les Media Queries CSS3 - Alsacr?ations. La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS.

Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.

Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! Screen Écrans handheld print Impression. Bien utiliser les sprites CSS. CSS : on reprend tout à zéro ! (épisode 4) Par Joe Gillespie Cet article est le quatrième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages. Quatrième étape : plus de mise en forme pour le texte Avant d'aller plus loin dans la mise en forme du texte, c'est une bonne idée de vous familiariser avec quelques termes basiques de typographie. Quand nous parlons de la taille de la police, ou font-size en CSS, cela fait référence à la distance entre le sommet d'une lettre majuscule comme « A » jusqu'au bas d'une lettre à jambage comme « p » ou « y ».

Aujourd'hui, on n'utilise plus de plomb. Vertical-align vous permet d'ajuster la ligne de base pour des lettres individuellement par rapport au reste du texte mais relève plutôt pour un usage spécialisé (comme les formules mathématiques), et on ne va pas s'étendre sur son cas ici. Les CSS nous donnent également le contrôle sur l'interlettrage (ou crénage), c'est-à-dire l'espace entre chaque caractère ou mot. letter-spacing: 0.5em; word-spacing: 0.5em.

Dynamic Drive CSS Library- Practical CSS codes and examples. Menu déroulant en CSS. 10 astuces en CSS. 1. Abréger l'écriture des règles CSS de police Lorsque vous donnez un style à une police en CSS, vous le faites peut-être comme ceci : Non seulement ce n'est pas nécessaire, mais le raccourci suivant existe : font: 1em/1.5em bold italic small-caps verdana,serif; C'est bien mieux, non ?

Un petit avertissement : cette notation abrégée ne fonctionnera que si vous spécifiez font-size et font-family. De plus, si vous ne spécifiez pas font-weight, font-style, ou font-variant, ces valeurs prendront automatiquement la valeur par défaut qui est normal. 2. Habituellement, les attributs ne sont assignés qu'à une classe, mais cela ne signifie pas qu'il ne soit pas permis de faire autrement. <p class="text side">... Utiliser ces deux classes ensemble (séparées par une espace et non par une virgule) signifie que le paragraphe va appliquer à la fois les règles assignées à text et celles assignées à side. 3.

Par exemple, border: 3px solid #000; donnera une bordure noire, solide, d'une épaisseur de 3 pixels.