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
titions**. Je vous ai préparé un exemple qui sera plus parlant que 10 000 mots ! Partons à la chasse aux... ne codebase **DRY**, et rendent votre code encore plus difficile à maintenir et à modifier.
Je vous pr... des règles additionnelles pour rendre notre code plus lisible pour des cas bien précis.
On commence p... ns le but d’une amélioration. Que ce soit un code plus lisible, plus rapide, ou qui consomme moins, le b
comme ça, alors ?
Coder en utilisant une syntaxe plus cohérente c’est bien pratique, le souci c’est que... qui vont vous permettre d’écrire du code propre, plus organisé et surtout plus efficace. Il existe deux manières d’écrire du Sass ; on les différencie par le... CSS normal, tandis que le ''.sass'' a une syntaxe plus condensée et concise. En ''.sass'', dites adieu a
ment de programme, la couleur de l’ombre ne plaît plus du tout. On vous envoie un nouveau visuel :
{{ma... couleur**, seulement il vous faut une ombre, mais plus claire. Et puis un jour, une autre ombre mais plus foncée.
Créer une toute nouvelle variable pour chaq... r vous. Votre objectif, c’est de coder de manière plus lisible, sereine et organisée certes, mais surtou
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:
se passe-t-il ?
La largeur de notre div ne fait plus que 10px, contrairement aux 500px établis dans no... igateur suit l’ordre des priorités. L’ ''id'' est plus fort que la classe.
Oui bon, en soi si on a un s... iliser.
</note>
Comme les id ont une spécificité plus importante, il est difficile de les outrepasser. ... ous ferez en sorte qu’ils aient une **spécificité plus basse**, ce qui les rendra plus faciles à contour
SCSS depuis une source externe ou un fichier. En plus de compiler votre code, vous pourrez télécharger ... tions, de bugs, de librairies qui ne fonctionnent plus, et j’en passe ?
[[https://pages.github.com/|Gi... e si vous souhaitez travailler sur des projets de plus grande envergure.
Et imaginez que vous travailli... ll -g sass
</code>
Attention, cette version sera plus lente que les précédentes options listées au-dess
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
penclassrooms]].
Soyons honnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Que ce ... convention qui va nous aider à rendre nos classes plus compréhensibles, et ce grâce au **nommage**.
**... ous allons prendre comme exemple notre header, et plus précisément notre barre de navigation.
{{exemple... s vouliez faire en sorte que le lien Accueil soit plus voyant, et d’une couleur différente :
{{liens_na
éthode consiste à :
- répéter les sections les plus utilisées ;
- dupliquer les sélecteurs pour les rendre plus spécifiques ;
- refactoriser le code afin d’évi... de dupliquer vos sélecteurs pour obtenir un code plus lisible et plus précis.
++++ Réponse|
Choix 1. La réponse 2 n’est pas la définition de la spécificité
