{{tag>dev web html css}}
====== Ajoutez des tableaux ======
Notes et transcriptions du cours [[https:... td pour sélectionner toutes les cellules des tableaux de la page. Donc pour créer des bordures à nos ce... able_03.png}}
Les bordures sont collées les unes aux autres, cela donne l'impression qu'il n'y a qu'un... ode>
Le texte des cellules n'apparait plus collé aux bordures, il y a une marge de 15 pixels entre l'e
Lorsque vous créez un tableau, vous réfléchissez aux colonnes et aux rangées qu'il faudra créer. Eh bien, c'est la même chose ici !
On va définir les colo... sse CSS ''.box'' permet d'ajouter un peu de style aux éléments. Pour que le contenu soit plus harmonieu... avoir besoin de définir des hauteurs différentes aux rangées, ce qu'on va pouvoir spécifier avec ''gr
===
La méthode DRY est un des concepts fondamentaux lorsqu’on souhaite simplifier notre CSS ; cette m... == Question 2 =====
Vous voulez créer deux nouveaux boutons :
* un dont les bords seront ronds ;
... se|
Choix 2. La première réponse génère deux nouveaux boutons mais ne respecte pas les principes du DRY. Vous obtenez deux nouveaux boutons mais au prix de multiples répétitions.
P
on veuille modifier uniquement "990 espèces d'oiseaux" dans le paragraphe suivant :
<p>Il existe plus de 990 espèces d’oiseaux répertoriées dans toute l’Europe.</p>
Cela serai... l y avait une balise autour de “990 espèces d'oiseaux”, mais malheureusement, il n'y en a pas. Par chan... llons nous servir pour colorer “990 espèces d'oiseaux”.
''<div> </div>'' est une balise de type "block
ui se met en place à mesure que l’on fait de nouveaux changements. Et, à moins d’être prévoyant et vigi... lus parlant que 10 000 mots ! Partons à la chasse aux pokémons, euh... aux répétitions !
<code html>
<body>
<h2>Différents exemples de boutons</h2>
<d... boutons :
{{css_exemple_boutons.png}}
4 boutons aux caractéristiques différentes.
Nous avons donc qu
ient du CSS via l’attribut style, puis en passant aux id et aux classes, avant de finir par vos éléments :
la chaine de priorité :
inline > id > pseudo-... de notre div ne fait plus que 10px, contrairement aux 500px établis dans notre CSS ! 😨
Mais pourquoi ?... règles de priorité : le code inline est supérieur aux autres, et il sera donc appliqué en priorité.
Pr
sass html}}
====== Améliorez vos mixins grâce aux fonctions ======
Notes et transcriptions du cour... ''%%.intro__title%%'' : elle sera donc appliquée aux éléments contenus dans ''%%.intro__title%%''. Ici... com/documentation/modules/color|uniquement dédiés aux couleurs]] ! 🎉
</note>
On appelle ces outils des... existe de nombreuses recettes préparées pour gâteaux, pour Sass c’est pareil. Sass a des fonctions pou
ML des paragraphes de texte en "lorem ipsum" (du faux texte). Ensuite, dans le fichier CSS, j'ai donné ... vec la propriété CSS padding =====
Pour ajouter aux paragraphes une marge intérieure (padding) de 16... margin''(comme ''padding'' d'ailleurs) s'applique aux quatre côtés du bloc.
Si vous voulez spécifier d... === En résumé =====
* On distingue deux principaux types de balises en HTML :
* les balises de t
surtout utilisées pour adapter le design du site aux différentes largeurs d'écran.
Faisons un test to... dimensions “limites” pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs ... == En résumé =====
Pour adapter un site internet aux différentes tailles d'écran, plusieurs techniques... r le style souhaité.
* Pour cela, on a recours aux **media queries** qui sont la manière de "conditi
ce cas, indiquez les quatre valeurs correspondant aux angles dans la propriété ''border-radius'', dans ... bouton avec une ombre portée indique visuellement aux visiteurs du site qu'il est "cliquable".
La prop... CSS border-radius.
* On peut ajouter une ombre aux blocs de texte avec ''box-shadow''. On doit indiq
is que la page a été chargée ; et tout cela grâce aux **pseudo-classes**.
<note>
Les [[https://develop... il vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms y compris !).
Dans notre exemple, on a
a balise ''<nav>'' doit regrouper tous les principaux liens de navigation du site. Vous y placerez par ... cas par exemple des actualités (articles de journaux ou de blogs).
</note>
Pour résumer :
{{schema_st... ' : pied de page ;
* ''<nav>'' : liens principaux de navigation ;
* ''<section>'' : section de
es uns en dessous des autres (comme des blocs normaux), et il devient possible de modifier leurs dimens... '', mon élément va toujours se placer par rapport aux bords de la page ?
Eh bien… pas nécessairement. ... page. Mais si vous placez deux éléments en absolu aux mêmes coordonnées… ils vont se chevaucher.
Dans
OpenClassrooms.
Tous les langages ne servent pas aux mêmes choses, mais ils se complètent. Si vous com... ;
* jeux web (jeux de stratégie, élevage d'animaux virtuels…) ;
* etc.
Bonne découverte !
===== ... il les différents technologies et spécialisations auxquels vous pourrez vous former avec OpenClassrooms
s condensée et concise. En ''.sass'', dites adieu aux accolades et aux points-virgules ! À la place, elle utilise uniquement des tabulations et des retours ... rarchie plus facile à lire, et regrouper des morceaux de code entre eux.
* Il existe plein de préproc
