de la fenêtre. Essayez de la redimensionner, pour voir !
===== Codez des interfaces responsives =====
... férentes tailles d'écran, vous allez également pouvoir tirer profit des différentes astuces pour adapter... eur de la fenêtre de votre navigateur. Vous allez voir que, si celle-ci est trop petite, l'image se forc... contiennent.
Les propriétés CSS que nous allons voir ici ont justement été créées pour contrôler les d
aux bonnes dimensions. Pour corriger cela, on va voir ensemble comment changer le comportement de l'ima... concerne les images de fond. Si vous voulez en savoir plus, vous pouvez vous référer à la [[https://dev... "paysage.jpg") cover center;
}
</code>
Il faut savoir que :
* l'ordre des valeurs n'a pas d'importan... t on verra donc à travers !
Comme vous pouvez le voir, si vous appliquez la propriété opacity à un élém
iez juste vous arrêter au sélecteur précédent et avoir seulement :
<code sass>
.project-preview{
// v... ieurs espaces. Vous en avez déjà croisé sans le savoir : par exemple, ''ul li'' permet de cibler n’impor... 'a'', hériteront de ces propriétés !
On vient de voir ensemble le combinateur descendant, mais il en ex... ue vous en connaissez certains sans vraiment le savoir. 😉
==== Combinateur parent ====
<code css>
.par
tes, mais surtout de gagner du temps.
Il doit y avoir un moyen plus simple, non ? Finalement, c’est pre... ouleur, juste un poil plus foncée. Si on pouvait avoir une seule mixin, mais qui puisse s’adapter…
On v... assombrir une couleur.
Comment faire ? Comment savoir quelle fonction utiliser ? Je regarde la [[https:... re recette darken assombrit les couleurs. Pour pouvoir faire cette recette il nous faut 2 ingrédients :
:
{{bloc_or_inline.jpg}}
Comme vous pouvez le voir, les blocs sont les uns en dessous des autres. On... Contrairement à un ''inline'', un ''block'' peut avoir une largeur et une hauteur précises grâce à ces d... très précis. Essayez le bout de code suivant pour voir :
<code css>
p {
width: 250px;
}
</code>
Le... ême que pour la propriété ''border'', vous allez voir !
===== Spécifiez les propriétés margin et paddi
e principe !
Sur une même page web, vous pouvez avoir plusieurs conteneurs (plusieurs cartons, si vous ... un tas d'autres propriétés utiles que nous allons voir juste après, on va y revenir.
Essayez aussi de tester l'ordre inversé, pour voir :
<code css>
.container {
display: flex;
... ts à aller à la ligne avec ''flex-wrap''.
Voyons voir comment les lignes se répartissent différemment a
<p>
Faites un souhait que vous voudriez voir exaucé :
<input type="radio" name="souhai... t>
</form>
</code>
On ajoute un peu de CSS pour avoir un style sur notre "fieldset" et voilà le résulta... set"'' : remise à zéro du formulaire (testez pour voir).
* ''type="image"'' : équivalent du bouton ''s... prendre un nouveau langage, comme le PHP, pour pouvoir “récupérer” les informations saisies et décider q
it partie de l’apprentissage. Le tout est de le savoir, d’y penser et de prendre le temps d’y remédier.
... trouvons :
* ''border-radius: 30px''
On peut voir que tous nos boutons, malgré leurs différences, o... tn btn-orange">Bouton</button>
</code>
Sans le savoir, vous venez de mettre en place ce qu’on appelle l
rs par leur **code couleur hexadécimal**, ni de savoir quelle couleur correspond à quel code. Alors oui,... et et veut que son site soit orange. Vous allez devoir repasser en revue **tous** vos fichiers CSS, modi... chocolat) et on y colle une **étiquette** pour savoir ce qu’il y a dedans (chocolat de Kassandre, ne su
aptés aux écrans plus petits, comme une tablette, voire un téléphone.
Comment ça fonctionne ? La syntax... }
}
</code>
Pas mal, non ? Plutôt que de devoir tout séparer, la media query et ses règles sont b... loyer votre code Sass en ligne. C'est ce qu'on va voir dans le prochain et dernier chapitre.
[[230_a
e bien des outils et plateformes en ligne pour pouvoir pratiquer votre code Sass sans l’installer sur vo... ne =====
Pour pratiquer, rien de mieux que de pouvoir essayer en ligne sans rien installer. Seulement, ... nt faire dans le cas où vous voulez quand même pouvoir poster en ligne votre travail Sass, et ce sans vo
te>
Attention, la balise ''<header>'' n'a rien à voir avec la balise ''<head>'' que vous aviez vue dans... rs une feuille de style, etc.
</note>
Il peut y avoir plusieurs en-têtes dans votre page. Si celle-ci e... plusieurs sections, chaque section peut en effet avoir son propre ''<header>''.
Utilisez la balise <foo... che possibles de l'utilisateur.
Ici on pourrait avoir, de façon simplifiée :
<code html>
<nav>
<ul
votre grid. Sauf que, cette fois-ci, vous allez avoir besoin de déclarer la propriété display: grid; :
... ous les éléments de classe ''box''. Or, on peut avoir besoin de définir des hauteurs différentes aux rangées, ce qu'on va pouvoir spécifier avec ''grid-template-rows'', en indiqu... nsi une partie de la hauteur des éléments censés avoir une hauteur de 100 pixels. La première rangée est
://openclassrooms.com/|Openclassrooms]].
Pour pouvoir charger une page sur le web, les navigateurs resp... ’une fois.
<note>
Il est toujours judicieux de revoir les bases pour consolider ses connaissances : n’h
artichaut : le nom en évoque l’apparence ou le pouvoir. C’est la même chose pour notre HTML.
Comme pour... bout de code réutilisable, ce qui nous permet d’avoir une codebase bien ordonnée, tout en assurant une ... era à mieux visualiser votre structure HTML et prévoir votre structure avec BEM.
* BEM signifie bloc,
