background preloader

CSS Table Generator

CSS Table Generator
Related:  html-css

Cours HTML débutant PART 1 Cours HTML Partie 1 Un peu d'histoire.... Le W3C (World Wide Web Consortium, a été créé à l'occasion du premier standard du HTML : HTML 1.0. Entrons dans le vif du sujet ! Le HTML (Hyper Text Markup Language) est composé de BALISES qui s'écrivent de cette manière : <balise> La plupart de ces balises sont par paires.Lorsque vous "ouvrirez" une balise il faudra également la "refermer". <html> est la première balise qui ouvre le document html <head> est la balise dite de tête du document </head>on referme la balise de tête du document <body> on ouvre la balise dite du corps du document </body> on referme le corps du document </html> et on referme la balise html du document Premier exercice Si vous êtes sous windows cliquez sur demarrer puis sur executer et tapez notepad puis tapez la touche entrée. <html> <head> </head> <body> Ceci est ma première page HTML. <html> <head> <title>Ma première page</title> </head> <body> Ceci est ma première page HTML. Exemple & résultat

CSS Sprite Generator | Project Fondue Best CSS Button Generator: Create CSS-only Buttons CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. HTML & CSS Table Border Style Wizard Compatibility Notes If you are using Internet Explorer 6, you should be able to use this wizard with only minor limitations. This page does not work with Opera 8 or IE 5 on Mac. Internet Explorer 6 does not support the border-spacing CSS2 table property. Table Border Style Wizard Welcome to the totally revamped HTML and CSS border style wizard! The style sheet code generated by this wizard shows the easy way to apply a style to a table. The above example doesn't show it, but you can also efficiently alternate the row colors in an HTML table by using inheritance. The -moz-border-radius style tag will be rendered in browsers based on the Gecko Runtime Engine. HTML Toggle Buttons You might also have noticed the interesting toggle buttons that control the table style. The toggle buttons above behave like real radio buttons, like the ones on old-fashioned car radios. This is a lot of work to do something fairly simple. Get Firefox Now! Links More CSS Wizards Recommended Books

Comprendre le poids des règles CSS Certain d’entre vous ont peut être encore quelques soucis à comprendre les spécificités des css, spécialement avec les « pas si nouveaux » sélecteur CSS3. Légende : X-0-0 : représente les sélecteurs de type ID, illustrés par les requins.0-Y-0 : représente les sélecteurs de type class, attribut, pseudo-class , illustrés par les poissons0-0-Z : représente les sélecteurs de type balises, pseudo-élément, illustrés par Plankton.* : le sélecteur universel n’a pas de valeur+,>,~ : sont des combinateurs ils offrent plus de spécificités sur les sélecteurs, mais n’augmentent pas la valeurs.:not(x) : le sélecteur négatif n’a lui non plus pas de poids. Vous pouvez télécharger le pdf ici : PDF of fishy CSS specificity here Ces spécificités déterminent quelle déclaration de propriété CSS est appliquée lorsque plusieurs règles s’appliquent à un même élément. Prenons un exemple : <p id="maDiv">You think water moves fast? Les spécificités du poids des sélecteurs ! Calcul des spécificités

Comprendre la cascade en CSS | Tutoriaux Cette partie du site n'est plus maintenue, elle reste en ligne pour la postérité. Date de mise en ligne : 13 décembre 2004 Cet article est l'adaptation en langue française (pas une traduction exacte) de l'article Understanding The Cascade Article original par Holly 'n John ©positioniseverything Cet article va décrire ce que signifie exactement "cascade", et pourquoi c'est si important lorsqu'on utilise des feuilles de style en cascade. Rappel de la syntaxe CSS : Que signifie exactement une "feuille de style"? Une "feuille de style" est un jeu de règles de styles. CSS2 est un langage de feuille de style qui permet aux auteurs et aux lecteurs de lier du style (ex. les polices de caractères, l'espacement, les couleurs etc.) aux documents structurés (ex. documents HTML ou XHTML). La source d'un document (X)HTML est un bloc unique de code (tout du moins lorsqu'il atteint l'internaute), et n'importe quel nombre de feuilles de style peuvent lui être appliqué. D'où viennent les feuilles de style ? !

Créer un Simple Responsive Email en HTML Dans ce tutoriel je vais vous montrer comment créer un email en HTML responsive simplement et qui fonctionnera sur tous les clients mail, y compris les applications et nouveaux clients mail sur smartphone. Pour cela, nous allons utiliser des Media Queries basiques et un système de largeur variable pour assurer une compatibilité maximale. Il fut une époque où les media queries suffisaient à rendre les emails responsive sur les clients mail iOS et Android. Depuis, les applications mail pour les plateformes iOS et Android fleurissent sur les marchés respectifs, avec divers niveaux de support des emails responsives. Le plus marquant étant la dernière mise à jour de l'application Gmail pour Android qui est deux fois plus populaire que l'application mail par défaut chez les utilisateurs d'Android (qui comprend maintenant 11% d'ouvertures au total). Cependant, il se peut que vous ayez des compromis à faire sur le design. Voici ce que nous allons réaliser ensemble : Remplacez le petit "Hello!"

Combinateurs et pseudo-classes CSS Nous poursuivons notre introduction aux basiques de CSS avec un article sur les combinateurs et les pseudo-classes. La maîtrise de cette syntaxe vous permettra d'être plus efficaces et d'améliorer la structure de votre code. Comme leur nom le suggère, les combinateurs aident à combiner différents sélecteurs pour former de nouveaux sélecteurs, plus spécifiques. Il existe quatre types de combinateurs ciblant les relations parent/enfants et frères existant entre les éléments. Ce premier combinateur est représenté par un espace entre deux éléments, par exemple ul / espace / li : Ce combinateur cible un élément F qui est un descendant de l'élément E. Toutes les listes auront un background rouge, car chacune est un descendant (enfant ou petit-enfant) de la liste non-ordonnée. Combinateur enfant E > F Cible un élément F qui est l'enfant d'un élément E. Avec le même HTML que ci-dessus et le CSS : Combinateur adjacent E + F Cible un élément F immédiatement précédé par un élément E. Les pseudo-classes

Apprendre à créer une grille Bootstrap Twitter Le système de grille est le coeur de BOOTSTRAP twitter. Bootstrap Twitter considère qu'une ligne .row fait 12 colonnes. L'idée d'un responsive design c'est de dire que pour telle taille d'écran un élément occupe X colonne(s). Boostrap Devices Bootstrap twitter prend en charge 4 types de format: Il existe un préfixe pour ces formats: On va prendre l'exemple d'affichage de deux éléments. Sur un écran de poste de travail Tablette Smartphone Maintenant que nous avons établi la stratégie d'affichage des éléments, on peut passer au code: Code HTML Rendu Si vous changez la taille de votre navigateur, vous verrez que le rendu ci-dessus s'adaptera à la taille comme nous le voulions plus haut. Explication du code Nous avons construit deux blocs un orange et un vert. Pour le bloc orange: Offset Maintenant voyons comment nous avons géré l'espace entre les éléments pour la version LG ( Large device ). Pour le bloc vert:

Apprendre à créer un tableau responsive design avec Bootstrap Twitter Pour les petits supports - comme les smartphones et les tablettes -, les tableaux deviennent souvent illisibles. Il existe quelques astuces pour pouvoir les consulter de manière productive même sur les plus petits formats. Responsive design par defaut des <table> La manière par défaut de BOOTSTRAP Twitter est d'encadrer un tableau par une div avec la classe "table-responsive" Pour centrer le tableau et lui définir une taille minimale et maximale : Le résultat sera le suivant sur un petit format : Et sur un format plus large: Le responsive table un peu plus poussé Il est possible de transformer le tableau entièrement et de lui donner un autre sens de lecture, grâce au CSS : En format large le tableau ressemblera à cela : En format smartphone le tableau sera comme cela:

odevie Les sélecteurs css, outre les classiques id, class et descendants, offrent un apport énorme en terme de flexibilité. Ils permettent de cibler dynamiquement des éléments et ont été grandement étoffés avec l'arrivée progressive de la spécification CSS3. Petit rappel. Le symbole étoile s'applique à tout les éléments de la page. Ils sont souvent utilisés pour mettre les margins et padding à 0. Ils peuvent être utilisés en outre en tant qu'enfant => #container * { ... } On ne va pas s'éterniser sur les classiques #maclasse (pour les id), .maclass (pour les class), les accesseurs directs (li, a, div, ...), et les :visited, :link et :hover. Toujours se demander si on a vraiment besoin d'un ID pour cibler un élémentw x y z.maclasse... n'y a t'il pas trop de selecteurs? Sélectionne uniquement le premier élément aprés Y. Identique à X Y, mais s'arrêtera aux premiers enfants. Identique à X + Y, mais en moins strict. Sélectionne uniquement les éléments qui ont un attribut title. Variantes Extensions

Related: