Découvrir Java pour le web

Utiliser CSS pour la mise en forme

Testez gratuitement nos 1297 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour donner une apparence moderne et efficace à votre application, passez en revue les sélecteurs de CSS et de CSS3. Mettez également en place une mise en forme épurée.
06:59

Transcription

Nous allons maintenant mettre en forme notre document HTML grâce au CSS. Nous avons ici un fichier CSS que nous incluons grâce à la balise link. Ce fichier CSS est dans un répertoire CSS, ce qui est une pratique courante dans les sites web. Ça permet de réunir tous les fichiers CSS dans un même répertoire, et éventuellement d'en inclure un ou plusieurs selon les besoins de la page et de sa mise en forme. Ce fichier est pour l'instant vide, nous allons le compléter. Pour l'instant il n'a qu'un commentaire : Mise en forme, entre « Slash-Étoile » et « Étoile-Slash ». On lui rajoute donc une règle. Une règle est composée d'un sélecteur, et d'un ensemble de valeurs entre accolades. Ici il n'y a qu'une valeur, qui est la famille de fonts, qui va être Arial, ou à défaut Helvetica, ou à défaut Sans Serif qui est courante sur tous les ordinateurs. Et cette règle, donc, va s'appliquer à ce sélecteur, qui est « étoile » et qui est toutes les balises de la page. Si on visualise ici, on a toutes les balises qui sont passées en Arial. On peut visualiser ce qu'était le site avant en désactivant la règle. Sur la partie droite de l'inspecteur, on a les styles sur lesquels on va pouvoir éventuellement travailler et visualiser des modifications, ce qui est très intéressant aussi pour voir comment sont faits les autres sites et apprendre des styles qui sont appliqués dessus. Il y a bien d'autres sélecteurs, notamment le sélecteur par balise qui permet de spécifier pour une balise, ici « h1 » un nouveau style. Ici je change la marge extérieure (margin) et la marge intérieure (padding) avec des unités qui ne sont pas le pixel, qui sont en fonction de la police et de la taille de la police de l'élément. Alors, si on veut visualiser ici la modification, c'est une modification assez subtile, mais grâce à l'inspecteur de documents on va pouvoir le visualiser ici en sélectionnant l'élément « h1 » et en désactivant éventuellement la marge et le padding. On voit encore mieux, on peut utiliser ce deuxième onglet qui va permettre de visualiser en couleur la marge intérieure ici. La bordure étant à « 0 », la marge ne se voit pas, mais si je désactive la marge, je vais avoir la marge par défaut du « h1 » que je peux visualiser en jaune ici. C'est très pratique pour visualiser les styles appliqués. Autres sélecteurs aussi intéressants, c'est les sélecteurs soit par identifiant, ici « #logo », ou par classe, ici .temps. Donc on va pouvoir spécifier des éléments de la page soit par leur identifiant, ici j'ai un identifiant « logo » qui est associé à mon image donc je vais pouvoir redimensionner une image qui était trop grande. Ou alors, par sa classe, la classe temps ici n'est pas spécifiée sur les différents spans. Ça va nous permettre d'avoir une fonctionnalité utile de Netbeans, au passage, de l'éditeur. En faisant Ctrl+J, je vais pouvoir sélectionner tous les spans et avoir autant de curseurs qu'il y a d'éléments, et pouvoir modifier tous les éléments en même temps, ce qui est pratique en web, où on édite souvent plusieurs éléments, surtout quand on fait du maquettage, comme ici. Il y a une autre façon de poser des curseurs sur le document, c'est en faisant Ctrl+Shift et en cliquant, et donc je pose autant de curseurs, et ces curseurs vont se déplacer ou éditer tous en même temps. C'est pas très intéressant sur la sélection que j'ai faite, mais ça peut être très pratique dans d'autres cas. Alors ici, j'ai appliqué un style sur tous mes spans, et sur mon image, donc je vais pouvoir visualiser ici. Il manque quelques mises en forme, c'est pour ça qu'ils sont décalés, mais on voit déjà que mon temps se distingue bien du reste. Et puis j'ai appliqué aussi un style #logo. #logo qui est notre image, qui maintenant a une taille raisonnable. On a toujours des éléments, les plus devant notre liste, ce qui est inutile. Et on a ce problème d'escaliers, ici, qu'on va résoudre en appliquant un style sur chaque élément de la liste. Ces éléments de listes sont dans un formulaire, qui a l'identifiant « liste », On va donc utiliser un sélecteur pour préciser tous les « li » qui sont dans un élément « liste ». Pour cela... Voilà, on voit ici la syntaxe de la parenté indirecte ici, puisque « li » n'est pas directement dans « liste », il est dans un « ul » qui est dans « liste ». Donc il suffit de séparer par un espace. Si on avait une parenté directe, on mettrait un supérieur. Par exemple, si je veux préciser que « ul » est directement dans « liste », et « li » est directement dans « ul », j'utiliserais ça. Mais ici, c'est superflu et je peux me contenter de ça. Donc j'enlève tous les effets de puces je change un peu la marge et le padding, et puis, surtout, je spécifie une largeur ici, de façon à éviter le phénomène d'escaliers. J'ai aussi utilisé un autre sélecteur, qui est un hover. Le hover, c'est une métaclasse, puisqu'il y a deux points avant. C'est pour préciser un état, un contexte d'utilisation du « li ». Quand le curseur passera sur le « li », qui est dans une liste, sa couleur de fond changera et ira en gris clair, le « #eee » c'est un gris clair, Donc pour visualiser cela ici, on a donc le hover que l'on voit, l'escalier qui a disparu, les puces aussi à gauche ont disparu. Une chose intéressante que l'on veut faire, c'est pouvoir mettre en orange la partie sélectionnée pour bien la distinguer du reste. Le projet sélectionné sera en orange, les autres restent en gris. On va pour cela utiliser des sélecteurs CSS3. Voilà. Ici, on va donc spécifier tous les temps ici, tous ceux qui ont la classe « temps », mais qui suivent un input qui est coché. Je précise avec ce sélecteur les inputs qui ont un attribut « checked ». Ici, il n'y en a qu'un. C'est celui du bas... Ici. Et donc cet élément « input checked », il est suivi d'un point de temps, ce point de temps sera avec un fond orange. Voilà. Dernier sélecteur : c'est l'énumération. Si je veux appliquer un même style à plusieurs éléments, il suffit de les séparer par une virgule. Voilà. Nous avons fait le tour des sélecteurs. Je complète la feuille de style ici par un ensemble de styles qui vont nous être utiles pour finaliser notre mise en forme. Si donc on a quelque chose de complet, où la marge a été un peu améliorée et un ensemble de choses ont permis d'avoir un pied de page en bas, et un ensemble de choses plutôt pratiques. On sait maintenant donc se repérer dans un CSS. Il va falloir maintenant rendre plus dynamique cette page avec du Javascript.

Découvrir Java pour le web

Développez une application web avec Java. Apprenez à écrire des servlets, des entités ​J​PA (Java Persistence API) d'accès aux données et des pages JSP (Java Server Pages).

2h06 (23 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :25 janv. 2017
Durée :2h06 (23 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !