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... ut>'' est une balise orpheline.
On la retrouvera plusieurs fois dans ce chapitre. Souvent, ce sera la v
titions**. Je vous ai préparé un exemple qui sera plus parlant que 10 000 mots ! Partons à la chasse aux...
Nous avons 4 boutons, si une propriété apparaît plusieurs fois avec la même valeur, c’est que vous ave... e tous nos boutons, malgré leurs différences, ont plusieurs propriétés communes : le même padding, le mê... ne codebase **DRY**, et rendent votre code encore plus difficile à maintenir et à modifier.
Je vous pr
- Définir un conteneur ;
- Placer à l'intérieur plusieurs éléments.
Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le principe !
Sur une même page web, vous pouvez avoir plusieurs conteneurs (plusieurs cartons, si vous préférez). Vous pouvez en créer autant que nécessaire pour
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... ode css>
p {
font-size: 16px;
}
</code>
Il y a plusieurs moyens d'indiquer une valeur relative. Une des plus fréquentes consiste à indiquer la taille en em.
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
{
/* J'en profite pour ajouter un commentaire
sur plusieurs lignes */
color: blue;
}
</code>
===== Appliquez une propriété CSS à plusieurs balises HTML à la fois =====
Si plusieurs balises ont la même style, il suffit de combiner la dé... CSS, on peut appliquer du style à un élément (ou plus) avec l'attribut ''class''. Par contre ''id'' ne
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
{{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
''id'' sont uniques. Vous ne pouvez pas utiliser plusieurs fois un ''id'' dans votre HTML.
<code html>... Les **classes** permettent d’appliquer un style à plusieurs éléments.
Une **pseudo-classe** est un mot ... t le navigateur décide quelle règle s’applique si plusieurs règles ont des sélecteurs différents, mais ... se passe-t-il ?
La largeur de notre div ne fait plus que 10px, contrairement aux 500px établis dans no
smeister.com/|SassMeister]]
Nous l'avons utilisé plusieurs fois pour comparer notre code Sass et le rés... 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... imenter. Seulement, vous ne pourrez pas coder sur plusieurs fichiers, ni intégrer des images depuis votr
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
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:
é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é
