u de style aux éléments. Pour que le contenu soit plus harmonieux, on va donner à chaque élément une hau... :
<code css>
.box {
height: 150px;
}
</code>
Plus bas, dans le fichier CSS, créons 3 colonnes, chac... e élément du conteneur. Visuellement, ils ne sont plus collés les uns aux autres.
===== Choisissez vos ... re grid va dépasser. C'est pourquoi il est encore plus simple d'utiliser des ''fr'', l'unité créée spéci
Indiquer une taille relative a l'avantage d'être plus souple, elle s'adapte, selon les tailles d'écrans, plus facilement aux préférences des visiteurs.
Donnez... rs moyens d'indiquer une valeur relative. Une des plus fréquentes consiste à indiquer la taille en em.
... a une taille normale avec 1em.
* Le texte est plus grand avec une valeur supérieure à 1, comme 1.3em
{{tag>dev web html css}}
====== Allez plus loin ======
Notes et transcriptions du cours [[https://ope... n HTML et CSS mais, lorsqu'on veut rendre sa page plus interactive, un langage comme JavaScript devient ... ion** que l'on utilise fréquemment sur le Web, en plus de HTML et CSS. Javascript permet de rajouter de ... rveur. Cela donne l'impression que les pages sont plus dynamiques et plus réactives.
Les navigateurs so
enne ''inline''.
<note>
Si vous ne vous souvenez plus de la différence entre ''inline'' et ''block'', j... dans les faits, vous verrez qu'on l'utilise bien plus souvent sur des balises ''block'' que sur des ba... été CSS ''position''.
Regardons tout ça d'un peu plus près !
==== Définissez un positionnement relatif... osition_relative_02.png}}
Le lien est légèrement plus bas que la ligne de texte, car il est décalé de 6
emière ligne. Par défaut et pour rendre l'en-tête plus lisible, elle est en gras.
<note>
Comme vous pou... 15px;
}
</code>
Le texte des cellules n'apparait plus collé aux bordures, il y a une marge de 15 pixels... trémité du texte et les bordures : le tableau est plus aéré.
C'est mieux !
Et comment on fait pour cen... gauche…
C'est simple, et ça se passe une fois de plus dans le fichier CSS, cette fois, au niveau du sél
pour le moment. Sachez juste que les méthodes les plus utilisées sont ''get'' et ''post''.
* L'attribu... on restera sur la même URL, ce qui nous permettra plus tard d'inspecter ce qu'on obtient, assez simpleme... r un serveur web. Elle permet de faire des tâches plus complexes, comme traiter un formulaire, envoyer u... , mais il est indispensable parce qu’il permettra plus tard d'identifier le champ d'où viennent les info
pas vous perdre, je vous ai uniquement listé les plus utilisées :
* ''height'' : hauteur de la zone... ia'' : type d'écran de sortie. Avec la valeur la plus utilisée :
* ''screen'' : écran “classique”,
... r et la taille du texte selon que la fenêtre fait plus ou moins de 1 024 pixels de large :
<code css>
/... lue;
}
/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width:
du texte ou encore des images. Les conteneurs les plus célèbres sont les balises %%<div> et <span>%%.
... que les blocs aillent à la ligne lorsqu'ils n'ont plus la place, avec ''flex-wrap''.
Voilà les différen... '' : les éléments vont à la ligne lorsqu'il n'y a plus la place ;
* ''wrap-reverse'' : les éléments vont à la ligne, lorsqu'il n'y a plus la place, en sens inverse.
<code css>
.container
CSS, on peut appliquer du style à un élément (ou plus) avec l'attribut ''class''. Par contre ''id'' ne peut s'utiliser que pour un seul élément, pas plus.
Voyons comment appliquer la méthode dans un exe... ur indiquer la couleur, ce qui nous permet d'être plus précis.
Testez le résultat : seul votre paragrap... s sera surtout utile si vous faites du JavaScript plus tard, pour reconnaitre certaines balises.
En HTM
ple_bordures.png}}
Bon ce n'est pas forcément du plus bel effet, mais c'était pour la démonstration !
... ple pour des "groupes de boutons". Vous trouverez plus d’infos sur [[https://getbootstrap.com/docs/4.0/c... der-radius/|Fancy Border Radius]] :
Il ne reste plus qu'à cliquer sur "copy" pour reporter la valeur d... eur de la couleur en rgba, l’effet d'ombre paraît plus réaliste, plus esthétique.
Il n'est pas toujours
outé un lien hypertexte dans le bout de code HTML plus haut, et désactivé le changement de style de ''mo... s toutes les propriétés CSS qui existent. En fait plus le navigateur est vieux, moins il connait de fonc... et sur leurs différentes versions).
===== Allez plus loin avec les sélecteurs avancés =====
En CSS, le plus dur est bien souvent de réussir à cibler l'élémen
> trop souvent, et oublient que d'autres balises plus adaptées existent.
</note>
Par exemple :
* ''... l'ordinateur. Utilisez toujours d'autres balises plus adaptées quand c'est possible.
Maintenant que vo... ant, si on veut que nos paragraphes soient encore plus espacés entre eux, on rajoute la propriété ''marg... t à droite, il va falloir utiliser des propriétés plus précises… Le principe est le même que pour la pro
el for="intelligent">Être <strong>encore</strong> plus intelligent</label>
<input type="radio" n... s invalides avec '':invalid''.
N'oubliez pas non plus que vous disposez de la pseudo-classe '':focus'' ... e="submit"'' : c'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiq
e design avec les Media Queries]]
* [[425_aller_plus_loin|Allez plus loin]]
* [[430_quiz_fonctionnalites_avancees_html_et_css|Quiz : Utiliser des fonction
'<header>''(en-tête, en français). On y trouve le plus souvent, à minima, un logo. On le place, pour des... end veut aussi dire que le contenu sera également plus lisible par des outils d'assistance dans le cadre
