pement web css sass html}}
====== Utilisez les variables et mixins ======
Notes et transcriptions ... s.com/|Openclassrooms]].
===== Initiez-vous aux variables =====
Pour le moment, le site de Robbie L... *tous** vos fichiers CSS, modifier **TOUTES** les valeurs à la main, une par une.
Reprenons l’introdu... e bien une solution pour le faire, et c’est une **variable**! 🙌
Les variables sont comme des **boîtes
indique l'adresse de la page ou du programme qui va traiter les informations.
Tout cela va nous permettre de créer la structure de base d’un formulaire... exte après le formulaire</p>
</code>
Je donne la valeur "get" à l'attribut ''method''; et une chaine... sieurs fois dans ce chapitre. Souvent, ce sera la valeur de son attribut ''type'' qui changera selon l
===== Question 4 =====
Vous devez déclarer une variable appelée **button-radius** pour stocker la valeur de l’arrondi de vos boutons. Quelle serait la ... 0px;''
++++ Réponse |
Choix 3.
Pour déclarer une variable, tapez le symbole “$” suivi du nom de votre variable, et enfin la valeur.
''$nom-de-la-variable
em $dark-purple;
}
</code>
Vous avez :
* deux variables ''$title-color'' et ''$dark-purple'' qui ... title%%''. Ici, le titre.
* Créer de nouvelles variables de couleur ? Vous savez faire. ✅
* Créer... donc en haut du document pour créer une nouvelle variable pour la coul... stooooooop. 🛑
Dans ce cas-... ombre mais plus foncée.
Créer une toute nouvelle variable pour chaque ombre, c’est aussi une nouvelle
édent ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Avec border, on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :
* La largeur que l'on définit avec une valeur en pixels (comme 2px).
* La couleur que l'o
dra créer. Eh bien, c'est la même chose ici !
On va définir les colonnes et les rangées avec deux pro... nts. Pour que le contenu soit plus harmonieux, on va donner à chaque élément une hauteur de 150 pixels... ir des hauteurs différentes aux rangées, ce qu'on va pouvoir spécifier avec ''grid-template-rows'', e... e>
…ça ne marche pas, en tout cas, le navigateur va vouloir appliquer les deux instructions en même t
'p'' (sans les chevrons).
* Le bloc propriétés/valeurs délimité par les accolades. Les effets de st... . Pour chaque propriété CSS, on doit indiquer une valeur (séparée par '':''. Par exemple, pour la prop... tribut id.
Mais pour ce faire - en pratique - on va surtout utiliser l'attribut ''class''.
Les attri... ss="des"> </p>
<img class="classes">
</code>
La valeur de l'attribut ''class'' permet d'identifier l
tps://developer.mozilla.org/fr/docs/Web/CSS/color_value#les_mots-cl%C3%A9s|noms de couleurs]] sont sup... ansparence) avec la notation RGBA, où la dernière valeur correspond à l'opacité : ''%%color: rgba(250... voulez trouver une couleur, ou bien convertir une valeur en utilisant une autre syntaxe, vous trouvere... ur indiquer la couleur de fond de la page web, il vaut mieux l'appliquer à la balise ''<body>''. Eh ou
dans un conteneur ; la propriété display avec la valeur flex collent les éléments de gauche à droite.... es inverser. Cette propriété CSS peut prendre les valeurs suivantes :
* ''row'' : organisés sur une ligne (valeur par défaut) ;
* ''column'' : organisés sur ... iétés utiles que nous allons voir juste après, on va y revenir.
Essayez aussi de tester l'ordre inver
s ('':hover'' signifie d'ailleurs “survoler”), et va nous permettre d'y appliquer un style.
==== Déclarez le sélecteur sur lequel le style va s'appliquer ====
Prenons un exemple où on appliq... les liens hypertextes. Pour déclarer un style qui va "s'activer" dès que le visiteur du site web va pointer la souris dessus, on doit écrire notre CSS com
s lire et les utiliser.
Mais attends, du coup on va devoir tout réécrire en Sass dans un fichier .sas... color: #a5b4fc;
}
}
}
</code>
==== Les variables ====
Les variables vous permettent de **stocker des valeurs répétées fréquemment**, comme par exemple les couleur
élément de la page en attribuant à ''display'' la valeur **none**. Par exemple, si je veux masquer les éléments qui ont la classe secret, je vais écrire :
<code css>
.secret {
display: non... org/fr/docs/Web/CSS/display|liste des différentes valeurs possibles pour display]] est longue. Nous ... d'origine : le point de coordonnées (0, 0) qui va nous permettre de le déplacer :
{{schema_css_po
n tableau. Cette balise est de type ''block'', on va donc la placer en dehors d'un paragraphe ou d'une ''div''.
===== Indiquez les valeurs du tableau avec les balises HTML <tr> et ... les bordures entre elles”. Elle peut prendre deux valeurs :
* ''collapse'' : les bordures seront co... * ''separate'' : les bordures seront dissociées (valeur par défaut).
On écrit :
<code css>
table {
nt un ordre bien précis : en premier le HTML, qui va déterminer les fondations de votre page web, puis... lisable, or les id sont utilisés dans le cas de **valeurs uniques** : tous les sélecteurs qui les util... cas-là ? Il cumule les points. L’id est toujours vainqueur, seulement ici vous avez déclaré un id ET ... ns toutes les règles, il y a des exceptions ?
Je vais être honnête avec vous, aujourd’hui encore il m
