(musique lumineuse) Bienvenue à nouveau au cours de Knowledge City sur les feuilles de style en cascade. Je suis Cliff Brozo. Et dans cette leçon, nous allons jeter un oeil à quelque chose appelé un écran de démarrage. Vous verrez peut-être que le reste de notre quatrième leçon est vide. Nous allons y arriver dans un petit moment, mais regardons ce qui se passe dans la création un écran de démarrage. En regardant Adam et notre plateforme de développement, nous avons un document HTML de base qui a les informations générales en haut pointant dans un fichier splash.css, et nous avons deux wrappers, l'un s'appelle conteneur, l'autre s'appelle contenu, Et ces deux géreront le chemin le texte apparaît à l'écran. Comme vous pouvez le voir, tout notre texte est défini sur un titre H2 de taille deux, et pour chacun de ces éléments, j'ai appliqué une classe, un séparé, eh bien, je les appelle des règles pour la façon dont chaque ligne de ce texte sera affichée, et fondamentalement, ce que nous avons ici, ce sont les instructions pour savoir comment jouer au jeu. Nous devons donner à l'utilisateur une sorte de connaissances entrant pour qu'ils sachent quoi faire. J'ai donc 11 règles différentes. Eh bien, le dernier n'est pas exactement une règle. Le dernier indique en fait le début du jeu, et chaque règle explique une partie différente de la façon dont le jeu est joué. Jetons un coup d'œil au CSS et nous allons nous concentrer sur la recherche tous les différents numéros de règle. Dans notre CSS, à partir de la ligne 10, vous pouvez voir que j'ai mon conteneur, qui met une position fixe et met tout en place de sorte que ce soit dans le coin supérieur gauche. J'utilise 100% de la largeur et de la hauteur de l'écran, et ce conteneur va jusqu'au fond, et ce que je fais ici, c'est que je crée un fond dégradé radio, et encore une fois, cela me permet de, au lieu d'avoir une seule couleur, Je veux un peu de couleur venir du milieu vers les bords, et tu verras à quoi ça ressemble, donc au lieu d'un fond bleu uni, nous allons avoir un milieu blanc doux et grandissant vers l'extérieur et se brouillant à mesure qu'il va vers l'extérieur. La partie contenu a la même chose sauf pour l'indice Z qui change, et ce que cela fait, c'est que je le fixe à un nombre très élevé, 1000 devraient suffire, et cela garantit que le contenu affiché va s'ajouter à tout ce qui se trouve dans le conteneur, qui est le fond. Mes règles pour H2 commencent à la ligne 30 et je règle la taille générale de la police à cinq fois la largeur de la vue, et je veux m'assurer qu'il remplit l'écran. Je centre le texte. Je transforme n'importe quoi en majuscule. Je rend la couleur transparente et je crée une animation appelée flou fondu entrant et sortant. Cette animation va durer trois secondes, et chacun de ces H2 aura ces attributs qui leur sont attachés, et c'est pourquoi j'ai créé ce conteneur spécial pour cela. Ensuite, je configure chaque règle individuellement et je crée une taille de police différente pour chacune des règles, et la raison des différentes tailles de police, Je commence avec sept ici, descends à cinq, cela dépendra de la quantité de texte que je vais afficher. Les règles plus courtes auront une police plus grande, et plus il y a de mots dans la règle aura une police un peu plus petite pour s'assurer qu'ils tiennent bien sur l'écran. La clé ici est le délai d'animation, et ce que j'essaye d'accomplir est mis en place une série de secondes du moment où ces choses devraient apparaître. Donc au tout début, ce qui se passe, c'est que la règle 1 commence à zéro seconde. Il n'y a pas de retard d'animation. Lorsque cela commence, la première règle apparaît en fait. Cette règle dit que c'est la ville de la connaissance. C'est la règle numéro un. Cela apparaîtra à l'écran tout de suite. Ensuite, il restera là pendant cinq secondes car la règle numéro deux a un délai de cinq secondes afin que l'utilisateur ait la possibilité de lire les règles. Maintenant, chacun de ces retards d'animation aura un nombre de secondes différent à attendre pour que l'utilisateur ait le temps de lire ce qu'est la règle, et plus il y a de mots sur la règle, plus l'animation est longue, généralement, 10 secondes suffisent, et comme vous pouvez le voir, beaucoup d'entre eux durent 10 secondes. La règle numéro trois est neuf. Quand nous arrivons à la règle numéro neuf ici, à la ligne 79, c'est 15 secondes, et c'est beaucoup de texte, et nous voulons donner une chance à l'utilisateur pour lire tout le texte qui s'y trouve. La règle numéro neuf, en fin de compte, n'apparaît pas avant une minute 10 au début de cet écran, et vous pouvez voir que le délai est de 70 secondes. C'est donc un moyen de coder toutes les règles écran par écran, mais en utilisant juste un écran en utilisant CSS.
