>> [REPRODUCCIÓN DE MÚSICA]
ALLISON Buchholtz-AU: Así básicamente estamos sólo va
para darle un resumen de CSS, porque sabemos
que no estaba cubierto en todas las secciones.
Y que realmente queremos para asegurarse de que usted chicos tienen esta herramienta a su disposición,
porque tiene la capacidad de hacer sus sitios web se ven mucho más bonita.
>> Y si usted está construyendo un sitio web, a continuación, es probable que desee hacerlo bonito.
Quiero decir, usted no tiene que, pero te sugiero que. [Risas]
Si desea que los usuarios lo utilizan, es posible que quieren que sea un poco [inaudible].
Así que vamos a tratar de darle sólo algunas herramientas básicas y la comprensión,
de modo que cuando usted sale y ya está la investigación de las cosas acerca de CSS,
no es completa galimatías, como CSS veces ser.
>> TOMAS REIMERS: Sí.
Allison dijo que bastante bien.
Así que supongo que lo primero que tenemos debe comenzar con es lo que es CSS?
Así CSS es impresionante.
CSS--
>> ALLISON Buchholtz-AU: Eso es el nombre de nuestro seminario.
>> TOMAS REIMERS: Sí.
Es muy importante que usted entiende que para entonces.
Si sólo quitas uno cosa, es que si CSS impresionante.
Dos es CSS significa Cascading Style Sheets.
Así que en su núcleo, CSS es una hoja de estilo, es decir,
que le permite dar estilo a una página web.
Y entonces lo que eso significa, es un manera de añadir estilo a sus sitios web.
Así por el estilo, nos referimos a todo eso no structural--
así que cosas como colores, fondo imágenes, bordes, como, relleno,
márgenes.
Vamos a hablar de lo que todo lo que significa en un poco.
>> Así que hemos ido por delante y sólo abierto tanto de los alzados en gedit.
Así que esto es index.html.
Y esto es main.css.
Así main.css no tiene nada.
ALLISON Buchholtz-AU: No hay un estilo hasta ahora.
TOMAS REIMERS: Ninguno.
Y como verás, es un sitio muy feo.
ALLISON Buchholtz-AU: Es simplemente.
TOMAS REIMERS: Sí.
Sí, no es feo, es sólo minimalista.
Y entonces aquí tenemos index.html.
Y así, para un rápido recapitulación de HTML, Allison,
sólo quiere hablar de la página?
>> ALLISON Buchholtz-AU: Sí.
Así que, obviamente, tenemos nuestra HTML etiqueta, que acaba de nombres de archivos HTML.
Tenemos nuestra cabecera aquí, con CSS Awesomeness, de las cuales: si vuelves.
Donde es eso?
>> TOMAS REIMERS: Oh.
Sí, se puede ver.
ALLISON Buchholtz-AU: Y note la cabecera
es esta cabecera pestaña hasta aquí.
Y luego: "Hola, mundo!" es el texto que acabamos de
se presentan en la web página, de que éstos: volver.
Atrás.
Que no es más en nuestro cuerpo aquí-- el texto sin formato.
Además, una cosa es cuenta, si nos fijamos aquí,
Tomas cambió hasta estos dos de nuestra diapositiva.
Así que, mientras usted tiene todo tres de ellos, estás bien.
Pueden estar en cualquier orden que quieran.
Lo más importante es que que tiene cada una de esas tres cosas.
>> TOMAS REIMERS: Cool.
Añadir un tipo doc?
ALLISON Buchholtz-AU: Sí.
TOMAS REIMERS: Sí.
Fresco.
ALLISON Buchholtz-AU: Al parecer, mis micrófonos no me gusta.
TOMAS REIMERS: Oh, danos un segundo justo mientras Allison cambia a su micrófono.
Así que sí.
Así que tenemos a nuestra página principal.
Es una especie de sin estilo.
No tenemos mucho.
Sólo tenemos básicamente texto.
Tenemos la hoja de estilos.
Tenemos el título.
Así que sólo desnuda deshuesada componentes hacen un sitio web.
>> Así que a partir de ahí, vamos a hablar de lo que es CSS
y lo que parece y todo eso.
Así que para que--
ALLISON Buchholtz-AU: Volver a las diapositivas.
TOMAS REIMERS: Volver a las diapositivas.
Y Allison puede tomar el relevo.
>> ALLISON Buchholtz-AU: Woo.
DE ACUERDO.
Así que en su archivo CSS, usted va a tener
muchas de estas cosas llama selectores.
Eso sólo será el base de su archivo CSS.
Es sólo va a ser montones y montones de ellas.
Así selector.
Esto es sólo la anatomía general.
Vamos a ir a través de ejemplos, porque si nunca chicos
visto a mi sección, me siento que las cosas en abstracto
realmente no tiene sentido.
Siempre ayuda a ver los ejemplos.
>> Así que tenemos un poco de selector.
Eso va a ser algún identificador de lo que queremos el estilo para aplicar a.
Y luego podemos tener cualquier conjunto de normas y valores.
Así selectores que se pueden ver podría ser algo así como el cuerpo,
o párrafo con P, o de cabecera, o lo que sea,
lo que quiere que sus etiquetas HTML que sean.
>> Así que en este caso, tenemos cuerpo.
Y tenemos alguna regla, que esto corresponde
a lo que su estilo se aplica a.
Así que en este caso, tenemos color de fondo y el peso del texto.
Así que esto va a cambiar el fondo de nada
dentro de cualquier etiqueta del cuerpo de nuestro archivo HTML.
Y se va a dar que este valor de color azul claro.
>> Así que va a hacer que el fondo azul claro.
Y luego nada dentro del cuerpo es va a tener un peso negrita.
Así que sólo va a negrita todo nuestro texto.
Y esto es sólo un selector.
Pero usted podría tener muchos de estos.
Y como vamos a mostrar más tarde, un poco más en cómo
que las obras y más ejemplos allí.
Cualquier cosa que quieras agregar?
>> TOMAS REIMERS: No.
Allison consiguió.
Sólo vamos a cortar hasta un ejemplo aquí en nuestro sitio ejemplo.
Así que vamos a aprovechar esta realidad.
Es perfecto.
Así que sólo voy a copiar y pegar que la derecha en nuestro archivo main.css.
Y yo voy a guardarlo.
Y luego vamos a ejecutarlo.
Así nota lado, una de las la mayoría de las cosas frustrantes
es si usted no guarda un archivo, y a continuación, usted, como, vuelve a cargar la página,
y al igual que, ¿por qué no es el cambio suceda?
Sucede.
Así que aquí vimos que hicimos nuestra página web un fondo azul claro
y un poco de texto en negrita.
>> También debo mencionar, si chicos tienen preguntas sobre cualquier cosa
que estamos haciendo, sentimos por favor libre para detenernos y preguntarnos.
¡Estamos completamente dispuestos para contestar preguntas.
>> ALLISON Buchholtz-AU: Obviamente, con CSS, todo basa en sí mismo.
Así que si una cosa no tener sentido ahora,
no quiero que a empantanar más tarde.
>> TOMAS REIMERS: Así que vamos a tipo de diseccionar esto.
Entonces, ¿quieres empezar con el selector de aquí?
>> ALLISON Buchholtz-AU: Sí.
Como decía antes, el cuerpo es sólo nuestro selector de aquí.
Así que si nos remontamos a nuestra ah index--.
>> TOMAS REIMERS: ¿Qué yo sólo cerré.
Dame un segundo.
Así File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Así que si usted nota aquí, tener estas etiquetas del cuerpo, ¿no?
Así que el selector sólo corresponde a las etiquetas que los que estamos hablando.
Así el cuerpo aquí.
Así que lo que estamos diciendo es todo-- podemos volver?
Ojalá pudiera sólo como tocar la pantalla.
Sería mucho más fresco.
>> Así que cualquier cosa dentro de los etiquetas del cuerpo, que vimos
era sólo, como, el texto, y el cuerpo en general
se refiere a, como, el fondo.
Si alguna vez quieres cambiar el fondo,
que va a ser en un cuerpo de la etiqueta.
Sólo tiene estas reglas se aplican a ellos.
>> Así que si tuviéramos que ir a index.html y- en realidad,
podemos tener algo fuera del cuerpo?
Si tuviéramos, como, un pie de página o algo, no se aplicaría a este.
Pero cualquier cosa dentro de estas etiquetas del cuerpo va
a ser afectados por este órgano selector que hemos hecho.
Así que si usted fuera a escribir algo más allí--
>> TOMAS REIMERS: Vamos a gestionar esto.
Así que si teníamos un div-- así que eso es sólo otra etiqueta que puede tener.
Voy a cerrarla.
¿O vamos a hacer de este un párrafo.
Así p significa párrafo.
Y dentro de ese párrafo.
Y entonces yo digo: "Este es el texto."
Fresco.
Y entonces hice esta regla se aplica a un párrafo en lugar del cuerpo.
Verás cómo se aplica sólo a el párrafo recién formado, derecha,
No todo el asunto.
¿Tiene eso sentido?
>> ALLISON Buchholtz-AU: Así que esto es todo el cuerpo,
pero ahora nuestro selector sólo corresponde al párrafo.
Así que sólo tenemos negrita y azul de este párrafo específico,
porque esta es la única cosa que está encerrado dentro de la etiqueta p.
>> TOMAS REIMERS: ¿Tiene sentido especie de cómo las cosas encapsular otras cosas?
ALLISON Buchholtz-AU: Además, sólo decir, como una de las mejores maneras
para conseguir realmente cómodo con CSS es simplemente hacer las cosas de esta manera,
sólo probarlo.
Es muy sencillo de escribir algo fuera, golpeó Actualizar, y ver qué pasa.
Y como con la mayoría de CS, experimentación puede a menudo
conducir a una mejor comprensión intuitiva.
Incluso más que nosotros simplemente, como, hablando con usted.
>> TOMAS REIMERS: Absolutamente 100% de acuerdo en este punto.
Así que si nos remontamos a esto, vamos a empezar disección exactamente lo que estos dos lo hacen.
Así que tenemos dos normas sobre esto.
Así que la primera de ellas es el color de fondo.
Y ves que hemos establecido que igual a un valor, de color azul claro.
>> Así que en CSS, CSS es una especie de muy suelto sobre cómo
se te permite definir el color.
Así se puede definir por su nombre.
También puede hacer algo como "rojo".
Y luego, si nos remontamos a esto, verás que el fondo es de color rojo.
También puede obtener realmente-- creo que puede ser bastante creativo con esto,
¿no es así?
>> ALLISON Buchholtz-AU: I piensa que puede utilizar hexagonal.
No puedes?
>> TOMAS REIMERS: Sí.
Así que usted puede utilizar hexagonal.
Pero estoy pensando nombre-sabio.
¿No hay?
ALLISON Buchholtz-AU: Usted puede hacer unos cuantos.
Más o menos como la mayoría de los colores que usted puede nombre-- como, creo que el salmón es uno.
>> TOMAS REIMERS: Estamos salmón intento va.
ALLISON Buchholtz-AU: I creo chartreuse está ahí.
TOMAS REIMERS: Sí.
¿Ves?
Por lo que puede ser bastante creativo.
>> ALLISON Buchholtz-AU: Usted podría ser bastante creativo.
Al igual que, si se puede pensar en el nombre del color, es probable que sea allí.
Si realmente quieres fina detalle, se puede ir hexagonal.
>> TOMAS REIMERS: Sí.
Así hexadecimal.
Si ustedes recuerden esto de nuevo de su antiguo PSET, Imagen Recover,
ustedes tenían que lidiar con estos valores hex.
Y especie de recapitular lo que es, hex tiene tres valores almacenados en ella.
Así que es en grupos de dos incrementos.
Las dos primeras representan el valor de rojo.
El segundo representa el valor verde.
Y el último es azul?
>> Así sucede FF para representar un hexadecimal 255.
Así que tienes 255 rojo, 255 verde, y 0 para el azul.
Y los valores oscilan entre 0 y 255.
>> AUDIENCIA: Correcto.
Así que, esencialmente, podríamos buscar el Internet para cualquier color que queremos,
e identificar la realidad-conocida de color combo espectro,
y entonces podríamos poner en?
ALLISON Buchholtz-AU: Exactamente.
Así que tienes más o menos completo control sobre los colores que quieras dentro de CSS.
¿Vamos a hablar de imágenes de fondo más adelante?
¿O queremos hacer eso?
>> TOMAS REIMERS: Sí.
Absolutamente.
Así que primero, sólo para demostrar que rojo y verde es de color amarillo.
Y si necesitas un poco ayuda para encontrar esto,
puede buscar en Google algo como "selector de color."
ALLISON Buchholtz-AU: Oh, es tan bueno.
Me encanta Selector de color.
>> TOMAS REIMERS: colorpicker.com es un buen ejemplo.
Y aquí, podrás ver que tienes un selector de color de Photoshop-como completa.
>> ALLISON Buchholtz-AU: Mm-hm.
Además, las cosas interesantes es que puede generar esquemas de color
de modo que usted no tiene, como, chocando colores.
TOMAS REIMERS: Y entonces aquí está el valor hexadecimal hasta aquí.
Así que siempre se puede encontrar en línea, básicamente, lugares para obtener el valor hexadecimal de.
No es una especie de que se acaba, como, nos ver los colores del mundo en número.
Es más que vayamos en línea y encontramos qué color queremos,
y luego tomar el número.
Porque es sólo un muy fácil manera de Referencia cosas en CS.
>> ALLISON Buchholtz-AU: Y luego está también--
No recuerdo el nombre exacto del sitio.
Pero no hay duda, yo pensar, algo de Adobe
que genera esquemas de color para usted, que es realmente genial, porque
definitely-- a veces difícil de entender,
oh, si quiero usar este color, lo que podría ser otro útil
utilizar en otro lugar en mi sitio para, como, que sea agradable y cohesionada.
>> TOMAS REIMERS: Allison está hablando de uno por Adobe Kuler llama, creo.
Es K-U-L-E-R.
ALLISON Buchholtz-UA: Creo que sí.
Estoy bastante seguro de que es el uno.
>> TOMAS REIMERS: Mi favorito tiene siempre ha sido Esquema de color Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS REIMERS: ¿Cuál es ahora--
>> ALLISON Buchholtz-AU: Ah, esto es hermoso.
>> TOMAS REIMERS: Y Básicamente se puede decir, como,
Quiero tres colores uno junto al otro.
Y luego vamos a hacer algo agradable.
Y entonces se puede obtener un ejemplo de lo que podría parecer.
Y luego cuando pasamos el ratón sobre cualquiera de ellos, se le da el valor hexadecimal.
>> Así que al igual que una buena manera de empezar pensar en esquemas de color
o qué colores en una página web podría ir bien juntos.
Debido a que puede ser sorprendentemente no tan fácil de aprender como usted piensa.
Y luego la otra cosa fresca Siempre he encontrado acerca de este sitio
es si se golpea ejemplos, que va a mostrar lo que un sitio web de ejemplo
podría parecer que el uso de combinación de colores.
De todos modos.
>> Volver a la CSS real.
ALLISON Buchholtz-AU: Pero obviamente, conocer estas referencias pueden ser útiles.
TOMAS REIMERS: No, sin duda puede ser útil.
Así que la segunda regla, Allison?
>> ALLISON Buchholtz-AU: Sí.
La segunda regla es sólo correspondiente a nuestra fuente.
Así que el peso del texto es sólo un poco de-- lo que el peso lo haría
estar si quieres simplemente, como, normal o, al igual que, las fuentes más delgadas,
o en este caso, al igual que, en negrita.
Me olvido.
¿Qué es el si quería it-- está ahí uno más delgado que apenas, como, normal?
TOMAS REIMERS: Yo en realidad no saber si hay uno más delgado.
ALLISON Buchholtz-AU: me olvide.
Así el peso de la fuente que normalmente sólo tiene que utilizar para negrita.
Si usted quiere conseguir realmente en ella, vamos a mostrarle.
W3Schools tiene todos los diferentes cosas que usted puede hacer por las fuentes.
Pero, básicamente, si alguna vez quieres cambiar nada de la fuente,
que siempre va a ser, como, la fuente y tantos.
Así será como, font-family si estás tratando de cambiar el tipo real.
Será de estilo de fuente si usted quieren que sea como cursiva,
o cursiva, o lo que sea.
O incluso de fuente-color, si queríamos cambiar eso.
>> TOMAS REIMERS: Así es.
Así que usted puede cambiar eso.
Y especie de sólo para recapitular ahora, para que puedas
vemos que tenemos el selector hacia arriba aquí.
Tenemos estas llaves.
Y luego tenemos reglas delimitado por punto y coma.
¿Tiene eso sentido?
¿Sí?
Fresco.
Así que si eso es good--
>> ALLISON Buchholtz-AU: Volver.
TOMAS REIMERS: Hablemos específicamente acerca de qué tipo de selectores que tenemos.
Porque ahora que hemos especie de sólo muestra las etiquetas.
Pero ustedes podrían ver plausible.
Digamos que tienes dos párrafos en una página y que
quiero ser capaz de estilo uno pero no el otro,
usted no sólo quiere que limitarse a tener que utilizar diferentes HTML real
etiquetas para darles diferentes estilos.
>> Así que tenemos tres básico tipos de selectores.
ALLISON Buchholtz-AU: Sí.
Así que tenemos la etiqueta, que es lo que hemos estado hablando en este momento.
Así que eso es algo así como su cuerpo o p.
Y luego tenemos la clase, que es cuando lo definimos en nuestro archivo CSS,
que siempre va a ser punto, lo que sea desea que el nombre de la clase que sea.
Y esto se puede aplicar a varias cosas.
>> Digamos que usted tiene cinco párrafos y dos de los tres
necesitar ser el mismo estilo, que se aplicaría una clase a la misma.
Y esto es sólo la forma en que lo hacemos.
Nosotros le daremos un ejemplo de donde esta realidad muestra arriba.
Pero si tiene que tal vez algunos de etiquetas p, después de él, usted escribiría,
clase es igual independientemente de las clases que desea aplicar a la misma.
Así que lo que los selectores de clase que queremos aplicar al presente apartado específico,
pudiéramos escribir así.
Por supuesto, creo que un ejemplo hará que sea mucho más concreta.
>> El otro tenemos es id, que denotamos
con un hash, o libras, o hashtag.
TOMAS REIMERS: octothorpe.
ALLISON Buchholtz-AU: octothorpe.
Eso funciona, también.
Y éste debe ser realmente única.
Ellos sólo deben aplicarse a una cosa en su página.
Así que si eso es un párrafo específico, o algún elemento de una lista, o lo que sea,
esto debe ser único.
Y de la misma manera que acabamos de decir, como, class = "clase2 class1"
esto sólo puede ser Identificación de lo que tenemos.
TOMAS REIMERS: Sí.
Así que vamos a hablar definitivamente sobre ejemplos aquí.
Y yo sólo voy a bucear hacia atrás en el código.
Así que echemos un vistazo a nuestra HTML.
Y por lo que en este momento tenemos un párrafo.
Este es el texto.
Yo sólo voy a modificar ella. "Este es un texto 1."
Y luego vamos a tener una "Esto es texto 2."
>> ALLISON Buchholtz-AU: Segunda uno.
TOMAS REIMERS: Así es.
Así que ahora tenemos "Este es el texto 2", ¿verdad?
Y vamos a ver que si recargamos la página, lo que vamos a encontrar
es que vamos a find--
ALLISON Buchholtz-AU: Ooh.
TOMAS REIMERS: Sí.
Vamos a encontrar una "Esto es texto 1 "y" Este es un texto 2. "
>> ALLISON Buchholtz-AU: Y color amarillo fuera encantador.
>> TOMAS REIMERS: Y verás que nuestro selector en este momento,
que se aplica a p de, o párrafos, afecta a ambos,
porque ambos se encuentran con el condición de que los dos son una etiqueta p.
Eso tiene sentido total.
Así que la pregunta es, bueno, lo que si queríamos sólo conseguir uno?
Así exactamente como Allison estaba diciendo, tenemos otras dos maneras de hacerlo.
Voy a comenzar con id.
>> ALLISON Buchholtz-AU: Vamos a empezar con id.
>> TOMAS REIMERS: Y ambos de estos son atributos.
Así que existen atributos en HTML.
Y lo que son es algo que se agrega
dentro de la etiqueta que es separar del nombre de la etiqueta.
Así que usted puede tener varios atributos.
¿Sí?
>> ALLISON Buchholtz-AU: Estaba a punto decir, de su ejemplo de PSET 7,
si alguno de ustedes tratan de alinear cosas para el centro,
que podría haber utilizado "Text align = center."
Y te has dado cuenta que probablemente debería haber centrado
su texto o en la barra de navegación.
Así que eso es justo también un atributo que podría estar familiarizado.
TOMAS REIMERS: Hay un montón de atributos que ya lo verás.
Sí.
Como buena referencia para PSET 7.
Tenemos Identificación.
Usted también puede tener clase, cosas como esta.
Una sola etiqueta puede tener muchos atributos.
Así que a partir de la identificación, vamos a suponer que quiero tener un id de-- No sé.
Lo llamaremos especial, porque éste, estamos
va a hacer negrita, y subrayado y lo que sea.
ALLISON Buchholtz-AU: Es Va a ser muy especial.
TOMAS REIMERS: Así que esta uno, tenemos Identificación especial.
Así que la forma para seleccionar que es, entonces, en main.css, en lugar de tener una etiqueta p,
haces #special, OK?
Y eso selecciona el cosa con id especial.
¿Tiene esto sentido para todo el mundo?
AUDIENCIA: Sí.
TOMAS REIMERS: Cool.
Así que ahora si nos remontamos, vamos a ver-- gritos.
Sí.
Veremos que sólo selecciona el uno con id especial.
¿Sí?
Suena genial.
Sí.
>> AUDIENCIA: ¿Puede algo tener un atribuir tanto de clase y un id?
>> TOMAS REIMERS: Sí.
AUDIENCIA: OK.
Y entonces, ¿qué pasa si luego das que algunas reglas CSS en ese conflicto?
TOMAS REIMERS: Por supuesto.
Definitivamente vamos para hablar de eso.
Así exactamente lo que estaban haciendo a, también puede tener clases.
Así que vamos a pretender que tenía tres párrafos y yo
quería darle estilo al primero dos, pero no la tercera.
Bueno, su primera idea puede ser, bueno, sólo podía dar el segundo un id.
Pero no se puede, porque un id, exactamente igual que Allison estaba diciendo,
tiene que ser único.
>> Así que en lugar de un id, lo que puede utilizar es usted puede utilizar una clase.
Y un class-- lo que permite que hagas es básicamente decir,
esto pertenece como parte de un grupo.
En este caso, nuestro grupo se llama especial.
¿Y qué vamos a hacer a continuación es vamos a decir-- en lugar de libras,
vamos a utilizar puntos.
DE ACUERDO?
Y note que la libra y el punto sólo existen en el archivo CSS,
no dentro del HTML.
ALLISON Buchholtz-AU: Sí.
Distinción importante.
>> TOMAS REIMERS: Tengo tenía tanta lucha,
porque puse el hash en el HTML y entonces sólo me sentí estúpida por un largo tiempo.
Vea cómo se selecciona a los dos los que tienen esa clase?
Fresco.
>> Ahora, las cosas pueden tener varias clases.
Digamos que yo quería hacer la primera dos tienen un fondo de color amarillo
y el segundo dos tienen un color de fuente de color azul.
DE ACUERDO.
Yo realmente no sé por qué yo había quiero hacer eso, pero no puedo.
>> ALLISON Buchholtz-AU: ¿No podría recomendado para su sitio web.
Pero para nuestros propósitos, que va a hacer.
>> TOMAS REIMERS: No es una buena combinación de colores.
ALLISON Buchholtz-AU: Bueno, amarillo y azul son mis colores de la escuela secundaria.
No sé, sin embargo.
TOMAS REIMERS: Allison de alta escuela tenía una gran combinación de colores.
[Risas]
Así que lo que podemos llamar a esto es Llamemos a esto-- así que tenemos Especial
y tenemos Pretty.
Sugiero, para esto, se utiliza nombres mucho más descriptivos.
ALLISON Buchholtz-AU: Sí, lo haría llamar a esto, como, amarillo o azul.
>> TOMAS REIMERS: No somos realmente hacer un sitio web de bienes,
es por ello que no estamos haciendo eso.
Pero si realmente tenía un sitio web real,
podría tener, como, cabecera del artículo, el contenido del artículo, la primera palabra,
cosas así, que permiten que seas mucho más descriptivo.
Estos son realmente como variables.
Ellos deben ser nombrados de una manera donde usted puede, como-- sí, como tal.
Perfecto.
>> Así color de fondo.
Y luego vamos a decir-- por lo que el manera de cambiar el color es sólo "color".
Y vamos a hacer que sea azul.
Eso es genial.
Así que ahora tenemos la dos primeros tienen especial.
Siguiente uno va a tener "class = bonita."
ALLISON Buchholtz-AU: Y entonces usted desear agregar "bastante" a la del medio.
TOMAS REIMERS: Así es.
Y luego a la del medio, añadir "bonito", lo que pasa
es sólo tienes un espacio.
Así que el atributo de clase es una lista separada por espacios
de todas las clases que se aplican a esa etiqueta.
DE ACUERDO?
No es como éste pertenece algún tipo de clase especial llamada
"Especial, espacio, bastante."
Pertenece a dos classes-- especial y bonita.
¿Sí?
Fresco.
>> Y luego, si nos fijamos en lo que pase, estamos
vamos a ver que primero tiene fondo amarillo, texto negro.
Segundo uno--
>> ALLISON Buchholtz-AU: --has negrita fondo amarillo con el texto azul.
Y nuestro último sólo tiene la texto azul que hemos asignado a la misma.
>> TOMAS REIMERS: Cool?
¿Cómo funcionan los selectores?
Impresionante.
>> ALLISON Buchholtz-AU: ¿Queremos hablar sobre el conflicto ahora, entonces?
>> TOMAS REIMERS: Así que sí.
Absolutamente.
Entonces, ¿qué pasa si usted tener un conflicto, ¿no?
Vamos a suponer la primera establece algo como--
ALLISON Buchholtz-AU: Tal vez éste cambia el fondo?
TOMAS REIMERS: Sí.
Así que vamos a hacer "bonita" cambiar el fondo a salmón.
ALLISON Buchholtz-AU: Estás a con todos los grandes colores de hoy, Tomas.
TOMAS REIMERS: Sí.
Porque me enteré de lo que pueda utilizar el salmón como un color real.
Así que sólo vamos a hacer eso.
También creo que la puesta del sol es un color real.
AUDIENCIA: Puesta del sol es un color real?
ALLISON Buchholtz-AU: Vamos a intentarlo.
TOMAS REIMERS: Después de esta demostración sólo porque en caso de que meta la pata,
Yo no quiero ser la depuración.
Así que sabemos que el salmón es un color real.
Por lo que cualquier conjeturas sobre lo que va a pasar?
>> ALLISON Buchholtz-AU: ¿Alguna idea?
>> AUDIENCIA: [inaudible].
>> TOMAS REIMERS: Sí.
Así que lo tienes toda la razón.
Básicamente, se necesita la última regla que se le dio.
>> ALLISON Buchholtz-AU: Así que esto es donde en cascada entre en vigor.
>> TOMAS REIMERS: Así que recuerde cómo tenía que hojas de estilo en cascada?
Así que por eso, nos referimos tipo de que tenemos un montón de reglas
que se aplican en la parte superior de la otra, y también pueden anular entre sí.
>> ALLISON Buchholtz-AU: Así lo de en la parte inferior
anulará todo lo que está en la parte superior.
Usted podría tener reglas que completamente negar algo de antemano.
Por eso también quieres ser cuidado cuando estás estilo,
por lo que no va a crear reglas que estás completamente imperiosas.
>> TOMAS REIMERS: O tal vez usted no desea sobreescribir reglas.
>> ALLISON Buchholtz-AU: O tal vez usted lo hace.
Sí.
>> TOMAS REIMERS: Imagina que tienes un clase que se aplica a la mayoría de las cosas,
pero digamos que usted desea cambiar la color de fondo a rojo y el tipo de letra
peso en negrita para la mayoría cosas, pero por mi parte,
sólo desea que el color de fondo a ser de color rojo, pero que desea de los demás
propiedades, que podrían hacer algo como "font-weight = normal"
que luego deshacer ese cambio audaz.
¿Sí?
Una vez más, la mejor manera, creo que Allison dijo que, es sólo la práctica.
>> ALLISON Buchholtz-AU: Experimentación.
>> TOMAS REIMERS: Práctica, práctica, práctica, y el experimento.
Conozco a un montón de gente que piensa CSS es sólo un montón de conjeturas y verificación
al final del día, donde si que quieres hacer algo-- como,
usted tiene una idea aproximada, pero usted todavía necesita probablemente
probarlo para asegurarse usted sabe lo que parece.
>> AUDIENCIA: Cuando usted está solicitando clases, más de una
al mismo párrafo o de la sección, ¿verdad
importa qué orden se puede digite en las cotizaciones?
>> TOMAS REIMERS: No, no en absoluto.
>> ALLISON Buchholtz-AU: Lo que importa es el orden dentro de la hoja de estilos CSS.
AUDIENCIA: ¿Podría repetir la pregunta?
TOMAS REIMERS: Oh.
ALLISON Buchholtz-AU: Dentro clase, cuando se está dando clases
a algo en el HTML, hace Importa qué orden están en?
No importa el orden.
Lo que importa es el orden de la selectores de clase dentro de su CSS,
dentro de su hoja de estilos.
>> TOMAS REIMERS: Suena bien?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS REIMERS: Y entonces vamos a continuar a--
ALLISON Buchholtz-AU: ¿Qué tenemos ahora?
Me olvido.
Oh, sólo tenemos ejemplos.
Pero hemos tipo de hecho esos.
Hemos hecho ejemplos sobre la marcha.
>> TOMAS REIMERS: Llegamos a combinar los selectores pronto.
>> ALLISON Buchholtz-AU: Oh, conseguimos combinar selectores.
TOMAS REIMERS: Así que algunos ejemplos es que tenemos
# Libra dog-- o hashtag, o octothorpe, o lo que sea
que desea llamar que-- agudo.
>> ALLISON Buchholtz-AU: Perro de Sharp.
>> TOMAS REIMERS: Entonces usted tiene .pets.
Algo tiene un id de perro, sólo hay un perro en la página.
Algo tiene un id de gato, sólo hay un gato.
Puede haber muchos animales domésticos en la página.
Es por eso que hemos dado que las clases.
Usted tiene un ejemplo de p.
Y entonces lo que uno de los último ejemplo, que
es algo que no hemos hablado, es lo que sucede cuando se combinan.
Así p.pets.
>> Así que por eso, vamos a volver a la código e introducir another-- sí.
Así que de vuelta aquí.
>> ALLISON Buchholtz-AU: I sentir que esto es realmente--
como mirando a través de ejemplos es realmente la manera de aprender esto.
Así que eso es lo que estamos haciendo.
>> TOMAS REIMERS: Así que vamos a pretender que sólo desea seleccionar texto 2, ¿verdad?
Así que definitivamente no puede hacer eso con un id.
Bueno, podríamos hacer eso con un id, pero no tiene un id.
Podría añadir uno, pero vamos a suponer que yo no quiero añadir uno
o que ya tiene algo más.
Yo no puedo hacer eso con eso.
La variable no es definitivamente único, ¿no?
Y tampoco lo es la clase.
Pero usted puede combinar estas cosas.
Digamos que queríamos hacer algo que sólo se aplica a las cosas que
tener la clase especial y que tienen la clase bonita.
>> Así que lo que puede hacer es en main.css, se puede decir, primero vamos a eliminar esto.
Puede combinar estos.
Así que usted puede hacer .Special.
No hay espacio.
Sólo .special.pretty.
Lo que esto significa es algo que es tanto especial y bonita.
¿Tiene eso sentido?
Y si vamos aquí, lo que vas a ver
es esta regla sólo se aplica a la segundo, que tiene tanto de ellos.
Y usted puede hacer eso por un montón de cosas.
Puede decir-- vamos pretendo yo sólo quería
para hacer cosas que tienen la clase bastante y que son también una etiqueta de párrafo.
Así p.pretty.
Vamos a pretender que yo tenía algo bonito en el cuerpo de la etiqueta.
DE ACUERDO?
Puedo ejecutar este y yo puede ver que es sólo
va a aplicar a las cosas que son párrafos con la clase bastante.
Y puede combinar estos, básicamente, como todas las que quieras.
Así que usted puede ponerlos juntos.
¿Tiene eso sentido?
ALLISON Buchholtz-AU: Así este tipo de es más útil
cuando, Tomas estaba diciendo antes, tal vez usted tiene un sitio web muy complicado,
y ya tiene mucho de estas normas escritas,
y sólo tiene que combinar dos de delante.
Al igual que en lugar de escribir en su conjunto nuevo selector y cambiar allí,
usted puede combinar ellos donde se superponen.
>> TOMAS REIMERS: O podrían encontrar fuera-- veces
hay una clase que hace que el color de la fuente, como el azul,
y hay otra clase que hace que el azul de fondo.
Y eso simplemente no va a funcionar.
Así se escribe un caso especial, donde, como-- pero si tiene ambos, lo que estás
vamos a hacer es que vamos a hacer de este uno este tono de azul
y esta este otro tono de azul.
Derecho?
>> ALLISON Buchholtz-AU: Bueno para ese tipo de excepciones.
TOMAS REIMERS: Así que para pensar en problemas
que pueden surgir cuando se combinan.
Fresco.
Así que de vuelta a nuestra presentación.
ALLISON Buchholtz-AU: Ya casi hemos llegado.
TOMAS REIMERS: Y ha dejado de conexión.
ALLISON Buchholtz-AU: Oh, no.
ALLISON Buchholtz-AU: CS en la oficina, internet se cae.
Oh, la ironía.
>> TOMAS REIMERS: Así que, afortunadamente, podemos presente sin internet, supongo,
porque tenemos todas las diapositivas aquí.
Así que vamos a hablar de la relación de las etiquetas.
ALLISON Buchholtz-AU: Correcto.
Así que sólo un poco de ir fuera de lo que dijo Tomás,
esto es sólo otra manera de hacerlo.
Así que tenemos algunos de los padres selector con un selector de niño.
Así que en este ejemplo aquí, tenemos algunos cuerpo con una barra de navegación de clase, de botones.
Ah.
>> TOMAS REIMERS: Oh, lo siento.
>> ALLISON Buchholtz-AU: Y Básicamente, lo que esto significa
es seleccionar todos los niños, al igual que todos estos tipos de selectores,
dentro de este selector de matriz.
Y esos son los únicos lo que nunca va a aplicar.
No sé si usted tener una mejor manera de--
TOMAS REIMERS: Así que adivinar la forma de pensar
de esto es recordar antes cómo que tipo de ellos como armamos.
Y entonces eso significa que uno de los elementos que coincide con todos ellos.
Lo que esto quiere decir es, yo desea hacer coincidir todo
dentro some-- Quiero a encontrar un selector.
Y luego dentro de eso, quiero se puede adaptar con cosas nuevas.
Derecho?
Así que en CSS, todo se trata de una especie de ser capaz de igualar estos artículos.
Y usted puede tratar de igualar elementos dentro de otros artículos.
>> Así que vamos a hacer realidad un ejemplo, y creemos que va a aclarar.
Así que vamos a pretender que tenemos especial, especial bonita, lo que sea.
Y luego tenemos un vínculo, ¿de acuerdo?
Así que recuerda, a es un enlace.
No va a ir a ninguna parte.
Y vamos a darle el enlace de clase, supongo.
Vamos a darle la class-- darme una idea.
ALLISON Buchholtz-AU: Cool.
TOMAS REIMERS: COO- vamos ir por la clase bonita.
Por qué no?
>> ALLISON Buchholtz-AU: OK.
TOMAS REIMERS: Así cosas ahora bonitas
van a hacer el fondo azul, color de fondo de salmón.
Eso tiene sentido.
Y si lo hacemos esto--
>> ALLISON Buchholtz-AU: ¿Quieres añadir texto
por lo que el hipervínculo en realidad aparece?
TOMAS REIMERS: Eso sería una buena decisión.
ALLISON Buchholtz-AU: Porque derecha ahora sólo vamos a conseguir nada.
TOMAS REIMERS: Así que esto es un enlace.
"Este es un enlace."
Ah, y esto va ser otro enlace.
Vamos a darle la clase "cool".
Tienes razón.
Fresco.
Así que ahora vamos a tomar esto.
Vamos a lanzar una.
Tenemos uno en el etiqueta especial, y también
van a tener uno en la bonita etiqueta.
Y ahora lo que vamos a hacer es que vamos a hacer cool--
¿qué queremos que haga?
ALLISON Buchholtz-AU: ¿Podemos hacerlo más grande?
TOMAS REIMERS: Vamos a darle una frontera.
ALLISON Buchholtz-AU: Podríamos frontera.
TOMAS REIMERS: Sí.
Así que vamos a hacer algo como, es-- frontera y estamos
va a explicar todo esto en un segundo.
Por ahora--
>> ALLISON Buchholtz-AU: Para el modelo de caja.
TOMAS REIMERS: Pero por ahora, estamos sólo va a darle una frontera.
Así que lo que esto significa es que eres van a ver estos enlaces.
Y vas a ver que tienen estos, como, bordes negros feos, que
es fresco.
>> ALLISON Buchholtz-AU: Nuestro sitio web es tan bonita.
>> TOMAS REIMERS: Sí.
Nuestro sitio web es impresionante.
Así que estos dos son enlaces, y ellos aparecen.
Ahora vamos a pretender que sólo quería hacer esto
si no fuera dentro de algo que tenía un fondo de salmón.
Así que recuerde que éste tiene un fondo de salmón,
porque es de clase bastante.
>> Pero queremos decir que sólo se enfría que están en clase especial, no en clase
bastante, debe tener esa frontera.
Bueno, lo que puede hacer usted es puede decir, .Special, espacio, .cool.
Y lo que está haciendo, cuando se piensa al respecto, es que está diciendo básicamente,
Bien, me encontrará todo que coincide especial.
Luego, dentro de esas etiquetas, encontrar mí todo eso está bien.
ALLISON Buchholtz-AU: Así que de otra manera que podría ser bueno para pensar en esto,
traer de vuelta a C, es al igual que la idea de su alcance.
Así que cuando usted tiene alguna selector, como los que se
que hemos estado trabajando para antes de esto, su página web completa, todos los de su HTML
está dentro de su alcance, ¿no?
Pero cuando tenemos estos las relaciones entre padres e hijos,
es como si usted está estrechamiento donde lo que busca es un lugar específico,
como si, al igual que, estamos buscando dentro una función específica en vez
de todo nuestro archivo.
AUDIENCIA: Así que con eso en mente, lo haría que hubiera importado si tuviéramos transformados,
ALLISON Buchholtz-AU: El orden?
AUDIENCIA: --la clase en CSS a .cool, espacio, .Special?
ALLISON Buchholtz-AU: Sí, porque entonces eso
diría, alcance a todo lo que tiene fresco,
y luego mirar lo has-- Quiero decir, como, en este caso,
Yo no creo que hubiera cambiado.
>> TOMAS REIMERS: Si nos había dicho qué?
Lo siento.
>> ALLISON Buchholtz-AU: Si alcance que se enfríe y luego
buscar cosas de especial, sería el mismo, en realidad.
>> TOMAS REIMERS: Así que no sería.
>> ALLISON Buchholtz-AU: No lo haría?
Oh, oh bien.
Estoy equivocado.
>> TOMAS REIMERS: Así que la razón es diferente-- mistake-- común
es que en este momento sólo el enlace tiene frío, ¿verdad?
Creo que mi pregunta para ustedes es, lo que en esta página se corresponde con .cool?
Hay dos etiquetas aquí, ¿verdad?
¿Cuál es éste y éste.
Ambos coinciden fresco.
Nada más lo hace.
Así que si usted ha dicho, .cool, espacio, .Special, lo que vas a decir es,
dentro de estas etiquetas, ¿qué tiene de especial?
ALLISON Buchholtz-AU: Hm.
Eso es lo que it-- derecha.
Porque es como algo aquí.
>> TOMAS REIMERS: Así que selecciona nada.
>> ALLISON Buchholtz-AU: Mientras que con especial, estamos dentro de estas etiquetas aquí.
>> TOMAS REIMERS: Aquellos y aquellas.
AUDIENCIA: OK.
Así que esas etiquetas de la barra diagonal?
>> TOMAS REIMERS: Sí.
¿Tiene eso sentido?
¿Cómo es, básicamente, tratando de reducir su alcance.
ALLISON Buchholtz-AU: Sí.
Creo que eso es probablemente la manera más fácil de pensar en ello.
>> TOMAS REIMERS: Así que nos pareció, y encontramos este tanto igualó especial.
Y entonces lo que estamos pidiendo, dentro estos chicos, lo que es genial?
Y dentro de ésta, fresco de éste.
Dentro de éste, nada está bien.
Así que esta es la única etiqueta que queda.
>> ALLISON Buchholtz-AU: Considerando fresco es sólo dentro de estas etiquetas a allí.
TOMAS REIMERS: Exactamente.
Y lo que es especial dentro de esos?
Nada.
Ahora, ¿qué voy a decir es si no había espacio,
usted está pidiendo lo que es fresco y especial-- o lo que es bonito y especial, ¿verdad?
Si dices .special.pretty, eso es el mismo que .pretty.special.
>> Porque lo que la eliminación del espacio es pidiendo es, cuando usted dice .Special,
usted está pidiendo, OK, cuáles son especiales?
Y luego, por los que queridos también son bastante,
que es el mismo, gramaticalmente, como preguntar, ¿cuál es bonita,
y después de ellos, lo que también es especial?
Derecho?
Es la diferencia de lo que hay dentro de lo que es.
AUDIENCIA: OK.
TOMAS REIMERS: Sí.
Impresionante.
Así que con eso en mente entonces--
>> ALLISON Buchholtz-UA: Creo que nuestro último cosa es (en Fantasía BRITISH ACCENT)
el modelo de caja.
>> TOMAS REIMERS: El box-- [CHUCKLES] Me encanta la forma Allison dice eso.
Así que la cosa modelo de caja.
>> ALLISON Buchholtz-AU: Sólo tienen una caja, seré su modelo de caja.
TOMAS REIMERS: Así que vamos a hablar de eso.
Así que ahora que hemos pasado mucho tiempo hablando de selectores.
Por ahora, ustedes son probablemente, como, maestros de selectors-- sabes,
cómo seleccionar exactamente el contenido que que desea manipular en la pantalla.
>> Así que ahora la pregunta es, ¿cómo exactamente se puede manipularlo?
Así que supongo que el más básico manera de pensar en eso
es, bueno, ¿qué es exactamente es un elemento de CSS?
Hemos pasado mucho tiempo hablando, lo que es una etiqueta,
o lo que es lo más básico representación de una etiqueta?
>> Una buena manera de pensar es decir, ¿qué forma es el salmón?
¿Qué forma tiene, como, el salmón de color de fondo?
>> AUDIENCIA: Es un rectángulo.
>> TOMAS REIMERS: Es un rectángulo, ¿verdad?
>> ALLISON Buchholtz-AU: ¿No era una pregunta capciosa.
[Risas]
>> TOMAS REIMERS: No intentar para engañar a ustedes esta tarde.
Así que tenemos este rectángulo.
Y la etiqueta es una p, ¿verdad?
Así nos da buena creencia de que el párrafo
se representa como un rectángulo, en menos en la mente del navegador, que
que es.
>> ALLISON Buchholtz-AU: Quiero decir, navegadores son típicamente rectangular,
así que tiene sentido.
>> TOMAS REIMERS: La idea aquí es que todas las etiquetas dentro de CSS
se representan como un rectángulo.
Y cada rectángulo tiene cuatro partes de acuerdo al CSS, OK?
Usted tiene el contenido real.
Ahí es donde se encuentra el texto.
>> ALLISON Buchholtz-AU: Tal vez su imagen.
>> TOMAS REIMERS: Sí.
Usted tiene relleno, que es sólo una especie de espacio en blanco.
Entonces usted tiene un borde.
Y entonces usted tiene margen, que es el espacio en blanco fuera de eso.
Así que no tiene sentido a cualquier persona, por lo que estamos
vamos a hablar de eso por un segundo.
Así que aquí, lo que vamos a hacer Somos nosotros los vamos a crear algunos divs, OK?
Discúlpame mientras yo--
>> ALLISON Buchholtz-AU: Me siento como debemos poner una foto linda en.
>> TOMAS REIMERS: Definitivamente debería.
>> ALLISON Buchholtz-AU: Siento que todo el mundo
podrían beneficiarse de una linda foto, es todo.
>> TOMAS REIMERS: ¿Podemos todos se benefician de A--
>> AUDIENCIA: Sí, claro.
TOMAS REIMERS: OK, fresco.
Así que debemos poner un lindo imagen en alguna parte.
ALLISON Buchholtz-AU: Me siento como un conejito lindo podría ser útil en este momento.
TOMAS REIMERS: Seguro.
ALLISON Buchholtz-AU: Fin de la semana.
Si tiene algo adorab--
>> TOMAS REIMERS: ¿Cómo combate un gatito?
>> ALLISON Buchholtz-AU: Un gatito funciona, también.
>> TOMAS REIMERS: Cool, porque hay un sitio para eso.
Se llama PlaceKitten.
ALLISON Buchholtz-AU: Eso es genial.
TOMAS REIMERS: Sí.
ALLISON Buchholtz-AU: Sólo para, como, imágenes de marcador de posición en su sitio web.
TOMAS REIMERS: Mm-hm.
También hay PlacePuppy.
Y hay PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
¿En serio?
>> TOMAS REIMERS: Oh, no lo hacemos tener acceso a internet.
>> ALLISON Buchholtz-AU: [GEMIDOS]
Trágica.
TOMAS REIMERS: De lo contrario, Yo te había de mostrar chicos
cómo poner imágenes en su sitio web.
Vamos a tratar de conseguir este trabajar antes de que tengamos que ir.
Pero por ahora, sólo estamos va a hablar en colores entonces.
Queremos poner fotos de kittens--
>> ALLISON Buchholtz-AU: Lo hicimos.
>> TOMAS REIMERS: --el de internet abajo por el momento ser.
Así que tenemos dos divs, y estamos les va a dar dos identificadores.
Vamos a llamarlo "Primera" y "segunda".
Así que id = "primero".
Y vamos a darles dos colores.
Entonces, ¿cómo seleccionamos algo con un id de "primero"?
ALLISON Buchholtz-AU: Dot o hachís?
AUDIENCIA: Agudo.
TOMAS REIMERS: Sharp, perfecto.
Sharp, hachís, lo nosotros--
>> ALLISON Buchholtz-AU: Hay muchas cosas que llaman.
>> TOMAS REIMERS: OK.
Vamos a resolver el hashtag, y eso es lo que vamos a ir con.
DE ACUERDO?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS REIMERS: Así hashtag del primero.
>> ALLISON Buchholtz-AU: Así puedes tuitear la seminar--
CSS hashtag, hashtag fresco.
TOMAS REIMERS: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, sí.
TOMAS REIMERS: OK.
Así que tenemos "primera" y "segunda".
Así que primero, vamos a tener un color de fondo de color rojo.
ALLISON Buchholtz-AU: Uh, colon.
TOMAS REIMERS: Así es.
ALLISON Buchholtz-AU: Seré tu punto ortográfico.
TOMAS REIMERS: Allison me tiene.
Antecedentes color de blue--
>> TOMAS REIMERS: púrpura!
>> TOMAS REIMERS: Púrpura.
ALLISON Buchholtz-AU: Sí.
Mi color favorito de púrpura, y no hemos utilizado todavía.
>> TOMAS REIMERS: Violeta.
ALLISON Buchholtz-AU: Violeta.
Eso funciona.
>> TOMAS REIMERS: Así que estamos va a tener dos divs.
Ellos van a estar totalmente vacío.
Probablemente deberíamos tener un poco de texto.
Así que "primero" va a ser "HOLA".
Y la "segunda" se decir--
>> ALLISON Buchholtz-AU: Adiós.
>> AUDIENCIA: - "MUNDO".
Hola, adiós.
ALLISON Buchholtz-AU: Vi en concierto la otra semana.
TOMAS REIMERS: The Beatles?
ALLISON Buchholtz-AU: Para reales.
No son tan grandes.
No me gusta.
>> TOMAS REIMERS: Disponemos "Hola" y "adiós".
Y de nuevo, CSS es simplemente impresionante, porque reconoce nuestros colores.
No necesita ni siquiera se preocupan de que ellos existen.
Lo hacen.
>> ALLISON Buchholtz-AU: Ellos existen.
>> TOMAS REIMERS: Así CSS creo que tiene 255 palabras para hablar de color.
Si usted puede pensar en un color exterior los 255, al igual que, me habrá impresionado.
ALLISON Buchholtz-AU: Sí.
Creo que ustedes pueden tener acaba de llegar justo después.
>> TOMAS REIMERS: Así que aquí, usted verá que tenemos dos cajas
justo encima de uno al otro, ¿no?
Hola y adiós.
>> ALLISON Buchholtz-AU: No hay espacio en el medio.
Sólo están smooshed derecho en la parte superior de la otra.
>> TOMAS REIMERS: Así que lo primero Yo creo que deberíamos hablar
es también vamos a decir--, sí.
Así CSS los representa como una especie de cajas.
Y como cajas, que tienen contenido.
Y el contenido ahora es una especie de el HOLA o el adiós y eso es todo.
DE ACUERDO?
>> Así que una de las primeras cosas que que puedo hacer es que usted puede agregar relleno.
Relleno dice cuánto espacio debería dejar a cada lado.
Así que digamos que quiero decir 10 píxeles en cada lado.
Y voy a diseccionar que en un segundo.
ALLISON Buchholtz-AU: Todas estas cosas aquí
van a ser en su mayoría en píxeles para el resto del seminario.
Vas a ver que tiene un poco de espacio a su alrededor, ¿verdad?
Así que lo que no se ve aquí es que hay este tipo invisible de relleno
en cada lado, lo que dice, como, Bueno, usted tiene su cuadro de content--
>> ALLISON Buchholtz-AU: ¿Usted desea simplemente tire hacia arriba el elemento inspeccionar?
>> TOMAS REIMERS: Sí, eso es una buena idea.
ALLISON Buchholtz-AU: Además, me parece que el elemento de inspeccionar es una buena manera
averiguar si algo está pasando mal, algo inesperado sucede,
inspeccionar las etiquetas y ver qué es como sobrescribe es útil.
>> TOMAS REIMERS: Así que no estoy seguro si ustedes pueden ver este color.
¿Se puede?
Verá este relleno sobre el tipo de borde.
Y entonces se ve la real contenido en azul, ¿verdad?
Así que esa es la misma conceptos básicos del modelo de caja.
Usted tiene contenido.
Entonces usted tiene relleno.
>> AUDIENCIA: ¿Por qué no simplemente utilizar el cuadro interior el--
>> ALLISON Buchholtz-AU: Correcto.
Debido a que se acaba de seleccionar el elemento en este momento.
>> TOMAS REIMERS: Así es.
Otras cosas.
Así que vamos a hablar de eso comando relleno por un segundo.
Así que en CSS, mediciones necesita tener una unidad.
Así que primero usted tiene la cantidad.
Así que en este caso, lo hemos dicho 10.
Y luego la siguiente Lo hemos dicho es el píxel, píxeles.
Otros que pueda tener son cosas como centímetros, pulgadas.
Usted puede hacer cosas como: lo que es de 10 pulgadas?
Y va a ser ridículo.
>> ALLISON Buchholtz-AU: Oh, muchacho.
>> AUDIENCIA: Whoa.
>> TOMAS Y ALLISON: Sí.
TOMAS REIMERS: Para que todo el relleno.
Voy a volver a píxeles.
>> ALLISON Buchholtz-AU: Píxeles tienden a ser, al igual que, la norma.
Cuando nos fijamos en un montón de sitios web, que en su mayoría trabajan en píxeles.
TOMAS REIMERS: Así que vamos a ver ya sea pixels-- los demás los que se ven
es EM, que es una em es igual a la altura de la fuente
que usted está utilizando actualmente.
>> ALLISON Buchholtz-AU: Mm.
TOMAS REIMERS: Es una buena manera de decir, como, yo quiero tanto espacio como mi fuente
es tomar.
ALLISON Buchholtz-AU: No sabía eso.
Se aprende algo nuevo cada día.
TOMAS REIMERS: Hay una gran cantidad de mediciones en CS.
Le sugiero que busque para arriba.
Para todos sus casos, creo que píxeles deben ser suficientes.
Y son también lo que vas a ver
en la mayoría de los ejemplos se hace en línea.
Así que lo dejaremos en píxeles.
>> También puede, yo deberíamos decir-- así establecerá el relleno de todos los rellenos.
También puede hacer algo como "Padding-top" que sólo definido--
ALLISON Buchholtz-AU: Tal vez nos pondremos nuestro "HOLA" de nuevo.
TOMAS REIMERS: --to acaba de establecer la acolchado en la parte superior y nada más.
Así que los cuatro comandos son padding-top, padding-bottom, left-padding,
y padding-derecha.
>> ALLISON Buchholtz-AU: Al igual que se puede esperar de una caja.
>> TOMAS REIMERS: Sí.
Nada demasiado loco allí.
¿Tiene eso sentido?
Así que ese es el relleno.
Yo voy a poner todo los rellenos de nuevo a 10.
Y luego me voy a pasar a la frontera.
>> Entonces, ¿cuál es la frontera es frontera es una orden extraña.
Lleva una especie de tres cosas a la vez.
Así que lo primero es lo grande que quiero que sea como una medición.
Una vez más, sólo estoy usando píxeles.
Y lo último que debe agregar a las mediciones
es la única cosa que no necesita una unidad es 0.
En realidad es incorrecto para dar una unidad 0,
porque 0 es 0 pulgadas a través de, píxeles, centímetros, lo que sea.
Todo Sólo significa 0, ¿verdad?
Así que primero le das la medición.
>> Entonces usted le da el estilo.
Así que voy a decir "sólido".
Y vamos a hablar de lo que eso significa.
Y luego, por último, que le dan un color.
Así que voy a decir "negro".
Y estas son todas cosas que hemos ahora visto antes, excepto por el estilo,
pero ya hablaremos de eso.
Así que ustedes han visto las mediciones, y has visto los colores.
Y lo que pasa es que conseguimos este bonito borde negro alrededor de él, ¿verdad?
Ustedes ven cómo lo hicimos?
>> AUDIENCIA: Sí.
>> TOMAS REIMERS: Cool.
Entonces, ¿qué es eso?
Así que primero de todo, es un píxel.
Eso es evidente por sí mismo lo suficiente, ¿no?
Al igual, que es un píxel de grosor.
¿O sería un píxel, pero estoy el zoom, así que es un poco más
que eso.
>> ALLISON Buchholtz-AU: Y tenemos esta resolución TV ridículo.
>> TOMAS REIMERS: Sí.
Puede hacerlo más grande, más pequeño, lo que sea.
Así que aquí está una frontera de dos píxeles.
Verás que es el doble de grueso.
Lo siguiente que tienes es el color.
Eso no es interesante.
No voy a hablar sobre eso, de verdad.
>> ALLISON Buchholtz-AU: Pero el estilo podría ser un poco interesante.
>> TOMAS REIMERS: Sí.
Así estilo, hay pocos que veo de uso común.
Sólidos, del próximo Primero de uno puntos y trazos del pasado de uno.
Y aquí está salpicada.
Verás que son un montón de puntos, ¿no?
Una buena manera de conseguir una especie de frontera agradable va, guiones son también muy populares.
>> ALLISON Buchholtz-AU: Y luego, por supuesto, estoy
Seguro que hay un montón otra estilos que usted puede conseguir.
Y tenemos un gran conjunto de enlaces al final para ustedes
al tipo de leer detenidamente y mirar CSS más fresco.
>> TOMAS REIMERS: Y entonces la última cosa, estamos
vamos a hablar de la modelos de cajas muy rápido.
Ah, y luego frontera, exactamente como relleno,
usted también tiene cosas como border-left, border-right, border-top,
border-bottom, que le permitirá para llegar a una frontera específica.
Así que aquí es sólo la frontera definida izquierda.
¿Eso tiene sentido?
>> ALLISON Buchholtz-AU: Es un lugar fresco manera de enfatizar las cosas o añadir
líneas entre los diferentes elementos.
TOMAS REIMERS: Por supuesto.
Así que esa es nuestra frontera.
Y el margen de la última de uno.
Como relleno de Margen Excepto que no es within--
ALLISON Buchholtz-AU: Es no alrededor de su elemento
pero en realidad alrededor de la entera cuadro que hemos estado viendo.
>> TOMAS REIMERS: Sí.
Allison dijo que la perfección.
No es, como, dentro de su elemento, que es alrededor de la caja entera.
Eso significa cosas como fondo no se aplican a él.
Y, básicamente, dice, como, yo no quiero nada
en este espacio para mí.
Así como tenemos aquí un margen de 10 píxeles.
Así que nada dentro de 10 píxeles debe estar a mi lado.
Eso es algo de su espacio, pero como que no.
Así que esa es la misma conceptos básicos del modelo de caja.
¿Tiene eso sentido?
Fresco, fresco.
ALLISON Buchholtz-AU: Awesome.
Así que ahora creo que sólo Contamos con recursos frescos
que te llevaremos chicos a través de muy rápidamente.
Y vamos a actually-- bien, tenemos internet todavía?
>> TOMAS Reimers: Vamos a ver si puedo abrir up--
déjame ver si puedo puede conseguir Internet rápidamente
mientras Allison habla de cualquier cosa Allison quiere hablar.
ALLISON Buchholtz-AU: Así basically-- no lo hago
sé qué más puedo decir en este momento.
Pero estas son algunas muy buenos recursos.
Estos son los que Tomas y he usado
y que en realidad utilizado para preparar para esto.
W3Schools es uno que chicos deberían haber visto antes.
Lo recomendamos para una muchas cosas con CSS.
Sé lo recomiendo a mi sección todo el tiempo.
>> Una de las grandes cosas es que que permite a clase de lío con CSS
y ver los cambios instantáneamente en este,
como, doble ventana de vista que tiene.
Así que usted no tiene que preocuparse de la creación de su propia página web,
o la creación de host virtual en su aparato local y host local,
y conseguir todas esas cosas de trabajo.
Está incrustado justo dentro de la página.
>> Y tiene estos pequeños lecciones que pueda
pasar por aprender más sobre selectores,
o aprender acerca de la manipulación de su fuente, o un fondo o una imagen.
Y usted tiene estos resultados instantáneos que
no tienen que hacer ningún otro trabajo de preparación para.
Así que me encanta W3Schools.
Es fabuloso.
¿Está funcionando?
>> TOMAS REIMERS: Sí.
No, no lo es.
¿Quieres que yo trate y reinicie el ordenador?
¿O queremos a--
>> ALLISON Buchholtz-AU: Quiero decir, bueno, esto también estará en línea.
Todas las diapositivas estarán en línea.
Así que sólo recomiendo encarecidamente hacer esto.
>> Esto es grande como se acaba como una hoja de trucos.
Es sólo todo el básico comandos que usted tiene.
Es genial cuando estás primero partiendo de su sitio web.
Porque tal vez no lo hace quiero entrar en todos
el verdadero meollo de la cuestión diseño pesado cosas.
Sólo tiene que formatear de una manera que tipo de tiene sentido y la voluntad
hacer por el momento.
Y si realmente quieres para entrar en ella, lo sé
esto es, como, uno de Referencias favoritas de Tomas.
Estábamos usando a preparación, y es fabuloso.
Es el desarrollador de Mozilla.
>> TOMAS REIMERS: Así Mozilla son las personas que hacen Firefox.
Y es sólo su propio desarrollador referencia, que creo que es impresionante.
Y tiene una maravillosa lista de recursos.
Así que tener--
>> ALLISON Buchholtz-AU: Y luego la última nota es
cuando usted está tratando de el diseño de su sitio web,
inspirarse en cosas que usted piensa que son bastante.
Inspección del elemento, inspeccionar el código fuente
puede ser muy útil para tratar de averiguar
cómo el estilo de su propio sitio web.
>> A menudo, me siento como el mejor forma, además de la experimentación,
es sólo para mirar cosas que son bastante.
Me parece que es muy difícil sólo tipo de diseñar cosas por su cuenta,
sobre todo al principio.
Por favor, revise sitios web que disfrute viendo.
Averiguar lo que hace atractivos para usted.
Y entonces no dude en tratar de replicar eso.
>> TOMAS REIMERS: Correcto.
Incluso como sitios web de esta manera, se puede ver
definitivamente hay un div en la parte superior.
Y luego tienes otro div dentro aquí, que es Awesomeness CSS.
Y entonces usted tiene un montón de enlaces aquí.
Si realmente inspeccionar elementos, se pueden ordenar de
comenzar a ver lo que hacen sitios web verá así, y cómo puedo
recreo que si quería.
¿Tiene eso sentido?
Así que sólo disponemos de tres minutos para el final.
Así preguntas?
Cualquiera de ellos?
Sí.
>> AUDIENCIA: Para el color rectángulo, ¿cómo
tener-- si no lo quiere va a través de toda la página, podría
usted lo ha hecho ir al otro lado sólo la mitad de la página o sólo el texto?
>> TOMAS REIMERS: Sí, absolutamente.
Así que vamos a ver en realidad.
Tengo dos ideas.
Así que en primer lugar, usted también puede utilizar porcentajes.
>> AUDIENCIA: ¿En serio?
>> ALLISON Buchholtz-AU: Así que algo para buscar es el posicionamiento relativo.
Es algo que nos no tienen tiempo para entrar,
pero es algo que definitivamente Recomiendo que ustedes echarle un vistazo.
>> TOMAS REIMERS: El por ciento menos.
Y ver cómo lo hicimos sólo 50% de la anchura?
ALLISON Buchholtz-AU: Si realmente conocer el número de píxeles,
puede ser más precisa de esa manera.
Usted puede ver alrededor de él.
Pero el 50%.
Si tuviéramos que cambiar el tamaño de nuestro navegador, sería hacerlo más pequeño.
>> TOMAS REIMERS: Bueno, es básicamente el 50% en este momento, creo.
Es 50%, y entonces el margen se ha agregado a eso.
CSS tiene muchas peculiaridades.
Así que ahora mismo se trata de 50% de la anchura de la página.
Pero recuerde que usted tiene 10 píxeles sacados de cada lado.
Así que si usted fuera a pedir que contra el borde izquierdo del navegador,
a continuación, se vería como un 50%.
Una vez más, como he dicho, CSS puede ser un montón de conjeturas y comprobación.
Al igual, usted piensa que algo es va a comportarse de una manera,
pero se comporta de una manera totalmente diferente.
>> ALLISON Buchholtz-AU: Y que acaba de obtener más inteligente,
y que acaba de obtener una mejor la intuición de que a medida que avanza.
>> TOMAS REIMERS: Y pone peor y peor.
Así que es realmente sólo una carrera.
>> ALLISON Buchholtz-AU: Eso es muy alentador.
Queremos que les gusta CSS.
>> TOMAS REIMERS: CSS es impresionante.
Recuerde que.
Otras preguntas?
>> ALLISON Buchholtz-AU: La única cosa.
Algo más?
Fresco.
>> TOMAS REIMERS: Awesome.
>> ALLISON Buchholtz-AU: Bueno, si usted chicos tienen alguna pregunta más adelante,
estamos siempre disponibles como de costumbre.
Probablemente veremos algunos nos de para proyectos fin de carrera
y sin duda en el hackathon.
>> TOMAS REIMERS: Por supuesto.
Y en la feria.
>> ALLISON Buchholtz-AU: Y en la feria.
Oh.
>> TOMAS REIMERS: Esperamos con interés ver toda su awesome--
>> ALLISON Buchholtz-AU: Veremos todos sus sitios web impresionantes
que será hermoso.
TOMAS REIMERS: Siempre se puede ver, como, los sitios web
que tenía, como, bueno CSS y después como los que no trate de hacerlo CSS.
ALLISON Buchholtz-AU: También, otro cosa, una cosa más que mirar en
es Bootstrapping.
Así Bootstrap es grande.
>> TOMAS REIMERS: Google que si usted--
>> ALLISON Buchholtz-AU: Google él.
Es fabuloso.
Te va a encantar.
Y ahora que tiene un conocimiento básico de CSS,
que va a hacer mucho más sentido.
Impresionante.
Gracias, chicos.
>> TOMAS REIMERS: Muchas gracias.