[Música tocando] ALLISON Buchholtz-AU: Entón estamos basicamente só vai para darlle un resumo CSS, porque sabemos que non foi cuberta en todas as seccións. E nós realmente queremos estar seguro de que vostede caras teñen esta ferramenta á súa disposición, porque ten a capacidade de facer seus sitios ollar moito máis bonita. 

E se está construíndo un sitio, a continuación, probablemente vai querer facela fermosa. Quero dicir, non ten que, pero eu suxerín-lo. [Risas] Se quere que os usuarios de usalo, pode queremos facelo un pouco [inaudível]. Entón, imos tentar darlle só algunhas ferramentas básicas e comprensión, de xeito que cando sae e está buscando cousas sobre CSS, non é completar xerga, como CSS, por veces, ser. 

TOMAS REIMERS: Yeah. Allison dixo que moi ben. Entón eu creo que o primeiro que debe comezar co que é CSS? Entón CSS é impresionante. CSS-- 

ALLISON Buchholtz-AU: Isto é o nome do noso seminario. 

TOMAS REIMERS: Yeah. É moi importante que Entende que ao entón. Se só se fai unha cousa, é que o CSS se impresionante. Dous é CSS significa CSS. Así, na súa esencia, é CSS unha folla de estilo, o que significa el permite que para denominar unha páxina web. E entón o que iso significa, é unha forma de engadir estilo para os seus sitios web. Entón, polo estilo, queremos dicir todo que non está structural-- así cousas como cores, fondo imaxes, fronteiras, como, recheo, marxes. Imos falar sobre o que todo isto significa que de aquí a pouco. 

Entón, nós temos só ir adiante e abriu tanto daqueles en gedit. Polo tanto, este é index.html. E este é main.css. Entón main.css non ten nada. ALLISON Buchholtz-AU: No estilo ata agora. TOMAS REIMERS Ningún. E como vai ver, é un sitio moi feo. ALLISON Buchholtz-AU: É simplemente. TOMAS REIMERS: Yeah. Si, non é feo, é só minimalista. E entón aquí temos index.html. E así, a unha rápida recapitulación do HTML, Allison, quere só falar sobre a páxina? 

ALLISON Buchholtz-AU: Yeah. Entón, obviamente, temos o noso HTML tag, que acaba de ficheiro HTML nomes. Temos o noso cabeceira aquí, con CSS Awesomeness, which-- se volver. Onde está iso? 

TOMAS REIMERS: Oh. Si, pode ver. ALLISON Buchholtz-AU: E teña en conta a cabeceira é este cabeceira guía ata aquí. E, a continuación, "Ola, mundo!" é o texto que temos só mostrando na web páxina, que é-- volver. Volver. Cal é só no noso corpo aqui-- o texto sen formato. Ademais, unha cousa a notar, se ollar aquí, Tomas trocou-se estes dous do noso foto. Entón, mentres ten todo tres deles, está ben. Poden estar en calquera orde que eles queren. O que é máis importante é só iso tes cada unha destas tres cousas. 

TOMAS REIMERS: Cool. Engadir un tipo doc? ALLISON Buchholtz-AU: Yeah. TOMAS REIMERS: Yeah. Con estilo. ALLISON Buchholtz-AU: Aparentemente, meus micrófonos non gusta de min. TOMAS REIMERS: Oh, ofrécenos un segundo só mentres Allison intercambio seu micrófono. Entón, si. Polo tanto, temos a nosa páxina principal. É unha especie de unstyled. Nós non temos moito. Nós só temos basicamente texto. Temos a folla de estilo. Temos o título. Entón, só bare-desossada compoñentes facer un sitio. 

Entón, a partir de aí, imos falar do que é CSS e que parece e todo iso. Así, por isso-- ALLISON Buchholtz-AU: Volver para os diapositivas. TOMAS REIMERS: Volver aos diapositivas. E Allison pode asumir. 

ALLISON Buchholtz-AU: Woo. Aceptar. Así, no seu arquivo CSS, vai ter unha morea desas cousas chamados selectores. Este será só o base do seu arquivo CSS. É só pasar a ser moitos e moitos destes. Así, o selector de. Esta é só a anatomía xeral. Nós imos pasar por exemplos, porque se nunca caras asistir miña sección, eu me sinto como cousas en abstracto realmente non ten sentido. El sempre axuda a ver os exemplos. 

Polo tanto, temos algúns selector. Isto vai ser un identificador de o que queremos que o estilo para aplicar. E entón podemos ter calquera conxunto de regras e valores. Entón selectores que se pode ver podería ser algo así como corpo, ou parágrafo con P, ou cabeceira, ou o que quere, todo o que quere que os seus etiquetas HTML para ser. 

Polo tanto, neste caso, temos corpo. E nós temos unha regra, que esta corresponde para o que o seu estilo é aplicable. Polo tanto, neste caso, temos cor de fondo e peso da fonte. Entón, iso vai cambiar o fondo de calquera cousa dentro de calquera etiqueta corpo do noso arquivo HTML. E vai dar que este valor luz azul. 

Por iso, vai facer a fondo azul claro. E entón calquera cousa dentro do corpo é terá un peso negra. Por iso, só vai negra todo o noso texto. E este é só un selector. Pero podería ter moito moitos destes. E como nós imos amosar despois, un pouco máis sobre o xeito no que que as obras e máis exemplos de alí. Calquera cousa que quere engadir? 

TOMAS REIMERS: No. Allison ten. Nós só estamos indo a cortar unha exemplo aquí no noso exemplo web. Entón imos realmente tomar esta. É perfecto. Entón, eu estou indo só para copiar e pegar que a dereita no noso arquivo main.css. E eu estou indo a salvalo. E entón imos executalo. Así, nota lado, un dos a maioría das cousas frustrantes é, se non gardar un arquivo, e logo ti, como, actualizar a páxina, e como, por que non é o cambio a suceder? Isto ocorre. Entón, aquí, vimos que fixemos a nosa web un fondo azul claro e algún texto en negra. 

Quere tamén de mencionar, se caras teñen preguntas sobre calquera cousa estamos facendo, faga o favor libre para parar e preguntar-nos. Estamos totalmente dispostos para responder preguntas. 

ALLISON Buchholtz-AU: Obviamente, con CSS, todo se basea en si. Polo tanto, se unha cousa non fai ten sentido agora, nós Non quero que a afundilo lo máis tarde. 

TOMAS REIMERS: Entón, imos tipo de dissecar iso. Entón quere comezar co selector aquí? 

ALLISON Buchholtz-AU: Yeah. Como eu estaba dicindo antes, o corpo é só o noso selector aquí. Entón, se imos voltar á nosa ah index--. 

TOMAS REIMERS: Que eu só pechado. Dáme un segundo. Entón File, Open, index.html. ALLISON Buchholtz-AU: Cool. Entón, se observar aquí, nós ter estas etiquetas do corpo, non? Así, o selector de só corresponde as marcas que estamos a falar. Entón corpo aquí. Entón, o que estamos dicindo é tudo-- podemos volver? Gustaríame poder só como tocar na pantalla. Sería moito máis legal. 

Entón, calquera cousa dentro daqueles tags do corpo, que vimos era só, como, o texto, e o corpo en xeral refírese, así, ao fondo. Se quere cambiar o fondo, que será nunha etiqueta corpo. Só ten esas regras aplicadas a eles. 

Entón, se tivésemos que ir index.html correo en realidade, podemos ter algo fóra do corpo? Se tivésemos, como, un pé algo, non sería aplicable a este. Pero algo dentro estas etiquetas do corpo vai a ser afectados por este órgano selector que fixemos. Entón, se tivese que escribir outra cousa há-- 

TOMAS REIMERS: Imos conseguir isto. Entón, se tivésemos unha div-- de xeito que é só outra marca que pode ter. Estou indo para a pechar. Ou imos facer deste un parágrafo. Entón p significa parágrafo. E dentro dese parágrafo. E entón eu digo: "Este é un texto." Con estilo. E entón eu fixen esa regra se aplica a un punto no canto do corpo. Vai ver como se aplica só a o parágrafo recén formada, á dereita, non a cousa toda. Isto ten sentido? 

ALLISON Buchholtz-AU: Entón, iso é todo o corpo, pero agora o noso selector só corresponde ao parágrafo. Entón, nós só temos negra e azul para este punto específico, porque esta é a única cousa que é colocado dentro da etiqueta p. 

TOMAS REIMERS: Isto ten sentido clasificar de como as cousas encapsulado outras cousas? ALLISON Buchholtz-AU: Ademais, só para dicir, como, unha das mellores formas para realmente sentirse cómodo con CSS é só facer cousas como esta, só probalo. É moi sinxelo de escribir algo a fóra, prema en Actualizar, e ver que pasa. E como a maioría dos CS, experimentación pode, moitas veces levar a unha moito mellor comprensión intuitiva. Aínda máis do que nós só, como, falando con vostede. 

TOMAS REIMERS: Absolutely 100% de acordo sobre este punto. Entón, se nós volver a este, imos comezar dissecar o que estes dous fan. Polo tanto, temos dúas regras sobre este asunto. Así, o primeiro é a cor de fondo. E ve que nós configure-lo igual a un valor, a luz azul. 

Así, en CSS, CSS é unha especie de moi solto sobre como está autorizado a definir a cor. Así, pode define-los polo nome. Tamén pode facer algo como "vermello". E, a continuación, se volvemos a este, vai ver que o fondo é vermello. Tamén pode obter realmente-- Creo que pode ser moi creativo con iso, non pode? 

ALLISON Buchholtz-AU: I creo que pode usar hex. Non pode? 

TOMAS REIMERS: Yeah. Logo, pode usar hex. Pero estou pensando-name sabio. Non están alí? ALLISON Buchholtz-AU: Podes facer moi poucos. Moi parecido a maioría das cores que pode nome-- como, eu creo que o salmón é un. 

TOMAS REIMERS: Imos tentar salmón. ALLISON Buchholtz-AU: I creo Chartreuse está aí. TOMAS REIMERS: Yeah. Vexa? Entón podes estar moi creativo. 

ALLISON Buchholtz-AU: Vostede podería ser moi creativo. Como, se pode pensar en nome da cor, é probablemente alí. Se realmente quere multa detalle, pode ir hex. 

TOMAS REIMERS: Yeah. Así hexadecimal. Se vós lembran esta de volta do seu antigo PSET, Imaxe Solicitar, vostedes tiveron que tratar con eses valores hexadecimais. E tipo de recapitular o que é iso, hex ten tres valores almacenados nel. Polo tanto, é en grupos de dous incrementos. Os dous primeiros representan o valor vermello. O segundo representa o valor de verde. E a última é azul? 

Entón FF acontece para representar un hexadecimal 255. Entón tes 255 vermello, 255 verde, e 0 para azul. E os valores varían entre 0 e 255. 

Audiencia: Correcto. Entón, basicamente, poderíamos buscar a Internet para calquera cor que queiramos, e identificar o certo coñecida cor espectro de combinación, e, despois, pode poñelas? ALLISON Buchholtz-AU: Exactamente. Entón ten practicamente o control completo sobre as cores que quere dentro CSS. Imos falar sobre imaxes de fondo máis tarde? Ou queremos facer iso? 

TOMAS REIMERS: Yeah. Absolutamente. Entón, primeiro, só para mostrar que vermello e verde é amarelo. E se precisa de axuda para atopar isto, pode Google algo como "Color Picker". ALLISON Buchholtz-AU: Oh, iso é tan bo. Eu amo o Color Picker. 

TOMAS REIMERS: colorpicker.com é un bo exemplo. E aquí, vai ver que ten un selector de cores Photoshop-like cheo. 

ALLISON Buchholtz-AU: Hum-hum. Ademais, as cousas legais que está pode xerar esquemas de cores de xeito que non ten, like, chocar cores. TOMAS REIMERS: E despois aquí está o valor hexadecimal aquí enriba. Entón, sempre pode atopar en liña basicamente lugares para obter o valor hexadecimal de. Non é unha especie de que só, como, nós ver as cores do mundo en números. É máis que ir en liña e atopar o que cor que queiramos, e, a continuación, levar o número cara a abaixo. Porque é só un realmente fácil xeito de referenciar as cousas en CS. 

ALLISON Buchholtz-AU: E despois hai Também-- Eu esquezo o nome exacto do sitio. Pero hai sempre, I pensar, algo do Adobe que xera esquemas de cores para ti, que é moi legal, porque definitely-- ás veces é difícil de descubrir, Oh, se eu queira utilizar esta cor, o que podería ser un útil para usar noutros lugares no meu sitio para, como, facelo agradable e cohesionada. 

TOMAS REIMERS: Allison está falando un por Adobe Kuler chamado, eu creo. É K-U-L-E-R. ALLISON Buchholtz-AU: Eu creo que si. Estou seguro de que é o único. 

TOMAS REIMERS: O meu favorito ten sempre foi Color Scheme Deseño. 

ALLISON Buchholtz-AU: Ooh. 

TOMAS REIMERS: Cal é agora-- 

ALLISON Buchholtz-AU: Ah, iso é fermoso. 

TOMAS REIMERS: E pode basicamente dicir, como, Quero tres cores á beira do outro. E entón imos facer algo de bo. E entón pode obter un exemplo do que pode parecer. E entón se pasar o rato sobre calquera dos Los, dálle o valor hexadecimal. 

Entón, así como unha boa forma de comezar pensando en esquemas de cores ou o que as cores nunha web pode ir ben en conxunto. Porque iso pode ser sorprendentemente non é tan fácil de escoller como pensa. E, a continuación, a outra cousa legal Sempre pensei sobre este sitio é se bater exemplos, que vai amosar o que un sitio exemplo pode parecer a usar este esquema de cores. En fin. 

Volver CSS real. ALLISON Buchholtz-AU: Pero, obviamente, nós Coñecemos esas referencias pode ser útil. TOMAS REIMERS: Non, eles definitivamente pode ser útil. Así, a segunda regra, Allison? 

ALLISON Buchholtz-AU: Yeah. A segunda regra é só correspondente a nosa fonte. Polo tanto, o peso da fonte é só un tipo de-- xeito que o peso sería estar se quere só, como, normal ou, como, fontes máis finas, ou, neste caso, como, negra. Eu esquezo. Cal é o se quería ele-- está aí un máis fino do que só, como, normal? TOMAS REIMERS: Realmente non saber se hai un máis fino. ALLISON Buchholtz-AU: Eu esquezo. Peso Entón font nós tipicamente é só usar a negra. Se quere estar realmente en Lo, imos amosar-lle. W3Schools ten todos os distintos cousas que podes facer por fontes. Pero, basicamente, se quere para cambiar algo sobre a pía bautismal, el sempre será, como, font-algo. Entón será como, font-family se é intentando cambiar o tipo real. Será font-style se quero facelo como cursiva, ou cursiva, ou outros adornos. Ou mesmo font-cor, se queriamos cambiar isto. 

TOMAS REIMERS: Yup. Así, pode cambiar isto. E medio que a recapitulación agora, para que poida ver que temos o selector para arriba aquí. Temos esas claves. E entón temos regras delimitado por punto e coma. Isto ten sentido? Si? Con estilo. Entón, se isto é boa-- 

ALLISON Buchholtz-AU: Back. TOMAS REIMERS: Imos falar especificamente sobre o tipo de selectores que temos. Porque agora temos tipo de só mostra as etiquetas. Pero vós poderían velo plausible. Digamos que teña dous parágrafos nunha páxina e Quere ser capaz de estilo un, pero non o outro, só non quere limitar-se ter que utilizar diferentes HTML real tags para darlles diferentes estilos. 

Polo tanto, temos tres básicos tipos de selectores. ALLISON Buchholtz-AU: Yeah. Polo tanto, temos etiqueta, que é o que estivemos falando no momento. Entón, que tipo de como o seu corpo ou p. E entón temos clase, que é cando define-lo na nosa arquivo CSS, el sempre será punto, o que quere quere que o nome da súa clase para ser. E isto pode aplicarse a moitas cousas. 

Digamos que teña cinco parágrafos e dúas das tres deles ten que ser o mesmo estilo, vostede aplicaría unha clase a el. E esta é só a forma como o facemos. Nós imos dar-lle un exemplo de onde esta realmente aparece. Pero se tivese quizais algunha etiqueta p, tras el, vostede escribiría, clase é igual a calquera que sexan as clases quere aplicar a el. Entón o que selectores de clase que queremos aplicar a este punto específico, poderiamos escribir só como este. Claro, eu creo que un exemplo pode facelo moito máis concreta. 

O outro temos é id, que denotamos cun hash, ou libra, ou hashtag. TOMAS REIMERS: octothorpe. ALLISON Buchholtz-AU: octothorpe. Isto funciona tamén. E esta debe ser realmente único. Eles só deben aplicarse a unha cousa na súa páxina. Entón, se isto é un parágrafo específico, ou algún elemento nunha lista, ou o que quere, este debe ser único. E do mesmo xeito que acabamos dicir, como, class = "class1 class2" isto pode ser só a id do que quere que temos. TOMAS REIMERS: Yeah. Entón, imos falar definitivamente sobre exemplos aquí. E eu estou indo só para mergullo directo ao seu código. Entón, imos ollar para o noso HTML. E por iso, agora ten un parágrafo. Este é un texto. Eu só vou para modificar lo. "Este é un texto 1." E entón nós imos ter unha "Este é un texto 2." 

ALLISON Buchholtz-AU: segunda. TOMAS REIMERS: Yup. Entón, nós temos agora "Este é un texto 2", non? E veremos que si recargar a páxina, o que imos atopar é que nós imos find-- ALLISON Buchholtz-AU: Ooh. TOMAS REIMERS: Yeah. Nós imos atopar un "Este é text 1 "e" Este é un texto 2. " 

ALLISON Buchholtz-AU: E a fermosa cor amarela. 

TOMAS REIMERS: E vai ver que o noso selector de agora, que se aplica a p de, ou parágrafos, afecta tanto, porque ambos atender a condición de que ambos son unha etiqueta p. Isto ten sentido total. Entón a pregunta é, así, o que se quixésemos só ten unha? Entón, exactamente como Allison estaba dicindo: temos dúas outras formas de facelo. Vou comezar co id. 

ALLISON Buchholtz-AU: Imos comezar co id. 

TOMAS REIMERS: E ambos destes son atributos. Entón atributos existen HTML. E o que son é algo que engadir dentro da marca que é separar o nome da marca. Así, pode ter varios atributos. Si? 

ALLISON Buchholtz-AU: Eu só estaba indo quere dicir, a partir do seu exemplo de PSET 7, se algún de vós tentar aliñar cousas para o centro, pode usar "Text align = center." E notou que probablemente debería centrado seu texto ou a súa barra de navegación. Entón, iso é só tamén un atributo que pode estar familiarizado. TOMAS REIMERS: Hai un grupo de atributos que vai ver. Si. Como boa referencia para PSET 7. Temos id. Tamén pode ter clase, cousas como esta. A única marca pode ter moitos atributos. Entón, comezando con id, imos finxir que quero ter un id de-- eu non sei. Imos chamalo especial, porque este, estamos vai facer negra e subliñado, e calquera que sexa. ALLISON Buchholtz-AU: É Será super especial. TOMAS REIMERS: Entón, iso un, temos id especial. Así, a forma de seleccionar que, entón, é en main.css, en vez de ter unha etiqueta p, fai #Special, OK? E que selecciona o cousa con id especial. Será que isto ten sentido para todos? Audiencia: Yeah. TOMAS REIMERS: Cool. Polo tanto, agora imos volver, imos see-- berros. Si. Imos ver o que selecciona só aquel con id especial. Si? Soa ben. Si. 

Audiencia: Pode ter un algo atributo de ambos clase e un id? 

TOMAS REIMERS: Si. Audiencia: Aceptar. E entón o que pasa se, a continuación, dar- que algunhas regras das CSS que o conflito? TOMAS REIMERS: Absolutamente. Estamos indo definitivamente para falar sobre iso. Entón o que estaba a recibir en, tamén se pode ter clases. Entón, imos finxir que eu tiña tres parágrafos e I quería o estilo do primeiro dous, pero non o terceiro. Ben, a súa primeira idea pode ser, así, eu podería só dar o segundo un id. Pero non pode, porque un id, exactamente como Allison estaba dicindo: ten que ser único. 

Entón, en vez de un id, o que pode usar é que pode usar unha clase. E un class-- o que permite cómpre facer é basicamente dicir, esta pertenza, como parte dun grupo. Neste caso, o noso grupo chámase especial. E o que nós imos facer, entón, é imos dizer-- ao contrario de libra, usaremos punto. OK? E teña en conta que a libra e dot só existen dentro do arquivo CSS, non dentro do HTML. ALLISON Buchholtz-AU: Si. Distinción importante. 

TOMAS REIMERS: Eu teño tiña tanta loita, porque eu coloque o hash en HTML e entón me sentín estúpido por un longo tempo. Vexa como selecciona ambos os únicos con esa clase? Con estilo. 

Agora, as cousas poden ter varias clases. Digamos que eu quería facer a primeira dous teñen un fondo de amarela e os dous últimos teñen unha cor de fonte de azul. Aceptar. Eu realmente non sei por que eu quero facelo, pero eu podo. 

ALLISON Buchholtz-AU: non puido recoméndase para o seu sitio web. Pero para os nosos propósitos, que vai facer. 

TOMAS REIMERS: Non é un bo esquema de cores. ALLISON Buchholtz-AU: Ben, amarelo e azul son as miñas cores do ensino medio. Eu non sei, con todo. TOMAS REIMERS: Allison de alta escola tiña un esquema de cores grande. [Risas] Entón, o que podemos chamar iso é Imos chamar isto-- polo que temos Especial e temos Pretty. Suxiro, por iso, use nomes moito máis descritivos. ALLISON Buchholtz-AU: Si, eu faría chamar este, como, amarelo ou azul. 

TOMAS REIMERS: Non somos realmente facer un sitio real, é por iso que nós non estamos facendo isto. Pero se o tiña un sitio real, pode ter, como, cabeceira artigo, contido do artigo, primeira palabra, cousas dese tipo, que permiten que sexa moito máis descritivo. Estes son realmente só como variables. Deben ser nomeados de forma onde pode, como-- si, como tal. Perfecto. 

Así, a cor de fondo. E entón nós imos dizer-- de xeito que o xeito de cambiar a cor é só "cor". E nós estamos indo a facelo azul. Iso é legal. Polo tanto, agora temos o dous primeiros teñen especial. Preto un vai teñen "class = bonito." ALLISON Buchholtz-AU: E entón vai quere engadir "bonito" para o do medio. TOMAS REIMERS: Yup. E, a continuación, para o medio, engadir "bonita", o que pasa é só ten un espazo. Así, o atributo de clase é unha lista separada por espazo de todas as clases que se aplican a esta marca. OK? Non é como este pertence algún tipo de clase especial chamada "Especial, espazo, bonito." Ela pertence a dous classes-- especial e bonito. Si? Con estilo. 

E, a continuación, se miramos o que pasa, estamos vai ver que primeiro ten fondo amarelo, texto negro. Segundo um-- 

ALLISON Buchholtz-AU: --has negra fondo amarelo con texto azul. E o noso último só ten a texto azul que lle é asignado. 

TOMAS REIMERS: Cool? Como selectores de traballar? Impresionante. 

ALLISON Buchholtz-AU: Queremos falar do conflito agora, entón? 

TOMAS REIMERS: Entón, si. Absolutamente. Entón, o que pasa se ter un conflito, non? Imos finxir que o primeiro configura algo como-- ALLISON Buchholtz-AU: Maybe este cambia o fondo? TOMAS REIMERS: Yeah. Entón, nós imos facer "bonito" cambiar o fondo de salmón. ALLISON Buchholtz-AU: Vostede é só con todas as grandes cores hoxe, Tomas. TOMAS REIMERS: Yeah. Porque eu descubrín que podo usar salmón como unha cor real. Entón, nós estamos indo só para facelo. Eu tamén creo que por do sol é unha cor real. Audiencia: Por do sol é unha cor real? ALLISON Buchholtz-AU: Imos tentar iso. TOMAS REIMERS: Tras esta demostración só porque no caso de que el mexe-se, Eu non quero ser a depuración. Entón, nós sabemos o salmón é unha cor real. Así, calquera intento de o que vai pasar? 

ALLISON Buchholtz-AU: Algunha idea? 

Audiencia: [inaudível]. 

TOMAS REIMERS: Yeah. Entón tes o valor correcto. Basicamente, el leva o última regra que foi dado. 

ALLISON Buchholtz-AU: Entón iso é onde fervenza entrar en vigor. 

TOMAS REIMERS: Entón recorda como nós tivo que CSS? Entón, por que, nós medio que significa que temos unha morea de regras que se aplica enriba uns dos outros, e poden tamén substituír o outro. 

ALLISON Buchholtz-AU: Entón o que está máis abaixo substituirá o que está enriba. Podería ter regras que completamente negar algo de antemán. Tamén é por iso que quere ser coidado cando está nomeando, para que non está creando regras que só está substituíndo completamente. 

TOMAS REIMERS: Ou quizais quero substituír regras. 

ALLISON Buchholtz-AU: Ou que fai. Si. 

TOMAS REIMERS: Finxa que ten un clase que se aplica a maioría das cousas, pero digamos que quere cambiar o cor de fondo para o vermello e o tipo de letra peso para negriña para a maioría cousas, pero para un, só quere a cor de fondo a ser vermello, pero quere todos os outros propiedades, podería facer algo como "font-weight = normal", que pasaría entón a desfacer este cambio ousada. Si? Unha vez máis, o mellor xeito, creo que Allison dixo iso, é só práctica. 

ALLISON Buchholtz-AU: Experimentación. 

TOMAS REIMERS: Práctica, práctica, práctica e experiencia. Eu coñezo unha morea de xente que pensa que CSS é só unha morea de correo cheque palpite ao final do día, cando se quere facer something-- como, vostede ten unha idea aproximada, pero probablemente aínda que probalo para asegurarse de Vostede sabe o que se parece. 

Audiencia: Cando está aplicando clases, máis que un ao mesmo parágrafo ou sección, non é importa que orde pode escriba-los nas citas? 

TOMAS REIMERS: Non, non en todos. 

ALLISON Buchholtz-AU: O que importa é a orde dentro da súa folla de estilo CSS. Audiencia: Vostede podería repetir a pregunta? TOMAS REIMERS: Oh. ALLISON Buchholtz-AU: dentro clase, cando está dando clases a algo no HTML, fai importa que orde están? Non importa a orde. O que importa é a orde do selectores de clase dentro do seu CSS, dentro da súa folla de estilo. 

TOMAS REIMERS: bo son? 

ALLISON Buchholtz-AU: Lovely. 

TOMAS REIMERS: E despois seguiremos a-- ALLISON Buchholtz-AU: O que temos que seguir? Eu esquezo. Oh, só temos exemplos. Pero nós medio que fixo aqueles. Fixemos exemplos en tempo real. 

TOMAS REIMERS: Temos que combinar os selectores pronto. 

ALLISON Buchholtz-AU: Oh, nós comezamos a combinar selectores. TOMAS REIMERS: Entón algúns exemplos é que temos # Libra dog--, ou hashtag, ou octothorpe, ou o que quere que desexa chamar isso-- afiado. 

ALLISON Buchholtz-AU: Can de Sharp. 

TOMAS REIMERS: Entón tes .pets. Algo ten un id de can, só hai un can na páxina. Algo ten un id gato, hai só un gato. Pode haber moitos animais na páxina. É por iso que deu ese clases. Tes un exemplo de p. E, a continuación, así que un dos último exemplo, onde é algo que nós non falamos, é o que ocorre cando combina-los. Entón p.pets. 

Entón, para iso, imos voltar para o código e introducir another-- si. Entón, de volta aquí. 

ALLISON Buchholtz-AU: I sinto que este é realmente-- como só mirando a través de exemplos é realmente o camiño para aprender iso. Entón é iso que estamos facendo. 

TOMAS REIMERS: Entón, imos finxir que só quere para seleccionar o texto 2, non? Entón, nós definitivamente non pode facelo cun id. Ben, nós poderíamos facelo cun ID, pero non ten un ID. Eu podería engadir un, pero imos finxir que eu non quero engadir unha ou que xa ten outra cousa. Eu non podo facelo con iso. A etiqueta non é sempre orixinal, verdade? E nin é a clase. Pero pode combinar estas cousas. Imos dicir que quería facer algo que só se aplica a cousas que ten a clase especial e que teñen a clase fermosa. 

Entón, o que pode facer é en main.css, pode dicir, imos primeiro eliminar esta. Pode combina-las. Así que pode facer .Especial. Non hai espazo. Só .special.pretty. O que isto significa é algo que é tanto especial e bonito. Isto ten sentido? E se somos aquí, o que vai ver é esta regra só se aplica ao segundo, que ten dous. E pode facelo por unha morea de cousas. Pode dizer-- imos finxir que eu só quería para facer as cousas que teñen a clase moi e que tamén son unha marca de parágrafo. Entón p.pretty. Imos finxir que eu tiña algo bonito no corpo tag. OK? Eu podo correr ese e eu pode ver que el só é vai aplicarse a cousas que son parágrafos coa clase fermosa. E pode combina-las, basicamente, como moitos como quere. Así, pode simplemente poñer-los xuntos. Isto ten sentido? ALLISON Buchholtz-AU: Entón este tipo de é máis útil cando, Tomas estaba dicindo antes, quizais ten un sitio moi complicado, e xa ten unha morea destas normas escritas, e só precisa combinar dous de antes. Como en vez de escribir un enteiro novo selector e mudalo alí, pode só combinar Los onde se superpón. 

TOMAS REIMERS: Ou pode atopar out-- veces hai unha clase que fai a cor do tipo de letra como azul, e hai outra clase que fai que o fondo azul. E iso simplemente non vai funcionar. Entón escribe un caso especial, onde, como-- pero se ten ambos, o que está imos facer é que vai fan deste un ese ton de azul e este estoutro ton de azul. Non? 

ALLISON Buchholtz-AU: Bo para estes tipos de excepcións. TOMAS REIMERS: Entón, para pensar sobre os problemas que pode xurdir cando combina-los. Con estilo. Entón, de volta para a nosa presentación. ALLISON Buchholtz-AU: Estamos case alí. TOMAS REIMERS: E deixou de conexión. ALLISON Buchholtz-AU: Oh, non. ALLISON Buchholtz-AU: CS en a oficina, internet vai para abaixo. Oh, a ironía. 

TOMAS REIMERS: Entón, por sorte, podemos presentar sen a internet, eu creo, porque temos todo diapositivas aquí. Entón, imos falar sobre a relación de etiquetas. ALLISON Buchholtz-AU: Correcto. Así, só unha especie de ir fóra do que Tomas dixo: esta é só outra forma de facelo. Polo tanto, temos algúns pais selector cun selector de neno. Así, neste exemplo aquí, temos algúns corpo cunha barra de navegación clase, botón de clase. Ah. 

TOMAS REIMERS: Oh, desculpe. 

ALLISON Buchholtz-AU: E Basicamente, o que isto significa é seleccionar todos os nenos, como todos estes tipos de selectores, dentro deste selector de matriz. E estes son os únicos el nunca vai se aplican. Eu non sei se ten un xeito mellor de-- TOMAS REIMERS: Entón eu creo que a forma de pensar sobre iso é lembrar como antes que tipo de como poñer-los xuntos. E, a continuación, isto significa que un elemento que corresponde a todos estes. O que isto quere dicir é, eu quero vostede para combinar con todo dentro some-- Quero Lo a atopar un selector. E, a continuación, dentro diso, quero vostede para combinar con cousas novas. Non? Así, en CSS, é todo sobre tipo de ser capaz de combinar estes elementos. E pode tentar igualar elementos dentro de outros elementos. 

Entón imos realmente facer un exemplo, e pensamos que vai aclarar. Entón, imos finxir que temos de especial, especial fermosa, que sexa. E entón temos unha conexión, OK? Entón lembre, un é un enlace. El non vai a sitio ningún. E nós imos dar-lle a ligazón da clase, eu creo. Imos darlle o class-- darme unha idea. ALLISON Buchholtz-AU: Cool. TOMAS REIMERS: Coo-- imos ir a clase fermosa. Por que non? 

ALLISON Buchholtz-AU: Aceptar. TOMAS REIMERS: So cousas agora bonitas está indo a facer o fondo azul, cor de fondo de salmón. Isto ten sentido. E se facemos isto-- 

ALLISON Buchholtz-AU: Quere engadir texto de xeito que o hyperlink realmente aparece? TOMAS REIMERS: Que sería unha boa pedida. ALLISON Buchholtz-AU: Por dereita agora estamos só vai conseguir nada. TOMAS REIMERS: Entón este é un enlace. "Este é un enlace." Ah, e iso vai para ser máis un enlace. Imos darlle a clase "cool". Está certo. Con estilo. Entón, agora imos incorporarse iso. Nós imos publicar un. Temos un no tag especial, e nós tamén van ter un na etiqueta fermosa. E agora o que imos facer é que imos facer cool-- que é o que quere que faga? ALLISON Buchholtz-AU: Podemos facelo máis grande? TOMAS REIMERS: Imos darlle un borde. ALLISON Buchholtz-AU: Poderiamos fronteira. TOMAS REIMERS: Yeah. Entón, imos facer algo como, é-- fronteira e estamos vai explicar todo isto nun segundo. Por enquanto-- 

ALLISON Buchholtz-AU: Para o modelo de caixa. TOMAS REIMERS: Pero, polo de agora, estamos só vai darlle un borde. Entón, o que isto significa é que está vai ver estes enlaces. E vai ver que eles teñen estes, como, bordos negras feas, que é legal. 

ALLISON Buchholtz-AU: O noso sitio é tan fermosa. 

TOMAS REIMERS: Yeah. O noso sitio é incrible. Entón, eses dous son ligazóns, e aparecen. Agora imos finxir que eu só quería facelo se non fose algo dentro que tiña un fondo de salmón. Entón recorda que este ten un fondo de salmón, porque é de clase fermosa. 

Pero queremos dicir que só arrefría que están en clase especial, e non en clase fermosa, debe ter esa fronteira. Ben, o que pode facer que é pódese dicir, .Especial, espazo, .cool. E o que está facendo, cando pensa sobre iso, é que é basicamente dicindo: OK, atopar-me todo que corresponde especial. Entón, dentro destas marcas, atopar me todo o que é legal. ALLISON Buchholtz-AU: Entón, outra forma que pode ser bo para pensar sobre iso, trae-lo de volta para C, é así como a idea de alcance. Entón, cando ten algún selector, como os que temos benvida a traballar para, antes diso, toda a súa páxina web, todo o seu HTML está dentro do seu ámbito de aplicación, non? Pero cando temos estes relacións pai-fillo, é como se está estreitando onde está mirando para un lugar específico, como se, como, nós estamos mirando para dentro unha función específica no canto de todo o noso arquivo. Audiencia: Entón, con iso en mente, sería que importaba se tivésemos changed-- ALLISON Buchholtz-AU: A orde? Audiencia: -o clase en CSS para .cool, espazo, .Especial? ALLISON Buchholtz-AU: Si, porque entón que diría, o alcance para todo o que ten legal, e, a continuación ollar para o que has-- Quero dicir, como neste caso, Eu non creo que tería cambiado. 

TOMAS REIMERS: Se tivésemos dixo o que? Sentímolo. 

ALLISON Buchholtz-AU: Se nós alcance o arrefriar e logo, mirar para as cousas de especial, sería o mesmo, en realidade. 

TOMAS REIMERS: Entón non sería. 

ALLISON Buchholtz-AU: El non estaba? Oh, oh ben. Estou errado. 

TOMAS REIMERS: Entón, a razón é diferente-- mistake-- común é que agora só a ligazón ten legal, non? Eu creo que a miña pregunta para vós é, o que nesta páxina son acompañadas por .cool? Existen dúas marcas aquí, non? Cal é este e este. Ambos corresponder legal. Nada máis fai. Entón, se dixo, .cool, espazo, .Especial, O que vai dicir é: dentro destas marcas, o que é especial? ALLISON Buchholtz-AU: Hm. Iso é o que ele-- dereita. Porque é como só algo aquí. 

TOMAS REIMERS: El selecciona nada. 

ALLISON Buchholtz-AU: Considerando que con especial, estamos dentro destas marcas aquí. 

TOMAS REIMERS: Aqueles e aquelas. Audiencia: Aceptar. Entón, estas etiquetas da barra normal? 

TOMAS REIMERS: Si. Isto ten sentido? Como é basicamente intentando restrinxir o seu ámbito. ALLISON Buchholtz-AU: Yeah. Creo que esta é probablemente a xeito máis doado de pensar niso. 

TOMAS REIMERS: Entón, cremos isto, e atopamos este tanto combinado especial. E entón nós estamos pedindo, no prazo de estes faces, o que é legal? E dentro deste, este fresco. Dentro deste, nada é legal. Polo tanto, esta é a única marca que permanece. 

ALLISON Buchholtz-AU: Considerando legal é só dentro destas marcas de alí. TOMAS REIMERS: Exactamente. E o que hai de especial nas que son? Nada. Agora, o que eu vou dicir é se non houbese espazo, está pregunta o que é legal e especial-- ou o que é fermoso e especial, non? Se digo .special.pretty, iso é o mesmo que .pretty.special. 

Xa que a eliminación do espazo é pregunta é, cando di .Especial, está pedindo, OK, cales son especiais? E, a continuación, os que, queridos tamén son bonitas, que é o mesmo, gramaticalmente, como pregunta, o que é moi, e despois deles, o que tamén é especial? Non? É a diferenza de o que está dentro do que é. Audiencia: Aceptar. TOMAS REIMERS: Yeah. Impresionante. Entón, con iso en mente entăo-- 

ALLISON Buchholtz-AU: Creo que a nosa última cousa é (en Fancy BRITISH Accent) o modelo de caixa. 

TOMAS REIMERS: O box-- [Risas] Eu amo o xeito Allison di que. Así, a cousa modelo de caixa. 

ALLISON Buchholtz-AU: Só ten que ter unha caixa, eu vou ser o seu modelo de caixa. TOMAS REIMERS: Entón imos falar sobre iso. Entón, agora gastamos unha morea tempo falando selectores. Ata agora, vostedes son, probablemente, como, mestres da selectors-- sabe, como seleccionar exactamente o contido que quere manipular na súa pantalla. 

Entón, agora a cuestión é, como exactamente pode manipula-lo? Entón eu creo que o máis básico forma de pensar sobre iso é, así, o que exactamente é un elemento en CSS? Nós pasamos moito tempo falando, o que é unha etiqueta, ou o que é o máis básico representación dunha etiqueta? 

Unha boa forma de pensar sobre é dicir, o que forma é salmón? Que forma é, tipo, a de cor salmón fondo? 

Audiencia: É un rectángulo. 

TOMAS REIMERS: É un rectángulo, non? 

ALLISON Buchholtz-AU: Non era unha pregunta capciosa. [Risas] 

TOMAS REIMERS: Non tentar para enganar vós esta tarde. Entón temos este rectángulo. E a marca é unha p, non? Así que nos dá bo crenza de que o parágrafo é representado como un rectángulo, en menos na mente do navegador, que ela é. 

ALLISON Buchholtz-AU: É dicir, navegadores son tipicamente rectangular, por iso ten sentido. 

TOMAS REIMERS: A idea aquí é que todas as etiquetas dentro do CSS son representados como un rectángulo. E cada rectángulo ten catro pezas segundo CSS, OK? Ten o contido real. É alí onde o texto se atopa. 

ALLISON Buchholtz-AU: Quizais a súa imaxe. 

TOMAS REIMERS: Yeah. Tes estofo, que é só algún tipo de espazo en branco. Entón tes un borde. E entón tes marxe, que é o espazo en branco fóra desa. Entón, iso non ten sentido a ninguén, polo que estamos vou falar sobre iso por un segundo. Entón, aquí, o que imos facer é que imos crear algunhas divs, OK? Desculpe-me cando I-- 

ALLISON Buchholtz-AU: Síntome como debemos poñer unha imaxe bonito en. 

TOMAS REIMERS: Nós definitivamente debería. 

ALLISON Buchholtz-AU: Eu sinto que todo o mundo podería beneficiarse dun imaxe bonito, é todo. 

TOMAS REIMERS: Podemos todo o beneficio de a-- 

Audiencia: Si, con certeza. TOMAS REIMERS: OK, legal. Así, debemos poñer un bonito imaxe en algún lugar. ALLISON Buchholtz-AU: Eu me sinto como un coello bonito pode ser útil agora. TOMAS REIMERS: Claro. ALLISON Buchholtz-AU: Fin da semana. Ten algo adorab-- 

TOMAS REIMERS: Que tal un gatinho? 

ALLISON Buchholtz-AU: Un gatinho funciona tamén. 

TOMAS REIMERS: Cool, porque hai un sitio para iso. Chámase PlaceKitten. ALLISON Buchholtz-AU: Isto é óptimo. TOMAS REIMERS: Si. ALLISON Buchholtz-AU: Just for, como, imaxes de espazo reservado na súa páxina web. TOMAS REIMERS: Hum-hum. Hai tamén PlacePuppy. E hai PlaceBacon. 

ALLISON Buchholtz-AU: PlaceBacon? Realmente? 

TOMAS REIMERS: Oh, nós non teñen acceso a Internet aquí. 

ALLISON Buchholtz-AU: [xeme] Tráxico. TOMAS REIMERS: Se non, Quere amosar para vós como poñer imaxes no seu sitio web. Nós imos tratar de facer que esta traballar antes temos que ir. Pero, de momento, estamos só vai falar en cores, a continuación. Queremos poñer fotos de kittens-- 

ALLISON Buchholtz-AU: Nós fixemos. 

TOMAS REIMERS: -o de internet para abaixo para o momento de ser. Polo tanto, temos dúas divs, e estamos vai darlles dous IDs. Imos chamalo "Primeira" e "segunda". Entón id = "primeiro". E nós imos darlles dúas cores. Entón, como imos seleccionar algo cun id de "primeiro"? ALLISON Buchholtz-AU: Dot ou de hash? Audiencia: Sharp. TOMAS REIMERS: Sharp, perfecto. Afiado, haxix, o que quere nós-- 

ALLISON Buchholtz-AU: Moitas cousas para chamalo. 

TOMAS REIMERS: Aceptar. Nós imos resolver hashtag, e iso é o que nós estamos indo a ir con el. OK? 

ALLISON Buchholtz-AU: hashtag. 

TOMAS REIMERS: Entón hashtag do primeiro. 

ALLISON Buchholtz-AU: Entón pode twittar a seminar-- hashtag CSS, hashtag legal. TOMAS REIMERS: hashtag awesomeness. ALLISON Buchholtz-AU: Hashtag awesomeness, si. TOMAS REIMERS: Aceptar. Entón temos "primeira" e "segunda". Entón, primeiro, nós imos ter unha cor de fondo do vermello. ALLISON Buchholtz-AU: Uh, colon. TOMAS REIMERS: Yup. ALLISON Buchholtz-AU: Eu vou ser a súa casa-Checker. TOMAS REIMERS: Allison me pegou. Background-color de blue-- 

TOMAS REIMERS: Purple! 

TOMAS REIMERS: Purple. ALLISON Buchholtz-AU: Si. Purple miña cor favorita, e nós non usei aínda. 

TOMAS REIMERS: Violet. ALLISON Buchholtz-AU: Violet. Isto funciona. 

TOMAS REIMERS: Entón, nós estamos terá dúas divs. Van estar totalmente baleiro. Nós probablemente debe ter algún texto. Así, "en primeiro lugar" será "OLA". E o "segundo" vai dizer-- 

ALLISON Buchholtz-AU: Adeus. 

Audiencia: - "mundo". Ola, adeus. ALLISON Buchholtz-AU: Vin Los xuntos a outra semana. TOMAS REIMERS: Os Beatles? ALLISON Buchholtz-AU: Para reais. Eles non son tan grandes. Eu non me gusta diso. 

TOMAS REIMERS: Temos "OLA" e "adeus". E, de novo, CSS é simplemente fantástico, porque recoñece as nosas cores. Non precisa aínda se preocupe que existen. Eles fan. 

ALLISON Buchholtz-AU: Eles existen. 

TOMAS REIMERS: Entón, eu creo que ten CSS 255 palabras para falar da cor. Se pode pensar nunha cor fóra os 255, como, eu vou estar impresionado. ALLISON Buchholtz-AU: Yeah. Creo que vostedes poden ter acaba de chegar pronto despois. 

TOMAS REIMERS: Entón, aquí, verás que temos dúas caixas dereito enriba uns dos outros, non? OLA e adeus. 

ALLISON Buchholtz-AU: Non hai ningún espazo entre elas. Están só smooshed dereito enriba do outro. 

TOMAS REIMERS: Entón o primeiro Creo que debemos falar é imos tamén dizer-- si. Entón CSS representa-los como unha especie de caixas. E, como caixas, eles teñen contido. E o contido agora é unha especie de o OLA ou o adeus E iso. OK? 

Así, unha das primeiras cousas que pode facer é que podes engadir recheo. Padding di canto espazo debe deixar en cada lado. Entón, digamos que quero dicir 10 píxeles en cada lado. E eu vou dissecar iso nun segundo. ALLISON Buchholtz-AU: Todas estas cousas aquí van ser todo en píxeles para o resto do seminario. Vai ver que ten algún espazo en torno a el, non? Entón, o que non ve aquí é que hai este tipo invisible de recheo de cada lado, o que di, como, OK, ten a súa caixa de content-- 

ALLISON Buchholtz-AU: Quere só para puxar arriba o elemento inspeccionar? 

TOMAS REIMERS: Si, iso é unha boa idea. ALLISON Buchholtz-AU: Ademais, eu creo que o elemento de inspeccionar é unha boa forma para descubrir se algo está pasando mal, algo inesperado acontece, inspecionar as etiquetas e vendo o que é como sobrescrito é útil. 

TOMAS REIMERS: Entón, eu non estou seguro se vostedes poden ver esta cor. Pode? Verá este recheo sobre o tipo de bordo. E entón ve o real contido en azul, non? Entón ese é o moi nocións básicas do modelo de caixa. Tes contido. Entón tes estofado. 

Audiencia: Por que non só use a caixa de dentro as-- 

ALLISON Buchholtz-AU: Correcto. Porque é só seleccionando o elemento agora. 

TOMAS REIMERS: Yup. Outras cousas. Entón imos falar sobre iso mando recheo por un segundo. Así, en CSS, medicións debe ter unha unidade. Entón, primeiro ten a cantidade. Polo tanto, neste caso, xa dixemos 10. E, a continuación, o seguinte dixemos é píxeles, px. Outros que pode ter son cousas como centímetros, polgadas. Podes facer cousas como: o que é de 10 pulgadas? E iso vai ser ridículo. 

ALLISON Buchholtz-AU: Oh, boy. 

Audiencia: Whoa. 

TOMAS e Allison: Yeah. TOMAS REIMERS: Entón, iso é todo o estofado. Eu vou volver a píxeles. 

ALLISON Buchholtz-AU: Pixels tenden a ser, así, o estándar. Cando mira para unha morea de sitios, eles traballan principalmente en píxeles. TOMAS REIMERS: Entón está indo a ver ou pixels-- os outros que ve é en, que é un en é igual á altura do tipo de letra que está usando actualmente. 

ALLISON Buchholtz-AU: Mm. TOMAS REIMERS: É unha boa forma de dicir, como, quero tanto espazo como miña fonte é tomar. ALLISON Buchholtz-AU: non sabía. Aprende algo novo cada día. TOMAS REIMERS: Hai unha chea de medicións en CS. Eu sugiro que buscalos. Para todos os seus casos, eu creo píxeles debe ser suficiente. E eles tamén son o que vai ver na maioría dos exemplos feita en liña. Entón, imos deixar en píxeles. 

Tamén pode, eu debería dizer-- así recheo actuacións todo enchido. Tamén pode facer algo como "Padding-top" para só set-- ALLISON Buchholtz-AU: Maybe imos buscar o noso "OLA" de volta. TOMAS REIMERS: --to só definir o recheo na parte superior e nada máis. Así, os catro comandos son padding-top, padding-bottom, padding-left, e padding-right. 

ALLISON Buchholtz-AU: Así como que sería de esperar para unha caixa. 

TOMAS REIMERS: Yeah. Nada moi tolo alí. Isto ten sentido? Entón ese é o recheo. Eu estou indo a definir todo os enchido de volta a 10. E entón eu vou pasar a fronteira. 

Entón, o que é fronteira é fronteira é un comando raro. Leva especie de tres cousas á vez. Así, o primeiro é o quão grande quero que sexa como unha medida. Unha vez máis, está a usar só píxeles. E a última cousa que eu debe engadir a medicións é o único que non precisa de unha unidade é 0. En realidade, é incorrecta 0 para dar unha unidade, 0 porque é entre 0 polgadas, píxeles, centímetros, o que sexa. Todo iso só significa 0, non? Entón, primeiro lle dá a el a medida. 

Entón darlle o estilo. Entón, eu vou dicir "sólido". E nós imos falar sobre o que iso significa. E entón, finalmente, darlle unha cor. Entón, eu vou dicir "negro". E estas son todas as cousas que nós agora visto antes, con excepción de estilo, pero nós imos falar sobre iso. Entón vostedes viron as medicións, e xa viu cores. E o que pasa é que obter este agradable bordo negro en torno a el, non? Vostedes ver como nós fixemos iso? 

Audiencia: Yeah. 

TOMAS REIMERS: Cool. Entón, o que é iso? Entón, primeiro de todo, é un pixel. Iso é auto-evidente o suficiente, non? Como, é un pixel de ancho. Ou sería un pixel, pero estou grande, polo que é un pouco máis do que iso. 

ALLISON Buchholtz-AU: E temos esta TV resolución ridículo. 

TOMAS REIMERS: Yeah. Pode facelo máis grande, menor, o que sexa. Entón aquí vai unha fronteira de dous píxeles. Verá que é dúas veces máis groso. A seguinte cousa que ten é a cor. Iso non é interesante. Eu non vou falar sobre iso, realmente. 

ALLISON Buchholtz-AU: Pero o estilo pode ser só un pouco interesante. 

TOMAS REIMERS: Yeah. Entón estilo, existen poucos que vexo comunmente usado. En primeiro lugar é unha sólida, próximos un do pontilhada, eo último dunha frustradas. E aquí é pontilhada. Vai ver que son unha morea de puntos, non? Unha boa forma de obter unha especie de fronteira agradable indo, trazos son tamén moi popular. 

ALLISON Buchholtz-AU: E despois, claro, eu son seguro de que hai moitas outras estilos que pode comezar. E nós temos un gran conxunto de ligazóns ao final para vós ao tipo de ler e mirar para CSS máis legal. 

TOMAS REIMERS: E despois o último, somos vai falar do modelos de caixa rápido. Oh, e despois de fronteira, exactamente como o recheo, tamén ten cousas como border-left, border-right, border-top, border-bottom, que permiten que para chegar a un límite específico. Entón, aquí é só a bordo esquerda definida. Será que isto ten sentido? 

ALLISON Buchholtz-AU: É un fresco xeito de salientar as cousas ou engadir liñas entre os distintos elementos. TOMAS REIMERS: Absolutamente. Entón esa é a nosa fronteira. E marxe do último un. Como recheo de Margin Agás que non se within-- ALLISON Buchholtz-AU: É non en torno de seu elemento pero, en realidade, en torno á totalidade caixa que vimos. 

TOMAS REIMERS: Yeah. Allison dixo que perfectamente. Non é, como, dentro da súa elemento, que é en torno de toda a caixa. Isto significa que cousas como fondo non se aplican a el. E é basicamente di, como, eu non quero nada en tanto espazo para min. Así como temos aquí unha marxe de 10 píxeles. Polo tanto, nada menos de 10 píxeles debe ser o próximo a min. Iso é o tipo da súa espazo, pero medio que non. Entón ese é o moi nocións básicas do modelo de caixa. Isto ten sentido? Cool, legal. ALLISON Buchholtz-AU: Awesome. Entón agora eu creo que nós só temos os nosos recursos legais que nós o levaremos caras través moi rapidamente. E nós imos actually-- ben, temos internet aínda? 

TOMAS Reimers: Déixanos ver se podo abrir up-- déixeme ver se eu Pode obter internet rápida mentres Allison fala sobre calquera cousa Allison quere falar. ALLISON Buchholtz-AU: Entón basically-- non sei que máis podo dicir neste momento. Pero estes son algúns realmente bos recursos. Estes son os que Tomas e eu usei e que, en realidade, utilizado para prepararse para iso. W3Schools é aquel que vostedes deberían ter visto antes. Recomendamos para un chea de cousas con CSS. Sei que eu recomendo a miña sección o tempo. 

Unha das grandes cousas é que permite que tipo de confusión con CSS e mira os cambios neste instante, como, en dobre fiestra ver que ten. Así que non se preocupe a creación da súa propia páxina web, ou a creación de vhost na súa Appliance local e servidor local, e recibir todo o traballo material. Está incorporado á dereita na páxina. 

E ten eses pequenos leccións que pode percorrer para aprender máis sobre selectores, ou aprender sobre a manipulación da súa pia batismal, ou un fondo, ou unha imaxe. E ten estes resultados instantáneas que Non é necesario facer calquera outro traballo de preparación para. Entón, eu amo W3Schools. El é fabuloso. Está a traballar? 

TOMAS REIMERS: Yeah. Non, non é. Quere que eu tente e reinicie o ordenador? Ou queremos a-- 

ALLISON Buchholtz-AU: É dicir, ben, este tamén será en liña. Todo diapositivas será liña. Entón, eu só recomendo facer estes. 

Isto é óptimo como só como unha folla de fraude. É só todo o básico comandos que ten. É gran cando é o primeiro comezando a súa web. Porque quizais non fai quero entrar en todos o nitty certo valente -design pesado cousas. Só ten formato-lo dun xeito que tipo de sentido e ganas facer por agora. E se o quere para chegar a el, sei isto é, como, un dos Referencias favoritas de Tomás. Estabamos a usar-o para prepara, e é fabuloso. É o creador de Mozilla. 

TOMAS REIMERS: Entón Mozilla son as persoas que fan Firefox. E iso é só o seu propio creador de referencia, o que eu creo que é incrible. E ten un marabilloso lista de recursos. Entón, nós have-- 

ALLISON Buchholtz-AU: E entón última nota cando estás proxecto seu sitio web, animar-se as cousas Que pensas que son bonitas. Inspecionar o elemento, inspeccionar o código fonte pode ser super útil para tratar de descubrir como o estilo do seu propio sitio web. 

Moitas veces, eu sinto que o mellor forma, ademais de experimentación, é só de ollar para cousas que son bonitas. Creo que é realmente difícil de só tipo de proxectar as cousas no seu propio país, especialmente no inicio. Entón por favor, mire para sitios web que lle gusta de ollar. Descubrir o que fai eles atractivo para ti. E, a continuación, Sinto-se libre para tentar replicar iso. 

TOMAS REIMERS: Correcto. Mesmo como sitios web como este, pode ver hai sempre unha div na parte superior. E entón tes outra div dentro aquí, que é awesomeness CSS. E entón tes unha morea de ligazóns aquí. Se realmente só inspeccionar elementos, pode clasificar de comezar a ver o que facer sitios parecer, e como podo recrear que, se eu quixese. Isto ten sentido? Por iso, só ten tres minutos do final. Entón preguntas? Calquera deles? Si. 

Audiencia: Para a cor rectángulo, como have-- se non quere que el atravesando a páxina enteira, podería ten feito isto dalle só metade da páxina ou só o texto? 

TOMAS REIMERS: Si, con certeza. Entón deixe-me ver realmente. Teño dúas ideas. Entón, primeiro de todo, ten Tamén é posible usar porcentaxes. 

Audiencia: Serio? 

ALLISON Buchholtz-AU: Entón, algo a mirar para arriba é o posicionamento relativo. É algo que nós Non teño tempo para entrar, pero é algo que eu sempre Recomendo que vostedes merecen ser visitados. 

TOMAS REIMERS: porcentaxes así. E ver como nós fixemos iso só o 50% do ancho? ALLISON Buchholtz-AU: Se realmente saber o número de píxeles, pode ser máis preciso desa forma. Pode xogar con el. Pero o 50%. Se fósemos para redimensionar noso navegador, sería facelo menor. 

TOMAS REIMERS: Ben, é basicamente 50% agora, eu creo. É do 50%, e, a continuación, a marxe Engadiuse a iso. CSS ten unha morea de manias. Entón, agora, este é 50% do ancho da páxina. Pero lembre que ten 10 píxeles despegar a cada lado. Entón, se tivese que mover esa contra á marxe esquerda do navegador, a continuación, el se parecería con 50%. Unha vez máis, como dixen, CSS pode ser unha chea de correos cheque palpite. Tipo, pensas que algo é vai comportarse dun xeito, pero compórtase de forma totalmente distinta. 

ALLISON Buchholtz-AU: E acaba de ser máis intelixente, e só obter unha mellor intuición para el como se move lonxitude. 

TOMAS REIMERS: E fica peor e peor. Entón, é realmente só unha carreira. 

ALLISON Buchholtz-AU: Iso é super alentador. Queremos que quere CSS. 

TOMAS REIMERS: CSS é impresionante. Lembre que. Outras cuestións? 

ALLISON Buchholtz-AU: O único. Algo máis? Con estilo. 

TOMAS REIMERS: Awesome. 

ALLISON Buchholtz-AU: Ben, se caras teñen dúbidas, máis tarde, estamos sempre dispoñibles, como de costume. Probablemente vai ver algúns de nós para proxectos finais e definitivamente no hackathon. 

TOMAS REIMERS: Absolutamente. E na feira. 

ALLISON Buchholtz-AU: E na feira. Oh. 

TOMAS REIMERS: Olhe a fronte a vexa todo o awesome-- 

ALLISON Buchholtz-AU: Veremos todos os seus sitios impresionantes que vai ser bonito. TOMAS REIMERS: Sempre pode ver, como, os sitios que tivo, como, bo CSS e, a continuación, como aqueles que non tentar facer CSS. ALLISON Buchholtz-AU: Ademais, outra cousa, unha cousa de mirar para é Bootstrapping. Entón Bootstrap é grande. 

TOMAS REIMERS: Google que se você-- 

ALLISON Buchholtz-AU: Google-lo. El é fabuloso. Vai adorar. E agora que ten un coñecemento básico de CSS, vai facer moito máis sentido. Impresionante. Grazas, persoal. 

TOMAS REIMERS: Moitas grazas.