Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir ASP.NET Core 1.0

Mettre en forme avec CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

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

Transcription

Nous allons maintenant mettre en forme notre document HTML. Pour cela, il faut faire référence à un fichier CSS Ici j'ai préparé un CSS pour l'apparence de notre site. On va le décrire dans quelques instants. Avant, il faut faire le lien entre ce document, le CSS, et notre HTML. Depuis le HTML, donc, on va ajouter une balise link. Pour ajouter la balise avec Visual Studio Code, il suffit de taper le nom de la balise suivi de tab, et ensuite mettre le chemin relatif sur le CSS. Chemin relatif, c'est très important, puisque le chemin absolu n'a aucune signification pour les personnes qui vont consulter le site. La position du fichier sur disque. Et c'est toujours un chemin relatif quand c'est interne au site. Alors, donc, je fais allusion à ce fichier CSS. On va pouvoir donc maintenant visualiser le changement. Ici donc j'avais cette apparence. Si je fais F5, le navigateur consulte donc le lien avec le CSS et il charge le CSS et l'applique sur les éléments de la page. Alors, on va voir comment la magie s'opère. C'est le cas de le dire, ici. Comment le CSS peut autant changer une page. Un CSS c'est une liste de règles. Une règle c'est ce bloc là, ici, que j'ai replié. C'est cette partie-là. C'est composé d'un sélecteur, ici, qui désigne quel élément est concerné par la règle. Et ici, ce que je veux faire sur l'élément sélectionné quelle modification ici, la police, par exemple, et puis le calcul des dimensions de mes blocs. Le sélecteur ici, donc étoile, désigne l'ensemble des balises de ma page. Mais je peux avoir des sélecteurs beaucoup plus précis. Ici, on va s'attacher surtout à décrire le sélecteur pour que vous puissiez vous repérer dans un CSS. Il est très difficile et assez long de connaitre tous les styles, et il y a des formations en notre catalogue pour vous permettre de maitriser beaucoup d'aspects du CSS. Nous on va surtout avoir des points de repère pour pouvoir travailler avec par la suite de la formation. Alors, les autres sélecteurs sont des sélecteurs par nom de balise. On peut les énumérer avec des virgules. Je vais avoir le nav, le header, le section et le footer qui vont avoir un style qui vont s'appliquer sur eux. Voilà, je peux aussi utiliser des sélecteurs de parenté c'est ici, tous les li qui sont dans un nav, et pas les autres. Je vais avoir aussi des sélecteurs contextuels, c'est à dire un lien sur lequel je passe, donc le deux-points h over me permet de préciser les liens sur lesquels je passe, et ce style donc s'appliquera quand je passe sur le lien et pas à un autre moment. Le dièse, on va voir son utilité, puisque pour l'instant je n'ai pas d'élément avec un identifiant marque. On va voir ce que c'est. Pareil pour le point. Le sélecteur qui est sur un input, mais avec avec un attribut bien particulier, donc là je ne m'attache qu'aux inputs qui ont l'attribut type=search. C'est à dire celui-là, type=search. Donc ça sera cet input qui sera concerné. Et éventuellement même quand il a le focus. C'est à dire quand le curseur est à l'intérieur de ma recherche, je vais lui donner un style un peu particulier pour qu'il y ait une petite ombre jaune à l'intérieur. Voilà, c'est ce box-shadow. Shadow pour ombre, là, et puis j'applique aussi un style pour l'input de type submit, celui qui est juste après, j'applique un style. Donc, des sélecteurs qui permettent de sélectionner un peu tout dans notre page de plusieurs façons différentes et avec une grande finesse, de précision. Alors, si on reprend notre page ici, on revoit donc notamment le contexte, quand je passe, le hover qui est là. Il y a deux points qui ne sont pas gérés pour l'instant par le CSS. C'est les points sur lesquels je suis passé peut-être un peu vite en disant « on allait le voir ». C'est dièse marque, ici, et point formule. Ce dièse marque me permet de définir les éléments qui ont l'identifiant marque. Alors, il ne peut y avoir qu'un élément qui a un identifiant précis. La marque, ici, de mon site c'est eGrimoire. Et donc je veux lui appliquer un style particulier, pour que dans mon menu, j'ai grimoire qui soit à gauche, mais le reste du menu soit à droite. Donc je vais diviser en deux mon menu, et je vais isoler ma marque ici, en lui donnant un style particulier. Donc id, ici, va permettre de désigner un élément dans toute la page pour le retrouver facilement. Et dont ce style, bold, donc qui va être en gras, va s'appliquer. Et puis, j'ai pris un sélecteur aussi pour prendre le ul qui suivait marque, c'est à dire en fait le reste du menu, et je lui dis d'aller à droite. Et alors il y a un autre sélecteur qui est assez proche dans sa logique, c'est le sélecteur de classe. Ici, donc j'ai sélectionné ce qui était d'identifiant marque, je veux aussi pouvoir sélectionner plusieurs éléments en les désignant de façon singulière dans mon HTML. Comme l'identifiant doit être unique, je peux pas réutiliser id. En tout cas pas le marque. Et donc ici, je veux appliquer à tous mes h3 un même style, pour qu'ils soient un peu moins visibles. Ils sont actuellement en noir. Je veux qu'ils soient en gris. Je vais pour ça donc rajouter une classe à tous ces éléments. Alors, pour modifier plusieurs éléments à la fois, on a la possibilité de les sélectionner, faire Control-D, avec Visual Studio Code, et donc j'ai autant de curseurs que j'ai sélectionné d'éléments. Puis, donc, je peux modifier comme ça tous ces éléments en une fois. Ça évite de faire un copié-collé ou des choses plus hasardeuses. Et donc là, j'ai sélectionné tous les h3. Je leur ai appliqué une classe formule. Je peux éventuellement appliquer d'autres classes en séparant par des espaces. Et donc, je vais avoir ici ma formule qui va être appliquée. On peut constater les modifications ici. Voilà, passent en gris mes élixirs, et puis à droite ces éléments. Donc, le CSS c'est un langage puissant, qui permet vraiment de changer complètement l'apparence d'une page et de l'adapter sans toucher au HTML. Nous allons maintenant rendre notre page un peu plus interactive avec du Javascript.

Découvrir ASP.NET Core 1.0

Prenez en main ASP.NET Core 1.0. Développez ainsi des applications web multiplateformes en C#, déployables sur Windows, Linux, Mac ainsi qu'en containers Dockers.

1h32 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
ASP.NET Core ASP.NET Core 1
Spécial abonnés
Date de parution :1 févr. 2017

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 !