1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [REPRODUCCIÓN DE MÚSICA] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON Buchholtz-AU: Así básicamente estamos sólo va 5 00:00:12,224 --> 00:00:14,629 para darle un resumen de CSS, porque sabemos 6 00:00:14,629 --> 00:00:16,420 que no estaba cubierto en todas las secciones. 7 00:00:16,420 --> 00:00:20,090 Y que realmente queremos para asegurarse de que usted chicos tienen esta herramienta a su disposición, 8 00:00:20,090 --> 00:00:24,790 porque tiene la capacidad de hacer sus sitios web se ven mucho más bonita. 9 00:00:24,790 --> 00:00:28,660 >> Y si usted está construyendo un sitio web, a continuación, es probable que desee hacerlo bonito. 10 00:00:28,660 --> 00:00:31,372 Quiero decir, usted no tiene que, pero te sugiero que. [Risas] 11 00:00:31,372 --> 00:00:35,430 Si desea que los usuarios lo utilizan, es posible que quieren que sea un poco [inaudible]. 12 00:00:35,430 --> 00:00:39,130 Así que vamos a tratar de darle sólo algunas herramientas básicas y la comprensión, 13 00:00:39,130 --> 00:00:42,340 de modo que cuando usted sale y ya está la investigación de las cosas acerca de CSS, 14 00:00:42,340 --> 00:00:45,902 no es completa galimatías, como CSS veces ser. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Sí. 16 00:00:47,240 --> 00:00:49,930 Allison dijo que bastante bien. 17 00:00:49,930 --> 00:00:53,250 Así que supongo que lo primero que tenemos debe comenzar con es lo que es CSS? 18 00:00:53,250 --> 00:00:55,750 Así CSS es impresionante. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON Buchholtz-AU: Eso es el nombre de nuestro seminario. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Sí. 22 00:00:58,434 --> 00:01:00,130 Es muy importante que usted entiende que para entonces. 23 00:01:00,130 --> 00:01:03,090 Si sólo quitas uno cosa, es que si CSS impresionante. 24 00:01:03,090 --> 00:01:06,180 Dos es CSS significa Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Así que en su núcleo, CSS es una hoja de estilo, es decir, 26 00:01:10,380 --> 00:01:13,200 que le permite dar estilo a una página web. 27 00:01:13,200 --> 00:01:16,609 Y entonces lo que eso significa, es un manera de añadir estilo a sus sitios web. 28 00:01:16,609 --> 00:01:18,900 Así por el estilo, nos referimos a todo eso no structural-- 29 00:01:18,900 --> 00:01:24,350 así que cosas como colores, fondo imágenes, bordes, como, relleno, 30 00:01:24,350 --> 00:01:25,040 márgenes. 31 00:01:25,040 --> 00:01:27,310 Vamos a hablar de lo que todo lo que significa en un poco. 32 00:01:27,310 --> 00:01:30,110 >> Así que hemos ido por delante y sólo abierto tanto de los alzados en gedit. 33 00:01:30,110 --> 00:01:32,680 Así que esto es index.html. 34 00:01:32,680 --> 00:01:34,800 Y esto es main.css. 35 00:01:34,800 --> 00:01:36,829 Así main.css no tiene nada. 36 00:01:36,829 --> 00:01:38,412 ALLISON Buchholtz-AU: No hay un estilo hasta ahora. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Ninguno. 38 00:01:39,245 --> 00:01:42,577 Y como verás, es un sitio muy feo. 39 00:01:42,577 --> 00:01:44,160 ALLISON Buchholtz-AU: Es simplemente. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Sí. 41 00:01:45,820 --> 00:01:49,150 Sí, no es feo, es sólo minimalista. 42 00:01:49,150 --> 00:01:53,430 Y entonces aquí tenemos index.html. 43 00:01:53,430 --> 00:01:55,729 Y así, para un rápido recapitulación de HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 sólo quiere hablar de la página? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON Buchholtz-AU: Sí. 46 00:01:58,395 --> 00:02:01,100 Así que, obviamente, tenemos nuestra HTML etiqueta, que acaba de nombres de archivos HTML. 47 00:02:01,100 --> 00:02:07,080 Tenemos nuestra cabecera aquí, con CSS Awesomeness, de las cuales: si vuelves. 48 00:02:07,080 --> 00:02:07,720 Donde es eso? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Sí, se puede ver. 51 00:02:10,301 --> 00:02:12,092 ALLISON Buchholtz-AU: Y note la cabecera 52 00:02:12,092 --> 00:02:14,120 es esta cabecera pestaña hasta aquí. 53 00:02:14,120 --> 00:02:17,130 Y luego: "Hola, mundo!" es el texto que acabamos de 54 00:02:17,130 --> 00:02:19,620 se presentan en la web página, de que éstos: volver. 55 00:02:19,620 --> 00:02:21,290 Atrás. 56 00:02:21,290 --> 00:02:24,287 Que no es más en nuestro cuerpo aquí-- el texto sin formato. 57 00:02:24,287 --> 00:02:26,120 Además, una cosa es cuenta, si nos fijamos aquí, 58 00:02:26,120 --> 00:02:29,410 Tomas cambió hasta estos dos de nuestra diapositiva. 59 00:02:29,410 --> 00:02:32,035 Así que, mientras usted tiene todo tres de ellos, estás bien. 60 00:02:32,035 --> 00:02:34,044 Pueden estar en cualquier orden que quieran. 61 00:02:34,044 --> 00:02:39,368 Lo más importante es que que tiene cada una de esas tres cosas. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Añadir un tipo doc? 64 00:02:41,111 --> 00:02:42,235 ALLISON Buchholtz-AU: Sí. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Sí. 66 00:02:43,068 --> 00:02:43,769 Fresco. 67 00:02:43,769 --> 00:02:46,102 ALLISON Buchholtz-AU: Al parecer, mis micrófonos no me gusta. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, danos un segundo justo mientras Allison cambia a su micrófono. 69 00:02:49,650 --> 00:02:50,500 Así que sí. 70 00:02:50,500 --> 00:02:52,030 Así que tenemos a nuestra página principal. 71 00:02:52,030 --> 00:02:53,890 Es una especie de sin estilo. 72 00:02:53,890 --> 00:02:54,780 No tenemos mucho. 73 00:02:54,780 --> 00:02:57,110 Sólo tenemos básicamente texto. 74 00:02:57,110 --> 00:02:59,470 Tenemos la hoja de estilos. 75 00:02:59,470 --> 00:03:00,220 Tenemos el título. 76 00:03:00,220 --> 00:03:04,020 Así que sólo desnuda deshuesada componentes hacen un sitio web. 77 00:03:04,020 --> 00:03:08,880 >> Así que a partir de ahí, vamos a hablar de lo que es CSS 78 00:03:08,880 --> 00:03:11,270 y lo que parece y todo eso. 79 00:03:11,270 --> 00:03:12,047 Así que para que-- 80 00:03:12,047 --> 00:03:13,755 ALLISON Buchholtz-AU: Volver a las diapositivas. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Volver a las diapositivas. 82 00:03:15,200 --> 00:03:17,240 Y Allison puede tomar el relevo. 83 00:03:17,240 --> 00:03:18,720 >> ALLISON Buchholtz-AU: Woo. 84 00:03:18,720 --> 00:03:19,220 DE ACUERDO. 85 00:03:19,220 --> 00:03:22,360 Así que en su archivo CSS, usted va a tener 86 00:03:22,360 --> 00:03:25,010 muchas de estas cosas llama selectores. 87 00:03:25,010 --> 00:03:27,420 Eso sólo será el base de su archivo CSS. 88 00:03:27,420 --> 00:03:29,480 Es sólo va a ser montones y montones de ellas. 89 00:03:29,480 --> 00:03:30,780 Así selector. 90 00:03:30,780 --> 00:03:32,649 Esto es sólo la anatomía general. 91 00:03:32,649 --> 00:03:35,190 Vamos a ir a través de ejemplos, porque si nunca chicos 92 00:03:35,190 --> 00:03:38,400 visto a mi sección, me siento que las cosas en abstracto 93 00:03:38,400 --> 00:03:39,400 realmente no tiene sentido. 94 00:03:39,400 --> 00:03:41,110 Siempre ayuda a ver los ejemplos. 95 00:03:41,110 --> 00:03:42,420 >> Así que tenemos un poco de selector. 96 00:03:42,420 --> 00:03:49,120 Eso va a ser algún identificador de lo que queremos el estilo para aplicar a. 97 00:03:49,120 --> 00:03:52,220 Y luego podemos tener cualquier conjunto de normas y valores. 98 00:03:52,220 --> 00:03:55,680 Así selectores que se pueden ver podría ser algo así como el cuerpo, 99 00:03:55,680 --> 00:04:00,262 o párrafo con P, o de cabecera, o lo que sea, 100 00:04:00,262 --> 00:04:02,000 lo que quiere que sus etiquetas HTML que sean. 101 00:04:02,000 --> 00:04:03,570 >> Así que en este caso, tenemos cuerpo. 102 00:04:03,570 --> 00:04:06,985 Y tenemos alguna regla, que esto corresponde 103 00:04:06,985 --> 00:04:09,610 a lo que su estilo se aplica a. 104 00:04:09,610 --> 00:04:12,720 Así que en este caso, tenemos color de fondo y el peso del texto. 105 00:04:12,720 --> 00:04:16,200 Así que esto va a cambiar el fondo de nada 106 00:04:16,200 --> 00:04:19,640 dentro de cualquier etiqueta del cuerpo de nuestro archivo HTML. 107 00:04:19,640 --> 00:04:22,810 Y se va a dar que este valor de color azul claro. 108 00:04:22,810 --> 00:04:24,820 >> Así que va a hacer que el fondo azul claro. 109 00:04:24,820 --> 00:04:28,660 Y luego nada dentro del cuerpo es va a tener un peso negrita. 110 00:04:28,660 --> 00:04:31,142 Así que sólo va a negrita todo nuestro texto. 111 00:04:31,142 --> 00:04:32,970 Y esto es sólo un selector. 112 00:04:32,970 --> 00:04:34,680 Pero usted podría tener muchos de estos. 113 00:04:34,680 --> 00:04:38,730 Y como vamos a mostrar más tarde, un poco más en cómo 114 00:04:38,730 --> 00:04:40,709 que las obras y más ejemplos allí. 115 00:04:40,709 --> 00:04:41,750 Cualquier cosa que quieras agregar? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: No. 117 00:04:42,499 --> 00:04:43,500 Allison consiguió. 118 00:04:43,500 --> 00:04:46,144 Sólo vamos a cortar hasta un ejemplo aquí en nuestro sitio ejemplo. 119 00:04:46,144 --> 00:04:47,310 Así que vamos a aprovechar esta realidad. 120 00:04:47,310 --> 00:04:48,620 Es perfecto. 121 00:04:48,620 --> 00:04:54,460 Así que sólo voy a copiar y pegar que la derecha en nuestro archivo main.css. 122 00:04:54,460 --> 00:04:56,530 Y yo voy a guardarlo. 123 00:04:56,530 --> 00:04:59,190 Y luego vamos a ejecutarlo. 124 00:04:59,190 --> 00:05:01,600 Así nota lado, una de las la mayoría de las cosas frustrantes 125 00:05:01,600 --> 00:05:04,490 es si usted no guarda un archivo, y a continuación, usted, como, vuelve a cargar la página, 126 00:05:04,490 --> 00:05:07,450 y al igual que, ¿por qué no es el cambio suceda? 127 00:05:07,450 --> 00:05:07,950 Sucede. 128 00:05:07,950 --> 00:05:14,230 Así que aquí vimos que hicimos nuestra página web un fondo azul claro 129 00:05:14,230 --> 00:05:16,560 y un poco de texto en negrita. 130 00:05:16,560 --> 00:05:20,730 >> También debo mencionar, si chicos tienen preguntas sobre cualquier cosa 131 00:05:20,730 --> 00:05:23,622 que estamos haciendo, sentimos por favor libre para detenernos y preguntarnos. 132 00:05:23,622 --> 00:05:25,330 ¡Estamos completamente dispuestos para contestar preguntas. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON Buchholtz-AU: Obviamente, con CSS, todo basa en sí mismo. 135 00:05:31,930 --> 00:05:34,107 Así que si una cosa no tener sentido ahora, 136 00:05:34,107 --> 00:05:35,690 no quiero que a empantanar más tarde. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Así que vamos a tipo de diseccionar esto. 139 00:05:41,930 --> 00:05:44,210 Entonces, ¿quieres empezar con el selector de aquí? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON Buchholtz-AU: Sí. 141 00:05:45,979 --> 00:05:48,270 Como decía antes, el cuerpo es sólo nuestro selector de aquí. 142 00:05:48,270 --> 00:05:50,950 Así que si nos remontamos a nuestra ah index--. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: ¿Qué yo sólo cerré. 144 00:05:53,245 --> 00:05:54,530 Dame un segundo. 145 00:05:54,530 --> 00:05:58,286 Así File, Open, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON Buchholtz-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 Así que si usted nota aquí, tener estas etiquetas del cuerpo, ¿no? 148 00:06:02,710 --> 00:06:06,270 Así que el selector sólo corresponde a las etiquetas que los que estamos hablando. 149 00:06:06,270 --> 00:06:07,670 Así el cuerpo aquí. 150 00:06:07,670 --> 00:06:10,315 Así que lo que estamos diciendo es todo-- podemos volver? 151 00:06:10,315 --> 00:06:12,065 Ojalá pudiera sólo como tocar la pantalla. 152 00:06:12,065 --> 00:06:14,410 Sería mucho más fresco. 153 00:06:14,410 --> 00:06:17,150 >> Así que cualquier cosa dentro de los etiquetas del cuerpo, que vimos 154 00:06:17,150 --> 00:06:19,637 era sólo, como, el texto, y el cuerpo en general 155 00:06:19,637 --> 00:06:20,970 se refiere a, como, el fondo. 156 00:06:20,970 --> 00:06:22,720 Si alguna vez quieres cambiar el fondo, 157 00:06:22,720 --> 00:06:25,090 que va a ser en un cuerpo de la etiqueta. 158 00:06:25,090 --> 00:06:27,120 Sólo tiene estas reglas se aplican a ellos. 159 00:06:27,120 --> 00:06:32,040 >> Así que si tuviéramos que ir a index.html y- en realidad, 160 00:06:32,040 --> 00:06:33,840 podemos tener algo fuera del cuerpo? 161 00:06:33,840 --> 00:06:37,340 Si tuviéramos, como, un pie de página o algo, no se aplicaría a este. 162 00:06:37,340 --> 00:06:40,900 Pero cualquier cosa dentro de estas etiquetas del cuerpo va 163 00:06:40,900 --> 00:06:44,960 a ser afectados por este órgano selector que hemos hecho. 164 00:06:44,960 --> 00:06:47,405 Así que si usted fuera a escribir algo más allí-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Vamos a gestionar esto. 166 00:06:49,400 --> 00:06:55,330 Así que si teníamos un div-- así que eso es sólo otra etiqueta que puede tener. 167 00:06:55,330 --> 00:06:56,350 Voy a cerrarla. 168 00:06:56,350 --> 00:06:58,280 ¿O vamos a hacer de este un párrafo. 169 00:06:58,280 --> 00:07:01,430 Así p significa párrafo. 170 00:07:01,430 --> 00:07:02,560 Y dentro de ese párrafo. 171 00:07:02,560 --> 00:07:05,650 Y entonces yo digo: "Este es el texto." 172 00:07:05,650 --> 00:07:06,369 Fresco. 173 00:07:06,369 --> 00:07:09,160 Y entonces hice esta regla se aplica a un párrafo en lugar del cuerpo. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Verás cómo se aplica sólo a el párrafo recién formado, derecha, 176 00:07:17,320 --> 00:07:18,892 No todo el asunto. 177 00:07:18,892 --> 00:07:20,090 ¿Tiene eso sentido? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON Buchholtz-AU: Así que esto es todo el cuerpo, 179 00:07:21,840 --> 00:07:24,450 pero ahora nuestro selector sólo corresponde al párrafo. 180 00:07:24,450 --> 00:07:27,050 Así que sólo tenemos negrita y azul de este párrafo específico, 181 00:07:27,050 --> 00:07:30,760 porque esta es la única cosa que está encerrado dentro de la etiqueta p. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: ¿Tiene sentido especie de cómo las cosas encapsular otras cosas? 183 00:07:35,349 --> 00:07:38,140 ALLISON Buchholtz-AU: Además, sólo decir, como una de las mejores maneras 184 00:07:38,140 --> 00:07:40,889 para conseguir realmente cómodo con CSS es simplemente hacer las cosas de esta manera, 185 00:07:40,889 --> 00:07:42,050 sólo probarlo. 186 00:07:42,050 --> 00:07:46,700 Es muy sencillo de escribir algo fuera, golpeó Actualizar, y ver qué pasa. 187 00:07:46,700 --> 00:07:48,940 Y como con la mayoría de CS, experimentación puede a menudo 188 00:07:48,940 --> 00:07:51,790 conducir a una mejor comprensión intuitiva. 189 00:07:51,790 --> 00:07:54,432 Incluso más que nosotros simplemente, como, hablando con usted. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Absolutamente 100% de acuerdo en este punto. 191 00:07:58,350 --> 00:08:02,430 Así que si nos remontamos a esto, vamos a empezar disección exactamente lo que estos dos lo hacen. 192 00:08:02,430 --> 00:08:04,550 Así que tenemos dos normas sobre esto. 193 00:08:04,550 --> 00:08:07,420 Así que la primera de ellas es el color de fondo. 194 00:08:07,420 --> 00:08:10,590 Y ves que hemos establecido que igual a un valor, de color azul claro. 195 00:08:10,590 --> 00:08:15,009 >> Así que en CSS, CSS es una especie de muy suelto sobre cómo 196 00:08:15,009 --> 00:08:16,300 se te permite definir el color. 197 00:08:16,300 --> 00:08:17,800 Así se puede definir por su nombre. 198 00:08:17,800 --> 00:08:20,650 También puede hacer algo como "rojo". 199 00:08:20,650 --> 00:08:25,270 Y luego, si nos remontamos a esto, verás que el fondo es de color rojo. 200 00:08:25,270 --> 00:08:29,040 También puede obtener realmente-- creo que puede ser bastante creativo con esto, 201 00:08:29,040 --> 00:08:29,540 ¿no es así? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON Buchholtz-AU: I piensa que puede utilizar hexagonal. 203 00:08:31,170 --> 00:08:31,250 No puedes? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Sí. 205 00:08:32,083 --> 00:08:32,969 Así que usted puede utilizar hexagonal. 206 00:08:32,969 --> 00:08:34,490 Pero estoy pensando nombre-sabio. 207 00:08:34,490 --> 00:08:35,385 ¿No hay? 208 00:08:35,385 --> 00:08:37,260 ALLISON Buchholtz-AU: Usted puede hacer unos cuantos. 209 00:08:37,260 --> 00:08:43,350 Más o menos como la mayoría de los colores que usted puede nombre-- como, creo que el salmón es uno. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: Estamos salmón intento va. 211 00:08:45,322 --> 00:08:47,530 ALLISON Buchholtz-AU: I creo chartreuse está ahí. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Sí. 213 00:08:48,050 --> 00:08:48,550 ¿Ves? 214 00:08:48,550 --> 00:08:50,080 Por lo que puede ser bastante creativo. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON Buchholtz-AU: Usted podría ser bastante creativo. 216 00:08:52,246 --> 00:08:55,750 Al igual que, si se puede pensar en el nombre del color, es probable que sea allí. 217 00:08:55,750 --> 00:08:57,840 Si realmente quieres fina detalle, se puede ir hexagonal. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Sí. 219 00:08:58,673 --> 00:08:59,390 Así hexadecimal. 220 00:08:59,390 --> 00:09:05,280 Si ustedes recuerden esto de nuevo de su antiguo PSET, Imagen Recover, 221 00:09:05,280 --> 00:09:08,300 ustedes tenían que lidiar con estos valores hex. 222 00:09:08,300 --> 00:09:15,280 Y especie de recapitular lo que es, hex tiene tres valores almacenados en ella. 223 00:09:15,280 --> 00:09:17,250 Así que es en grupos de dos incrementos. 224 00:09:17,250 --> 00:09:19,300 Las dos primeras representan el valor de rojo. 225 00:09:19,300 --> 00:09:22,420 El segundo representa el valor verde. 226 00:09:22,420 --> 00:09:25,020 Y el último es azul? 227 00:09:25,020 --> 00:09:30,050 >> Así sucede FF para representar un hexadecimal 255. 228 00:09:30,050 --> 00:09:35,480 Así que tienes 255 rojo, 255 verde, y 0 para el azul. 229 00:09:35,480 --> 00:09:37,670 Y los valores oscilan entre 0 y 255. 230 00:09:37,670 --> 00:09:38,350 >> AUDIENCIA: Correcto. 231 00:09:38,350 --> 00:09:41,472 Así que, esencialmente, podríamos buscar el Internet para cualquier color que queremos, 232 00:09:41,472 --> 00:09:43,912 e identificar la realidad-conocida de color combo espectro, 233 00:09:43,912 --> 00:09:45,130 y entonces podríamos poner en? 234 00:09:45,130 --> 00:09:46,380 ALLISON Buchholtz-AU: Exactamente. 235 00:09:46,380 --> 00:09:52,900 Así que tienes más o menos completo control sobre los colores que quieras dentro de CSS. 236 00:09:52,900 --> 00:09:55,069 ¿Vamos a hablar de imágenes de fondo más adelante? 237 00:09:55,069 --> 00:09:56,110 ¿O queremos hacer eso? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Sí. 239 00:09:56,240 --> 00:09:57,010 Absolutamente. 240 00:09:57,010 --> 00:10:00,830 Así que primero, sólo para demostrar que rojo y verde es de color amarillo. 241 00:10:00,830 --> 00:10:03,120 Y si necesitas un poco ayuda para encontrar esto, 242 00:10:03,120 --> 00:10:05,575 puede buscar en Google algo como "selector de color." 243 00:10:05,575 --> 00:10:07,200 ALLISON Buchholtz-AU: Oh, es tan bueno. 244 00:10:07,200 --> 00:10:09,090 Me encanta Selector de color. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com es un buen ejemplo. 246 00:10:11,360 --> 00:10:14,580 Y aquí, podrás ver que tienes un selector de color de Photoshop-como completa. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON Buchholtz-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Además, las cosas interesantes es que puede generar esquemas de color 249 00:10:16,980 --> 00:10:18,896 de modo que usted no tiene, como, chocando colores. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: Y entonces aquí está el valor hexadecimal hasta aquí. 251 00:10:22,780 --> 00:10:27,800 Así que siempre se puede encontrar en línea, básicamente, lugares para obtener el valor hexadecimal de. 252 00:10:27,800 --> 00:10:31,667 No es una especie de que se acaba, como, nos ver los colores del mundo en número. 253 00:10:31,667 --> 00:10:34,000 Es más que vayamos en línea y encontramos qué color queremos, 254 00:10:34,000 --> 00:10:36,850 y luego tomar el número. 255 00:10:36,850 --> 00:10:39,590 Porque es sólo un muy fácil manera de Referencia cosas en CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON Buchholtz-AU: Y luego está también-- 257 00:10:40,350 --> 00:10:41,630 No recuerdo el nombre exacto del sitio. 258 00:10:41,630 --> 00:10:43,838 Pero no hay duda, yo pensar, algo de Adobe 259 00:10:43,838 --> 00:10:48,350 que genera esquemas de color para usted, que es realmente genial, porque 260 00:10:48,350 --> 00:10:50,580 definitely-- a veces difícil de entender, 261 00:10:50,580 --> 00:10:53,729 oh, si quiero usar este color, lo que podría ser otro útil 262 00:10:53,729 --> 00:10:56,395 utilizar en otro lugar en mi sitio para, como, que sea agradable y cohesionada. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allison está hablando de uno por Adobe Kuler llama, creo. 265 00:11:04,260 --> 00:11:04,885 Es K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON Buchholtz-UA: Creo que sí. 267 00:11:06,259 --> 00:11:07,610 Estoy bastante seguro de que es el uno. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: Mi favorito tiene siempre ha sido Esquema de color Designer. 269 00:11:11,050 --> 00:11:13,998 >> ALLISON Buchholtz-AU: Ooh. 270 00:11:13,998 --> 00:11:16,010 >> TOMAS REIMERS: ¿Cuál es ahora-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON Buchholtz-AU: Ah, esto es hermoso. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: Y Básicamente se puede decir, como, 273 00:11:18,818 --> 00:11:21,700 Quiero tres colores uno junto al otro. 274 00:11:21,700 --> 00:11:25,030 Y luego vamos a hacer algo agradable. 275 00:11:25,030 --> 00:11:29,210 Y entonces se puede obtener un ejemplo de lo que podría parecer. 276 00:11:29,210 --> 00:11:32,470 Y luego cuando pasamos el ratón sobre cualquiera de ellos, se le da el valor hexadecimal. 277 00:11:32,470 --> 00:11:35,010 >> Así que al igual que una buena manera de empezar pensar en esquemas de color 278 00:11:35,010 --> 00:11:39,570 o qué colores en una página web podría ir bien juntos. 279 00:11:39,570 --> 00:11:45,655 Debido a que puede ser sorprendentemente no tan fácil de aprender como usted piensa. 280 00:11:45,655 --> 00:11:48,280 Y luego la otra cosa fresca Siempre he encontrado acerca de este sitio 281 00:11:48,280 --> 00:11:51,480 es si se golpea ejemplos, que va a mostrar lo que un sitio web de ejemplo 282 00:11:51,480 --> 00:11:54,800 podría parecer que el uso de combinación de colores. 283 00:11:54,800 --> 00:11:56,270 De todos modos. 284 00:11:56,270 --> 00:11:57,863 >> Volver a la CSS real. 285 00:11:57,863 --> 00:12:01,112 ALLISON Buchholtz-AU: Pero obviamente, conocer estas referencias pueden ser útiles. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: No, sin duda puede ser útil. 287 00:12:03,195 --> 00:12:04,720 Así que la segunda regla, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON Buchholtz-AU: Sí. 289 00:12:05,844 --> 00:12:08,280 La segunda regla es sólo correspondiente a nuestra fuente. 290 00:12:08,280 --> 00:12:11,520 Así que el peso del texto es sólo un poco de-- lo que el peso lo haría 291 00:12:11,520 --> 00:12:15,220 estar si quieres simplemente, como, normal o, al igual que, las fuentes más delgadas, 292 00:12:15,220 --> 00:12:17,251 o en este caso, al igual que, en negrita. 293 00:12:17,251 --> 00:12:17,750 Me olvido. 294 00:12:17,750 --> 00:12:21,557 ¿Qué es el si quería it-- está ahí uno más delgado que apenas, como, normal? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: Yo en realidad no saber si hay uno más delgado. 296 00:12:24,140 --> 00:12:24,680 ALLISON Buchholtz-AU: me olvide. 297 00:12:24,680 --> 00:12:26,300 Así el peso de la fuente que normalmente sólo tiene que utilizar para negrita. 298 00:12:26,300 --> 00:12:29,010 Si usted quiere conseguir realmente en ella, vamos a mostrarle. 299 00:12:29,010 --> 00:12:34,317 W3Schools tiene todos los diferentes cosas que usted puede hacer por las fuentes. 300 00:12:34,317 --> 00:12:36,900 Pero, básicamente, si alguna vez quieres cambiar nada de la fuente, 301 00:12:36,900 --> 00:12:39,330 que siempre va a ser, como, la fuente y tantos. 302 00:12:39,330 --> 00:12:43,450 Así será como, font-family si estás tratando de cambiar el tipo real. 303 00:12:43,450 --> 00:12:47,390 Será de estilo de fuente si usted quieren que sea como cursiva, 304 00:12:47,390 --> 00:12:49,710 o cursiva, o lo que sea. 305 00:12:49,710 --> 00:12:53,570 O incluso de fuente-color, si queríamos cambiar eso. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Así es. 307 00:12:55,621 --> 00:12:56,925 Así que usted puede cambiar eso. 308 00:12:56,925 --> 00:12:59,360 Y especie de sólo para recapitular ahora, para que puedas 309 00:12:59,360 --> 00:13:01,400 vemos que tenemos el selector hacia arriba aquí. 310 00:13:01,400 --> 00:13:03,000 Tenemos estas llaves. 311 00:13:03,000 --> 00:13:06,735 Y luego tenemos reglas delimitado por punto y coma. 312 00:13:06,735 --> 00:13:08,100 ¿Tiene eso sentido? 313 00:13:08,100 --> 00:13:09,130 ¿Sí? 314 00:13:09,130 --> 00:13:10,500 Fresco. 315 00:13:10,500 --> 00:13:13,200 Así que si eso es good-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON Buchholtz-AU: Volver. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Hablemos específicamente acerca de qué tipo de selectores que tenemos. 318 00:13:17,590 --> 00:13:19,790 Porque ahora que hemos especie de sólo muestra las etiquetas. 319 00:13:19,790 --> 00:13:21,696 Pero ustedes podrían ver plausible. 320 00:13:21,696 --> 00:13:23,570 Digamos que tienes dos párrafos en una página y que 321 00:13:23,570 --> 00:13:26,087 quiero ser capaz de estilo uno pero no el otro, 322 00:13:26,087 --> 00:13:29,170 usted no sólo quiere que limitarse a tener que utilizar diferentes HTML real 323 00:13:29,170 --> 00:13:33,410 etiquetas para darles diferentes estilos. 324 00:13:33,410 --> 00:13:35,995 >> Así que tenemos tres básico tipos de selectores. 325 00:13:35,995 --> 00:13:37,120 ALLISON Buchholtz-AU: Sí. 326 00:13:37,120 --> 00:13:39,828 Así que tenemos la etiqueta, que es lo que hemos estado hablando en este momento. 327 00:13:39,828 --> 00:13:42,430 Así que eso es algo así como su cuerpo o p. 328 00:13:42,430 --> 00:13:46,280 Y luego tenemos la clase, que es cuando lo definimos en nuestro archivo CSS, 329 00:13:46,280 --> 00:13:49,907 que siempre va a ser punto, lo que sea desea que el nombre de la clase que sea. 330 00:13:49,907 --> 00:13:51,490 Y esto se puede aplicar a varias cosas. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Digamos que usted tiene cinco párrafos y dos de los tres 333 00:13:57,610 --> 00:14:00,580 necesitar ser el mismo estilo, que se aplicaría una clase a la misma. 334 00:14:00,580 --> 00:14:03,040 Y esto es sólo la forma en que lo hacemos. 335 00:14:03,040 --> 00:14:05,600 Nosotros le daremos un ejemplo de donde esta realidad muestra arriba. 336 00:14:05,600 --> 00:14:11,030 Pero si tiene que tal vez algunos de etiquetas p, después de él, usted escribiría, 337 00:14:11,030 --> 00:14:14,170 clase es igual independientemente de las clases que desea aplicar a la misma. 338 00:14:14,170 --> 00:14:19,280 Así que lo que los selectores de clase que queremos aplicar al presente apartado específico, 339 00:14:19,280 --> 00:14:21,300 pudiéramos escribir así. 340 00:14:21,300 --> 00:14:24,080 Por supuesto, creo que un ejemplo hará que sea mucho más concreta. 341 00:14:24,080 --> 00:14:27,270 >> El otro tenemos es id, que denotamos 342 00:14:27,270 --> 00:14:29,707 con un hash, o libras, o hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON Buchholtz-AU: octothorpe. 345 00:14:32,430 --> 00:14:34,550 Eso funciona, también. 346 00:14:34,550 --> 00:14:36,640 Y éste debe ser realmente única. 347 00:14:36,640 --> 00:14:39,880 Ellos sólo deben aplicarse a una cosa en su página. 348 00:14:39,880 --> 00:14:43,820 Así que si eso es un párrafo específico, o algún elemento de una lista, o lo que sea, 349 00:14:43,820 --> 00:14:45,090 esto debe ser único. 350 00:14:45,090 --> 00:14:48,730 Y de la misma manera que acabamos de decir, como, class = "clase2 class1" 351 00:14:48,730 --> 00:14:51,577 esto sólo puede ser Identificación de lo que tenemos. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Sí. 353 00:14:52,410 --> 00:14:54,330 Así que vamos a hablar definitivamente sobre ejemplos aquí. 354 00:14:54,330 --> 00:14:58,170 Y yo sólo voy a bucear hacia atrás en el código. 355 00:14:58,170 --> 00:15:02,090 Así que echemos un vistazo a nuestra HTML. 356 00:15:02,090 --> 00:15:03,960 Y por lo que en este momento tenemos un párrafo. 357 00:15:03,960 --> 00:15:05,510 Este es el texto. 358 00:15:05,510 --> 00:15:09,151 Yo sólo voy a modificar ella. "Este es un texto 1." 359 00:15:09,151 --> 00:15:11,150 Y luego vamos a tener una "Esto es texto 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON Buchholtz-AU: Segunda uno. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Así es. 362 00:15:13,540 --> 00:15:16,810 Así que ahora tenemos "Este es el texto 2", ¿verdad? 363 00:15:16,810 --> 00:15:21,560 Y vamos a ver que si recargamos la página, lo que vamos a encontrar 364 00:15:21,560 --> 00:15:23,067 es que vamos a find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON Buchholtz-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS REIMERS: Sí. 367 00:15:24,983 --> 00:15:27,570 Vamos a encontrar una "Esto es texto 1 "y" Este es un texto 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON Buchholtz-AU: Y color amarillo fuera encantador. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: Y verás que nuestro selector en este momento, 370 00:15:31,066 --> 00:15:34,940 que se aplica a p de, o párrafos, afecta a ambos, 371 00:15:34,940 --> 00:15:38,700 porque ambos se encuentran con el condición de que los dos son una etiqueta p. 372 00:15:38,700 --> 00:15:40,360 Eso tiene sentido total. 373 00:15:40,360 --> 00:15:43,340 Así que la pregunta es, bueno, lo que si queríamos sólo conseguir uno? 374 00:15:43,340 --> 00:15:46,350 Así exactamente como Allison estaba diciendo, tenemos otras dos maneras de hacerlo. 375 00:15:46,350 --> 00:15:47,320 Voy a comenzar con id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON Buchholtz-AU: Vamos a empezar con id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: Y ambos de estos son atributos. 378 00:15:50,405 --> 00:15:53,200 Así que existen atributos en HTML. 379 00:15:53,200 --> 00:15:55,600 Y lo que son es algo que se agrega 380 00:15:55,600 --> 00:15:58,840 dentro de la etiqueta que es separar del nombre de la etiqueta. 381 00:15:58,840 --> 00:16:01,301 Así que usted puede tener varios atributos. 382 00:16:01,301 --> 00:16:01,800 ¿Sí? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON Buchholtz-AU: Estaba a punto decir, de su ejemplo de PSET 7, 384 00:16:03,950 --> 00:16:06,650 si alguno de ustedes tratan de alinear cosas para el centro, 385 00:16:06,650 --> 00:16:08,550 que podría haber utilizado "Text align = center." 386 00:16:08,550 --> 00:16:10,550 Y te has dado cuenta que probablemente debería haber centrado 387 00:16:10,550 --> 00:16:12,650 su texto o en la barra de navegación. 388 00:16:12,650 --> 00:16:15,499 Así que eso es justo también un atributo que podría estar familiarizado. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: Hay un montón de atributos que ya lo verás. 390 00:16:18,040 --> 00:16:18,539 Sí. 391 00:16:18,539 --> 00:16:21,250 Como buena referencia para PSET 7. 392 00:16:21,250 --> 00:16:23,150 Tenemos Identificación. 393 00:16:23,150 --> 00:16:25,080 Usted también puede tener clase, cosas como esta. 394 00:16:25,080 --> 00:16:27,250 Una sola etiqueta puede tener muchos atributos. 395 00:16:27,250 --> 00:16:33,140 Así que a partir de la identificación, vamos a suponer que quiero tener un id de-- No sé. 396 00:16:33,140 --> 00:16:35,140 Lo llamaremos especial, porque éste, estamos 397 00:16:35,140 --> 00:16:37,867 va a hacer negrita, y subrayado y lo que sea. 398 00:16:37,867 --> 00:16:39,950 ALLISON Buchholtz-AU: Es Va a ser muy especial. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: Así que esta uno, tenemos Identificación especial. 400 00:16:42,360 --> 00:16:48,140 Así que la forma para seleccionar que es, entonces, en main.css, en lugar de tener una etiqueta p, 401 00:16:48,140 --> 00:16:51,500 haces #special, OK? 402 00:16:51,500 --> 00:16:55,538 Y eso selecciona el cosa con id especial. 403 00:16:55,538 --> 00:16:57,295 ¿Tiene esto sentido para todo el mundo? 404 00:16:57,295 --> 00:16:57,920 AUDIENCIA: Sí. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Así que ahora si nos remontamos, vamos a ver-- gritos. 407 00:17:04,440 --> 00:17:06,240 Sí. 408 00:17:06,240 --> 00:17:09,460 Veremos que sólo selecciona el uno con id especial. 409 00:17:09,460 --> 00:17:10,622 ¿Sí? 410 00:17:10,622 --> 00:17:11,900 Suena genial. 411 00:17:11,900 --> 00:17:12,570 Sí. 412 00:17:12,570 --> 00:17:15,456 >> AUDIENCIA: ¿Puede algo tener un atribuir tanto de clase y un id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Sí. 414 00:17:16,359 --> 00:17:16,900 AUDIENCIA: OK. 415 00:17:16,900 --> 00:17:20,887 Y entonces, ¿qué pasa si luego das que algunas reglas CSS en ese conflicto? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Por supuesto. 417 00:17:21,970 --> 00:17:23,940 Definitivamente vamos para hablar de eso. 418 00:17:23,940 --> 00:17:31,890 Así exactamente lo que estaban haciendo a, también puede tener clases. 419 00:17:31,890 --> 00:17:36,380 Así que vamos a pretender que tenía tres párrafos y yo 420 00:17:36,380 --> 00:17:38,730 quería darle estilo al primero dos, pero no la tercera. 421 00:17:38,730 --> 00:17:42,850 Bueno, su primera idea puede ser, bueno, sólo podía dar el segundo un id. 422 00:17:42,850 --> 00:17:45,590 Pero no se puede, porque un id, exactamente igual que Allison estaba diciendo, 423 00:17:45,590 --> 00:17:47,330 tiene que ser único. 424 00:17:47,330 --> 00:17:50,860 >> Así que en lugar de un id, lo que puede utilizar es usted puede utilizar una clase. 425 00:17:50,860 --> 00:17:57,880 Y un class-- lo que permite que hagas es básicamente decir, 426 00:17:57,880 --> 00:17:59,610 esto pertenece como parte de un grupo. 427 00:17:59,610 --> 00:18:02,410 En este caso, nuestro grupo se llama especial. 428 00:18:02,410 --> 00:18:06,500 ¿Y qué vamos a hacer a continuación es vamos a decir-- en lugar de libras, 429 00:18:06,500 --> 00:18:08,070 vamos a utilizar puntos. 430 00:18:08,070 --> 00:18:08,740 DE ACUERDO? 431 00:18:08,740 --> 00:18:11,950 Y note que la libra y el punto sólo existen en el archivo CSS, 432 00:18:11,950 --> 00:18:12,797 no dentro del HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON Buchholtz-AU: Sí. 434 00:18:13,880 --> 00:18:15,185 Distinción importante. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Tengo tenía tanta lucha, 436 00:18:17,510 --> 00:18:23,990 porque puse el hash en el HTML y entonces sólo me sentí estúpida por un largo tiempo. 437 00:18:23,990 --> 00:18:27,470 Vea cómo se selecciona a los dos los que tienen esa clase? 438 00:18:27,470 --> 00:18:28,210 Fresco. 439 00:18:28,210 --> 00:18:29,950 >> Ahora, las cosas pueden tener varias clases. 440 00:18:29,950 --> 00:18:32,790 Digamos que yo quería hacer la primera dos tienen un fondo de color amarillo 441 00:18:32,790 --> 00:18:36,770 y el segundo dos tienen un color de fuente de color azul. 442 00:18:36,770 --> 00:18:37,270 DE ACUERDO. 443 00:18:37,270 --> 00:18:39,735 Yo realmente no sé por qué yo había quiero hacer eso, pero no puedo. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON Buchholtz-AU: ¿No podría recomendado para su sitio web. 445 00:18:42,401 --> 00:18:43,880 Pero para nuestros propósitos, que va a hacer. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: No es una buena combinación de colores. 447 00:18:46,294 --> 00:18:49,210 ALLISON Buchholtz-AU: Bueno, amarillo y azul son mis colores de la escuela secundaria. 448 00:18:49,210 --> 00:18:50,947 No sé, sin embargo. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison de alta escuela tenía una gran combinación de colores. 450 00:18:53,530 --> 00:18:54,520 [Risas] 451 00:18:54,520 --> 00:18:59,120 Así que lo que podemos llamar a esto es Llamemos a esto-- así que tenemos Especial 452 00:18:59,120 --> 00:19:00,030 y tenemos Pretty. 453 00:19:00,030 --> 00:19:02,405 Sugiero, para esto, se utiliza nombres mucho más descriptivos. 454 00:19:02,405 --> 00:19:05,820 ALLISON Buchholtz-AU: Sí, lo haría llamar a esto, como, amarillo o azul. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: No somos realmente hacer un sitio web de bienes, 456 00:19:08,314 --> 00:19:09,730 es por ello que no estamos haciendo eso. 457 00:19:09,730 --> 00:19:11,521 Pero si realmente tenía un sitio web real, 458 00:19:11,521 --> 00:19:16,220 podría tener, como, cabecera del artículo, el contenido del artículo, la primera palabra, 459 00:19:16,220 --> 00:19:21,920 cosas así, que permiten que seas mucho más descriptivo. 460 00:19:21,920 --> 00:19:23,550 Estos son realmente como variables. 461 00:19:23,550 --> 00:19:28,390 Ellos deben ser nombrados de una manera donde usted puede, como-- sí, como tal. 462 00:19:28,390 --> 00:19:29,470 Perfecto. 463 00:19:29,470 --> 00:19:30,480 >> Así color de fondo. 464 00:19:30,480 --> 00:19:35,920 Y luego vamos a decir-- por lo que el manera de cambiar el color es sólo "color". 465 00:19:35,920 --> 00:19:38,412 Y vamos a hacer que sea azul. 466 00:19:38,412 --> 00:19:40,150 Eso es genial. 467 00:19:40,150 --> 00:19:42,640 Así que ahora tenemos la dos primeros tienen especial. 468 00:19:42,640 --> 00:19:45,972 Siguiente uno va a tener "class = bonita." 469 00:19:45,972 --> 00:19:49,180 ALLISON Buchholtz-AU: Y entonces usted desear agregar "bastante" a la del medio. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Así es. 471 00:19:49,971 --> 00:19:52,970 Y luego a la del medio, añadir "bonito", lo que pasa 472 00:19:52,970 --> 00:19:56,880 es sólo tienes un espacio. 473 00:19:56,880 --> 00:19:59,800 Así que el atributo de clase es una lista separada por espacios 474 00:19:59,800 --> 00:20:02,450 de todas las clases que se aplican a esa etiqueta. 475 00:20:02,450 --> 00:20:02,959 DE ACUERDO? 476 00:20:02,959 --> 00:20:05,750 No es como éste pertenece algún tipo de clase especial llamada 477 00:20:05,750 --> 00:20:07,180 "Especial, espacio, bastante." 478 00:20:07,180 --> 00:20:10,870 Pertenece a dos classes-- especial y bonita. 479 00:20:10,870 --> 00:20:12,492 ¿Sí? 480 00:20:12,492 --> 00:20:14,360 Fresco. 481 00:20:14,360 --> 00:20:17,010 >> Y luego, si nos fijamos en lo que pase, estamos 482 00:20:17,010 --> 00:20:21,850 vamos a ver que primero tiene fondo amarillo, texto negro. 483 00:20:21,850 --> 00:20:22,450 Segundo uno-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON Buchholtz-AU: --has negrita fondo amarillo con el texto azul. 485 00:20:26,160 --> 00:20:29,330 Y nuestro último sólo tiene la texto azul que hemos asignado a la misma. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 ¿Cómo funcionan los selectores? 488 00:20:32,491 --> 00:20:32,990 Impresionante. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON Buchholtz-AU: ¿Queremos hablar sobre el conflicto ahora, entonces? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Así que sí. 491 00:20:35,780 --> 00:20:36,310 Absolutamente. 492 00:20:36,310 --> 00:20:38,380 Entonces, ¿qué pasa si usted tener un conflicto, ¿no? 493 00:20:38,380 --> 00:20:44,740 Vamos a suponer la primera establece algo como-- 494 00:20:44,740 --> 00:20:47,240 ALLISON Buchholtz-AU: Tal vez éste cambia el fondo? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Sí. 496 00:20:48,090 --> 00:20:51,699 Así que vamos a hacer "bonita" cambiar el fondo a salmón. 497 00:20:51,699 --> 00:20:54,740 ALLISON Buchholtz-AU: Estás a con todos los grandes colores de hoy, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Sí. 499 00:20:55,573 --> 00:20:58,200 Porque me enteré de lo que pueda utilizar el salmón como un color real. 500 00:20:58,200 --> 00:21:00,270 Así que sólo vamos a hacer eso. 501 00:21:00,270 --> 00:21:01,770 También creo que la puesta del sol es un color real. 502 00:21:01,770 --> 00:21:03,103 AUDIENCIA: Puesta del sol es un color real? 503 00:21:03,103 --> 00:21:04,572 ALLISON Buchholtz-AU: Vamos a intentarlo. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Después de esta demostración sólo porque en caso de que meta la pata, 505 00:21:07,735 --> 00:21:08,943 Yo no quiero ser la depuración. 506 00:21:08,943 --> 00:21:11,580 Así que sabemos que el salmón es un color real. 507 00:21:11,580 --> 00:21:15,626 Por lo que cualquier conjeturas sobre lo que va a pasar? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON Buchholtz-AU: ¿Alguna idea? 509 00:21:17,522 --> 00:21:20,002 >> AUDIENCIA: [inaudible]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Sí. 511 00:21:20,920 --> 00:21:22,150 Así que lo tienes toda la razón. 512 00:21:22,150 --> 00:21:24,930 Básicamente, se necesita la última regla que se le dio. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON Buchholtz-AU: Así que esto es donde en cascada entre en vigor. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Así que recuerde cómo tenía que hojas de estilo en cascada? 515 00:21:31,080 --> 00:21:33,660 Así que por eso, nos referimos tipo de que tenemos un montón de reglas 516 00:21:33,660 --> 00:21:37,115 que se aplican en la parte superior de la otra, y también pueden anular entre sí. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON Buchholtz-AU: Así lo de en la parte inferior 518 00:21:39,380 --> 00:21:41,540 anulará todo lo que está en la parte superior. 519 00:21:41,540 --> 00:21:45,842 Usted podría tener reglas que completamente negar algo de antemano. 520 00:21:45,842 --> 00:21:48,300 Por eso también quieres ser cuidado cuando estás estilo, 521 00:21:48,300 --> 00:21:51,465 por lo que no va a crear reglas que estás completamente imperiosas. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: O tal vez usted no desea sobreescribir reglas. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON Buchholtz-AU: O tal vez usted lo hace. 524 00:21:53,920 --> 00:21:54,300 Sí. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Imagina que tienes un clase que se aplica a la mayoría de las cosas, 526 00:21:57,175 --> 00:22:01,220 pero digamos que usted desea cambiar la color de fondo a rojo y el tipo de letra 527 00:22:01,220 --> 00:22:03,140 peso en negrita para la mayoría cosas, pero por mi parte, 528 00:22:03,140 --> 00:22:06,098 sólo desea que el color de fondo a ser de color rojo, pero que desea de los demás 529 00:22:06,098 --> 00:22:09,990 propiedades, que podrían hacer algo como "font-weight = normal" 530 00:22:09,990 --> 00:22:12,760 que luego deshacer ese cambio audaz. 531 00:22:12,760 --> 00:22:14,480 ¿Sí? 532 00:22:14,480 --> 00:22:17,250 Una vez más, la mejor manera, creo que Allison dijo que, es sólo la práctica. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON Buchholtz-AU: Experimentación. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Práctica, práctica, práctica, y el experimento. 535 00:22:20,090 --> 00:22:22,950 Conozco a un montón de gente que piensa CSS es sólo un montón de conjeturas y verificación 536 00:22:22,950 --> 00:22:25,580 al final del día, donde si que quieres hacer algo-- como, 537 00:22:25,580 --> 00:22:27,663 usted tiene una idea aproximada, pero usted todavía necesita probablemente 538 00:22:27,663 --> 00:22:31,390 probarlo para asegurarse usted sabe lo que parece. 539 00:22:31,390 --> 00:22:34,482 >> AUDIENCIA: Cuando usted está solicitando clases, más de una 540 00:22:34,482 --> 00:22:37,339 al mismo párrafo o de la sección, ¿verdad 541 00:22:37,339 --> 00:22:39,505 importa qué orden se puede digite en las cotizaciones? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: No, no en absoluto. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON Buchholtz-AU: Lo que importa es el orden dentro de la hoja de estilos CSS. 544 00:22:45,764 --> 00:22:47,430 AUDIENCIA: ¿Podría repetir la pregunta? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON Buchholtz-AU: Dentro clase, cuando se está dando clases 547 00:22:53,990 --> 00:22:56,964 a algo en el HTML, hace Importa qué orden están en? 548 00:22:56,964 --> 00:22:58,130 No importa el orden. 549 00:22:58,130 --> 00:23:02,915 Lo que importa es el orden de la selectores de clase dentro de su CSS, 550 00:23:02,915 --> 00:23:04,306 dentro de su hoja de estilos. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: Suena bien? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON Buchholtz-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: Y entonces vamos a continuar a-- 554 00:23:11,539 --> 00:23:13,330 ALLISON Buchholtz-AU: ¿Qué tenemos ahora? 555 00:23:13,330 --> 00:23:14,245 Me olvido. 556 00:23:14,245 --> 00:23:16,087 Oh, sólo tenemos ejemplos. 557 00:23:16,087 --> 00:23:17,295 Pero hemos tipo de hecho esos. 558 00:23:17,295 --> 00:23:18,990 Hemos hecho ejemplos sobre la marcha. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: Llegamos a combinar los selectores pronto. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON Buchholtz-AU: Oh, conseguimos combinar selectores. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: Así que algunos ejemplos es que tenemos 562 00:23:25,260 --> 00:23:29,630 # Libra dog-- o hashtag, o octothorpe, o lo que sea 563 00:23:29,630 --> 00:23:32,050 que desea llamar que-- agudo. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON Buchholtz-AU: Perro de Sharp. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Entonces usted tiene .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Algo tiene un id de perro, sólo hay un perro en la página. 568 00:23:41,600 --> 00:23:43,870 Algo tiene un id de gato, sólo hay un gato. 569 00:23:43,870 --> 00:23:45,665 Puede haber muchos animales domésticos en la página. 570 00:23:45,665 --> 00:23:47,570 Es por eso que hemos dado que las clases. 571 00:23:47,570 --> 00:23:48,740 Usted tiene un ejemplo de p. 572 00:23:48,740 --> 00:23:50,490 Y entonces lo que uno de los último ejemplo, que 573 00:23:50,490 --> 00:23:53,790 es algo que no hemos hablado, es lo que sucede cuando se combinan. 574 00:23:53,790 --> 00:23:54,580 Así p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Así que por eso, vamos a volver a la código e introducir another-- sí. 577 00:24:02,950 --> 00:24:04,290 Así que de vuelta aquí. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON Buchholtz-AU: I sentir que esto es realmente-- 579 00:24:04,850 --> 00:24:08,105 como mirando a través de ejemplos es realmente la manera de aprender esto. 580 00:24:08,105 --> 00:24:09,360 Así que eso es lo que estamos haciendo. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Así que vamos a pretender que sólo desea seleccionar texto 2, ¿verdad? 582 00:24:14,030 --> 00:24:16,530 Así que definitivamente no puede hacer eso con un id. 583 00:24:16,530 --> 00:24:19,620 Bueno, podríamos hacer eso con un id, pero no tiene un id. 584 00:24:19,620 --> 00:24:22,490 Podría añadir uno, pero vamos a suponer que yo no quiero añadir uno 585 00:24:22,490 --> 00:24:24,910 o que ya tiene algo más. 586 00:24:24,910 --> 00:24:26,516 Yo no puedo hacer eso con eso. 587 00:24:26,516 --> 00:24:28,870 La variable no es definitivamente único, ¿no? 588 00:24:28,870 --> 00:24:30,670 Y tampoco lo es la clase. 589 00:24:30,670 --> 00:24:32,314 Pero usted puede combinar estas cosas. 590 00:24:32,314 --> 00:24:35,230 Digamos que queríamos hacer algo que sólo se aplica a las cosas que 591 00:24:35,230 --> 00:24:39,420 tener la clase especial y que tienen la clase bonita. 592 00:24:39,420 --> 00:24:48,150 >> Así que lo que puede hacer es en main.css, se puede decir, primero vamos a eliminar esto. 593 00:24:48,150 --> 00:24:50,240 Puede combinar estos. 594 00:24:50,240 --> 00:24:51,430 Así que usted puede hacer .Special. 595 00:24:51,430 --> 00:24:52,110 No hay espacio. 596 00:24:52,110 --> 00:24:54,770 Sólo .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Lo que esto significa es algo que es tanto especial y bonita. 598 00:25:00,550 --> 00:25:01,900 ¿Tiene eso sentido? 599 00:25:01,900 --> 00:25:04,190 Y si vamos aquí, lo que vas a ver 600 00:25:04,190 --> 00:25:09,734 es esta regla sólo se aplica a la segundo, que tiene tanto de ellos. 601 00:25:09,734 --> 00:25:11,400 Y usted puede hacer eso por un montón de cosas. 602 00:25:11,400 --> 00:25:13,270 Puede decir-- vamos pretendo yo sólo quería 603 00:25:13,270 --> 00:25:18,300 para hacer cosas que tienen la clase bastante y que son también una etiqueta de párrafo. 604 00:25:18,300 --> 00:25:19,920 Así p.pretty. 605 00:25:19,920 --> 00:25:23,585 Vamos a pretender que yo tenía algo bonito en el cuerpo de la etiqueta. 606 00:25:23,585 --> 00:25:25,850 DE ACUERDO? 607 00:25:25,850 --> 00:25:28,490 Puedo ejecutar este y yo puede ver que es sólo 608 00:25:28,490 --> 00:25:32,720 va a aplicar a las cosas que son párrafos con la clase bastante. 609 00:25:32,720 --> 00:25:35,650 Y puede combinar estos, básicamente, como todas las que quieras. 610 00:25:35,650 --> 00:25:38,580 Así que usted puede ponerlos juntos. 611 00:25:38,580 --> 00:25:39,604 ¿Tiene eso sentido? 612 00:25:39,604 --> 00:25:41,770 ALLISON Buchholtz-AU: Así este tipo de es más útil 613 00:25:41,770 --> 00:25:45,490 cuando, Tomas estaba diciendo antes, tal vez usted tiene un sitio web muy complicado, 614 00:25:45,490 --> 00:25:48,050 y ya tiene mucho de estas normas escritas, 615 00:25:48,050 --> 00:25:51,170 y sólo tiene que combinar dos de delante. 616 00:25:51,170 --> 00:25:55,350 Al igual que en lugar de escribir en su conjunto nuevo selector y cambiar allí, 617 00:25:55,350 --> 00:25:58,592 usted puede combinar ellos donde se superponen. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: O podrían encontrar fuera-- veces 619 00:26:00,670 --> 00:26:04,290 hay una clase que hace que el color de la fuente, como el azul, 620 00:26:04,290 --> 00:26:06,740 y hay otra clase que hace que el azul de fondo. 621 00:26:06,740 --> 00:26:07,840 Y eso simplemente no va a funcionar. 622 00:26:07,840 --> 00:26:10,924 Así se escribe un caso especial, donde, como-- pero si tiene ambos, lo que estás 623 00:26:10,924 --> 00:26:13,548 vamos a hacer es que vamos a hacer de este uno este tono de azul 624 00:26:13,548 --> 00:26:15,310 y esta este otro tono de azul. 625 00:26:15,310 --> 00:26:15,580 Derecho? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON Buchholtz-AU: Bueno para ese tipo de excepciones. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Así que para pensar en problemas 628 00:26:21,220 --> 00:26:25,000 que pueden surgir cuando se combinan. 629 00:26:25,000 --> 00:26:27,020 Fresco. 630 00:26:27,020 --> 00:26:29,692 Así que de vuelta a nuestra presentación. 631 00:26:29,692 --> 00:26:31,400 ALLISON Buchholtz-AU: Ya casi hemos llegado. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: Y ha dejado de conexión. 633 00:26:34,022 --> 00:26:36,494 ALLISON Buchholtz-AU: Oh, no. 634 00:26:36,494 --> 00:26:39,125 ALLISON Buchholtz-AU: CS en la oficina, internet se cae. 635 00:26:39,125 --> 00:26:40,360 Oh, la ironía. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Así que, afortunadamente, podemos presente sin internet, supongo, 637 00:26:45,620 --> 00:26:47,380 porque tenemos todas las diapositivas aquí. 638 00:26:47,380 --> 00:26:49,304 Así que vamos a hablar de la relación de las etiquetas. 639 00:26:49,304 --> 00:26:50,470 ALLISON Buchholtz-AU: Correcto. 640 00:26:50,470 --> 00:26:52,660 Así que sólo un poco de ir fuera de lo que dijo Tomás, 641 00:26:52,660 --> 00:26:54,180 esto es sólo otra manera de hacerlo. 642 00:26:54,180 --> 00:26:57,840 Así que tenemos algunos de los padres selector con un selector de niño. 643 00:26:57,840 --> 00:27:02,815 Así que en este ejemplo aquí, tenemos algunos cuerpo con una barra de navegación de clase, de botones. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Oh, lo siento. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON Buchholtz-AU: Y Básicamente, lo que esto significa 647 00:27:06,180 --> 00:27:11,070 es seleccionar todos los niños, al igual que todos estos tipos de selectores, 648 00:27:11,070 --> 00:27:13,040 dentro de este selector de matriz. 649 00:27:13,040 --> 00:27:16,004 Y esos son los únicos lo que nunca va a aplicar. 650 00:27:16,004 --> 00:27:17,755 No sé si usted tener una mejor manera de-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Así que adivinar la forma de pensar 652 00:27:19,504 --> 00:27:22,440 de esto es recordar antes cómo que tipo de ellos como armamos. 653 00:27:22,440 --> 00:27:26,340 Y entonces eso significa que uno de los elementos que coincide con todos ellos. 654 00:27:26,340 --> 00:27:29,530 Lo que esto quiere decir es, yo desea hacer coincidir todo 655 00:27:29,530 --> 00:27:33,220 dentro some-- Quiero a encontrar un selector. 656 00:27:33,220 --> 00:27:35,670 Y luego dentro de eso, quiero se puede adaptar con cosas nuevas. 657 00:27:35,670 --> 00:27:36,170 Derecho? 658 00:27:36,170 --> 00:27:40,900 Así que en CSS, todo se trata de una especie de ser capaz de igualar estos artículos. 659 00:27:40,900 --> 00:27:43,050 Y usted puede tratar de igualar elementos dentro de otros artículos. 660 00:27:43,050 --> 00:27:46,510 >> Así que vamos a hacer realidad un ejemplo, y creemos que va a aclarar. 661 00:27:46,510 --> 00:27:53,090 Así que vamos a pretender que tenemos especial, especial bonita, lo que sea. 662 00:27:53,090 --> 00:27:55,690 Y luego tenemos un vínculo, ¿de acuerdo? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Así que recuerda, a es un enlace. 665 00:28:02,370 --> 00:28:03,900 No va a ir a ninguna parte. 666 00:28:03,900 --> 00:28:11,500 Y vamos a darle el enlace de clase, supongo. 667 00:28:11,500 --> 00:28:13,335 Vamos a darle la class-- darme una idea. 668 00:28:13,335 --> 00:28:14,460 ALLISON Buchholtz-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: COO- vamos ir por la clase bonita. 670 00:28:16,420 --> 00:28:16,930 Por qué no? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON Buchholtz-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: Así cosas ahora bonitas 673 00:28:23,040 --> 00:28:26,000 van a hacer el fondo azul, color de fondo de salmón. 674 00:28:26,000 --> 00:28:27,969 Eso tiene sentido. 675 00:28:27,969 --> 00:28:28,760 Y si lo hacemos esto-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON Buchholtz-AU: ¿Quieres añadir texto 677 00:28:29,620 --> 00:28:31,078 por lo que el hipervínculo en realidad aparece? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Eso sería una buena decisión. 679 00:28:35,088 --> 00:28:37,921 ALLISON Buchholtz-AU: Porque derecha ahora sólo vamos a conseguir nada. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Así que esto es un enlace. 681 00:28:39,690 --> 00:28:42,202 "Este es un enlace." 682 00:28:42,202 --> 00:28:45,820 Ah, y esto va ser otro enlace. 683 00:28:45,820 --> 00:28:47,280 Vamos a darle la clase "cool". 684 00:28:47,280 --> 00:28:50,295 Tienes razón. 685 00:28:50,295 --> 00:28:50,795 Fresco. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Así que ahora vamos a tomar esto. 688 00:28:56,010 --> 00:28:57,269 Vamos a lanzar una. 689 00:28:57,269 --> 00:28:59,060 Tenemos uno en el etiqueta especial, y también 690 00:28:59,060 --> 00:29:01,150 van a tener uno en la bonita etiqueta. 691 00:29:01,150 --> 00:29:05,449 Y ahora lo que vamos a hacer es que vamos a hacer cool-- 692 00:29:05,449 --> 00:29:06,490 ¿qué queremos que haga? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON Buchholtz-AU: ¿Podemos hacerlo más grande? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Vamos a darle una frontera. 696 00:29:13,800 --> 00:29:14,840 ALLISON Buchholtz-AU: Podríamos frontera. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Sí. 698 00:29:15,673 --> 00:29:18,560 Así que vamos a hacer algo como, es-- frontera y estamos 699 00:29:18,560 --> 00:29:20,971 va a explicar todo esto en un segundo. 700 00:29:20,971 --> 00:29:21,470 Por ahora-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON Buchholtz-AU: Para el modelo de caja. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Pero por ahora, estamos sólo va a darle una frontera. 703 00:29:27,300 --> 00:29:29,580 Así que lo que esto significa es que eres van a ver estos enlaces. 704 00:29:29,580 --> 00:29:32,788 Y vas a ver que tienen estos, como, bordes negros feos, que 705 00:29:32,788 --> 00:29:33,820 es fresco. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON Buchholtz-AU: Nuestro sitio web es tan bonita. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Sí. 708 00:29:35,333 --> 00:29:38,930 Nuestro sitio web es impresionante. 709 00:29:38,930 --> 00:29:41,585 Así que estos dos son enlaces, y ellos aparecen. 710 00:29:41,585 --> 00:29:44,160 Ahora vamos a pretender que sólo quería hacer esto 711 00:29:44,160 --> 00:29:50,072 si no fuera dentro de algo que tenía un fondo de salmón. 712 00:29:50,072 --> 00:29:52,280 Así que recuerde que éste tiene un fondo de salmón, 713 00:29:52,280 --> 00:29:54,000 porque es de clase bastante. 714 00:29:54,000 --> 00:29:59,777 >> Pero queremos decir que sólo se enfría que están en clase especial, no en clase 715 00:29:59,777 --> 00:30:02,890 bastante, debe tener esa frontera. 716 00:30:02,890 --> 00:30:12,549 Bueno, lo que puede hacer usted es puede decir, .Special, espacio, .cool. 717 00:30:12,549 --> 00:30:15,590 Y lo que está haciendo, cuando se piensa al respecto, es que está diciendo básicamente, 718 00:30:15,590 --> 00:30:19,530 Bien, me encontrará todo que coincide especial. 719 00:30:19,530 --> 00:30:24,104 Luego, dentro de esas etiquetas, encontrar mí todo eso está bien. 720 00:30:24,104 --> 00:30:27,270 ALLISON Buchholtz-AU: Así que de otra manera que podría ser bueno para pensar en esto, 721 00:30:27,270 --> 00:30:29,810 traer de vuelta a C, es al igual que la idea de su alcance. 722 00:30:29,810 --> 00:30:34,020 Así que cuando usted tiene alguna selector, como los que se 723 00:30:34,020 --> 00:30:38,460 que hemos estado trabajando para antes de esto, su página web completa, todos los de su HTML 724 00:30:38,460 --> 00:30:40,180 está dentro de su alcance, ¿no? 725 00:30:40,180 --> 00:30:43,090 Pero cuando tenemos estos las relaciones entre padres e hijos, 726 00:30:43,090 --> 00:30:47,130 es como si usted está estrechamiento donde lo que busca es un lugar específico, 727 00:30:47,130 --> 00:30:50,540 como si, al igual que, estamos buscando dentro una función específica en vez 728 00:30:50,540 --> 00:30:52,007 de todo nuestro archivo. 729 00:30:52,007 --> 00:30:55,090 AUDIENCIA: Así que con eso en mente, lo haría que hubiera importado si tuviéramos transformados, 730 00:30:55,090 --> 00:30:56,423 ALLISON Buchholtz-AU: El orden? 731 00:30:56,423 --> 00:30:59,320 AUDIENCIA: --la clase en CSS a .cool, espacio, .Special? 732 00:30:59,320 --> 00:31:01,153 ALLISON Buchholtz-AU: Sí, porque entonces eso 733 00:31:01,153 --> 00:31:04,420 diría, alcance a todo lo que tiene fresco, 734 00:31:04,420 --> 00:31:07,235 y luego mirar lo has-- Quiero decir, como, en este caso, 735 00:31:07,235 --> 00:31:08,860 Yo no creo que hubiera cambiado. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Si nos había dicho qué? 737 00:31:10,318 --> 00:31:10,906 Lo siento. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON Buchholtz-AU: Si alcance que se enfríe y luego 739 00:31:12,660 --> 00:31:14,550 buscar cosas de especial, sería el mismo, en realidad. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Así que no sería. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON Buchholtz-AU: No lo haría? 742 00:31:16,590 --> 00:31:17,590 Oh, oh bien. 743 00:31:17,590 --> 00:31:18,090 Estoy equivocado. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Así que la razón es diferente-- mistake-- común 745 00:31:21,480 --> 00:31:27,140 es que en este momento sólo el enlace tiene frío, ¿verdad? 746 00:31:27,140 --> 00:31:32,176 Creo que mi pregunta para ustedes es, lo que en esta página se corresponde con .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Hay dos etiquetas aquí, ¿verdad? 749 00:31:38,340 --> 00:31:39,770 ¿Cuál es éste y éste. 750 00:31:39,770 --> 00:31:40,590 Ambos coinciden fresco. 751 00:31:40,590 --> 00:31:42,200 Nada más lo hace. 752 00:31:42,200 --> 00:31:46,460 Así que si usted ha dicho, .cool, espacio, .Special, lo que vas a decir es, 753 00:31:46,460 --> 00:31:48,824 dentro de estas etiquetas, ¿qué tiene de especial? 754 00:31:48,824 --> 00:31:49,865 ALLISON Buchholtz-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Eso es lo que it-- derecha. 756 00:31:51,800 --> 00:31:52,310 Porque es como algo aquí. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: Así que selecciona nada. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON Buchholtz-AU: Mientras que con especial, estamos dentro de estas etiquetas aquí. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: Aquellos y aquellas. 760 00:31:57,971 --> 00:31:58,512 AUDIENCIA: OK. 761 00:31:58,512 --> 00:31:58,920 Así que esas etiquetas de la barra diagonal? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Sí. 763 00:31:59,740 --> 00:32:01,150 ¿Tiene eso sentido? 764 00:32:01,150 --> 00:32:03,685 ¿Cómo es, básicamente, tratando de reducir su alcance. 765 00:32:03,685 --> 00:32:04,810 ALLISON Buchholtz-AU: Sí. 766 00:32:04,810 --> 00:32:06,870 Creo que eso es probablemente la manera más fácil de pensar en ello. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: Así que nos pareció, y encontramos este tanto igualó especial. 768 00:32:09,270 --> 00:32:11,400 Y entonces lo que estamos pidiendo, dentro estos chicos, lo que es genial? 769 00:32:11,400 --> 00:32:12,941 Y dentro de ésta, fresco de éste. 770 00:32:12,941 --> 00:32:14,500 Dentro de éste, nada está bien. 771 00:32:14,500 --> 00:32:16,250 Así que esta es la única etiqueta que queda. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON Buchholtz-AU: Considerando fresco es sólo dentro de estas etiquetas a allí. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Exactamente. 774 00:32:21,070 --> 00:32:22,403 Y lo que es especial dentro de esos? 775 00:32:22,403 --> 00:32:22,930 Nada. 776 00:32:22,930 --> 00:32:25,270 Ahora, ¿qué voy a decir es si no había espacio, 777 00:32:25,270 --> 00:32:29,880 usted está pidiendo lo que es fresco y especial-- o lo que es bonito y especial, ¿verdad? 778 00:32:29,880 --> 00:32:35,370 Si dices .special.pretty, eso es el mismo que .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Porque lo que la eliminación del espacio es pidiendo es, cuando usted dice .Special, 780 00:32:39,220 --> 00:32:40,970 usted está pidiendo, OK, cuáles son especiales? 781 00:32:40,970 --> 00:32:43,780 Y luego, por los que queridos también son bastante, 782 00:32:43,780 --> 00:32:47,010 que es el mismo, gramaticalmente, como preguntar, ¿cuál es bonita, 783 00:32:47,010 --> 00:32:49,500 y después de ellos, lo que también es especial? 784 00:32:49,500 --> 00:32:50,000 Derecho? 785 00:32:50,000 --> 00:32:53,099 Es la diferencia de lo que hay dentro de lo que es. 786 00:32:53,099 --> 00:32:53,640 AUDIENCIA: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Sí. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Impresionante. 790 00:32:58,030 --> 00:33:00,426 Así que con eso en mente entonces-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON Buchholtz-UA: Creo que nuestro último cosa es (en Fantasía BRITISH ACCENT) 792 00:33:01,800 --> 00:33:02,510 el modelo de caja. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: El box-- [CHUCKLES] Me encanta la forma Allison dice eso. 794 00:33:05,992 --> 00:33:06,950 Así que la cosa modelo de caja. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON Buchholtz-AU: Sólo tienen una caja, seré su modelo de caja. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Así que vamos a hablar de eso. 797 00:33:11,310 --> 00:33:14,070 Así que ahora que hemos pasado mucho tiempo hablando de selectores. 798 00:33:14,070 --> 00:33:16,944 Por ahora, ustedes son probablemente, como, maestros de selectors-- sabes, 799 00:33:16,944 --> 00:33:21,510 cómo seleccionar exactamente el contenido que que desea manipular en la pantalla. 800 00:33:21,510 --> 00:33:24,740 >> Así que ahora la pregunta es, ¿cómo exactamente se puede manipularlo? 801 00:33:24,740 --> 00:33:27,010 Así que supongo que el más básico manera de pensar en eso 802 00:33:27,010 --> 00:33:30,294 es, bueno, ¿qué es exactamente es un elemento de CSS? 803 00:33:30,294 --> 00:33:32,585 Hemos pasado mucho tiempo hablando, lo que es una etiqueta, 804 00:33:32,585 --> 00:33:36,140 o lo que es lo más básico representación de una etiqueta? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Una buena manera de pensar es decir, ¿qué forma es el salmón? 807 00:33:45,170 --> 00:33:47,295 ¿Qué forma tiene, como, el salmón de color de fondo? 808 00:33:47,295 --> 00:33:47,880 >> AUDIENCIA: Es un rectángulo. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: Es un rectángulo, ¿verdad? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON Buchholtz-AU: ¿No era una pregunta capciosa. 811 00:33:50,956 --> 00:33:51,870 [Risas] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: No intentar para engañar a ustedes esta tarde. 813 00:33:54,670 --> 00:33:57,510 Así que tenemos este rectángulo. 814 00:33:57,510 --> 00:33:59,140 Y la etiqueta es una p, ¿verdad? 815 00:33:59,140 --> 00:34:02,280 Así nos da buena creencia de que el párrafo 816 00:34:02,280 --> 00:34:07,440 se representa como un rectángulo, en menos en la mente del navegador, que 817 00:34:07,440 --> 00:34:08,715 que es. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON Buchholtz-AU: Quiero decir, navegadores son típicamente rectangular, 819 00:34:11,423 --> 00:34:13,440 así que tiene sentido. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: La idea aquí es que todas las etiquetas dentro de CSS 821 00:34:18,750 --> 00:34:21,790 se representan como un rectángulo. 822 00:34:21,790 --> 00:34:25,699 Y cada rectángulo tiene cuatro partes de acuerdo al CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Usted tiene el contenido real. 824 00:34:27,830 --> 00:34:29,644 Ahí es donde se encuentra el texto. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON Buchholtz-AU: Tal vez su imagen. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Sí. 827 00:34:31,303 --> 00:34:33,860 Usted tiene relleno, que es sólo una especie de espacio en blanco. 828 00:34:33,860 --> 00:34:35,085 Entonces usted tiene un borde. 829 00:34:35,085 --> 00:34:37,710 Y entonces usted tiene margen, que es el espacio en blanco fuera de eso. 830 00:34:37,710 --> 00:34:39,460 Así que no tiene sentido a cualquier persona, por lo que estamos 831 00:34:39,460 --> 00:34:42,500 vamos a hablar de eso por un segundo. 832 00:34:42,500 --> 00:34:47,570 Así que aquí, lo que vamos a hacer Somos nosotros los vamos a crear algunos divs, OK? 833 00:34:47,570 --> 00:34:48,420 Discúlpame mientras yo-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON Buchholtz-AU: Me siento como debemos poner una foto linda en. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: Definitivamente debería. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON Buchholtz-AU: Siento que todo el mundo 837 00:34:53,389 --> 00:34:54,870 podrían beneficiarse de una linda foto, es todo. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: ¿Podemos todos se benefician de A-- 839 00:34:56,774 --> 00:34:57,648 >> AUDIENCIA: Sí, claro. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, fresco. 841 00:34:58,790 --> 00:35:02,254 Así que debemos poner un lindo imagen en alguna parte. 842 00:35:02,254 --> 00:35:05,295 ALLISON Buchholtz-AU: Me siento como un conejito lindo podría ser útil en este momento. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Seguro. 844 00:35:06,190 --> 00:35:06,950 ALLISON Buchholtz-AU: Fin de la semana. 845 00:35:06,950 --> 00:35:07,390 Si tiene algo adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: ¿Cómo combate un gatito? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON Buchholtz-AU: Un gatito funciona, también. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, porque hay un sitio para eso. 849 00:35:11,300 --> 00:35:12,300 Se llama PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON Buchholtz-AU: Eso es genial. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Sí. 852 00:35:15,510 --> 00:35:18,040 ALLISON Buchholtz-AU: Sólo para, como, imágenes de marcador de posición en su sitio web. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 También hay PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 Y hay PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON Buchholtz-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 ¿En serio? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, no lo hacemos tener acceso a internet. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON Buchholtz-AU: [GEMIDOS] 860 00:35:29,875 --> 00:35:30,375 Trágica. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: De lo contrario, Yo te había de mostrar chicos 862 00:35:32,333 --> 00:35:33,870 cómo poner imágenes en su sitio web. 863 00:35:33,870 --> 00:35:36,370 Vamos a tratar de conseguir este trabajar antes de que tengamos que ir. 864 00:35:36,370 --> 00:35:38,660 Pero por ahora, sólo estamos va a hablar en colores entonces. 865 00:35:38,660 --> 00:35:39,820 Queremos poner fotos de kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON Buchholtz-AU: Lo hicimos. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: --el de internet abajo por el momento ser. 868 00:35:43,110 --> 00:35:47,820 Así que tenemos dos divs, y estamos les va a dar dos identificadores. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Vamos a llamarlo "Primera" y "segunda". 871 00:35:56,760 --> 00:36:01,184 Así que id = "primero". 872 00:36:01,184 --> 00:36:02,850 Y vamos a darles dos colores. 873 00:36:02,850 --> 00:36:08,424 Entonces, ¿cómo seleccionamos algo con un id de "primero"? 874 00:36:08,424 --> 00:36:09,840 ALLISON Buchholtz-AU: Dot o hachís? 875 00:36:09,840 --> 00:36:10,730 AUDIENCIA: Agudo. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, perfecto. 877 00:36:12,940 --> 00:36:14,950 Sharp, hachís, lo nosotros-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON Buchholtz-AU: Hay muchas cosas que llaman. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Vamos a resolver el hashtag, y eso es lo que vamos a ir con. 881 00:36:19,800 --> 00:36:20,300 DE ACUERDO? 882 00:36:20,300 --> 00:36:20,735 >> ALLISON Buchholtz-AU: Hashtag. 883 00:36:20,735 --> 00:36:22,340 >> TOMAS REIMERS: Así hashtag del primero. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON Buchholtz-AU: Así puedes tuitear la seminar-- 885 00:36:24,506 --> 00:36:27,582 CSS hashtag, hashtag fresco. 886 00:36:27,582 --> 00:36:29,040 TOMAS REIMERS: Hashtag Awesomeness. 887 00:36:29,040 --> 00:36:30,730 ALLISON Buchholtz-AU: Hashtag Awesomeness, sí. 888 00:36:30,730 --> 00:36:31,480 TOMAS REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 Así que tenemos "primera" y "segunda". 890 00:36:33,660 --> 00:36:37,697 Así que primero, vamos a tener un color de fondo de color rojo. 891 00:36:37,697 --> 00:36:39,030 ALLISON Buchholtz-AU: Uh, colon. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Así es. 893 00:36:40,281 --> 00:36:42,281 ALLISON Buchholtz-AU: Seré tu punto ortográfico. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison me tiene. 895 00:36:43,960 --> 00:36:45,830 Antecedentes color de blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: púrpura! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Púrpura. 898 00:36:47,726 --> 00:36:48,830 ALLISON Buchholtz-AU: Sí. 899 00:36:48,830 --> 00:36:50,630 Mi color favorito de púrpura, y no hemos utilizado todavía. 900 00:36:50,630 --> 00:36:51,546 >> TOMAS REIMERS: Violeta. 901 00:36:51,546 --> 00:36:53,361 ALLISON Buchholtz-AU: Violeta. 902 00:36:53,361 --> 00:36:53,860 Eso funciona. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: Así que estamos va a tener dos divs. 905 00:36:59,880 --> 00:37:01,654 Ellos van a estar totalmente vacío. 906 00:37:01,654 --> 00:37:03,070 Probablemente deberíamos tener un poco de texto. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Así que "primero" va a ser "HOLA". 909 00:37:09,815 --> 00:37:10,940 Y la "segunda" se decir-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON Buchholtz-AU: Adiós. 911 00:37:11,110 --> 00:37:12,514 >> AUDIENCIA: - "MUNDO". 912 00:37:12,514 --> 00:37:14,122 Hola, adiós. 913 00:37:14,122 --> 00:37:16,580 ALLISON Buchholtz-AU: Vi en concierto la otra semana. 914 00:37:16,580 --> 00:37:17,705 TOMAS REIMERS: The Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON Buchholtz-AU: Para reales. 916 00:37:20,242 --> 00:37:21,200 No son tan grandes. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 No me gusta. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Disponemos "Hola" y "adiós". 920 00:37:26,060 --> 00:37:29,102 Y de nuevo, CSS es simplemente impresionante, porque reconoce nuestros colores. 921 00:37:29,102 --> 00:37:30,810 No necesita ni siquiera se preocupan de que ellos existen. 922 00:37:30,810 --> 00:37:33,194 Lo hacen. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON Buchholtz-AU: Ellos existen. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Así CSS creo que tiene 255 palabras para hablar de color. 925 00:37:39,560 --> 00:37:42,986 Si usted puede pensar en un color exterior los 255, al igual que, me habrá impresionado. 926 00:37:42,986 --> 00:37:44,110 ALLISON Buchholtz-AU: Sí. 927 00:37:44,110 --> 00:37:45,560 Creo que ustedes pueden tener acaba de llegar justo después. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: Así que aquí, usted verá que tenemos dos cajas 929 00:37:47,727 --> 00:37:49,143 justo encima de uno al otro, ¿no? 930 00:37:49,143 --> 00:37:50,200 Hola y adiós. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON Buchholtz-AU: No hay espacio en el medio. 932 00:37:51,460 --> 00:37:53,390 Sólo están smooshed derecho en la parte superior de la otra. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Así que lo primero Yo creo que deberíamos hablar 934 00:37:55,973 --> 00:38:02,960 es también vamos a decir--, sí. 935 00:38:02,960 --> 00:38:08,020 Así CSS los representa como una especie de cajas. 936 00:38:08,020 --> 00:38:10,100 Y como cajas, que tienen contenido. 937 00:38:10,100 --> 00:38:14,540 Y el contenido ahora es una especie de el HOLA o el adiós y eso es todo. 938 00:38:14,540 --> 00:38:15,040 DE ACUERDO? 939 00:38:15,040 --> 00:38:19,790 >> Así que una de las primeras cosas que que puedo hacer es que usted puede agregar relleno. 940 00:38:19,790 --> 00:38:25,610 Relleno dice cuánto espacio debería dejar a cada lado. 941 00:38:25,610 --> 00:38:29,200 Así que digamos que quiero decir 10 píxeles en cada lado. 942 00:38:29,200 --> 00:38:31,234 Y voy a diseccionar que en un segundo. 943 00:38:31,234 --> 00:38:33,150 ALLISON Buchholtz-AU: Todas estas cosas aquí 944 00:38:33,150 --> 00:38:36,980 van a ser en su mayoría en píxeles para el resto del seminario. 945 00:38:36,980 --> 00:38:40,980 Vas a ver que tiene un poco de espacio a su alrededor, ¿verdad? 946 00:38:40,980 --> 00:38:46,360 Así que lo que no se ve aquí es que hay este tipo invisible de relleno 947 00:38:46,360 --> 00:38:49,600 en cada lado, lo que dice, como, Bueno, usted tiene su cuadro de content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON Buchholtz-AU: ¿Usted desea simplemente tire hacia arriba el elemento inspeccionar? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Sí, eso es una buena idea. 950 00:38:53,659 --> 00:38:56,700 ALLISON Buchholtz-AU: Además, me parece que el elemento de inspeccionar es una buena manera 951 00:38:56,700 --> 00:39:01,280 averiguar si algo está pasando mal, algo inesperado sucede, 952 00:39:01,280 --> 00:39:04,570 inspeccionar las etiquetas y ver qué es como sobrescribe es útil. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Así que no estoy seguro si ustedes pueden ver este color. 954 00:39:05,940 --> 00:39:06,470 ¿Se puede? 955 00:39:06,470 --> 00:39:10,120 Verá este relleno sobre el tipo de borde. 956 00:39:10,120 --> 00:39:13,410 Y entonces se ve la real contenido en azul, ¿verdad? 957 00:39:13,410 --> 00:39:16,820 Así que esa es la misma conceptos básicos del modelo de caja. 958 00:39:16,820 --> 00:39:17,674 Usted tiene contenido. 959 00:39:17,674 --> 00:39:18,590 Entonces usted tiene relleno. 960 00:39:18,590 --> 00:39:20,440 >> AUDIENCIA: ¿Por qué no simplemente utilizar el cuadro interior el-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON Buchholtz-AU: Correcto. 962 00:39:21,606 --> 00:39:24,745 Debido a que se acaba de seleccionar el elemento en este momento. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Así es. 964 00:39:26,050 --> 00:39:27,060 Otras cosas. 965 00:39:27,060 --> 00:39:29,780 Así que vamos a hablar de eso comando relleno por un segundo. 966 00:39:29,780 --> 00:39:36,380 Así que en CSS, mediciones necesita tener una unidad. 967 00:39:36,380 --> 00:39:39,740 Así que primero usted tiene la cantidad. 968 00:39:39,740 --> 00:39:41,460 Así que en este caso, lo hemos dicho 10. 969 00:39:41,460 --> 00:39:44,780 Y luego la siguiente Lo hemos dicho es el píxel, píxeles. 970 00:39:44,780 --> 00:39:49,160 Otros que pueda tener son cosas como centímetros, pulgadas. 971 00:39:49,160 --> 00:39:51,367 Usted puede hacer cosas como: lo que es de 10 pulgadas? 972 00:39:51,367 --> 00:39:52,700 Y va a ser ridículo. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON Buchholtz-AU: Oh, muchacho. 974 00:39:52,990 --> 00:39:53,460 >> AUDIENCIA: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS Y ALLISON: Sí. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Para que todo el relleno. 977 00:39:57,840 --> 00:39:59,255 Voy a volver a píxeles. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON Buchholtz-AU: Píxeles tienden a ser, al igual que, la norma. 979 00:40:01,754 --> 00:40:04,589 Cuando nos fijamos en un montón de sitios web, que en su mayoría trabajan en píxeles. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Así que vamos a ver ya sea pixels-- los demás los que se ven 981 00:40:07,755 --> 00:40:13,952 es EM, que es una em es igual a la altura de la fuente 982 00:40:13,952 --> 00:40:15,160 que usted está utilizando actualmente. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON Buchholtz-AU: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 TOMAS REIMERS: Es una buena manera de decir, como, yo quiero tanto espacio como mi fuente 986 00:40:20,740 --> 00:40:21,514 es tomar. 987 00:40:21,514 --> 00:40:23,180 ALLISON Buchholtz-AU: No sabía eso. 988 00:40:23,180 --> 00:40:25,747 Se aprende algo nuevo cada día. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Hay una gran cantidad de mediciones en CS. 990 00:40:27,955 --> 00:40:29,260 Le sugiero que busque para arriba. 991 00:40:29,260 --> 00:40:32,122 Para todos sus casos, creo que píxeles deben ser suficientes. 992 00:40:32,122 --> 00:40:33,830 Y son también lo que vas a ver 993 00:40:33,830 --> 00:40:36,520 en la mayoría de los ejemplos se hace en línea. 994 00:40:36,520 --> 00:40:38,320 Así que lo dejaremos en píxeles. 995 00:40:38,320 --> 00:40:42,420 >> También puede, yo deberíamos decir-- así establecerá el relleno de todos los rellenos. 996 00:40:42,420 --> 00:40:49,789 También puede hacer algo como "Padding-top" que sólo definido-- 997 00:40:49,789 --> 00:40:52,080 ALLISON Buchholtz-AU: Tal vez nos pondremos nuestro "HOLA" de nuevo. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to acaba de establecer la acolchado en la parte superior y nada más. 999 00:40:55,480 --> 00:40:59,560 Así que los cuatro comandos son padding-top, padding-bottom, left-padding, 1000 00:40:59,560 --> 00:41:00,310 y padding-derecha. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON Buchholtz-AU: Al igual que se puede esperar de una caja. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Sí. 1003 00:41:03,530 --> 00:41:05,240 Nada demasiado loco allí. 1004 00:41:05,240 --> 00:41:08,230 ¿Tiene eso sentido? 1005 00:41:08,230 --> 00:41:11,990 Así que ese es el relleno. 1006 00:41:11,990 --> 00:41:14,110 Yo voy a poner todo los rellenos de nuevo a 10. 1007 00:41:14,110 --> 00:41:17,010 Y luego me voy a pasar a la frontera. 1008 00:41:17,010 --> 00:41:21,130 >> Entonces, ¿cuál es la frontera es frontera es una orden extraña. 1009 00:41:21,130 --> 00:41:24,450 Lleva una especie de tres cosas a la vez. 1010 00:41:24,450 --> 00:41:28,930 Así que lo primero es lo grande que quiero que sea como una medición. 1011 00:41:28,930 --> 00:41:30,662 Una vez más, sólo estoy usando píxeles. 1012 00:41:30,662 --> 00:41:32,620 Y lo último que debe agregar a las mediciones 1013 00:41:32,620 --> 00:41:35,270 es la única cosa que no necesita una unidad es 0. 1014 00:41:35,270 --> 00:41:37,390 En realidad es incorrecto para dar una unidad 0, 1015 00:41:37,390 --> 00:41:41,940 porque 0 es 0 pulgadas a través de, píxeles, centímetros, lo que sea. 1016 00:41:41,940 --> 00:41:43,960 Todo Sólo significa 0, ¿verdad? 1017 00:41:43,960 --> 00:41:46,710 Así que primero le das la medición. 1018 00:41:46,710 --> 00:41:48,650 >> Entonces usted le da el estilo. 1019 00:41:48,650 --> 00:41:49,869 Así que voy a decir "sólido". 1020 00:41:49,869 --> 00:41:51,410 Y vamos a hablar de lo que eso significa. 1021 00:41:51,410 --> 00:41:54,290 Y luego, por último, que le dan un color. 1022 00:41:54,290 --> 00:41:56,850 Así que voy a decir "negro". 1023 00:41:56,850 --> 00:41:59,637 Y estas son todas cosas que hemos ahora visto antes, excepto por el estilo, 1024 00:41:59,637 --> 00:42:00,720 pero ya hablaremos de eso. 1025 00:42:00,720 --> 00:42:04,120 Así que ustedes han visto las mediciones, y has visto los colores. 1026 00:42:04,120 --> 00:42:10,410 Y lo que pasa es que conseguimos este bonito borde negro alrededor de él, ¿verdad? 1027 00:42:10,410 --> 00:42:11,620 Ustedes ven cómo lo hicimos? 1028 00:42:11,620 --> 00:42:12,760 >> AUDIENCIA: Sí. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Entonces, ¿qué es eso? 1031 00:42:17,370 --> 00:42:19,160 Así que primero de todo, es un píxel. 1032 00:42:19,160 --> 00:42:20,880 Eso es evidente por sí mismo lo suficiente, ¿no? 1033 00:42:20,880 --> 00:42:23,254 Al igual, que es un píxel de grosor. 1034 00:42:23,254 --> 00:42:26,170 ¿O sería un píxel, pero estoy el zoom, así que es un poco más 1035 00:42:26,170 --> 00:42:26,490 que eso. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON Buchholtz-AU: Y tenemos esta resolución TV ridículo. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Sí. 1038 00:42:29,460 --> 00:42:33,640 Puede hacerlo más grande, más pequeño, lo que sea. 1039 00:42:33,640 --> 00:42:35,630 Así que aquí está una frontera de dos píxeles. 1040 00:42:35,630 --> 00:42:38,810 Verás que es el doble de grueso. 1041 00:42:38,810 --> 00:42:40,172 Lo siguiente que tienes es el color. 1042 00:42:40,172 --> 00:42:41,130 Eso no es interesante. 1043 00:42:41,130 --> 00:42:42,710 No voy a hablar sobre eso, de verdad. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON Buchholtz-AU: Pero el estilo podría ser un poco interesante. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Sí. 1046 00:42:45,980 --> 00:42:48,560 Así estilo, hay pocos que veo de uso común. 1047 00:42:48,560 --> 00:42:55,690 Sólidos, del próximo Primero de uno puntos y trazos del pasado de uno. 1048 00:42:55,690 --> 00:42:59,290 Y aquí está salpicada. 1049 00:42:59,290 --> 00:43:02,980 Verás que son un montón de puntos, ¿no? 1050 00:43:02,980 --> 00:43:09,030 Una buena manera de conseguir una especie de frontera agradable va, guiones son también muy populares. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON Buchholtz-AU: Y luego, por supuesto, estoy 1053 00:43:13,600 --> 00:43:16,660 Seguro que hay un montón otra estilos que usted puede conseguir. 1054 00:43:16,660 --> 00:43:20,000 Y tenemos un gran conjunto de enlaces al final para ustedes 1055 00:43:20,000 --> 00:43:23,470 al tipo de leer detenidamente y mirar CSS más fresco. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: Y entonces la última cosa, estamos 1057 00:43:25,954 --> 00:43:27,870 vamos a hablar de la modelos de cajas muy rápido. 1058 00:43:27,870 --> 00:43:30,070 Ah, y luego frontera, exactamente como relleno, 1059 00:43:30,070 --> 00:43:33,270 usted también tiene cosas como border-left, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, que le permitirá para llegar a una frontera específica. 1061 00:43:37,590 --> 00:43:40,650 Así que aquí es sólo la frontera definida izquierda. 1062 00:43:40,650 --> 00:43:43,060 ¿Eso tiene sentido? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON Buchholtz-AU: Es un lugar fresco manera de enfatizar las cosas o añadir 1064 00:43:46,170 --> 00:43:47,545 líneas entre los diferentes elementos. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Por supuesto. 1066 00:43:48,670 --> 00:43:50,940 Así que esa es nuestra frontera. 1067 00:43:50,940 --> 00:43:52,790 Y el margen de la última de uno. 1068 00:43:52,790 --> 00:43:55,892 Como relleno de Margen Excepto que no es within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON Buchholtz-AU: Es no alrededor de su elemento 1070 00:43:57,975 --> 00:44:00,840 pero en realidad alrededor de la entera cuadro que hemos estado viendo. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Sí. 1072 00:44:02,770 --> 00:44:04,090 Allison dijo que la perfección. 1073 00:44:04,090 --> 00:44:07,550 No es, como, dentro de su elemento, que es alrededor de la caja entera. 1074 00:44:07,550 --> 00:44:10,900 Eso significa cosas como fondo no se aplican a él. 1075 00:44:10,900 --> 00:44:13,550 Y, básicamente, dice, como, yo no quiero nada 1076 00:44:13,550 --> 00:44:15,230 en este espacio para mí. 1077 00:44:15,230 --> 00:44:17,470 Así como tenemos aquí un margen de 10 píxeles. 1078 00:44:17,470 --> 00:44:23,100 Así que nada dentro de 10 píxeles debe estar a mi lado. 1079 00:44:23,100 --> 00:44:26,210 Eso es algo de su espacio, pero como que no. 1080 00:44:26,210 --> 00:44:29,215 Así que esa es la misma conceptos básicos del modelo de caja. 1081 00:44:29,215 --> 00:44:30,090 ¿Tiene eso sentido? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Fresco, fresco. 1084 00:44:34,550 --> 00:44:35,800 ALLISON Buchholtz-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Así que ahora creo que sólo Contamos con recursos frescos 1086 00:44:37,890 --> 00:44:41,220 que te llevaremos chicos a través de muy rápidamente. 1087 00:44:41,220 --> 00:44:44,815 Y vamos a actually-- bien, tenemos internet todavía? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS Reimers: Vamos a ver si puedo abrir up-- 1089 00:44:47,860 --> 00:44:50,040 déjame ver si puedo puede conseguir Internet rápidamente 1090 00:44:50,040 --> 00:44:53,317 mientras Allison habla de cualquier cosa Allison quiere hablar. 1091 00:44:53,317 --> 00:44:55,150 ALLISON Buchholtz-AU: Así basically-- no lo hago 1092 00:44:55,150 --> 00:44:57,930 sé qué más puedo decir en este momento. 1093 00:44:57,930 --> 00:45:01,340 Pero estas son algunas muy buenos recursos. 1094 00:45:01,340 --> 00:45:04,629 Estos son los que Tomas y he usado 1095 00:45:04,629 --> 00:45:06,420 y que en realidad utilizado para preparar para esto. 1096 00:45:06,420 --> 00:45:09,940 W3Schools es uno que chicos deberían haber visto antes. 1097 00:45:09,940 --> 00:45:12,440 Lo recomendamos para una muchas cosas con CSS. 1098 00:45:12,440 --> 00:45:15,060 Sé lo recomiendo a mi sección todo el tiempo. 1099 00:45:15,060 --> 00:45:21,050 >> Una de las grandes cosas es que que permite a clase de lío con CSS 1100 00:45:21,050 --> 00:45:23,830 y ver los cambios instantáneamente en este, 1101 00:45:23,830 --> 00:45:25,920 como, doble ventana de vista que tiene. 1102 00:45:25,920 --> 00:45:29,980 Así que usted no tiene que preocuparse de la creación de su propia página web, 1103 00:45:29,980 --> 00:45:33,090 o la creación de host virtual en su aparato local y host local, 1104 00:45:33,090 --> 00:45:34,980 y conseguir todas esas cosas de trabajo. 1105 00:45:34,980 --> 00:45:36,830 Está incrustado justo dentro de la página. 1106 00:45:36,830 --> 00:45:39,042 >> Y tiene estos pequeños lecciones que pueda 1107 00:45:39,042 --> 00:45:40,750 pasar por aprender más sobre selectores, 1108 00:45:40,750 --> 00:45:44,610 o aprender acerca de la manipulación de su fuente, o un fondo o una imagen. 1109 00:45:44,610 --> 00:45:46,990 Y usted tiene estos resultados instantáneos que 1110 00:45:46,990 --> 00:45:49,310 no tienen que hacer ningún otro trabajo de preparación para. 1111 00:45:49,310 --> 00:45:51,060 Así que me encanta W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Es fabuloso. 1113 00:45:51,960 --> 00:45:52,670 ¿Está funcionando? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Sí. 1115 00:45:52,950 --> 00:45:53,720 No, no lo es. 1116 00:45:53,720 --> 00:45:55,636 ¿Quieres que yo trate y reinicie el ordenador? 1117 00:45:55,636 --> 00:45:56,410 ¿O queremos a-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON Buchholtz-AU: Quiero decir, bueno, esto también estará en línea. 1119 00:46:01,490 --> 00:46:02,740 Todas las diapositivas estarán en línea. 1120 00:46:02,740 --> 00:46:05,470 Así que sólo recomiendo encarecidamente hacer esto. 1121 00:46:05,470 --> 00:46:07,880 >> Esto es grande como se acaba como una hoja de trucos. 1122 00:46:07,880 --> 00:46:10,690 Es sólo todo el básico comandos que usted tiene. 1123 00:46:10,690 --> 00:46:13,070 Es genial cuando estás primero partiendo de su sitio web. 1124 00:46:13,070 --> 00:46:15,080 Porque tal vez no lo hace quiero entrar en todos 1125 00:46:15,080 --> 00:46:17,355 el verdadero meollo de la cuestión diseño pesado cosas. 1126 00:46:17,355 --> 00:46:20,230 Sólo tiene que formatear de una manera que tipo de tiene sentido y la voluntad 1127 00:46:20,230 --> 00:46:21,490 hacer por el momento. 1128 00:46:21,490 --> 00:46:23,580 Y si realmente quieres para entrar en ella, lo sé 1129 00:46:23,580 --> 00:46:27,240 esto es, como, uno de Referencias favoritas de Tomas. 1130 00:46:27,240 --> 00:46:30,130 Estábamos usando a preparación, y es fabuloso. 1131 00:46:30,130 --> 00:46:33,030 Es el desarrollador de Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: Así Mozilla son las personas que hacen Firefox. 1133 00:46:36,490 --> 00:46:40,290 Y es sólo su propio desarrollador referencia, que creo que es impresionante. 1134 00:46:40,290 --> 00:46:44,870 Y tiene una maravillosa lista de recursos. 1135 00:46:44,870 --> 00:46:45,530 Así que tener-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON Buchholtz-AU: Y luego la última nota es 1137 00:46:48,060 --> 00:46:50,120 cuando usted está tratando de el diseño de su sitio web, 1138 00:46:50,120 --> 00:46:53,550 inspirarse en cosas que usted piensa que son bastante. 1139 00:46:53,550 --> 00:46:56,340 Inspección del elemento, inspeccionar el código fuente 1140 00:46:56,340 --> 00:46:59,370 puede ser muy útil para tratar de averiguar 1141 00:46:59,370 --> 00:47:02,080 cómo el estilo de su propio sitio web. 1142 00:47:02,080 --> 00:47:04,540 >> A menudo, me siento como el mejor forma, además de la experimentación, 1143 00:47:04,540 --> 00:47:06,290 es sólo para mirar cosas que son bastante. 1144 00:47:06,290 --> 00:47:09,810 Me parece que es muy difícil sólo tipo de diseñar cosas por su cuenta, 1145 00:47:09,810 --> 00:47:11,090 sobre todo al principio. 1146 00:47:11,090 --> 00:47:14,740 Por favor, revise sitios web que disfrute viendo. 1147 00:47:14,740 --> 00:47:16,880 Averiguar lo que hace atractivos para usted. 1148 00:47:16,880 --> 00:47:19,170 Y entonces no dude en tratar de replicar eso. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Correcto. 1150 00:47:20,410 --> 00:47:23,120 Incluso como sitios web de esta manera, se puede ver 1151 00:47:23,120 --> 00:47:25,460 definitivamente hay un div en la parte superior. 1152 00:47:25,460 --> 00:47:29,920 Y luego tienes otro div dentro aquí, que es Awesomeness CSS. 1153 00:47:29,920 --> 00:47:32,480 Y entonces usted tiene un montón de enlaces aquí. 1154 00:47:32,480 --> 00:47:34,770 Si realmente inspeccionar elementos, se pueden ordenar de 1155 00:47:34,770 --> 00:47:38,520 comenzar a ver lo que hacen sitios web verá así, y cómo puedo 1156 00:47:38,520 --> 00:47:40,493 recreo que si quería. 1157 00:47:40,493 --> 00:47:41,890 ¿Tiene eso sentido? 1158 00:47:41,890 --> 00:47:43,670 Así que sólo disponemos de tres minutos para el final. 1159 00:47:43,670 --> 00:47:46,380 Así preguntas? 1160 00:47:46,380 --> 00:47:47,650 Cualquiera de ellos? 1161 00:47:47,650 --> 00:47:48,350 Sí. 1162 00:47:48,350 --> 00:47:50,780 >> AUDIENCIA: Para el color rectángulo, ¿cómo 1163 00:47:50,780 --> 00:47:53,499 tener-- si no lo quiere va a través de toda la página, podría 1164 00:47:53,499 --> 00:47:56,400 usted lo ha hecho ir al otro lado sólo la mitad de la página o sólo el texto? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Sí, absolutamente. 1166 00:47:59,660 --> 00:48:02,780 Así que vamos a ver en realidad. 1167 00:48:02,780 --> 00:48:04,670 Tengo dos ideas. 1168 00:48:04,670 --> 00:48:07,265 Así que en primer lugar, usted también puede utilizar porcentajes. 1169 00:48:07,265 --> 00:48:08,140 >> AUDIENCIA: ¿En serio? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON Buchholtz-AU: Así que algo para buscar es el posicionamiento relativo. 1171 00:48:11,260 --> 00:48:13,385 Es algo que nos no tienen tiempo para entrar, 1172 00:48:13,385 --> 00:48:16,392 pero es algo que definitivamente Recomiendo que ustedes echarle un vistazo. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: El por ciento menos. 1174 00:48:17,580 --> 00:48:21,524 Y ver cómo lo hicimos sólo 50% de la anchura? 1175 00:48:21,524 --> 00:48:24,190 ALLISON Buchholtz-AU: Si realmente conocer el número de píxeles, 1176 00:48:24,190 --> 00:48:25,780 puede ser más precisa de esa manera. 1177 00:48:25,780 --> 00:48:27,200 Usted puede ver alrededor de él. 1178 00:48:27,200 --> 00:48:27,700 Pero el 50%. 1179 00:48:27,700 --> 00:48:31,970 Si tuviéramos que cambiar el tamaño de nuestro navegador, sería hacerlo más pequeño. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Bueno, es básicamente el 50% en este momento, creo. 1181 00:48:35,250 --> 00:48:38,820 Es 50%, y entonces el margen se ha agregado a eso. 1182 00:48:38,820 --> 00:48:40,100 CSS tiene muchas peculiaridades. 1183 00:48:40,100 --> 00:48:43,195 Así que ahora mismo se trata de 50% de la anchura de la página. 1184 00:48:43,195 --> 00:48:46,860 Pero recuerde que usted tiene 10 píxeles sacados de cada lado. 1185 00:48:46,860 --> 00:48:49,700 Así que si usted fuera a pedir que contra el borde izquierdo del navegador, 1186 00:48:49,700 --> 00:48:51,550 a continuación, se vería como un 50%. 1187 00:48:51,550 --> 00:48:53,884 Una vez más, como he dicho, CSS puede ser un montón de conjeturas y comprobación. 1188 00:48:53,884 --> 00:48:56,049 Al igual, usted piensa que algo es va a comportarse de una manera, 1189 00:48:56,049 --> 00:48:57,805 pero se comporta de una manera totalmente diferente. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON Buchholtz-AU: Y que acaba de obtener más inteligente, 1191 00:48:59,420 --> 00:49:02,020 y que acaba de obtener una mejor la intuición de que a medida que avanza. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: Y pone peor y peor. 1193 00:49:02,730 --> 00:49:03,496 Así que es realmente sólo una carrera. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON Buchholtz-AU: Eso es muy alentador. 1195 00:49:05,454 --> 00:49:07,070 Queremos que les gusta CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS es impresionante. 1197 00:49:08,810 --> 00:49:10,354 Recuerde que. 1198 00:49:10,354 --> 00:49:11,020 Otras preguntas? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON Buchholtz-AU: La única cosa. 1200 00:49:14,297 --> 00:49:14,880 Algo más? 1201 00:49:14,880 --> 00:49:15,140 Fresco. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS REIMERS: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON Buchholtz-AU: Bueno, si usted chicos tienen alguna pregunta más adelante, 1204 00:49:18,523 --> 00:49:20,919 estamos siempre disponibles como de costumbre. 1205 00:49:20,919 --> 00:49:22,960 Probablemente veremos algunos nos de para proyectos fin de carrera 1206 00:49:22,960 --> 00:49:24,280 y sin duda en el hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Por supuesto. 1208 00:49:25,200 --> 00:49:25,720 Y en la feria. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON Buchholtz-AU: Y en la feria. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Esperamos con interés ver toda su awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON Buchholtz-AU: Veremos todos sus sitios web impresionantes 1213 00:49:29,420 --> 00:49:30,572 que será hermoso. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: Siempre se puede ver, como, los sitios web 1215 00:49:32,780 --> 00:49:36,234 que tenía, como, bueno CSS y después como los que no trate de hacerlo CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON Buchholtz-AU: También, otro cosa, una cosa más que mirar en 1217 00:49:39,150 --> 00:49:40,445 es Bootstrapping. 1218 00:49:40,445 --> 00:49:41,805 Así Bootstrap es grande. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google que si usted-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON Buchholtz-AU: Google él. 1221 00:49:43,573 --> 00:49:44,340 Es fabuloso. 1222 00:49:44,340 --> 00:49:45,620 Te va a encantar. 1223 00:49:45,620 --> 00:49:48,000 Y ahora que tiene un conocimiento básico de CSS, 1224 00:49:48,000 --> 00:49:50,340 que va a hacer mucho más sentido. 1225 00:49:50,340 --> 00:49:50,890 Impresionante. 1226 00:49:50,890 --> 00:49:51,480 Gracias, chicos. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Muchas gracias. 1228 00:49:53,330 --> 00:49:54,219