Nous saluons le retour.
Maintenant que nous avons la fonctionnalité de base de notre application To Do list, il est temps pour nous de nous concentrer sur le faire ressembler à cela.
Donc nous avons vraiment beaucoup de chemin à parcourir.
Et nous allons attaquer ce morceau à la fois.
Je vais essayer de le faire dans l'ordre le plus logique possible.
Nous allons commencer avec quelques-unes des plus grandes pièces comme les couleurs de fond et de polices en veillant à ce que nous avons la marge droite et rembourrage sur ce grand conteneur ici et puis nous allons nous concentrer sur certaines des choses plus nuance.
OK commençons ici.
La première chose que nous allons faire, je vais faire un plein écran.
Commençons par baisser cette pression.
Ceci est notre div conteneur.
Nous allons ajouter une marge au sommet de sorte que nous avons plus d'espace ici.
Donc, nous allons revenir à notre C S S et peut fermer ou javascript pour l'instant.
Notre div a une idée de conteneur et puis nous allons aller et sélectionnez ici que vous avez déjà fait.
Et plutôt que d'une marge de 0 OTTO Bon lui donner une centaine de pixels sur le dessus et le bas.
Et n'oubliez pas que nous avons besoin du x si nous avons zéro, nous n'avons pas besoin de X, mais si nous avons un nombre que nous faisons.
Jetons un coup d'oeil maintenant.
OK maintenant ils commencent au même endroit.
Ils ont la même marge.
La prochaine chose que nous allons faire est d'ajouter une couleur de fond à ce conteneur que celui-ci a.
C'est un peu difficile à voir, mais quand je supprime quelque chose, il apparaît à l'arrière.
C'est cette couleur ici.
Encore une fois.
Nous allons donc poursuivre.
Donc, au lieu de récipient bien dire arrière-plan et la couleur.
Je vais juste le lire, c'est F 7 7 après 7.
Juste comme ça.
Et nous allons vérifier comment cela ressemble.
D'ACCORD.
Nous avons donc la même couleur grise que nous avons ici.
C'est le même gris clair.
La prochaine chose que nous allons faire est de travailler à la frontière.
Et cela n'a pas de frontière.
Ce qu'il a est une ombre de boîte très légère.
Donc nous n'avons pas encore vu l'ombre de la boîte.
Je vais démontrer que ici et aller dans MT-NW et c'est juste une façon d'ajouter un effet d'ombre.
Donc, si je défile vers le bas vous pouvez voir ici sont des ombres boîte différente et nous allons avoir un très léger, mais si vous remarquez autour de cela il ya une ombre vraiment léger.
Donc, la syntaxe et l'ombre que nous allons utiliser se débarrasser de notre frontière est l'ombre boîte de 0 0 3 pixels et puis une couleur et notre couleur, il va être simplement noir, mais il est R.G ..
Et puis nous allons le rendre vraiment vraiment transparent.
Alors à peine perceptible.
Et si je rafraîchis.
Nous n'avons pas de frontière maintenant, mais il ya une légère ombre autour de cet élément.
D'ACCORD.
C'est tout ce que nous allons faire pour le conteneur pour l'instant.
Attaquons le H-1.
Donc, cette rubrique ici.
Donc c'est à notre âge lui, je viens de considérer un H1.
Il n'a pas d'identité ou quoi que ce soit et c'est très bien.
Passons au fichier CSSA et commençons par ajouter une couleur de fond.
Donc, nous allons sélectionner chacun et le fond est une couleur qui est 2 9 8 0 être 9 et ils vont enregistrer et actualiser et nous avons maintenant la bonne nuance de bleu.
Donc, nous allons également changer la couleur de la police en blanc et vous montrer rapidement que.
D'accord.
Lentement se rapprochant ici.
La prochaine chose que nous ferons, c'est de ne lui donner aucune marge et maintenant nous allons simplement nous débarrasser de cet espace que nous avions ici.
Comme vous pouvez le voir ici, il n'y a pas de marge.
C'est notre H-1.
Il ya le rembourrage ici.
Donc le texte ne va pas tout droit contre le bord comme il le fait ici.
Mais il n'y a pas de marge à l'extérieur de la boîte bleue.
C'est notre saisie de texte et qui a également augmenté le rembourrage, mais il n'y a pas de marge autour de cela non plus.
Nous allons commencer par ajouter un peu de remplissage autour de notre liste de tâches.
H-1 Alors ici, nous allons ajouter 10 pixels au sommet et au bas et 20 pixels à gauche et à droite et enregistrer.
Vous pouvez voir que nous nous rapprochons.
Nous devons changer la taille de police.
Besoin de changer la police.
Nous allons aussi majusculer tout cela et nous pouvons le faire maintenant.
Vous devez savoir que l'un de mes favoris est le texte transformer en majuscules.
Je pense juste que c'est assez cool.
Là, nous allons nous obtenons tous les majuscules la taille de la police doit être de 24 pixels de sorte que la taille de la police 24 x et enregistrer OK la dernière chose que nous allons faire est de s'assurer que c'est un poids de la police normale.
Donc, un H1 par défaut est en gras et nous ne voulons pas.
Donc nous allons faire Funt manière normale ou nous pourrions aussi écrire le poids de la police 400.
Voilà.
Maintenant, il est juste une question de changer la police qui va revenir à la prochaine chose que vous voulez aborder est de se débarrasser de ces points de balle.
Vous pouvez voir si nous n'avons pas de puces ici.
Ces points de balle sont considérés comme le style de navigateur par défaut.
Donc, nous allons passer outre.
Nous allons sélectionner l'UL qu'ils sont à l'intérieur et dire style de liste aucun.
Et si nous revenons en arrière et rafraîchir, nous n'avons pas de points de balle.
Une autre chose que je vais faire est de vous honorer bien fixé la marge à zéro et le rembourrage à zéro et il va rafraîchir ici et non seulement se débarrasser de l'espace sur les côtés du puits, nous avons de l'espace ici que nous Besoin de travailler avec mais c'est le mensonge pas l'UL elle-même.
Nous reviendrons là-dessus.
Maintenant, nous allons ajouter dans la bonne police et le nom de cette police est rubato et il fait partie des polices de Google.
Donc, je l'ai ouvert ici et je vais juste faire une recherche pour lui rubato.
Et c'est reparti.
Ajouter à la collection puis utiliser.
Et nous allons vouloir normalement.
Nous allons ajouter en gras et aussi moyen.
Maintenant, allons de l'avant et copier ce lien à notre HMO et nous pouvons fermer cette fenêtre.
Revenez à l'endroit où chaque équipe ici et juste en haut collez que dans et sauver alors nous irons à notre pour voir évaluer et nous allons ajouter quelques styles au corps.
Tout utilise cette police de sorte que nous allons simplement ajouter dans la famille de polices de robotique.
Juste comme ça.
Et si nous revenons maintenant et rafraîchir notre H-1 est à peu près là.
Mis à part ce bouton que nous n'avons pas touché à toutes les polices la même la couleur de l'espacement tout ce qui est bon.
Et nos alliés arrivent.
Ils ont la bonne police.
Nous devons travailler sur certains des problèmes d'espacement et de rembourrage.
La prochaine chose que nous allons aborder sont les couleurs de fond sur les mensonges.
Donc tous les autres mensonges.
Il passe d 'une couleur blanche de blanc pur à cette couleur grise que nous avons comme un arrière - plan de la.
Nous pouvons donc utiliser les SS pour ajouter des styles à tous les autres alliés.
Alors, faisons-le maintenant.
La première chose que nous allons faire est de sélectionner tous les alliés et de leur donner un arrière-plan de blanc afin que nous puissions le faire avec F F F ou blanc ou R-GA 255 255 à 55 et puis nous ferons tous les autres mensonges.
Et la syntaxe pour cela est un mensonge et l'enfant à la fin.
Et que trop et bien défini un modèle de tous les autres.
Et si on en faisait trois et on en dirait tous les trois, mais on voulait tous les autres.
Et nous allons rendre la couleur de fond la même f7 f7 f7 que nous avons utilisé pour l'arrière-plan du conteneur et de rafraîchir.
Maintenant, il est difficile de voir parce qu'ils sont un peu petit, mais tous les autres mensonge est maintenant cette couleur grise.
Alors ajoutez en quelques plus et vous pouvez voir qu'ils alternent parfait.
Maintenant, nous allons aborder la question de la hauteur des mensonges et aussi le rembourrage.
La première chose à faire est de leur donner une hauteur de 40 pixels de sorte que tous alliés hauteur 40 x et nous allons revenir rafraîchir.
OK pour qu'ils prennent la bonne quantité d'espace.
Maintenant, si nous les comparons, la police a quelques problèmes.
Et aussi nous devons ajouter un peu de rembourrage.
Ensuite, nous allons changer la propriété hauteur ligne sur les mensonges de sorte que notre texte est centré verticalement.
À l'heure actuelle, la ligne est essentiellement cette hauteur.
Nous allons faire prendre les 40 pixels entiers vous montrer la hauteur de ligne 40 x et qui ne changera pas la taille de la police, il suffit de modifier la taille de la ligne.
C'est maintenant 40 pixels.
La ligne occupe donc toute cette zone.
La prochaine chose mineure est la couleur que nous avons de noir pur et la couleur que j'ai utilisé n'est pas exactement noir.
Il est légèrement plus léger.
Donc, nous allons définir la couleur et il est six six six rafraîchir et puis nous allons ensuite nous allons aborder l'entrée.
Nous avons donc quelques choses à faire.
Le premier est de s'assurer qu'il prend la bonne quantité d'espace.
Donc, cette entrée est beaucoup plus grande et ce n'est pas seulement le rembourrage ou la marge de la taille de la police est plus grande.
Nous avons une nouvelle couleur de fond aussi bien.
Et il ya une frontière quand nous cliquons.
Alors travaillons sur tous ceux et nous allons commencer par simplement ajouter une taille de police plus grande.
Nous allons donc sélectionner la taille de police d'entrée et nous allons définir la taille de la police à 18 pixels.
Et pendant que nous sommes ici nous allons faire la couleur de fond ainsi que la couleur de fond et il est le même f 7 7 1/2 7.
Juste comme ça.
Et nous allons rafraîchir.
D'ACCORD.
Nous nous rapprochons.
La prochaine chose que nous allons faire est d'ajouter une largeur et la largeur que nous allons lui donner est de 100 pour cent.
Donc, en ce moment, il ne fait qu'une partie du chemin à travers le conteneur.
Si nous rafraîchissons il va maintenant tout le chemin.
Mais nous avons quelques petits problèmes.
La première chose que nous voulons prendre en charge est un peu de rembourrage là-dedans.
Donc, nous allons ajouter un rembourrage de 13 pixels sur les 13 premiers pixels sur le côté à droite.
13 pixels sur le bas et 20 pixels sur la gauche.
Donc vous pouvez voir sur celui-ci.
Nous avons le haut et le bas sont 13.
Et à gauche il y a 20 pixels.
Donc, si j'étais frais Nous avons maintenant une plus grande entrée qui prend la bonne quantité d'espace.
Nous avons un problème, c'est que l'entrée est trop longue.
Quand nous avons dit que avec devrait être de 100 pour cent que avec était en fait juste le contenu et il n'a pas inclus le rembourrage et il n'a pas inclus la marge, ce qui signifie que notre entrée va à long passé la fin de la div et plutôt que de messing Avec le rembourrage.
Je veux montrer une autre façon de le changer qui est une propriété appelée encadrer la taille.
Donc, avec le bloc de dimensionnement, vous avez quelques options différentes, mais il contrôle essentiellement la façon dont la boîte est de taille du modèle de boîte.
Et nous allons le changer à la boîte frontière Dasch.
Et ce que je vais juste lire, il dit la largeur et la hauteur des propriétés comprennent le rembourrage et la bordure, mais pas la marge.
Donc, si nous le changeons en boîte de bordure que je vais faire maintenant, nous allons dans ici juste ajouter la boîte boîte de dimensionnement de boîte et l'enregistrer avant que je continue.
Je vais souligner que c'est une de ces propriétés que nous voulons avoir les préfixes.
Ainsi, le kit Web et Mozy sont Moz et le désordre de Microsoft.
Je ne vais pas le faire maintenant.
Il sera dans le code de la solution.
Mais il suffit de beaucoup de temps pour taper.
Ainsi il fonctionnera juste comment il est dans le chrome au moins je l'actualise maintenant.
Notre boîte inclut le rembourrage dans la frontière mais elle n'inclut pas la marge.
Nous nous retrouvons ainsi avec un ajustement parfait.
Ensuite, je vais donner la police d'une couleur quand je tape là-dedans.
Donc, tout ce que nous devons faire.
Je vais juste prendre la même couleur de la H-1 et descendre à notre entrée et de dire que la couleur c'est cette couleur.
Et si nous rafraîchissons maintenant et nous commençons à taper là-bas nous allons.
Maintenant, nous allons nous concentrer sur l'effet.
Lorsque nous cliquons sur ce que l'on appelle la mise au point dans l'entrée, vous pouvez voir ici que nous obtenons une bordure autour d'elle.
Nous devons donc travailler à ce sujet.
Actuellement, nous avons l'effet de mise au point par défaut.
Il y a donc un sélecteur pour ce point d'entrée comme le pseudo-sélecteur.
Ces cellules ne s'exécutent que lorsque nous nous sommes concentrés sur une entrée.
Donc, je vais faire le fond blanc quand on se concentre sur elle.
Je vais aussi lui donner une bordure de trois pixels solides La couleur bleue avec laquelle nous avons travaillé et nous allons lui donner un aperçu de pas un contour fait référence à ce point fort ennuyeux que nous obtenons à partir du navigateur lui-même.
Maintenant si nous nous concentrons sur l'entrée nous obtenons cette nouvelle frontière bleue et nous changeons également la couleur de fond ainsi elle est grise maintenant elle est blanche.
Donc, c'est tout ce que nous devons faire pour l'entrée, même si nous devrions aller et ajouter le texte réservé que nous avons ici.
Donc je vais aller à l'index HTL et à côté de l'entrée ou dans l'entrée ajoutera l'attribut d'espace réservé.
Et cela peut être ce que vous voulez.
Je vais juste faire match.
Donc, c'est ajouter de nouveaux à faire et à rafraîchir.
Voilà.