1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [Jouer de la musique] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON BUCHHOLTZ-UA: Donc, nous sommes fondamentalement juste aller 5 00:00:12,224 --> 00:00:14,629 pour vous donner un aperçu de CSS, parce que nous savons 6 00:00:14,629 --> 00:00:16,420 qu'il ne était pas couvert dans toutes les sections. 7 00:00:16,420 --> 00:00:20,090 Et nous voulons vraiment vous assurer que vous les gars ont cet outil à votre disposition, 8 00:00:20,090 --> 00:00:24,790 car il a la capacité de faire vos sites Web ressemblent beaucoup plus joli. 9 00:00:24,790 --> 00:00:28,660 >> Et si vous construisez un site web, vous voulez probablement faire joli. 10 00:00:28,660 --> 00:00:31,372 Je veux dire, vous ne avez pas à, mais je vous suggère de lui. [Rires] 11 00:00:31,372 --> 00:00:35,430 Si vous souhaitez que les utilisateurs de l'utiliser, vous pourriez vouloir faire un peu [inaudible]. 12 00:00:35,430 --> 00:00:39,130 Donc, nous allons essayer de vous donner quelques outils de base et la compréhension, 13 00:00:39,130 --> 00:00:42,340 de sorte que lorsque vous sortez et vous êtes la recherche de choses sur CSS, 14 00:00:42,340 --> 00:00:45,902 ce ne est pas remplir charabia, comme CSS parfois être. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Ouais. 16 00:00:47,240 --> 00:00:49,930 Allison dit assez bien. 17 00:00:49,930 --> 00:00:53,250 Donc je suppose que la première chose que nous devrait commencer par CSS est ce qui est? 18 00:00:53,250 --> 00:00:55,750 Donc CSS est impressionnant. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON BUCHHOLTZ-UA: Ce est le nom de notre séminaire. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Ouais. 22 00:00:58,434 --> 00:01:00,130 Il est vraiment important que vous comprenez que d'ici là. 23 00:01:00,130 --> 00:01:03,090 Si vous ne enlevez une chose, ce est que le CSS si génial. 24 00:01:03,090 --> 00:01:06,180 Deux, ce est CSS signifie Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Donc, à la base, CSS est une feuille de style, ce qui signifie 26 00:01:10,380 --> 00:01:13,200 il vous permet de coiffer une page Web. 27 00:01:13,200 --> 00:01:16,609 Et puis ce que cela signifie, ce est un façon d'ajouter du style à vos sites Web. 28 00:01:16,609 --> 00:01:18,900 Donc, par le style, nous entendons tout ce ne est pas structural-- 29 00:01:18,900 --> 00:01:24,350 donc les choses comme les couleurs, fond images, les frontières, comme, le rembourrage, 30 00:01:24,350 --> 00:01:25,040 marges. 31 00:01:25,040 --> 00:01:27,310 Nous allons parler de ce tout ce qui signifie un peu. 32 00:01:27,310 --> 00:01:30,110 >> Nous avons donc pris les devants et juste ouvert à la fois de ceux dans gedit. 33 00:01:30,110 --> 00:01:32,680 Donc, ce est index.HTML. 34 00:01:32,680 --> 00:01:34,800 Et ce est main.css. 35 00:01:34,800 --> 00:01:36,829 Donc main.css n'a rien. 36 00:01:36,829 --> 00:01:38,412 ALLISON BUCHHOLTZ-AU: Aucun style jusqu'ici. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Aucun. 38 00:01:39,245 --> 00:01:42,577 Et comme vous le verrez, ce est un site vraiment laid. 39 00:01:42,577 --> 00:01:44,160 ALLISON BUCHHOLTZ-UA: Ce est tout simplement. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Ouais. 41 00:01:45,820 --> 00:01:49,150 Ouais, ce est pas laid, ce est juste minimaliste. 42 00:01:49,150 --> 00:01:53,430 Et puis nous avons ici index.html. 43 00:01:53,430 --> 00:01:55,729 Et donc pour un rapide récapitulation de HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 vous voulez juste parler de la page? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON BUCHHOLTZ-UA: Ouais. 46 00:01:58,395 --> 00:02:01,100 Alors, évidemment, nous avons notre HTML tag, qui vient de fichier HTML de noms. 47 00:02:01,100 --> 00:02:07,080 Nous avons notre tête ici, avec CSS Awesomeness, desquelles: si vous revenez. 48 00:02:07,080 --> 00:02:07,720 Où est-ce? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Oui, vous pouvez le voir. 51 00:02:10,301 --> 00:02:12,092 ALLISON BUCHHOLTZ-UA: Et remarquez l'en-tête 52 00:02:12,092 --> 00:02:14,120 est cet onglet tête juste ici. 53 00:02:14,120 --> 00:02:17,130 Et puis "Bonjour tout le monde!" est le texte que nous venons 54 00:02:17,130 --> 00:02:19,620 afficher sur le Web Cette page, qui est: revenir. 55 00:02:19,620 --> 00:02:21,290 Retour. 56 00:02:21,290 --> 00:02:24,287 Qui est juste dans notre corps ici-- du texte brut. 57 00:02:24,287 --> 00:02:26,120 En outre, une chose à remarquerez, si vous regardez ici, 58 00:02:26,120 --> 00:02:29,410 Tomas mis en place ces deux de notre diaporama. 59 00:02:29,410 --> 00:02:32,035 Donc, tant que vous avez tous trois d'entre eux, vous êtes très bien. 60 00:02:32,035 --> 00:02:34,044 Ils peuvent être dans l'ordre qu'ils veulent. 61 00:02:34,044 --> 00:02:39,368 Qu'est-ce qui est le plus important, ce est juste que vous avez chacune de ces trois choses. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Ajouter un type de doc? 64 00:02:41,111 --> 00:02:42,235 ALLISON BUCHHOLTZ-UA: Ouais. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Ouais. 66 00:02:43,068 --> 00:02:43,769 Cool. 67 00:02:43,769 --> 00:02:46,102 ALLISON BUCHHOLTZ-UA: Apparemment, mes micros ne me aiment pas. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, donnez-nous une seconde seulement tandis Allison passe sur son micro. 69 00:02:49,650 --> 00:02:50,500 Donc oui. 70 00:02:50,500 --> 00:02:52,030 Donc, nous avons notre page principale. 71 00:02:52,030 --> 00:02:53,890 Ce est un peu sans style. 72 00:02:53,890 --> 00:02:54,780 Nous ne avons pas beaucoup. 73 00:02:54,780 --> 00:02:57,110 Nous avons juste fondamentalement texte. 74 00:02:57,110 --> 00:02:59,470 Nous avons la feuille de style. 75 00:02:59,470 --> 00:03:00,220 Nous avons le titre. 76 00:03:00,220 --> 00:03:04,020 Il suffit donc de nue-désossées composants font un site Web. 77 00:03:04,020 --> 00:03:08,880 >> Donc à partir de là, nous allons parler de ce que CSS est 78 00:03:08,880 --> 00:03:11,270 et à quoi il ressemble et tout cela. 79 00:03:11,270 --> 00:03:12,047 Donc, pour that-- 80 00:03:12,047 --> 00:03:13,755 ALLISON BUCHHOLTZ-UA: Retour aux diapositives. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Retour aux diapositives. 82 00:03:15,200 --> 00:03:17,240 Et Allison peut prendre le relais. 83 00:03:17,240 --> 00:03:18,720 >> ALLISON BUCHHOLTZ-UA: Woo. 84 00:03:18,720 --> 00:03:19,220 D'ACCORD. 85 00:03:19,220 --> 00:03:22,360 Donc, dans votre fichier CSS, vous allez avoir 86 00:03:22,360 --> 00:03:25,010 beaucoup de ces choses appelées sélecteurs. 87 00:03:25,010 --> 00:03:27,420 Ce sera juste le base de votre fichier CSS. 88 00:03:27,420 --> 00:03:29,480 Il va juste être beaucoup, beaucoup de ceux-ci. 89 00:03:29,480 --> 00:03:30,780 Donc sélecteur. 90 00:03:30,780 --> 00:03:32,649 Ce est juste l'anatomie générale. 91 00:03:32,649 --> 00:03:35,190 Nous allons passer par exemples, parce que si vous les gars jamais 92 00:03:35,190 --> 00:03:38,400 regardé ma section, je me sens comme des choses dans l'abstrait 93 00:03:38,400 --> 00:03:39,400 ne vraiment pas de sens. 94 00:03:39,400 --> 00:03:41,110 Il est toujours utile de voir les exemples. 95 00:03:41,110 --> 00:03:42,420 >> Donc, nous avons une certaine sélection. 96 00:03:42,420 --> 00:03:49,120 Cela va être une identifiant pour ce que nous voulons que le style à appliquer. 97 00:03:49,120 --> 00:03:52,220 Et alors nous pouvons avoir toute un ensemble de règles et de valeurs. 98 00:03:52,220 --> 00:03:55,680 Donc sélecteurs que vous pourriez voir pourrait être quelque chose comme corps, 99 00:03:55,680 --> 00:04:00,262 ou du paragraphe avec P, ou en-tête, ou que ce soit, 100 00:04:00,262 --> 00:04:02,000 tout ce que vous voulez que vos balises HTML soient. 101 00:04:02,000 --> 00:04:03,570 >> Donc dans ce cas, nous avons corps. 102 00:04:03,570 --> 00:04:06,985 Et nous avons une règle, ce qui correspond 103 00:04:06,985 --> 00:04:09,610 à ce que votre style se applique à. 104 00:04:09,610 --> 00:04:12,720 Donc dans ce cas, nous avons couleur de fond et le poids police. 105 00:04:12,720 --> 00:04:16,200 Donc cela va changer l'arrière-plan de tout 106 00:04:16,200 --> 00:04:19,640 dans ne importe quelle balise body de notre fichier HTML. 107 00:04:19,640 --> 00:04:22,810 Et ça va donner il cette valeur bleu clair. 108 00:04:22,810 --> 00:04:24,820 >> Donc, il va faire la fond bleu clair. 109 00:04:24,820 --> 00:04:28,660 Et puis quelque chose dans le corps est va avoir un poids de gras. 110 00:04:28,660 --> 00:04:31,142 Donc, il va juste gras tout notre texte. 111 00:04:31,142 --> 00:04:32,970 Et ce est juste un sélecteur. 112 00:04:32,970 --> 00:04:34,680 Mais vous pourriez avoir un très grand nombre d'entre eux. 113 00:04:34,680 --> 00:04:38,730 Et comme nous allons montrer plus tard, un peu plus sur la façon dont 114 00:04:38,730 --> 00:04:40,709 que les travaux et plus d'exemples là-bas. 115 00:04:40,709 --> 00:04:41,750 Tout ce que vous souhaitez ajouter? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: Non 117 00:04:42,499 --> 00:04:43,500 Allison a obtenu. 118 00:04:43,500 --> 00:04:46,144 Nous allons juste pour couper un par exemple ici sur notre exemple le site. 119 00:04:46,144 --> 00:04:47,310 Donc, nous allons effectivement prendre cette. 120 00:04:47,310 --> 00:04:48,620 Il est excellent. 121 00:04:48,620 --> 00:04:54,460 Donc je vais juste copier et coller ce droit dans notre fichier main.css. 122 00:04:54,460 --> 00:04:56,530 Et je vais l'enregistrer. 123 00:04:56,530 --> 00:04:59,190 Et puis nous allons l'exécuter. 124 00:04:59,190 --> 00:05:01,600 Ainsi, la note côté, l'un des la plupart des choses frustrantes 125 00:05:01,600 --> 00:05:04,490 est si vous ne enregistrez un fichier, et alors vous, comme, rechargez la page, 126 00:05:04,490 --> 00:05:07,450 et, comme, pourquoi ne est pas le changement se passe? 127 00:05:07,450 --> 00:05:07,950 Il arrive. 128 00:05:07,950 --> 00:05:14,230 Donc ici nous avons vu que nous avons fait notre site un fond bleu clair 129 00:05:14,230 --> 00:05:16,560 et certains gras texte. 130 00:05:16,560 --> 00:05:20,730 >> Je dois aussi mentionner, si vous les gars ont des questions sur quoi que ce soit 131 00:05:20,730 --> 00:05:23,622 nous faisons, pensons se il vous plaît hésitez pas à nous arrêter et nous demander. 132 00:05:23,622 --> 00:05:25,330 Nous sommes complètement prêts pour répondre aux questions. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON BUCHHOLTZ-UA: Évidemment, avec CSS, tout se appuie sur lui-même. 135 00:05:31,930 --> 00:05:34,107 Donc, si une chose ne est pas sens maintenant, nous 136 00:05:34,107 --> 00:05:35,690 ne veulent pas que vous enliser plus tard. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Donc, nous allons type de disséquer cela. 139 00:05:41,930 --> 00:05:44,210 Alors voulez-vous commencer avec le sélecteur ici? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON BUCHHOLTZ-UA: Ouais. 141 00:05:45,979 --> 00:05:48,270 Comme je le disais avant, le corps est seulement notre sélection ici. 142 00:05:48,270 --> 00:05:50,950 Donc, si nous revenons plus à notre ah index--. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: Ce que je fermais. 144 00:05:53,245 --> 00:05:54,530 Donnez-moi une seconde. 145 00:05:54,530 --> 00:05:58,286 Donc Fichier, Ouvrir, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON BUCHHOLTZ-UA: Cool. 147 00:05:59,410 --> 00:06:02,710 Donc, si vous remarquez ici, nous avoir ces balises body, non? 148 00:06:02,710 --> 00:06:06,270 Ainsi, le sélecteur correspond simplement les balises que nous parlons. 149 00:06:06,270 --> 00:06:07,670 Donc corps ici. 150 00:06:07,670 --> 00:06:10,315 Donc, ce que nous disons, ce est everything-- pouvons-nous revenir en arrière? 151 00:06:10,315 --> 00:06:12,065 Je aimerais pouvoir simplement comme toucher l'écran. 152 00:06:12,065 --> 00:06:14,410 Ce serait tellement plus frais. 153 00:06:14,410 --> 00:06:17,150 >> Donc, tout l'intérieur de ceux balises body, que nous avons vu 154 00:06:17,150 --> 00:06:19,637 était juste, comme, le texte, et le corps en général 155 00:06:19,637 --> 00:06:20,970 se réfère à, comme, l'arrière-plan. 156 00:06:20,970 --> 00:06:22,720 Si jamais vous voulez changer le fond, 157 00:06:22,720 --> 00:06:25,090 que ça va être dans une balise body. 158 00:06:25,090 --> 00:06:27,120 Juste a ces règles qui leur sont appliquées. 159 00:06:27,120 --> 00:06:32,040 >> Donc, si nous devions aller à index.html et-- en fait, 160 00:06:32,040 --> 00:06:33,840 pouvons-nous avoir quelque chose à l'extérieur du corps? 161 00:06:33,840 --> 00:06:37,340 Si nous avions, comme un pied de page ou quelque chose, il ne se appliquerait pas à cela. 162 00:06:37,340 --> 00:06:40,900 Mais quoi que ce soit au sein de ces balises corps va 163 00:06:40,900 --> 00:06:44,960 d'être affectés par ce corps sélection que nous avons fait. 164 00:06:44,960 --> 00:06:47,405 Donc, si vous tapez autre chose there-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Roulons cette maison. 166 00:06:49,400 --> 00:06:55,330 Donc, si nous avions un div-- sorte que ce est juste une autre balise que vous pouvez avoir. 167 00:06:55,330 --> 00:06:56,350 Je vais fermer. 168 00:06:56,350 --> 00:06:58,280 Ou disons font un paragraphe. 169 00:06:58,280 --> 00:07:01,430 Donc p signifie paragraphe. 170 00:07:01,430 --> 00:07:02,560 Et dans ce paragraphe. 171 00:07:02,560 --> 00:07:05,650 Et puis je dis: «Ce est un texte." 172 00:07:05,650 --> 00:07:06,369 Cool. 173 00:07:06,369 --> 00:07:09,160 Et puis je ai fait cette règle se applique à un paragraphe à la place du corps. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Vous verrez comment il se applique uniquement aux paragraphe nouvellement formé, à droite, 176 00:07:17,320 --> 00:07:18,892 pas le tout. 177 00:07:18,892 --> 00:07:20,090 Est-ce logique? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON BUCHHOLTZ-UA: Donc, ce est tout le corps, 179 00:07:21,840 --> 00:07:24,450 mais maintenant notre sélection juste correspond au paragraphe. 180 00:07:24,450 --> 00:07:27,050 Donc nous avons juste gras et bleu pour ce paragraphe spécifique, 181 00:07:27,050 --> 00:07:30,760 parce que ce est la seule chose qui est enfermé dans la balise p. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Est-ce logique de tri de comment les choses encapsuler d'autres choses? 183 00:07:35,349 --> 00:07:38,140 ALLISON BUCHHOLTZ-UA: Aussi, juste à-dire, comme, une des meilleures façons 184 00:07:38,140 --> 00:07:40,889 pour vraiment à l'aise avec CSS est juste faire des choses comme ça, 185 00:07:40,889 --> 00:07:42,050 juste essayer. 186 00:07:42,050 --> 00:07:46,700 Ce est très simple de taper quelque chose out, frappé Actualiser, et de voir ce qui se passe. 187 00:07:46,700 --> 00:07:48,940 Et comme avec la plupart CS, L'expérimentation peut souvent 188 00:07:48,940 --> 00:07:51,790 conduire à une bien meilleure compréhension intuitive. 189 00:07:51,790 --> 00:07:54,432 Plus encore que nous juste, comme, de vous parler. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Absolument 100% d'accord sur ce point. 191 00:07:58,350 --> 00:08:02,430 Donc, si nous revenons à cela, nous allons commencer dissection exactement ce que ces deux ne. 192 00:08:02,430 --> 00:08:04,550 Nous avons donc deux règles à ce sujet. 193 00:08:04,550 --> 00:08:07,420 Donc, la première est une couleur de fond. 194 00:08:07,420 --> 00:08:10,590 Et vous voyez que nous avons mis en elle égale à une valeur, bleu clair. 195 00:08:10,590 --> 00:08:15,009 >> Donc, en CSS, CSS est en quelque sorte de très lâche sur la façon 196 00:08:15,009 --> 00:08:16,300 vous êtes autorisé à définir la couleur. 197 00:08:16,300 --> 00:08:17,800 Ainsi, vous pouvez les définir par leur nom. 198 00:08:17,800 --> 00:08:20,650 Vous pouvez aussi faire quelque chose comme «rouge». 199 00:08:20,650 --> 00:08:25,270 Et puis si nous revenons à cela, vous verrez que le fond est rouge. 200 00:08:25,270 --> 00:08:29,040 Vous pouvez également obtenir really-- Je pense que vous peut être assez créatif avec cela, 201 00:08:29,040 --> 00:08:29,540 pouvez-vous pas? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON BUCHHOLTZ-AU: Je pensez que vous pouvez utiliser hex. 203 00:08:31,170 --> 00:08:31,250 Pouvez-vous pas? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Ouais. 205 00:08:32,083 --> 00:08:32,969 Ainsi, vous pouvez utiliser hex. 206 00:08:32,969 --> 00:08:34,490 Mais je pense nom sage. 207 00:08:34,490 --> 00:08:35,385 Ne sont pas là? 208 00:08:35,385 --> 00:08:37,260 ALLISON BUCHHOLTZ-UA: Vous pouvez faire un certain nombre. 209 00:08:37,260 --> 00:08:43,350 Un peu comme la plupart des couleurs que vous peut name-- comme, je pense que le saumon est une. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: Nous sommes saumon va essayer. 211 00:08:45,322 --> 00:08:47,530 ALLISON BUCHHOLTZ-AU: Je pense chartreuse est là. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Ouais. 213 00:08:48,050 --> 00:08:48,550 Voir? 214 00:08:48,550 --> 00:08:50,080 Ainsi vous pouvez obtenir très créatif. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON BUCHHOLTZ-UA: Vous pourrait être assez créatif. 216 00:08:52,246 --> 00:08:55,750 Comme, si vous pouvez penser de la nom de la couleur, ce est probablement là. 217 00:08:55,750 --> 00:08:57,840 Si vous voulez vraiment bien détail, vous pouvez aller hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Ouais. 219 00:08:58,673 --> 00:08:59,390 Donc hexadécimal. 220 00:08:59,390 --> 00:09:05,280 Si vous les gars me souviens de ce retour de votre ancien PSET, Image Recover, 221 00:09:05,280 --> 00:09:08,300 vous avez eu à traiter avec ces valeurs hexagonaux. 222 00:09:08,300 --> 00:09:15,280 Et une sorte de récapituler ce que ce est, hex a trois valeurs stockées. 223 00:09:15,280 --> 00:09:17,250 Ce est donc par groupes de deux incréments. 224 00:09:17,250 --> 00:09:19,300 Les deux premiers représentent la valeur de rouge. 225 00:09:19,300 --> 00:09:22,420 Le second représente la valeur verte. 226 00:09:22,420 --> 00:09:25,020 Et le dernier est bleu? 227 00:09:25,020 --> 00:09:30,050 >> Donc FF arrive à représenter hexadécimal 255. 228 00:09:30,050 --> 00:09:35,480 Donc, vous avez 255 rouge, 255 vert, et 0 pour le bleu. 229 00:09:35,480 --> 00:09:37,670 Et les valeurs sont comprises entre 0 et 255. 230 00:09:37,670 --> 00:09:38,350 >> AUDIENCE: Droit. 231 00:09:38,350 --> 00:09:41,472 Donc, essentiellement, nous pourrions chercher l'Internet pour ne importe quelle couleur que nous voulons, 232 00:09:41,472 --> 00:09:43,912 et d'identifier la réalité connue combo spectre de couleurs, 233 00:09:43,912 --> 00:09:45,130 et alors nous pourrions mettre dans? 234 00:09:45,130 --> 00:09:46,380 ALLISON BUCHHOLTZ-UA: Exactement. 235 00:09:46,380 --> 00:09:52,900 Donc, vous avez à peu près un contrôle complet plus les couleurs que vous voulez dans CSS. 236 00:09:52,900 --> 00:09:55,069 Allons-nous parler images de fond plus tard? 237 00:09:55,069 --> 00:09:56,110 Ou voulons-nous faire? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Ouais. 239 00:09:56,240 --> 00:09:57,010 Absolument. 240 00:09:57,010 --> 00:10:00,830 Alors d'abord, juste pour montrer que rouge et vert est jaune. 241 00:10:00,830 --> 00:10:03,120 Et si vous avez besoin aider à trouver cela, vous 242 00:10:03,120 --> 00:10:05,575 peut quelque chose de Google comme "color picker." 243 00:10:05,575 --> 00:10:07,200 ALLISON BUCHHOLTZ-UA: Oh, ce est tellement bon. 244 00:10:07,200 --> 00:10:09,090 Je adore Color Picker. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com est un bon exemple. 246 00:10:11,360 --> 00:10:14,580 Et ici, vous verrez que vous avez un sélecteur de couleur Photoshop-like plein. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON BUCHHOLTZ-UA: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Aussi, les choses sont cool vous peut générer des schémas de couleurs 249 00:10:16,980 --> 00:10:18,896 de sorte que vous ne avez pas, comme, affrontant couleurs. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: Et puis voici la valeur hex ici. 251 00:10:22,780 --> 00:10:27,800 Ainsi, vous pouvez toujours trouver en ligne essentiellement endroits pour obtenir la valeur hexadécimale de. 252 00:10:27,800 --> 00:10:31,667 Ce ne est pas le tri de ce juste, comme, nous voir les couleurs du monde en nombre. 253 00:10:31,667 --> 00:10:34,000 Ce est plus que nous allons en ligne et de trouver quelle couleur que nous voulons, 254 00:10:34,000 --> 00:10:36,850 puis prendre le numéro. 255 00:10:36,850 --> 00:10:39,590 Parce que ce est juste un vraiment facile moyen de référencer les choses dans CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON BUCHHOLTZ-UA: Et puis il ya also-- 257 00:10:40,350 --> 00:10:41,630 Je oublie le nom exact du site. 258 00:10:41,630 --> 00:10:43,838 Mais il ya certainement, je penser, quelque chose de Adobe 259 00:10:43,838 --> 00:10:48,350 qui génère des couleurs pour vous, qui est vraiment cool, parce que vous 260 00:10:48,350 --> 00:10:50,580 definitely-- il est parfois difficile à comprendre, 261 00:10:50,580 --> 00:10:53,729 oh, si je veux utiliser cette couleur, ce pourrait être un autre utiles 262 00:10:53,729 --> 00:10:56,395 à utiliser ailleurs sur mon site, comme, le rendre agréable et cohérente. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allison parle un par Adobe Kuler appelé, je crois. 265 00:11:04,260 --> 00:11:04,885 Ce est K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON BUCHHOLTZ-AU: Je pense que oui. 267 00:11:06,259 --> 00:11:07,610 Je suis sûr que ce est la seule. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: Mon préféré a toujours été Color Scheme Designer. 269 00:11:11,050 --> 00:11:13,998 >> ALLISON BUCHHOLTZ-UA: Ooh. 270 00:11:13,998 --> 00:11:16,010 >> TOMAS REIMERS: Quel est maintenant-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON BUCHHOLTZ-UA: Ah, ce est beau. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: Et vous peut essentiellement dire, comme, 273 00:11:18,818 --> 00:11:21,700 Je veux trois couleurs à côté de l'autre. 274 00:11:21,700 --> 00:11:25,030 Et puis nous allons faire quelque chose de gentil. 275 00:11:25,030 --> 00:11:29,210 Et puis, vous pouvez obtenir un exemple de ce que cela pourrait ressembler. 276 00:11:29,210 --> 00:11:32,470 Et puis si vous survolez un des eux, il vous donne la valeur hexadécimale. 277 00:11:32,470 --> 00:11:35,010 >> Ainsi, tout comme une bonne façon de commencer penser à des couleurs 278 00:11:35,010 --> 00:11:39,570 ou ce que les couleurs dans un site Web pourrait aller bien ensemble. 279 00:11:39,570 --> 00:11:45,655 Parce que ça peut être étonnamment pas aussi facile à prendre que vous le pensez. 280 00:11:45,655 --> 00:11:48,280 Et puis l'autre chose cool Je ai toujours trouvé à propos de ce site 281 00:11:48,280 --> 00:11:51,480 est si vous frappez exemples, ça va montrer ce qu'est un site d'exemple 282 00:11:51,480 --> 00:11:54,800 pourrait ressembler à l'aide de ce schéma de couleurs. 283 00:11:54,800 --> 00:11:56,270 Quoi qu'il en soit. 284 00:11:56,270 --> 00:11:57,863 >> Retour à la CSS réelle. 285 00:11:57,863 --> 00:12:01,112 ALLISON BUCHHOLTZ-UA: Mais évidemment, nous connaître ces références pourraient être utiles. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: Non, ils peut certainement être utile. 287 00:12:03,195 --> 00:12:04,720 Donc, la deuxième règle, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON BUCHHOLTZ-UA: Ouais. 289 00:12:05,844 --> 00:12:08,280 La deuxième règle est juste correspondant à notre police. 290 00:12:08,280 --> 00:12:11,520 Donc poids police est juste genre de-- sorte que le poids serait 291 00:12:11,520 --> 00:12:15,220 être si vous voulez juste, comme, normal ou, comme, les polices plus minces, 292 00:12:15,220 --> 00:12:17,251 ou dans ce cas, comme, audacieux. 293 00:12:17,251 --> 00:12:17,750 Je oublie. 294 00:12:17,750 --> 00:12:21,557 Quel est le si vous vouliez it-- est là un diluant une que juste, comme, normal? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: je ne ai pas fait savoir se il ya un plus mince. 296 00:12:24,140 --> 00:12:24,680 ALLISON BUCHHOLTZ-AU: Je ai oublié. 297 00:12:24,680 --> 00:12:26,300 Poids afin police nous généralement il suffit d'utiliser pour le gras. 298 00:12:26,300 --> 00:12:29,010 Si vous voulez vraiment entrer dans , nous allons vous montrer. 299 00:12:29,010 --> 00:12:34,317 W3Schools a tous les différents choses que vous pouvez faire pour les polices. 300 00:12:34,317 --> 00:12:36,900 Mais fondamentalement, si jamais vous voulez de changer quoi que ce soit à propos de la police, 301 00:12:36,900 --> 00:12:39,330 il est toujours va être, comme, font-chose. 302 00:12:39,330 --> 00:12:43,450 Donc, ce sera comme, font-family si vous êtes essayer de changer le type réel. 303 00:12:43,450 --> 00:12:47,390 Ça va être font-style si vous vouloir faire comme cursive, 304 00:12:47,390 --> 00:12:49,710 ou en italique, ou autres joyeusetés. 305 00:12:49,710 --> 00:12:53,570 Ou même font-couleur, si nous voulions changer cela. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 Ainsi, vous pouvez changer cela. 308 00:12:56,925 --> 00:12:59,360 Et une sorte de juste Récapitulons maintenant et vous pouvez 309 00:12:59,360 --> 00:13:01,400 voir que nous avons le sélecteur ici. 310 00:13:01,400 --> 00:13:03,000 Nous avons ces accolades. 311 00:13:03,000 --> 00:13:06,735 Et puis nous avons des règles délimitée par des points-virgules. 312 00:13:06,735 --> 00:13:08,100 Est-ce logique? 313 00:13:08,100 --> 00:13:09,130 Ouais? 314 00:13:09,130 --> 00:13:10,500 Cool. 315 00:13:10,500 --> 00:13:13,200 Donc, si ce est good-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON BUCHHOLTZ-UA: Retour. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Parlons spécifiquement sur ce type de sélecteurs que nous avons. 318 00:13:17,590 --> 00:13:19,790 Parce que nous avons en ce moment sorte de juste montré les tags. 319 00:13:19,790 --> 00:13:21,696 Mais vous les gars pourrait voir plausible. 320 00:13:21,696 --> 00:13:23,570 Disons que vous avez deux paragraphes sur une page et vous 321 00:13:23,570 --> 00:13:26,087 veulent être en mesure le style une mais pas l'autre, 322 00:13:26,087 --> 00:13:29,170 vous ne voulez pas seulement se limiter d'avoir à utiliser différents HTML réel 323 00:13:29,170 --> 00:13:33,410 étiquettes pour leur donner des styles différents. 324 00:13:33,410 --> 00:13:35,995 >> Nous avons donc trois de base types de sélecteurs. 325 00:13:35,995 --> 00:13:37,120 ALLISON BUCHHOLTZ-UA: Ouais. 326 00:13:37,120 --> 00:13:39,828 Nous avons donc tag, ce est ce qui nous avons parlé de ce moment. 327 00:13:39,828 --> 00:13:42,430 Donc, ce est un peu comme votre corps ou p. 328 00:13:42,430 --> 00:13:46,280 Et puis nous avons la classe, qui est lorsque nous définissons dans notre fichier CSS, 329 00:13:46,280 --> 00:13:49,907 Il va toujours être dot, quel que soit vous voulez que le nom de votre classe soit. 330 00:13:49,907 --> 00:13:51,490 Et cela peut se appliquer à plusieurs choses. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Disons que vous avez cinq paragraphes et deux des trois d'entre eux 333 00:13:57,610 --> 00:14:00,580 besoin d'être le même style, vous appliquer une classe à elle. 334 00:14:00,580 --> 00:14:03,040 Et ce est juste la façon dont nous le faisons. 335 00:14:03,040 --> 00:14:05,600 Nous allons vous donner un exemple de où cette montre effectivement en place. 336 00:14:05,600 --> 00:14:11,030 Mais si vous aviez peut-être certains tag p, après, vous devez écrire, 337 00:14:11,030 --> 00:14:14,170 classe égale quelles que soient les classes vous voulez appliquer. 338 00:14:14,170 --> 00:14:19,280 Donc, quelles que soient les sélecteurs de classe que nous voulons à appliquer à ce paragraphe spécifique, 339 00:14:19,280 --> 00:14:21,300 nous pourrions écrire comme ça. 340 00:14:21,300 --> 00:14:24,080 Bien sûr, je pense un exemple il sera beaucoup plus concret. 341 00:14:24,080 --> 00:14:27,270 >> L'autre nous avons est id, que nous noterons 342 00:14:27,270 --> 00:14:29,707 avec un hachage, ou à la livre, ou hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: Octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON BUCHHOLTZ-UA: Octothorpe. 345 00:14:32,430 --> 00:14:34,550 Cela fonctionne aussi. 346 00:14:34,550 --> 00:14:36,640 Et celui-ci doit être vraiment unique. 347 00:14:36,640 --> 00:14:39,880 Ils ne devraient se appliquer une chose sur votre page. 348 00:14:39,880 --> 00:14:43,820 Donc, si ce est un paragraphe spécifique, ou un élément dans une liste, ou autre, 349 00:14:43,820 --> 00:14:45,090 ce doit être unique. 350 00:14:45,090 --> 00:14:48,730 Et de la même manière que nous venons dire, comme, class = "class1 class2," 351 00:14:48,730 --> 00:14:51,577 cela peut juste être id de tout ce que nous avons. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Ouais. 353 00:14:52,410 --> 00:14:54,330 Parlons donc définitivement sur les exemples ici. 354 00:14:54,330 --> 00:14:58,170 Et je vais juste de plonger vers l'arrière dans le code. 355 00:14:58,170 --> 00:15:02,090 Alors regardons notre HTML. 356 00:15:02,090 --> 00:15:03,960 Et donc nous avons maintenant droit un paragraphe. 357 00:15:03,960 --> 00:15:05,510 Ceci est un texte. 358 00:15:05,510 --> 00:15:09,151 Je vais juste de modifier il. "Ceci est un texte 1." 359 00:15:09,151 --> 00:15:11,150 Et puis nous allons avoir un "Ce est un texte 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON BUCHHOLTZ-UA: deuxième. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 Donc, nous avons maintenant "Ceci est un texte 2,« droit? 363 00:15:16,810 --> 00:15:21,560 Et nous allons voir que si le chargement la page, ce que nous allons trouver 364 00:15:21,560 --> 00:15:23,067 ce est que nous allons find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON BUCHHOLTZ-UA: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS REIMERS: Ouais. 367 00:15:24,983 --> 00:15:27,570 Nous allons trouver un "Ce est texte 1 »et« Ceci est un texte 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON BUCHHOLTZ-UA: Et sur belle couleur jaune. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: Et vous verrez que notre sélection en ce moment, 370 00:15:31,066 --> 00:15:34,940 qui se applique à P, ou paragraphes, affecte à la fois d'entre eux, 371 00:15:34,940 --> 00:15:38,700 parce que les deux répondent à la condition que ils sont à la fois une balise p. 372 00:15:38,700 --> 00:15:40,360 Cela fait sens total. 373 00:15:40,360 --> 00:15:43,340 Donc la question est, eh bien, ce si nous voulions seulement obtenir une? 374 00:15:43,340 --> 00:15:46,350 Donc exactement comme disait Allison, nous avons deux autres façons de le faire. 375 00:15:46,350 --> 00:15:47,320 Je vais commencer par id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON BUCHHOLTZ-UA: Commençons par id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: Et les deux de ces attributs sont. 378 00:15:50,405 --> 00:15:53,200 Donc attributs existent au format HTML. 379 00:15:53,200 --> 00:15:55,600 Et ce qu'ils sont est quelque chose que vous ajoutez 380 00:15:55,600 --> 00:15:58,840 dans la balise qui est séparer du nom de la balise. 381 00:15:58,840 --> 00:16:01,301 Ainsi, vous pouvez avoir plusieurs attributs. 382 00:16:01,301 --> 00:16:01,800 Ouais? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON BUCHHOLTZ-AU: Je allais juste à-dire, à partir de votre exemple de PSET 7, 384 00:16:03,950 --> 00:16:06,650 si l'un de vous essayer d'aligner les choses vers le centre, 385 00:16:06,650 --> 00:16:08,550 vous pourriez avoir utilisé «Texte align = center." 386 00:16:08,550 --> 00:16:10,550 Et vous l'avez remarqué sans doute aurait centrée 387 00:16:10,550 --> 00:16:12,650 votre texte ou votre barre de navigation. 388 00:16:12,650 --> 00:16:15,499 Donc, ce est juste aussi un attribut que vous connaissez peut-être. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: Il ya un tas des attributs que vous verrez. 390 00:16:18,040 --> 00:16:18,539 Ouais. 391 00:16:18,539 --> 00:16:21,250 Comme une bonne référence à PSET 7. 392 00:16:21,250 --> 00:16:23,150 Nous avons id. 393 00:16:23,150 --> 00:16:25,080 Vous pouvez également avoir classe, des choses comme ça. 394 00:16:25,080 --> 00:16:27,250 Une seule étiquette peut avoir plusieurs attributs. 395 00:16:27,250 --> 00:16:33,140 Ainsi, à partir d'id, supposons que nous voulez avoir une id de-- Je ne sais pas. 396 00:16:33,140 --> 00:16:35,140 Nous l'appellerons spéciale, car celui-ci, nous sommes 397 00:16:35,140 --> 00:16:37,867 va mettre en gras, et souligner, et quel que soit. 398 00:16:37,867 --> 00:16:39,950 ALLISON BUCHHOLTZ-UA: Ce est va être super spéciale. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: Donc, ce une, nous avons id spéciale. 400 00:16:42,360 --> 00:16:48,140 Ainsi, la manière pour sélectionner cela, alors, est dans main.css, plutôt que d'avoir une balise p, 401 00:16:48,140 --> 00:16:51,500 vous faites # spécial, OK? 402 00:16:51,500 --> 00:16:55,538 Et qui sélectionne les chose avec id spéciale. 403 00:16:55,538 --> 00:16:57,295 Cela fait sens pour tout le monde? 404 00:16:57,295 --> 00:16:57,920 AUDIENCE: Ouais. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Alors maintenant, si nous revenons, nous allons see-- whoops. 407 00:17:04,440 --> 00:17:06,240 Ouais. 408 00:17:06,240 --> 00:17:09,460 Nous allons voir que ce ne sélectionne l'une avec id spéciale. 409 00:17:09,460 --> 00:17:10,622 Ouais? 410 00:17:10,622 --> 00:17:11,900 Sons cool. 411 00:17:11,900 --> 00:17:12,570 Oui. 412 00:17:12,570 --> 00:17:15,456 >> AUDIENCE: quelque chose peut avoir un attribuer à la fois classe et une id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Oui. 414 00:17:16,359 --> 00:17:16,900 AUDIENCE: OK. 415 00:17:16,900 --> 00:17:20,887 Et puis ce qui se passe si vous donnez ensuite il certaines règles CSS dans ce conflit? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Absolument. 417 00:17:21,970 --> 00:17:23,940 Nous allons certainement en parler. 418 00:17:23,940 --> 00:17:31,890 Donc exactement ce que vous receviez au, vous pouvez aussi avoir des classes. 419 00:17:31,890 --> 00:17:36,380 Donc, nous allons prétendre que je avais trois paragraphes et moi 420 00:17:36,380 --> 00:17:38,730 voulu coiffer la première deux mais pas la troisième. 421 00:17:38,730 --> 00:17:42,850 Eh bien, votre première idée peut être, bien, je pourrait simplement donner le second un id. 422 00:17:42,850 --> 00:17:45,590 Mais vous ne pouvez pas, parce que un id, exactement comme disait Allison, 423 00:17:45,590 --> 00:17:47,330 doit être unique. 424 00:17:47,330 --> 00:17:50,860 >> Ainsi, au lieu d'un id, ce que vous pouvez utiliser est, vous pouvez utiliser une classe. 425 00:17:50,860 --> 00:17:57,880 Et un class-- ce qu'il permet vous faire est essentiellement dire, 426 00:17:57,880 --> 00:17:59,610 cela appartient dans le cadre d'un groupe. 427 00:17:59,610 --> 00:18:02,410 Dans ce cas, notre groupe est appelé spécial. 428 00:18:02,410 --> 00:18:06,500 Et ce que nous allons faire ensuite est nous allons say-- plutôt que la livre, 429 00:18:06,500 --> 00:18:08,070 nous allons utiliser dot. 430 00:18:08,070 --> 00:18:08,740 D'ACCORD? 431 00:18:08,740 --> 00:18:11,950 Et remarquez que la livre et le point ne existent que dans le fichier CSS, 432 00:18:11,950 --> 00:18:12,797 pas dans le code HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON BUCHHOLTZ-UA: Oui. 434 00:18:13,880 --> 00:18:15,185 Distinction importante. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Je ai eu tant de luttes, 436 00:18:17,510 --> 00:18:23,990 parce que je mets le hachage dans le code HTML et puis juste senti stupide pendant une longue période. 437 00:18:23,990 --> 00:18:27,470 Voyez comment il sélectionne deux ceux avec cette classe? 438 00:18:27,470 --> 00:18:28,210 Cool. 439 00:18:28,210 --> 00:18:29,950 >> Maintenant, les choses peuvent avoir plusieurs classes. 440 00:18:29,950 --> 00:18:32,790 Disons que je voulais faire le premier deux ont un fond jaune 441 00:18:32,790 --> 00:18:36,770 et les deux ont une couleur de police de bleu. 442 00:18:36,770 --> 00:18:37,270 D'ACCORD. 443 00:18:37,270 --> 00:18:39,735 Je ne sais pas vraiment pourquoi je avais vouloir le faire, mais je peux. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON BUCHHOLTZ-UA: pourrait ne pas recommandé pour votre site web. 445 00:18:42,401 --> 00:18:43,880 Mais pour nos fins, il va faire. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: Ce ne est pas un bon jeu de couleurs. 447 00:18:46,294 --> 00:18:49,210 ALLISON BUCHHOLTZ-UA: Eh bien, jaune et le bleu sont mes couleurs de l'école secondaire. 448 00:18:49,210 --> 00:18:50,947 Je ne sais pas, cependant. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison le plus haut l'école avait une grande palette de couleurs. 450 00:18:53,530 --> 00:18:54,520 [Rires] 451 00:18:54,520 --> 00:18:59,120 Alors ce que nous pouvons appeler cela est Appelons this-- nous avons donc spécial 452 00:18:59,120 --> 00:19:00,030 et nous avons Jolie. 453 00:19:00,030 --> 00:19:02,405 Je suggère, pour cela, vous utilisez noms beaucoup plus descriptifs. 454 00:19:02,405 --> 00:19:05,820 ALLISON BUCHHOLTZ-UA: Oui, je le ferais appeler ce, comme, jaune ou bleu. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: Nous ne sommes pas vraiment faire un vrai site web, 456 00:19:08,314 --> 00:19:09,730 ce est pourquoi nous ne le faisons pas. 457 00:19:09,730 --> 00:19:11,521 Mais si vous avez réellement eu un vrai site web, vous 458 00:19:11,521 --> 00:19:16,220 pourrait avoir, comme l'article-tête, contenu de l'article, premier mot, 459 00:19:16,220 --> 00:19:21,920 des choses comme ça, qui permettent que vous soyez beaucoup plus descriptive. 460 00:19:21,920 --> 00:19:23,550 Ce sont vraiment comme des variables. 461 00:19:23,550 --> 00:19:28,390 Ils devraient être nommés d'une manière où vous pouvez, like-- oui, en tant que telle. 462 00:19:28,390 --> 00:19:29,470 Parfait. 463 00:19:29,470 --> 00:19:30,480 >> Donc couleur de fond. 464 00:19:30,480 --> 00:19:35,920 Et puis nous allons donc le say-- façon de changer de couleur est juste "couleur". 465 00:19:35,920 --> 00:19:38,412 Et nous allons le rendre bleu. 466 00:19:38,412 --> 00:19:40,150 C'est super. 467 00:19:40,150 --> 00:19:42,640 Alors maintenant, nous avons la deux premiers ont spéciale. 468 00:19:42,640 --> 00:19:45,972 Suivant une va avoir "class = joli." 469 00:19:45,972 --> 00:19:49,180 ALLISON BUCHHOLTZ-UA: Et puis vous aurez vouloir ajouter "joli" à celui du milieu. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 Et puis au milieu, d'ajouter «jolie," ce qui se passe 472 00:19:52,970 --> 00:19:56,880 ce est que vous avez juste un espace. 473 00:19:56,880 --> 00:19:59,800 Donc, l'attribut de classe est une liste séparée par des espaces 474 00:19:59,800 --> 00:20:02,450 de toutes les classes qui se appliquent à ce tag. 475 00:20:02,450 --> 00:20:02,959 D'ACCORD? 476 00:20:02,959 --> 00:20:05,750 Ce ne est pas comme celui-ci appartient à une sorte de classe spéciale appelée 477 00:20:05,750 --> 00:20:07,180 "Spéciale, l'espace, joli." 478 00:20:07,180 --> 00:20:10,870 Il appartient à deux classes-- spéciale et jolie. 479 00:20:10,870 --> 00:20:12,492 Oui? 480 00:20:12,492 --> 00:20:14,360 Cool. 481 00:20:14,360 --> 00:20:17,010 >> Et puis si nous regardons à ce qui se passe, nous sommes 482 00:20:17,010 --> 00:20:21,850 allez voir que le premier a une fond jaune, texte noir. 483 00:20:21,850 --> 00:20:22,450 Deuxième One-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON BUCHHOLTZ-UA: --a gras fond jaune avec le texte en bleu. 485 00:20:26,160 --> 00:20:29,330 Et notre dernier a juste le texte en bleu que nous lui sont assignées. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 Comment sélecteurs fonctionnent? 488 00:20:32,491 --> 00:20:32,990 Impressionnant. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON BUCHHOLTZ-UA: Voulons-nous parler du conflit maintenant, alors? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Donc oui. 491 00:20:35,780 --> 00:20:36,310 Absolument. 492 00:20:36,310 --> 00:20:38,380 Donc ce qui arrive si vous un conflit, non? 493 00:20:38,380 --> 00:20:44,740 Imaginons le premier met en place quelque chose de like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON BUCHHOLTZ-UA: Peut-être celui-ci change le fond? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Ouais. 496 00:20:48,090 --> 00:20:51,699 Donc, nous allons faire "joli" changer le fond au saumon. 497 00:20:51,699 --> 00:20:54,740 ALLISON BUCHHOLTZ-UA: Vous êtes juste avec tous les grands couleurs aujourd'hui, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Ouais. 499 00:20:55,573 --> 00:20:58,200 Parce que je ai découvert que je peux utiliser le saumon comme un véritable couleur. 500 00:20:58,200 --> 00:21:00,270 Donc, nous ne allons pas faire cela. 501 00:21:00,270 --> 00:21:01,770 Je pense aussi Sunset est une vraie couleur. 502 00:21:01,770 --> 00:21:03,103 AUDIENCE: Sunset est une vraie couleur? 503 00:21:03,103 --> 00:21:04,572 ALLISON BUCHHOLTZ-UA: Essayons. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Après cette démo juste parce que dans le cas où il mess up, 505 00:21:07,735 --> 00:21:08,943 Je ne veux pas être le débogage. 506 00:21:08,943 --> 00:21:11,580 Donc, nous savons le saumon est une vraie couleur. 507 00:21:11,580 --> 00:21:15,626 Ainsi, toute conjectures sur ce qui va se passer? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON BUCHHOLTZ-UA: Toute idée? 509 00:21:17,522 --> 00:21:20,002 >> AUDIENCE: [inaudible]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Ouais. 511 00:21:20,920 --> 00:21:22,150 Donc, vous avez tout à fait raison. 512 00:21:22,150 --> 00:21:24,930 Fondamentalement, il prend la dernière règle qu'il a été donné. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON BUCHHOLTZ-UA: Donc, ce est où cascade entre en vigueur. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Alors rappelez-vous comment nous eu que des feuilles de style en cascade? 515 00:21:31,080 --> 00:21:33,660 Ainsi, en cela, nous entendons type de que nous avons un tas de règles 516 00:21:33,660 --> 00:21:37,115 qui se appliquent sur le dessus de l'autre, et ils peuvent également remplacer l'autre. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON BUCHHOLTZ-UA: Donc, tout est au fond 518 00:21:39,380 --> 00:21:41,540 annulera tout ce qui est en haut. 519 00:21:41,540 --> 00:21:45,842 Vous pourriez avoir des règles qui a complètement nier quelque chose à l'avance. 520 00:21:45,842 --> 00:21:48,300 Ce est aussi pourquoi vous voulez être prudent lorsque vous êtes style, 521 00:21:48,300 --> 00:21:51,465 de sorte que vous n'êtes pas la création de règles qui vous êtes juste complètement impérieuses. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: Ou peut-être vous ne veulent écraser règles. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON BUCHHOLTZ-UA: Ou peut-être que vous faites. 524 00:21:53,920 --> 00:21:54,300 Oui. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Imaginez que vous avez un classe qui se applique à la plupart des choses, 526 00:21:57,175 --> 00:22:01,220 mais disons que vous voulez changer le couleur de fond rouge et la police 527 00:22:01,220 --> 00:22:03,140 poids à gras pour la plupart choses, mais pour un, 528 00:22:03,140 --> 00:22:06,098 vous voulez que la couleur de fond être rouge mais vous voulez tous les autres 529 00:22:06,098 --> 00:22:09,990 propriétés, vous pourriez faire quelque chose comme "font-weight = normal," 530 00:22:09,990 --> 00:22:12,760 qui serait ensuite défaire ce changement gras. 531 00:22:12,760 --> 00:22:14,480 Ouais? 532 00:22:14,480 --> 00:22:17,250 Encore une fois, la meilleure façon, je pense que Allison dit, est juste la pratique. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON BUCHHOLTZ-UA: expérimentation. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Pratique, pratique, pratique et expérience. 535 00:22:20,090 --> 00:22:22,950 Je sais que beaucoup de personnes qui pensent CSS est juste beaucoup de conjectures et de vérification 536 00:22:22,950 --> 00:22:25,580 à la fin de la journée, où si vous voulez faire quelque chose-- comme, 537 00:22:25,580 --> 00:22:27,663 vous avez une idée approximative, mais vous avez encore probablement besoin 538 00:22:27,663 --> 00:22:31,390 l'essayer pour se assurer vous savez à quoi il ressemble. 539 00:22:31,390 --> 00:22:34,482 >> AUDIENCE: Lorsque vous postulez les classes, plus d'un 540 00:22:34,482 --> 00:22:37,339 au même paragraphe ou de l'article, ne est-ce 541 00:22:37,339 --> 00:22:39,505 importe quel ordre vous pouvez les taper dans les citations? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: Non, pas du tout. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON BUCHHOLTZ-UA: Ce qui importe est l'ordre au sein de votre feuille de style CSS. 544 00:22:45,764 --> 00:22:47,430 AUDIENCE: Pourriez-vous répéter la question? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON BUCHHOLTZ-UA: Dans classe, quand vous donnant des cours 547 00:22:53,990 --> 00:22:56,964 à quelque chose dans le code HTML, ne il importe quel ordre ils sont en? 548 00:22:56,964 --> 00:22:58,130 Il ne importe pas l'ordre. 549 00:22:58,130 --> 00:23:02,915 Ce qui importe est l'ordre du sélecteurs de classe au sein de votre CSS, 550 00:23:02,915 --> 00:23:04,306 au sein de votre feuille de style. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: bon son? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON BUCHHOLTZ-UA: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: Et puis nous allons continuer to-- 554 00:23:11,539 --> 00:23:13,330 ALLISON BUCHHOLTZ-UA: Que devons-nous ensuite? 555 00:23:13,330 --> 00:23:14,245 Je oublie. 556 00:23:14,245 --> 00:23:16,087 Oh, nous avons juste des exemples. 557 00:23:16,087 --> 00:23:17,295 Mais nous avons fait genre de celles-ci. 558 00:23:17,295 --> 00:23:18,990 Nous avons fait des exemples à la volée. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: Nous arrivons à combiner les sélecteurs bientôt. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON BUCHHOLTZ-UA: Oh, nous arrivons à combiner sélecteurs. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: Donc, certains exemples est que nous avons 562 00:23:25,260 --> 00:23:29,630 # Livre dog-- ou hashtag, ou dièse, ou quoi 563 00:23:29,630 --> 00:23:32,050 vous voulez appeler that-- forte. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON BUCHHOLTZ-UA: chien Sharp. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Ensuite, vous avez .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Quelque chose a un id de chien, il ya seulement un chien sur la page. 568 00:23:41,600 --> 00:23:43,870 Quelque chose a un id de chat, il est seulement un chat. 569 00:23:43,870 --> 00:23:45,665 Il peut y avoir de nombreux animaux de la page. 570 00:23:45,665 --> 00:23:47,570 Ce est pourquoi nous avons donné que les classes. 571 00:23:47,570 --> 00:23:48,740 Vous avez un exemple de p. 572 00:23:48,740 --> 00:23:50,490 Et alors si l'un des dernier exemple, qui 573 00:23:50,490 --> 00:23:53,790 est quelque chose que nous ne avons pas parlé, est ce qui arrive quand vous les combinez. 574 00:23:53,790 --> 00:23:54,580 Donc p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Donc, pour cela, revenons à la code et introduire another-- oui. 577 00:24:02,950 --> 00:24:04,290 Alors revenir ici. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON BUCHHOLTZ-AU: Je se sentir comme ce est really-- 579 00:24:04,850 --> 00:24:08,105 comme simplement en regardant à travers des exemples est vraiment la façon d'apprendre cela. 580 00:24:08,105 --> 00:24:09,360 Donc, ce est ce que nous faisons. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Donc, supposons que nous ne vouloir sélectionner du texte deux, non? 582 00:24:14,030 --> 00:24:16,530 Donc, nous pouvons certainement pas le faire avec un id. 583 00:24:16,530 --> 00:24:19,620 Eh bien, nous pourrions le faire avec un id, mais il ne possède pas d'id. 584 00:24:19,620 --> 00:24:22,490 Je pourrais ajouter, mais Imaginons que je ne veux pas ajouter une 585 00:24:22,490 --> 00:24:24,910 ou il a déjà quelque chose d'autre. 586 00:24:24,910 --> 00:24:26,516 Je ne peux pas le faire avec cela. 587 00:24:26,516 --> 00:24:28,870 La balise est certainement pas unique, non? 588 00:24:28,870 --> 00:24:30,670 Et ne est la classe. 589 00:24:30,670 --> 00:24:32,314 Mais vous pouvez combiner ces choses. 590 00:24:32,314 --> 00:24:35,230 Disons que nous voulions faire quelque chose qui se applique uniquement à des choses qui 591 00:24:35,230 --> 00:24:39,420 avoir la classe spéciale et qui ont la classe jolie. 592 00:24:39,420 --> 00:24:48,150 >> Donc ce que vous pouvez faire est en main.css, vous pouvez dire, nous allons d'abord Supprimer cette. 593 00:24:48,150 --> 00:24:50,240 Vous pouvez combiner ces. 594 00:24:50,240 --> 00:24:51,430 Donc vous pouvez faire .special. 595 00:24:51,430 --> 00:24:52,110 Pas d'espace. 596 00:24:52,110 --> 00:24:54,770 Juste .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Ce que cela signifie est quelque chose qui est à la fois spéciale et jolie. 598 00:25:00,550 --> 00:25:01,900 Est-ce logique? 599 00:25:01,900 --> 00:25:04,190 Et si nous allons ici, ce vous allez voir 600 00:25:04,190 --> 00:25:09,734 est cette règle se applique uniquement à la une seconde, qui a à la fois de ceux. 601 00:25:09,734 --> 00:25:11,400 Et vous pouvez le faire pour beaucoup de choses. 602 00:25:11,400 --> 00:25:13,270 Vous pouvez say-- de laisser prétends Je voulais seulement 603 00:25:13,270 --> 00:25:18,300 de faire des choses qui ont la classe jolie et qui sont aussi une balise de paragraphe. 604 00:25:18,300 --> 00:25:19,920 Donc p.pretty. 605 00:25:19,920 --> 00:25:23,585 Imaginons que je avais quelque chose d'assez sur le corps de tag. 606 00:25:23,585 --> 00:25:25,850 D'ACCORD? 607 00:25:25,850 --> 00:25:28,490 Je peux courir et je peut voir que ce est seulement 608 00:25:28,490 --> 00:25:32,720 va se appliquer à des choses qui sont paragraphes avec la classe jolie. 609 00:25:32,720 --> 00:25:35,650 Et vous pouvez combiner ceux-ci, essentiellement, autant que vous le voulez. 610 00:25:35,650 --> 00:25:38,580 Ainsi, vous pouvez simplement les mettre ensemble. 611 00:25:38,580 --> 00:25:39,604 Est-ce logique? 612 00:25:39,604 --> 00:25:41,770 ALLISON BUCHHOLTZ-UA: Donc, ce genre de est plus utile 613 00:25:41,770 --> 00:25:45,490 quand, Tomas a dit plus tôt, peut-être vous avez un site très compliqué, 614 00:25:45,490 --> 00:25:48,050 et vous avez déjà beaucoup de ces règles écrites, 615 00:25:48,050 --> 00:25:51,170 et il vous suffit de combiner deux de devant. 616 00:25:51,170 --> 00:25:55,350 Comme lieu d'écrire ensemble nouveau sélecteur et changer là, 617 00:25:55,350 --> 00:25:58,592 il vous suffit de combiner là où il chevauche. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: Ou vous pourraient trouver out-- parfois 619 00:26:00,670 --> 00:26:04,290 il ya une classe qui rend la couleur de police comme le bleu, 620 00:26:04,290 --> 00:26:06,740 et il ya une autre classe qui rend le bleu de fond. 621 00:26:06,740 --> 00:26:07,840 Et ce ne va pas fonctionner. 622 00:26:07,840 --> 00:26:10,924 Vous écrivez donc un cas particulier, où, like-- mais si elle a à la fois, ce que vous êtes 623 00:26:10,924 --> 00:26:13,548 va faire est que vous allez faire celui-ci cette nuance de bleu 624 00:26:13,548 --> 00:26:15,310 et celui-ci cet autre nuance de bleu. 625 00:26:15,310 --> 00:26:15,580 Droite? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON BUCHHOLTZ-UA: Bon pour ces types d'exceptions. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Donc, pour réfléchir aux problèmes 628 00:26:21,220 --> 00:26:25,000 qui pourraient survenir lorsque vous les combinez. 629 00:26:25,000 --> 00:26:27,020 Cool. 630 00:26:27,020 --> 00:26:29,692 Revenons donc à notre présentation. 631 00:26:29,692 --> 00:26:31,400 ALLISON BUCHHOLTZ-UA: Nous y sommes presque. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: Et il a cessé de liaison. 633 00:26:34,022 --> 00:26:36,494 ALLISON BUCHHOLTZ-UA: Oh, non. 634 00:26:36,494 --> 00:26:39,125 ALLISON BUCHHOLTZ-UA: CS au le bureau, Internet tombe en panne. 635 00:26:39,125 --> 00:26:40,360 Oh, l'ironie. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Donc, heureusement, nous pouvons présenter sans l'Internet, je suppose, 637 00:26:45,620 --> 00:26:47,380 parce que nous avons toutes les diapositives ici. 638 00:26:47,380 --> 00:26:49,304 Donc, nous allons parler de la relation de balises. 639 00:26:49,304 --> 00:26:50,470 ALLISON BUCHHOLTZ-UA: Droit. 640 00:26:50,470 --> 00:26:52,660 Il suffit donc de type de passe hors de ce que dit Tomas, 641 00:26:52,660 --> 00:26:54,180 ce est juste une autre façon de le faire. 642 00:26:54,180 --> 00:26:57,840 Donc, nous avons un certain parent sélecteur avec un sélecteur d'enfant. 643 00:26:57,840 --> 00:27:02,815 Donc, dans cet exemple ici, nous avons une certaine corps avec une barre de navigation de classe, touche de classe. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Oh, désolé. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON BUCHHOLTZ-UA: Et Fondamentalement, ce que cela signifie 647 00:27:06,180 --> 00:27:11,070 est de sélectionner tous les enfants, comme toutes ces sortes de sélecteurs, 648 00:27:11,070 --> 00:27:13,040 dans ce sélecteur de parent. 649 00:27:13,040 --> 00:27:16,004 Et ce sont les seuls il va jamais se appliquer. 650 00:27:16,004 --> 00:27:17,755 Je ne sais pas si vous avoir une meilleure façon de-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Je deviner la façon de penser 652 00:27:19,504 --> 00:27:22,440 à ce sujet est la façon dont rappeler avant nous aimons sorte de les mettre ensemble. 653 00:27:22,440 --> 00:27:26,340 Et alors cela signifie un élément qui correspond à tout cela. 654 00:27:26,340 --> 00:27:29,530 Ce que cela dit, ce est, je vous voulez faire correspondre tout 655 00:27:29,530 --> 00:27:33,220 au sein some-- Je veux vous trouverez un sélecteur. 656 00:27:33,220 --> 00:27:35,670 Et puis dans ce cadre, je veux de faire correspondre de nouvelles choses. 657 00:27:35,670 --> 00:27:36,170 Droite? 658 00:27:36,170 --> 00:27:40,900 Donc, en CSS, il se agit en quelque sorte être en mesure de correspondre à ces éléments. 659 00:27:40,900 --> 00:27:43,050 Et vous pouvez essayer de faire correspondre articles dans d'autres articles. 660 00:27:43,050 --> 00:27:46,510 >> Donc, nous allons effectivement faire un exemple, et nous pensons que vais préciser. 661 00:27:46,510 --> 00:27:53,090 Donc, nous allons prétendre que nous avons spéciale, jolie spéciale, peu importe. 662 00:27:53,090 --> 00:27:55,690 Et puis nous avons un lien, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Donc ne oubliez pas, a est un lien. 665 00:28:02,370 --> 00:28:03,900 Il ne va pas aller ne importe où. 666 00:28:03,900 --> 00:28:11,500 Et nous allons lui donner le lien de classe, je suppose. 667 00:28:11,500 --> 00:28:13,335 Donnons-lui la class-- me donner une idée. 668 00:28:13,335 --> 00:28:14,460 ALLISON BUCHHOLTZ-UA: Cool. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: COO- nous allons aller il la classe jolie. 670 00:28:16,420 --> 00:28:16,930 Pourquoi pas? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON BUCHHOLTZ-UA: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: Donc, en ce moment jolies choses 673 00:28:23,040 --> 00:28:26,000 vont rendre le fond bleu, couleur de fond du saumon. 674 00:28:26,000 --> 00:28:27,969 Ce est logique. 675 00:28:27,969 --> 00:28:28,760 Et si nous faisons this-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON BUCHHOLTZ-UA: Voulez-vous ajouter du texte 677 00:28:29,620 --> 00:28:31,078 de sorte que le lien hypertexte montre effectivement en place? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Ce serait un bon appel. 679 00:28:35,088 --> 00:28:37,921 ALLISON BUCHHOLTZ-UA: «droit Cause maintenant, nous allons tout simplement ne reçoivent rien. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Donc, ce est un lien. 681 00:28:39,690 --> 00:28:42,202 "Ce est un lien." 682 00:28:42,202 --> 00:28:45,820 Oh, et cela va être un autre lien. 683 00:28:45,820 --> 00:28:47,280 Donnons-lui la classe «cool». 684 00:28:47,280 --> 00:28:50,295 Vous avez raison. 685 00:28:50,295 --> 00:28:50,795 Cool. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Donc maintenant nous allons saisir cette. 688 00:28:56,010 --> 00:28:57,269 Nous allons jeter un. 689 00:28:57,269 --> 00:28:59,060 Nous avons une dans le balise spéciale, et nous avons aussi 690 00:28:59,060 --> 00:29:01,150 vont avoir une dans le joli tag. 691 00:29:01,150 --> 00:29:05,449 Et maintenant ce que nous allons faire est que nous allons faire cool-- 692 00:29:05,449 --> 00:29:06,490 ce que nous voulons qu'il fasse? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON BUCHHOLTZ-UA: Pouvons-nous faire plus grand? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Donnons une bordure. 696 00:29:13,800 --> 00:29:14,840 ALLISON BUCHHOLTZ-UA: Nous pourrions frontière. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Ouais. 698 00:29:15,673 --> 00:29:18,560 Donc, nous allons faire quelque chose comme, est-- des frontières et nous sommes 699 00:29:18,560 --> 00:29:20,971 vais vous expliquer tout cela en une seconde. 700 00:29:20,971 --> 00:29:21,470 Pour l'instant-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON BUCHHOLTZ-UA: Pour le modèle de boîte. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Mais pour l'instant, nous sommes aller juste pour lui donner une frontière. 703 00:29:27,300 --> 00:29:29,580 Donc ce que cela signifie est que vous êtes aller voir ces liens. 704 00:29:29,580 --> 00:29:32,788 Et vous allez voir qu'ils ont ces, comme, bordures noires laides, qui 705 00:29:32,788 --> 00:29:33,820 est cool. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON BUCHHOLTZ-UA: Notre site web est si jolie. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Ouais. 708 00:29:35,333 --> 00:29:38,930 Notre site web est génial. 709 00:29:38,930 --> 00:29:41,585 Donc, ces deux sont des liens, et ils apparaissent. 710 00:29:41,585 --> 00:29:44,160 Maintenant, nous allons prétendre que je seulement voulu le faire 711 00:29:44,160 --> 00:29:50,072 si ce ne était pas quelque chose de l'intérieur qui avait un fond de saumon. 712 00:29:50,072 --> 00:29:52,280 Alors rappelez-vous que celui-ci a un fond de saumon, 713 00:29:52,280 --> 00:29:54,000 parce que ce est de la classe jolie. 714 00:29:54,000 --> 00:29:59,777 >> Mais nous voulons dire que ne refroidit qui sont en classe spéciale, pas en classe 715 00:29:59,777 --> 00:30:02,890 jolie, devrait avoir cette frontière. 716 00:30:02,890 --> 00:30:12,549 Eh bien, ce que vous pouvez faire est de vous peut dire, .special, l'espace, .cool. 717 00:30:12,549 --> 00:30:15,590 Et ce qui est à faire, quand vous pensez à ce sujet, est-il est fondamentalement disant, 718 00:30:15,590 --> 00:30:19,530 OK, me trouver tout qui correspond spéciale. 719 00:30:19,530 --> 00:30:24,104 Alors dans ces balises, trouver moi tout ce qui est cool. 720 00:30:24,104 --> 00:30:27,270 ALLISON BUCHHOLTZ-UA: Donc, une autre façon cela pourrait être bon de penser à ce sujet, 721 00:30:27,270 --> 00:30:29,810 le ramener à C, est tout comme l'idée de la portée. 722 00:30:29,810 --> 00:30:34,020 Alors, quand vous avez un peu sélecteur, comme ceux 723 00:30:34,020 --> 00:30:38,460 que nous travaillons depuis avant cela, votre page Web entière, la totalité de votre HTML 724 00:30:38,460 --> 00:30:40,180 est à votre portée, non? 725 00:30:40,180 --> 00:30:43,090 Mais quand nous avons ces relations parent-enfant, 726 00:30:43,090 --> 00:30:47,130 ce est comme si vous rétrécissant vers le bas où vous cherchez à un lieu spécifique, 727 00:30:47,130 --> 00:30:50,540 comme si, comme, nous sommes à la recherche au sein de une fonction spécifique à la place 728 00:30:50,540 --> 00:30:52,007 de l'ensemble de notre dossier. 729 00:30:52,007 --> 00:30:55,090 AUDIENCE: Donc, avec cela à l'esprit, ne est- il avoir compté si nous avions changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON BUCHHOLTZ-UA: L'ordre? 731 00:30:56,423 --> 00:30:59,320 AUDIENCE: --la classe en CSS à .cool, l'espace, .special? 732 00:30:59,320 --> 00:31:01,153 ALLISON BUCHHOLTZ-UA: Oui, car alors que 733 00:31:01,153 --> 00:31:04,420 dirait, portée à tout ce qui a cool, 734 00:31:04,420 --> 00:31:07,235 puis regarder ce has-- Je veux dire, comme, dans ce cas, 735 00:31:07,235 --> 00:31:08,860 Je ne pense pas que cela aurait changé. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Si nous avait dit quoi? 737 00:31:10,318 --> 00:31:10,906 Désolé. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON BUCHHOLTZ-UA: Si nous portée refroidir puis 739 00:31:12,660 --> 00:31:14,550 chercher des choses sur spécial, il en serait de même, en fait. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Donc, il ne serait pas. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON BUCHHOLTZ-UA: Il ne serait pas? 742 00:31:16,590 --> 00:31:17,590 Oh, oh bien. 743 00:31:17,590 --> 00:31:18,090 Je me trompe. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Donc, la raison ce est different-- mistake-- commune 745 00:31:21,480 --> 00:31:27,140 ce droit est maintenant seulement le lien a cool, non? 746 00:31:27,140 --> 00:31:32,176 Je suppose que ma question est à vous les gars, ce sur cette page est compensée par .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Il ya deux balises ici, non? 749 00:31:38,340 --> 00:31:39,770 Ce est celui-ci et celui-ci. 750 00:31:39,770 --> 00:31:40,590 Les deux correspondent cool. 751 00:31:40,590 --> 00:31:42,200 Rien d'autre ne le fait. 752 00:31:42,200 --> 00:31:46,460 Donc, si vous l'avez dit, .cool, l'espace, .special, ce que vous allez dire, ce est, 753 00:31:46,460 --> 00:31:48,824 au sein de ces balises, ce qui est spécial? 754 00:31:48,824 --> 00:31:49,865 ALLISON BUCHHOLTZ-UA: Hm. 755 00:31:49,865 --> 00:31:51,800 Ce est ce que it-- droite. 756 00:31:51,800 --> 00:31:52,310 Parce que ce est comme quelque chose ici. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: Donc, il sélectionne rien. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON BUCHHOLTZ-UA: considérant que, spéciale, nous sommes au sein de ces tags here. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: celles et ceux. 760 00:31:57,971 --> 00:31:58,512 AUDIENCE: OK. 761 00:31:58,512 --> 00:31:58,920 Donc ces balises de la barre oblique? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Oui. 763 00:31:59,740 --> 00:32:01,150 Est-ce logique? 764 00:32:01,150 --> 00:32:03,685 Comment ce est essentiellement essayer de réduire la portée. 765 00:32:03,685 --> 00:32:04,810 ALLISON BUCHHOLTZ-UA: Ouais. 766 00:32:04,810 --> 00:32:06,870 Je pense que ce est probablement la meilleure façon de penser. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: Donc nous avons trouvé cela, et nous avons trouvé cette fois assorti spéciale. 768 00:32:09,270 --> 00:32:11,400 Et puis nous demandons, dans ces gars-là, ce qui est cool? 769 00:32:11,400 --> 00:32:12,941 Et au sein de celle-ci, la fraîcheur de celui-ci. 770 00:32:12,941 --> 00:32:14,500 Dans celui-ci, rien ne est cool. 771 00:32:14,500 --> 00:32:16,250 Donc, ce est le seul point qui reste. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON BUCHHOLTZ-UA: considérant que fraîche est seulement dans ces balises un là-bas. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Exactement. 774 00:32:21,070 --> 00:32:22,403 Et ce qui est spécial au sein de ceux-là? 775 00:32:22,403 --> 00:32:22,930 Rien. 776 00:32:22,930 --> 00:32:25,270 Maintenant, ce que je vais dire, ce est se il n'y a pas d'espace, 777 00:32:25,270 --> 00:32:29,880 vous demandez ce qui est cool et special-- ou ce qui est jolie et spéciale, non? 778 00:32:29,880 --> 00:32:35,370 Si vous dites .special.pretty, ce est le même que .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Parce que ce est supprimer l'espace demandons, ce est, quand vous dites .special, 780 00:32:39,220 --> 00:32:40,970 vous demandez, OK, ceux qui sont spéciaux? 781 00:32:40,970 --> 00:32:43,780 Et puis de ceux qui ceux sont également assez, 782 00:32:43,780 --> 00:32:47,010 qui est la même, grammaticalement, comme demandé, ce est assez, 783 00:32:47,010 --> 00:32:49,500 puis de ceux, ce est aussi spéciale? 784 00:32:49,500 --> 00:32:50,000 Droite? 785 00:32:50,000 --> 00:32:53,099 Ce est la différence de ce est au sein de ce qui est. 786 00:32:53,099 --> 00:32:53,640 AUDIENCE: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Ouais. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Impressionnant. 790 00:32:58,030 --> 00:33:00,426 Donc, avec cela à l'esprit alors-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON BUCHHOLTZ-AU: Je pense que notre dernière chose est (dans Fantaisie COLOMBIE ACCENT) 792 00:33:01,800 --> 00:33:02,510 le modèle de boîte. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: Le box-- [RIRES] Je aime la façon Allison dit que. 794 00:33:05,992 --> 00:33:06,950 Donc, la chose modèle de boîte. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON BUCHHOLTZ-UA: Suffit une boîte, je serai votre modèle de boîte. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Donc, nous allons parler de cela. 797 00:33:11,310 --> 00:33:14,070 Donc maintenant nous avons passé beaucoup de temps à parler sélecteurs. 798 00:33:14,070 --> 00:33:16,944 A présent, vous les gars sont probablement, comme, maîtres de selectors-- vous le savez, 799 00:33:16,944 --> 00:33:21,510 comment sélectionner exactement le contenu vous voulez manipuler sur votre écran. 800 00:33:21,510 --> 00:33:24,740 >> Alors maintenant, la question est, comment exactement pouvez-vous manipuler? 801 00:33:24,740 --> 00:33:27,010 Donc je suppose que le plus fondamental façon de penser à ce sujet 802 00:33:27,010 --> 00:33:30,294 est, ainsi, qu'est-ce est un élément en CSS? 803 00:33:30,294 --> 00:33:32,585 Nous avons passé beaucoup de temps parler, ce est une étiquette, 804 00:33:32,585 --> 00:33:36,140 ou ce qui est le plus fondamental représentation d'un tag? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Une bonne façon de penser ce est, ce est la forme du saumon? 807 00:33:45,170 --> 00:33:47,295 Quelle est la forme, comme, le couleur saumon fond? 808 00:33:47,295 --> 00:33:47,880 >> PUBLIC: Ce est un rectangle. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: Ce est un rectangle, non? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON BUCHHOLTZ-UA: Ne était pas une question piège. 811 00:33:50,956 --> 00:33:51,870 [Rires] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Ne pas essayer de vous tromper gars cette fin. 813 00:33:54,670 --> 00:33:57,510 Nous avons donc ce rectangle. 814 00:33:57,510 --> 00:33:59,140 Et l'étiquette est une p, non? 815 00:33:59,140 --> 00:34:02,280 Alors que nous donne bonne la croyance que le paragraphe 816 00:34:02,280 --> 00:34:07,440 est représenté par un rectangle, à moins dans l'esprit du navigateur, qui 817 00:34:07,440 --> 00:34:08,715 il est. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON BUCHHOLTZ-AU: Je veux dire, navigateurs sont typiquement rectangulaire, 819 00:34:11,423 --> 00:34:13,440 il est donc logique. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: L'idée ici est que toutes les balises à l'intérieur CSS 821 00:34:18,750 --> 00:34:21,790 sont représentées par un rectangle. 822 00:34:21,790 --> 00:34:25,699 Et chaque rectangle a quatre pièces selon CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Vous avez le contenu réel. 824 00:34:27,830 --> 00:34:29,644 Ce est là que le texte se trouve. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON BUCHHOLTZ-UA: Peut-être votre photo. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Ouais. 827 00:34:31,303 --> 00:34:33,860 Vous avez rembourrage, qui est juste une sorte d'espace blanc. 828 00:34:33,860 --> 00:34:35,085 Ensuite, vous avez une frontière. 829 00:34:35,085 --> 00:34:37,710 Et puis vous avez marge, ce qui est un espace blanc en dehors de cela. 830 00:34:37,710 --> 00:34:39,460 Donc, cela n'a aucun sens à quiconque, donc nous sommes 831 00:34:39,460 --> 00:34:42,500 va en parler pendant une seconde. 832 00:34:42,500 --> 00:34:47,570 Donc, ici, ce que nous allons faire ce est que nous allons créer quelques divs, OK? 833 00:34:47,570 --> 00:34:48,420 Excusez-moi tout I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON BUCHHOLTZ-AU: Je me sens comme nous devrions mettre une photo mignonne dans. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: Nous avons certainement le devrait. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON BUCHHOLTZ-UA: Je me sens comme tout le monde 837 00:34:53,389 --> 00:34:54,870 pourrait bénéficier d'une image mignonne, ce est tout. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: Pouvons-nous tous bénéficier de a-- 839 00:34:56,774 --> 00:34:57,648 >> AUDIENCE: Oui, bien sûr. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, cool. 841 00:34:58,790 --> 00:35:02,254 Donc, nous devrions mettre un mignon image dans quelque part. 842 00:35:02,254 --> 00:35:05,295 ALLISON BUCHHOLTZ-AU: Je me sens comme un lapin mignon pourrait être utile en ce moment. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Bien sûr. 844 00:35:06,190 --> 00:35:06,950 ALLISON BUCHHOLTZ-UA: Fin de la semaine. 845 00:35:06,950 --> 00:35:07,390 Avoir quelque chose adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: Comment accès un chaton? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON BUCHHOLTZ-UA: Un chaton fonctionne aussi. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, parce il ya un site pour cela. 849 00:35:11,300 --> 00:35:12,300 Il a appelé PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON BUCHHOLTZ-UA: Ce est génial. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Oui. 852 00:35:15,510 --> 00:35:18,040 ALLISON BUCHHOLTZ-UA: Juste pour, comme, images d'espace réservé dans votre site web. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 Il ya aussi PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 Et il ya PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON BUCHHOLTZ-UA: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Vraiment? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, nous ne faisons pas avoir accès à Internet ici. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON BUCHHOLTZ-UA: [gémissements] 860 00:35:29,875 --> 00:35:30,375 Tragique. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: Sinon, Je voudrais vous montrer les gars 862 00:35:32,333 --> 00:35:33,870 comment mettre des images dans votre site web. 863 00:35:33,870 --> 00:35:36,370 Nous allons essayer d'obtenir cette travailler avant nous devons aller. 864 00:35:36,370 --> 00:35:38,660 Mais pour l'instant, nous sommes juste va parler dans des couleurs alors. 865 00:35:38,660 --> 00:35:39,820 Nous voulons mettre des photos de kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON BUCHHOLTZ-UA: Nous l'avons fait. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: de --la internet bas pour le moment être. 868 00:35:43,110 --> 00:35:47,820 Nous avons donc deux divs, et nous sommes allons leur donner deux identifiants. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Nous allons appeler «Premier» et «deuxième». 871 00:35:56,760 --> 00:36:01,184 Donc id = «premier». 872 00:36:01,184 --> 00:36:02,850 Et nous allons leur donner deux couleurs. 873 00:36:02,850 --> 00:36:08,424 Alors, comment pouvons-nous choisir quelque chose avec un id de «première»? 874 00:36:08,424 --> 00:36:09,840 ALLISON BUCHHOLTZ-UA: Dot ou hachage? 875 00:36:09,840 --> 00:36:10,730 AUDIENCE: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, parfait. 877 00:36:12,940 --> 00:36:14,950 Sharp, hachage, quelle que soit nous-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON BUCHHOLTZ-UA: Beaucoup de choses à l'appellent. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Nous allons régler le hashtag, et ce est ce que nous allons aller avec. 881 00:36:19,800 --> 00:36:20,300 D'ACCORD? 882 00:36:20,300 --> 00:36:20,735 >> ALLISON BUCHHOLTZ-UA: hashtag. 883 00:36:20,735 --> 00:36:22,340 >> TOMAS REIMERS: Donc hashtag de première. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON BUCHHOLTZ-UA: Donc, vous pouvez Tweet Les seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag cool. 886 00:36:27,582 --> 00:36:29,040 TOMAS REIMERS: hashtag Awesomeness. 887 00:36:29,040 --> 00:36:30,730 ALLISON BUCHHOLTZ-UA: Hashtag Awesomeness, oui. 888 00:36:30,730 --> 00:36:31,480 TOMAS REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 Nous avons donc «premier» et «deuxième». 890 00:36:33,660 --> 00:36:37,697 Alors d'abord, nous allons avoir une couleur de fond de rouge. 891 00:36:37,697 --> 00:36:39,030 ALLISON BUCHHOLTZ-UA: Euh, du côlon. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON BUCHHOLTZ-UA: Je serai votre spot-checker. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison m'a. 895 00:36:43,960 --> 00:36:45,830 Background-color de blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Violet! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Violet. 898 00:36:47,726 --> 00:36:48,830 ALLISON BUCHHOLTZ-UA: Oui. 899 00:36:48,830 --> 00:36:50,630 Ma couleur préférée de Violet, et nous ne avons pas encore utilisé. 900 00:36:50,630 --> 00:36:51,546 >> TOMAS REIMERS: Violet. 901 00:36:51,546 --> 00:36:53,361 ALLISON BUCHHOLTZ-UA: Violet. 902 00:36:53,361 --> 00:36:53,860 Cela fonctionne. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: Donc, nous sommes allez avoir deux divs. 905 00:36:59,880 --> 00:37:01,654 Ils vont être totalement vide. 906 00:37:01,654 --> 00:37:03,070 Nous devrions probablement avoir un peu de texte. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Donc, "premier" va être "BONJOUR". 909 00:37:09,815 --> 00:37:10,940 Et la «seconde» sera say-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON BUCHHOLTZ-UA: Au revoir. 911 00:37:11,110 --> 00:37:12,514 >> PUBLIC: - «monde». 912 00:37:12,514 --> 00:37:14,122 Bonjour, au revoir. 913 00:37:14,122 --> 00:37:16,580 ALLISON BUCHHOLTZ-AU: Je ai vu les en concert l'autre semaine. 914 00:37:16,580 --> 00:37:17,705 TOMAS REIMERS: Les Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON BUCHHOLTZ-UA: Pour reals. 916 00:37:20,242 --> 00:37:21,200 Ils ne sont pas si grande. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Je ne l'aime pas. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Nous avons "BONJOUR" et "au revoir." 920 00:37:26,060 --> 00:37:29,102 Et encore, CSS est tout simplement génial, parce qu'il reconnaît nos couleurs. 921 00:37:29,102 --> 00:37:30,810 Ne pas besoin de même inquiètent du fait qu'ils existent. 922 00:37:30,810 --> 00:37:33,194 Ils le font. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON BUCHHOLTZ-UA: Ils existent. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Donc je pense CSS a 255 mots pour parler de la couleur. 925 00:37:39,560 --> 00:37:42,986 Si vous pouvez penser à une couleur en dehors 255 personnes, comme, je serai impressionné. 926 00:37:42,986 --> 00:37:44,110 ALLISON BUCHHOLTZ-UA: Ouais. 927 00:37:44,110 --> 00:37:45,560 Je pense que vous les gars peuvent avoir juste d'arriver juste après. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: Donc ici, vous verrez que nous avons deux boîtes 929 00:37:47,727 --> 00:37:49,143 juste au-dessus de l'autre, non? 930 00:37:49,143 --> 00:37:50,200 BONJOUR et au revoir. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON BUCHHOLTZ-UA: Il n'y a pas d'espace entre les deux. 932 00:37:51,460 --> 00:37:53,390 Ils sont juste smooshed juste au-dessus de l'autre. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Donc la première chose Je suppose que nous devrions parler 934 00:37:55,973 --> 00:38:02,960 ce est qu'il faut say-- également oui. 935 00:38:02,960 --> 00:38:08,020 Donc CSS les représente comme une sorte de boîtes. 936 00:38:08,020 --> 00:38:10,100 Et comme les boîtes, ils ont contenu. 937 00:38:10,100 --> 00:38:14,540 Et le contenu est en ce moment sorte de l'BONJOUR ou de la revoir et ce est tout. 938 00:38:14,540 --> 00:38:15,040 D'ACCORD? 939 00:38:15,040 --> 00:38:19,790 >> Donc l'une des premières choses que vous peut faire est que vous pouvez ajouter le remplissage. 940 00:38:19,790 --> 00:38:25,610 Rembourrage dit combien d'espace il devrait laisser de chaque côté. 941 00:38:25,610 --> 00:38:29,200 Alors disons que je veux dire 10 pixels de chaque côté. 942 00:38:29,200 --> 00:38:31,234 Et je vais décortiquer que, dans une seconde. 943 00:38:31,234 --> 00:38:33,150 ALLISON BUCHHOLTZ-UA: Toutes ces choses ici 944 00:38:33,150 --> 00:38:36,980 vont être la plupart du temps en pixels pour le reste du séminaire. 945 00:38:36,980 --> 00:38:40,980 Vous allez voir qu'il a un peu d'espace autour d'elle, non? 946 00:38:40,980 --> 00:38:46,360 Donc, ce que vous ne voyez pas ici ce est qu'il ya ce genre invisible de rembourrage 947 00:38:46,360 --> 00:38:49,600 de chaque côté, qui dit, comme, OK, vous avez votre boîte de content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON BUCHHOLTZ-UA: Voulez-vous juste tirer vers le haut l'élément inspecter? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Ouais, ce est une bonne idée. 950 00:38:53,659 --> 00:38:56,700 ALLISON BUCHHOLTZ-UA: Aussi, je trouve que l'élément inspecter est une bonne façon 951 00:38:56,700 --> 00:39:01,280 de comprendre si quelque chose se passe mal, quelque chose d'inattendu se produit, 952 00:39:01,280 --> 00:39:04,570 inspecter les balises et de voir ce ce est comme écrasé est utile. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Je ne suis pas sûr si vous les gars pouvez voir cette couleur. 954 00:39:05,940 --> 00:39:06,470 Pouvez-vous? 955 00:39:06,470 --> 00:39:10,120 Vous verrez cette rembourrage sur le type de bord. 956 00:39:10,120 --> 00:39:13,410 Et puis vous voyez le réel contenu en bleu, à droite? 957 00:39:13,410 --> 00:39:16,820 Donc, ce est très bases du modèle de boîte. 958 00:39:16,820 --> 00:39:17,674 Vous avez du contenu. 959 00:39:17,674 --> 00:39:18,590 Ensuite, vous avez rembourrage. 960 00:39:18,590 --> 00:39:20,440 >> AUDIENCE: Pourquoi ne pas vous venez utiliser la boîte à l'intérieur the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON BUCHHOLTZ-UA: Droit. 962 00:39:21,606 --> 00:39:24,745 Parce que ce est juste la sélection l'élément en ce moment. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 D'autres choses. 965 00:39:27,060 --> 00:39:29,780 Donc, nous allons parler de ce que commande de rembourrage pour une seconde. 966 00:39:29,780 --> 00:39:36,380 Donc, en CSS, des mesures besoin d'avoir une unité. 967 00:39:36,380 --> 00:39:39,740 Donc, vous devez d'abord le montant. 968 00:39:39,740 --> 00:39:41,460 Donc dans ce cas, nous l'avons dit 10. 969 00:39:41,460 --> 00:39:44,780 Et puis la suivante Nous avons dit pixels, px. 970 00:39:44,780 --> 00:39:49,160 Autres ceux que vous pourriez avoir sont des choses comme centimètres, pouces. 971 00:39:49,160 --> 00:39:51,367 Vous pouvez faire des choses comme, ce qui est 10 pouces? 972 00:39:51,367 --> 00:39:52,700 Et ça va être ridicule. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON BUCHHOLTZ-UA: Oh, mon garçon. 974 00:39:52,990 --> 00:39:53,460 >> AUDIENCE: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> Tomas et ALLISON: Ouais. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Ce est donc tout le rembourrage. 977 00:39:57,840 --> 00:39:59,255 Je vais revenir à pixels. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON BUCHHOLTZ-UA: Pixels ont tendance à être, comme, la norme. 979 00:40:01,754 --> 00:40:04,589 Quand vous regardez beaucoup de sites Web, ils travaillent surtout en pixels. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Donc, vous allez voir soit pixels-- les autres ceux que vous voyez 981 00:40:07,755 --> 00:40:13,952 est em, qui est l'un em est égale à la hauteur de la police 982 00:40:13,952 --> 00:40:15,160 qui vous utilisez actuellement. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON BUCHHOLTZ-UA: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 TOMAS REIMERS: Ce est une bonne façon de le dire, comme, je veux autant d'espace que ma police 986 00:40:20,740 --> 00:40:21,514 est prenant. 987 00:40:21,514 --> 00:40:23,180 ALLISON BUCHHOLTZ-AU: Je ne savais pas que. 988 00:40:23,180 --> 00:40:25,747 Vous apprenez quelque chose de nouveau chaque jour. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Il ya un beaucoup de mesures dans CS. 990 00:40:27,955 --> 00:40:29,260 Je vous suggère de regarder vers le haut. 991 00:40:29,260 --> 00:40:32,122 Pour tous vos cas, je pense pixels devraient être suffisantes. 992 00:40:32,122 --> 00:40:33,830 Et ils sont aussi ce que vous allez voir 993 00:40:33,830 --> 00:40:36,520 dans la majorité des exemples effectuée en ligne. 994 00:40:36,520 --> 00:40:38,320 Donc, nous allons en rester pixels. 995 00:40:38,320 --> 00:40:42,420 >> Vous pouvez aussi, je say-- devriez donc rembourrage ensembles tous les rembourrages. 996 00:40:42,420 --> 00:40:49,789 Vous pouvez aussi faire quelque chose comme "Padding-top" juste set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON BUCHHOLTZ-UA: Peut-être nous aurons notre "BONJOUR" dos. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to vient de mettre la rembourrage sur le dessus et rien d'autre. 999 00:40:55,480 --> 00:40:59,560 Ainsi, les quatre commandes sont padding-top, padding-bottom, padding-left, 1000 00:40:59,560 --> 00:41:00,310 et padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON BUCHHOLTZ-UA: Tout comme vous pouvez vous attendre pour une boîte. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Ouais. 1003 00:41:03,530 --> 00:41:05,240 Rien trop fou là-bas. 1004 00:41:05,240 --> 00:41:08,230 Est-ce logique? 1005 00:41:08,230 --> 00:41:11,990 Ce est donc un rembourrage. 1006 00:41:11,990 --> 00:41:14,110 Je vais mettre tout les rembourrages dos à 10. 1007 00:41:14,110 --> 00:41:17,010 Et puis je vais passer à la frontière. 1008 00:41:17,010 --> 00:41:21,130 >> Donc, ce est la frontière est la frontière est une commande bizarre. 1009 00:41:21,130 --> 00:41:24,450 Il faut en quelque sorte trois choses à la fois. 1010 00:41:24,450 --> 00:41:28,930 Donc, la première est la taille que vous veux que ce soit en tant que mesure. 1011 00:41:28,930 --> 00:41:30,662 Encore une fois, je suis seulement en utilisant pixels. 1012 00:41:30,662 --> 00:41:32,620 Et la dernière chose que je devrait ajouter à des mesures 1013 00:41:32,620 --> 00:41:35,270 est la seule chose qui n'a pas besoin d'une unité est 0. 1014 00:41:35,270 --> 00:41:37,390 Ce est en fait incorrecte de donner une unité 0, 1015 00:41:37,390 --> 00:41:41,940 car 0 est 0 travers pouces, pixels, centimètres, peu importe. 1016 00:41:41,940 --> 00:41:43,960 Tout signifie simplement 0, non? 1017 00:41:43,960 --> 00:41:46,710 Alors d'abord vous lui donnez la mesure. 1018 00:41:46,710 --> 00:41:48,650 >> Ensuite, vous lui donnez le style. 1019 00:41:48,650 --> 00:41:49,869 Donc, je vais dire "solide." 1020 00:41:49,869 --> 00:41:51,410 Et nous allons parler de ce que cela signifie. 1021 00:41:51,410 --> 00:41:54,290 Et puis enfin, vous lui donnez une couleur. 1022 00:41:54,290 --> 00:41:56,850 Donc, je vais dire «noir». 1023 00:41:56,850 --> 00:41:59,637 Et ce sont toutes les choses que nous avons maintenant vu avant, sauf pour le style, 1024 00:41:59,637 --> 00:42:00,720 mais nous en reparlerons. 1025 00:42:00,720 --> 00:42:04,120 Donc, vous avez vu les gars mesures, et vous avez vu couleurs. 1026 00:42:04,120 --> 00:42:10,410 Et ce qui se passe est que nous obtenons ce belle bordure noire autour de lui, non? 1027 00:42:10,410 --> 00:42:11,620 Les gars, vous voyez la façon dont nous l'avons fait? 1028 00:42:11,620 --> 00:42:12,760 >> AUDIENCE: Ouais. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Alors ce est quoi? 1031 00:42:17,370 --> 00:42:19,160 Alors tout d'abord, ce est un pixel. 1032 00:42:19,160 --> 00:42:20,880 Ce est assez évident, non? 1033 00:42:20,880 --> 00:42:23,254 Comme, ce est un pixel d'épaisseur. 1034 00:42:23,254 --> 00:42:26,170 Ou ce serait un pixel, mais je suis zoom avant, il est donc un peu plus 1035 00:42:26,170 --> 00:42:26,490 que cela. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON BUCHHOLTZ-UA: Et nous avons cette résolution TV ridicule. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Ouais. 1038 00:42:29,460 --> 00:42:33,640 Vous pouvez le rendre plus grand, petit, peu importe. 1039 00:42:33,640 --> 00:42:35,630 Alors, voici une frontière de deux pixels. 1040 00:42:35,630 --> 00:42:38,810 Vous verrez que ce est deux fois plus épaisse. 1041 00:42:38,810 --> 00:42:40,172 La prochaine chose que vous avez est la couleur. 1042 00:42:40,172 --> 00:42:41,130 Ce ne est pas intéressant. 1043 00:42:41,130 --> 00:42:42,710 Je ne vais pas parler à ce sujet, vraiment. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON BUCHHOLTZ-UA: Mais le style peut-être juste un peu intéressant. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Ouais. 1046 00:42:45,980 --> 00:42:48,560 Donc style, il ya quelques uns que je vois couramment utilisé. 1047 00:42:48,560 --> 00:42:55,690 Solides, ses prochaines de première en pointillés, et le pointillé de la dernière. 1048 00:42:55,690 --> 00:42:59,290 Et ici est parsemée. 1049 00:42:59,290 --> 00:43:02,980 Vous verrez qu'ils sont un tas de points, non? 1050 00:43:02,980 --> 00:43:09,030 Une bonne façon de sorte d'obtenir une frontière belle aller, des tirets sont également assez populaire. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON BUCHHOLTZ-UA: Et puis bien sûr, je suis 1053 00:43:13,600 --> 00:43:16,660 sûr qu'il ya beaucoup d'autres styles que vous pouvez obtenir. 1054 00:43:16,660 --> 00:43:20,000 Et nous avons un grand ensemble de liens à la fin pour vous les gars 1055 00:43:20,000 --> 00:43:23,470 au type de parcourir et regarder plus frais CSS. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: Et puis la dernière chose, nous sommes 1057 00:43:25,954 --> 00:43:27,870 aller à parler de la modèles de boîtes réel rapide. 1058 00:43:27,870 --> 00:43:30,070 Oh, et puis la frontière, exactement comme rembourrage, 1059 00:43:30,070 --> 00:43:33,270 vous avez aussi des choses comme border-left, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, qui vous permettra pour obtenir à la frontière spécifique. 1061 00:43:37,590 --> 00:43:40,650 Alors, voici juste la frontière gauche-défini. 1062 00:43:40,650 --> 00:43:43,060 Est-ce que cela a du sens? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON BUCHHOLTZ-UA: Ce est un endroit frais façon de mettre l'accent sur les choses ou ajouter 1064 00:43:46,170 --> 00:43:47,545 lignes entre les différents éléments. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Absolument. 1066 00:43:48,670 --> 00:43:50,940 Donc, ce est notre frontière. 1067 00:43:50,940 --> 00:43:52,790 Et la marge de la dernière. 1068 00:43:52,790 --> 00:43:55,892 Padding comme de marge sauf qu'il ne est pas within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON BUCHHOLTZ-UA: Ce est pas autour de votre élément 1070 00:43:57,975 --> 00:44:00,840 mais en fait autour de la totalité boîte que nous avons été voir. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Ouais. 1072 00:44:02,770 --> 00:44:04,090 Allison dit parfaitement. 1073 00:44:04,090 --> 00:44:07,550 Ce ne est pas, comme, à l'intérieur de votre élément, ce est autour de la boîte entière. 1074 00:44:07,550 --> 00:44:10,900 Cela signifie des choses comme fond ne se appliquent pas à elle. 1075 00:44:10,900 --> 00:44:13,550 Et il dit en substance, comme, je ne veux rien 1076 00:44:13,550 --> 00:44:15,230 dans cet espace pour moi. 1077 00:44:15,230 --> 00:44:17,470 Donc, comme nous avons ici une marge de 10 pixels. 1078 00:44:17,470 --> 00:44:23,100 Donc, rien dans les 10 pixels devrait être à côté de moi. 1079 00:44:23,100 --> 00:44:26,210 Ce est le genre de son l'espace, mais une sorte de pas. 1080 00:44:26,210 --> 00:44:29,215 Donc, ce est très bases du modèle de boîte. 1081 00:44:29,215 --> 00:44:30,090 Est-ce logique? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Cool, cool. 1084 00:44:34,550 --> 00:44:35,800 ALLISON BUCHHOLTZ-UA: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Alors maintenant, je pense que nous avons juste avoir nos ressources fraîches 1086 00:44:37,890 --> 00:44:41,220 que nous vous emmènerons gars travers très rapidement. 1087 00:44:41,220 --> 00:44:44,815 Et nous allons bien actually--, avons-nous encore Internet? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS Reimers: LET'S voir si je peux ouvrir up-- 1089 00:44:47,860 --> 00:44:50,040 permettez-moi de voir si je Internet peut obtenir rapidement 1090 00:44:50,040 --> 00:44:53,317 tandis Allison parle de quoi que ce soit Allison veut parler. 1091 00:44:53,317 --> 00:44:55,150 ALLISON BUCHHOLTZ-UA: Donc je ne ai pas basically-- 1092 00:44:55,150 --> 00:44:57,930 sais ce que je peux dire à ce stade. 1093 00:44:57,930 --> 00:45:01,340 Mais ce sont certains vraiment de bonnes ressources. 1094 00:45:01,340 --> 00:45:04,629 Ce sont celles qui Tomas et je ai utilisé 1095 00:45:04,629 --> 00:45:06,420 et que nous avons effectivement utilisé en préparation pour cela. 1096 00:45:06,420 --> 00:45:09,940 W3Schools est celui que vous gars auraient vu avant. 1097 00:45:09,940 --> 00:45:12,440 Nous le recommandons pour un beaucoup de choses avec CSS. 1098 00:45:12,440 --> 00:45:15,060 Je sais que je le recommande à ma section tout le temps. 1099 00:45:15,060 --> 00:45:21,050 >> Une des grandes choses, ce est qu'il vous permet de genre de gâchis avec CSS 1100 00:45:21,050 --> 00:45:23,830 et voir les changements instantanément dans ce domaine, 1101 00:45:23,830 --> 00:45:25,920 comme, double-fenêtre voir qu'elle a. 1102 00:45:25,920 --> 00:45:29,980 Donc, vous ne avez pas à vous soucier de création de votre propre page Web, 1103 00:45:29,980 --> 00:45:33,090 ou la mise en place dans votre vhost appareil local et hôte local, 1104 00:45:33,090 --> 00:45:34,980 et d'obtenir tous ces trucs travail. 1105 00:45:34,980 --> 00:45:36,830 Il est intégré à droite dans la page. 1106 00:45:36,830 --> 00:45:39,042 >> Et il a ces petits leçons que vous pouvez 1107 00:45:39,042 --> 00:45:40,750 passer à apprendre plus sur sélecteurs, 1108 00:45:40,750 --> 00:45:44,610 ou en apprendre davantage sur la manipulation de votre police, ou d'un arrière-plan ou une image. 1109 00:45:44,610 --> 00:45:46,990 Et vous avez ces résultats instantanés que vous 1110 00:45:46,990 --> 00:45:49,310 ne ont pas à faire ne importe quel d'autres travaux de préparation pour. 1111 00:45:49,310 --> 00:45:51,060 Donc je aime W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Ce est fabuleux. 1113 00:45:51,960 --> 00:45:52,670 Est-il travailler? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Ouais. 1115 00:45:52,950 --> 00:45:53,720 Non, ce ne est pas. 1116 00:45:53,720 --> 00:45:55,636 Voulez-vous que je essaie et redémarrer mon ordinateur? 1117 00:45:55,636 --> 00:45:56,410 Ou voulons-nous to-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON BUCHHOLTZ-AU: Je veux dire, ainsi, ce sera aussi en ligne. 1119 00:46:01,490 --> 00:46:02,740 Tous les diapositives seront en ligne. 1120 00:46:02,740 --> 00:46:05,470 Donc, je viens de faire ces recommande fortement. 1121 00:46:05,470 --> 00:46:07,880 >> Ce est très bien comme juste comme une feuille de triche. 1122 00:46:07,880 --> 00:46:10,690 Ce est juste tout le base commandes que vous avez. 1123 00:46:10,690 --> 00:46:13,070 Ce est formidable quand vous êtes le premier à partir de votre site web. 1124 00:46:13,070 --> 00:46:15,080 Parce que peut-être vous ne avez pas voulez entrer dans tous les 1125 00:46:15,080 --> 00:46:17,355 la vraie Nitty Gritty conception lourde choses. 1126 00:46:17,355 --> 00:46:20,230 Vous avez juste besoin de le formater de manière ce genre de logique et de la volonté 1127 00:46:20,230 --> 00:46:21,490 faire pour le moment. 1128 00:46:21,490 --> 00:46:23,580 Et si vous voulez vraiment y entrer, je sais 1129 00:46:23,580 --> 00:46:27,240 ce est, comme, l'un des Références préférés de Tomas. 1130 00:46:27,240 --> 00:46:30,130 Nous utilisions à préparation, et ce est fabuleux. 1131 00:46:30,130 --> 00:46:33,030 Ce est le développeur de Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: Donc Mozilla sont les gens qui font de Firefox. 1133 00:46:36,490 --> 00:46:40,290 Et ce est juste leur propre développeur référence, ce qui je pense est génial. 1134 00:46:40,290 --> 00:46:44,870 Et il a un merveilleux liste de ressources. 1135 00:46:44,870 --> 00:46:45,530 Donc, nous have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON BUCHHOLTZ-UA: Et puis dernière note est 1137 00:46:48,060 --> 00:46:50,120 lorsque vous essayez de concevoir votre site Web, 1138 00:46:50,120 --> 00:46:53,550 se inspirer des choses que vous pensez que sont jolies. 1139 00:46:53,550 --> 00:46:56,340 Inspection de l'élément, inspecter le code source 1140 00:46:56,340 --> 00:46:59,370 peut être super utile pour essayer de comprendre 1141 00:46:59,370 --> 00:47:02,080 comment le style de votre propre site web. 1142 00:47:02,080 --> 00:47:04,540 >> Souvent, je me sens comme le meilleur Ainsi, en plus de l'expérimentation, 1143 00:47:04,540 --> 00:47:06,290 est juste à regarder choses qui sont assez. 1144 00:47:06,290 --> 00:47:09,810 Je trouve que ce est vraiment difficile de tout sorte de concevoir les choses sur votre propre, 1145 00:47:09,810 --> 00:47:11,090 surtout au début. 1146 00:47:11,090 --> 00:47:14,740 Alors se il vous plaît consulter les sites Web que vous aimez regarder. 1147 00:47:14,740 --> 00:47:16,880 Comprendre ce qui rend leur appel à vous. 1148 00:47:16,880 --> 00:47:19,170 Et puis ne hésitez pas à essayer de reproduire ce. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Droit. 1150 00:47:20,410 --> 00:47:23,120 Même comme des sites Web comme ça, vous pouvez voir 1151 00:47:23,120 --> 00:47:25,460 il ya certainement un div au sommet. 1152 00:47:25,460 --> 00:47:29,920 Et puis vous avez un autre div sein ici, ce qui est Awesomeness CSS. 1153 00:47:29,920 --> 00:47:32,480 Et puis vous avez un tas de liens ici. 1154 00:47:32,480 --> 00:47:34,770 Si vous avez vraiment inspecter éléments, vous pouvez trier des 1155 00:47:34,770 --> 00:47:38,520 commencer à voir ce que font les sites Web ressembler, et comment puis-je 1156 00:47:38,520 --> 00:47:40,493 recrée que si je voulais. 1157 00:47:40,493 --> 00:47:41,890 Est-ce logique? 1158 00:47:41,890 --> 00:47:43,670 Donc, nous ne avons que trois minutes. 1159 00:47:43,670 --> 00:47:46,380 Autant de questions? 1160 00:47:46,380 --> 00:47:47,650 Chacun d'entre eux? 1161 00:47:47,650 --> 00:47:48,350 Oui. 1162 00:47:48,350 --> 00:47:50,780 >> AUDIENCE: Pour la couleur rectangle, comment feriez-vous 1163 00:47:50,780 --> 00:47:53,499 have-- si vous ne voulez pas aller sur toute la page, pourrait 1164 00:47:53,499 --> 00:47:56,400 vous avez fait aller dans seulement la moitié de la page ou simplement le texte? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Oui, absolument. 1166 00:47:59,660 --> 00:48:02,780 Alors laissez-moi voir effectivement. 1167 00:48:02,780 --> 00:48:04,670 Je ai deux idées. 1168 00:48:04,670 --> 00:48:07,265 Alors tout d'abord, vous peut également utiliser des pourcentages. 1169 00:48:07,265 --> 00:48:08,140 >> AUDIENCE: Vraiment? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON BUCHHOLTZ-UA: Donc, quelque chose à rechercher est le positionnement relatif. 1171 00:48:11,260 --> 00:48:13,385 Ce est quelque chose que nous ne ont pas le temps d'entrer dans, 1172 00:48:13,385 --> 00:48:16,392 mais ce est quelque chose que je doute vous recommandons de vérifier les gars. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: Donc pourcentages. 1174 00:48:17,580 --> 00:48:21,524 Et voir comment nous l'avons fait seulement 50% de la largeur? 1175 00:48:21,524 --> 00:48:24,190 ALLISON BUCHHOLTZ-UA: Si vous réellement savoir le nombre de pixels, 1176 00:48:24,190 --> 00:48:25,780 vous pouvez être plus précis de cette façon. 1177 00:48:25,780 --> 00:48:27,200 Vous pouvez bricoler avec elle. 1178 00:48:27,200 --> 00:48:27,700 Mais 50%. 1179 00:48:27,700 --> 00:48:31,970 Si nous étions pour redimensionner notre navigateur, il serait plus petit. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Eh bien, ce est essentiellement de 50% en ce moment, je pense. 1181 00:48:35,250 --> 00:48:38,820 Ce est 50%, et ensuite la marge a été ajouté à cela. 1182 00:48:38,820 --> 00:48:40,100 CSS a beaucoup de bizarreries. 1183 00:48:40,100 --> 00:48:43,195 Donc maintenant ce est 50% de la largeur de la page. 1184 00:48:43,195 --> 00:48:46,860 Mais rappelez-vous que vous avez 10 pixels retirés de chaque côté. 1185 00:48:46,860 --> 00:48:49,700 Donc, si vous étiez à se déplacer que contre le bord gauche du navigateur, 1186 00:48:49,700 --> 00:48:51,550 il ressemblerait 50%. 1187 00:48:51,550 --> 00:48:53,884 Encore une fois, comme je l'ai dit, CSS peut être beaucoup de conjectures et de vérification. 1188 00:48:53,884 --> 00:48:56,049 Comme, vous pensez que quelque chose est va se comporter d'une façon, 1189 00:48:56,049 --> 00:48:57,805 mais il se comporte d'une manière totalement différente. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON BUCHHOLTZ-UA: Et vous obtenez juste plus intelligente, 1191 00:48:59,420 --> 00:49:02,020 et vous obtenez juste une meilleure intuition comme vous déplacer le long. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: Et il obtient de pire en pire. 1193 00:49:02,730 --> 00:49:03,496 Donc, ce est vraiment juste une course. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON BUCHHOLTZ-UA: Ce est super encourageant. 1195 00:49:05,454 --> 00:49:07,070 Nous voulons qu'ils aiment CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS est impressionnant. 1197 00:49:08,810 --> 00:49:10,354 Ne oubliez pas que. 1198 00:49:10,354 --> 00:49:11,020 D'autres questions? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON BUCHHOLTZ-UA: La seule chose. 1200 00:49:14,297 --> 00:49:14,880 Rien d'autre? 1201 00:49:14,880 --> 00:49:15,140 Cool. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS REIMERS: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON BUCHHOLTZ-UA: Eh bien, si vous les gars ont des questions plus tard, 1204 00:49:18,523 --> 00:49:20,919 nous sommes toujours disponibles comme d'habitude. 1205 00:49:20,919 --> 00:49:22,960 Vous verrez probablement une certaine nous pour des projets finaux 1206 00:49:22,960 --> 00:49:24,280 et certainement au hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Absolument. 1208 00:49:25,200 --> 00:49:25,720 Et à la foire. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON BUCHHOLTZ-UA: Et à la foire. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Réjouissez-vous voir tous vos awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON BUCHHOLTZ-UA: Nous verrons tous vos sites Web impressionnants 1213 00:49:29,420 --> 00:49:30,572 ce sera magnifique. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: Vous pouvez toujours voir, comme, les sites Web 1215 00:49:32,780 --> 00:49:36,234 qui avait, comme, bon CSS puis comme ceux qui ne ont pas essayer de faire CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON BUCHHOLTZ-UA: Aussi, un autre chose, une chose à regarder dans 1217 00:49:39,150 --> 00:49:40,445 est bootstrap. 1218 00:49:40,445 --> 00:49:41,805 Donc Bootstrap est grande. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google que si vous-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON BUCHHOLTZ-UA: Google il. 1221 00:49:43,573 --> 00:49:44,340 Ce est fabuleux. 1222 00:49:44,340 --> 00:49:45,620 Vous allez adorer. 1223 00:49:45,620 --> 00:49:48,000 Et maintenant que vous avez un compréhension de base de CSS, 1224 00:49:48,000 --> 00:49:50,340 ça va faire beaucoup plus de sens. 1225 00:49:50,340 --> 00:49:50,890 Impressionnant. 1226 00:49:50,890 --> 00:49:51,480 Merci, les gars. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Merci beaucoup. 1228 00:49:53,330 --> 00:49:54,219