{{tag>dev web html css}}
====== Ajoutez des tableaux ======
Notes et transcriptions du cours [[https:... td pour sélectionner toutes les cellules des tableaux de la page. Donc pour créer des bordures à nos ce... able_03.png}}
Les bordures sont collées les unes aux autres, cela donne l'impression qu'il n'y a qu'un... ode>
Le texte des cellules n'apparait plus collé aux bordures, il y a une marge de 15 pixels entre l'e
Lorsque vous créez un tableau, vous réfléchissez aux colonnes et aux rangées qu'il faudra créer. Eh bien, c'est la même chose ici !
On va définir les colo... sse CSS ''.box'' permet d'ajouter un peu de style aux éléments. Pour que le contenu soit plus harmonieu... avoir besoin de définir des hauteurs différentes aux rangées, ce qu'on va pouvoir spécifier avec ''gr
on veuille modifier uniquement "990 espèces d'oiseaux" dans le paragraphe suivant :
<p>Il existe plus de 990 espèces d’oiseaux répertoriées dans toute l’Europe.</p>
Cela serai... l y avait une balise autour de “990 espèces d'oiseaux”, mais malheureusement, il n'y en a pas. Par chan... llons nous servir pour colorer “990 espèces d'oiseaux”.
''<div> </div>'' est une balise de type "block
ML des paragraphes de texte en "lorem ipsum" (du faux texte). Ensuite, dans le fichier CSS, j'ai donné ... vec la propriété CSS padding =====
Pour ajouter aux paragraphes une marge intérieure (padding) de 16... margin''(comme ''padding'' d'ailleurs) s'applique aux quatre côtés du bloc.
Si vous voulez spécifier d... === En résumé =====
* On distingue deux principaux types de balises en HTML :
* les balises de t
surtout utilisées pour adapter le design du site aux différentes largeurs d'écran.
Faisons un test to... dimensions “limites” pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs ... == En résumé =====
Pour adapter un site internet aux différentes tailles d'écran, plusieurs techniques... r le style souhaité.
* Pour cela, on a recours aux **media queries** qui sont la manière de "conditi
ce cas, indiquez les quatre valeurs correspondant aux angles dans la propriété ''border-radius'', dans ... bouton avec une ombre portée indique visuellement aux visiteurs du site qu'il est "cliquable".
La prop... CSS border-radius.
* On peut ajouter une ombre aux blocs de texte avec ''box-shadow''. On doit indiq
is que la page a été chargée ; et tout cela grâce aux **pseudo-classes**.
<note>
Les [[https://develop... il vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms y compris !).
Dans notre exemple, on a
a balise ''<nav>'' doit regrouper tous les principaux liens de navigation du site. Vous y placerez par ... cas par exemple des actualités (articles de journaux ou de blogs).
</note>
Pour résumer :
{{schema_st... ' : pied de page ;
* ''<nav>'' : liens principaux de navigation ;
* ''<section>'' : section de
es uns en dessous des autres (comme des blocs normaux), et il devient possible de modifier leurs dimens... '', mon élément va toujours se placer par rapport aux bords de la page ?
Eh bien… pas nécessairement. ... page. Mais si vous placez deux éléments en absolu aux mêmes coordonnées… ils vont se chevaucher.
Dans
apte, selon les tailles d'écrans, plus facilement aux préférences des visiteurs.
Donnez une taille au ... ce blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.
<note>
L'
ça, mais l'image apparaît floue : elle n'est pas aux bonnes dimensions. Pour corriger cela, on va voir... La propriété CSS ''background-position'' associée aux valeurs ''top'', ''bottom'', ''left'', ''center
tile quand nous aurons besoin d'adapter nos pages aux plus petits écrans. Nous verrons ça dans la proch... r leur **alignement sur l'axe secondaire**, grâce aux valeurs :
* ''stretch'' : les éléments sont ét
une petite difficulté supplémentaire par rapport aux cases à cocher : il faut organiser les boutons ra... '' pour le champ utilisé.
[[405_ajouter_des_tableaux|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]
OpenClassrooms.
Tous les langages ne servent pas aux mêmes choses, mais ils se complètent. Si vous com... ;
* jeux web (jeux de stratégie, élevage d'animaux virtuels…) ;
* etc.
Bonne découverte !
=====
