>> [Música tocando]
ALLISON Buchholtz-AU: Então estamos basicamente só vai
para dar-lhe um resumo de CSS, porque sabemos
que não foi coberta em todas as secções.
E nós realmente queremos ter certeza de que você caras têm essa ferramenta à sua disposição,
porque tem a capacidade de fazer seus sites olhar muito mais bonita.
>> E se você está construindo um site, em seguida, você provavelmente vai querer torná-la bonita.
Quero dizer, você não tem que, mas eu sugeri-lo. [Risos]
Se você quiser que os usuários de usá-lo, você pode queremos torná-lo um pouco [inaudível].
Então, vamos tentar dar-lhe apenas algumas ferramentas básicas e compreensão,
de modo que quando você sai e você está pesquisando coisas sobre CSS,
não é completar jargão, como CSS, por vezes, ser.
>> TOMAS REIMERS: Yeah.
Allison disse que muito bem.
Então eu acho que a primeira coisa que deve começar com o que é CSS?
Então CSS é impressionante.
CSS--
>> ALLISON Buchholtz-AU: Isso é o nome do nosso seminário.
>> TOMAS REIMERS: Yeah.
É muito importante que Você entende que ao então.
Se você só tirar uma coisa, é que o CSS se impressionante.
Dois é CSS significa Cascading Style Sheets.
Assim, em sua essência, é CSS uma folha de estilo, o que significa
ele permite que você para denominar uma página web.
E então o que isso significa, é uma maneira de adicionar estilo para seus sites.
Então, pelo estilo, queremos dizer tudo que não está structural--
assim coisas como cores, fundo imagens, fronteiras, como, preenchimento,
margens.
Vamos falar sobre o que tudo isso significa que daqui a pouco.
>> Então, nós temos apenas ido em frente e abriu tanto daqueles em gedit.
Portanto, este é index.html.
E este é main.css.
Então main.css não tem nada.
ALLISON Buchholtz-AU: No estilo até agora.
TOMAS REIMERS: Nenhum.
E como você vai ver, é um site muito feio.
ALLISON Buchholtz-AU: É simplesmente.
TOMAS REIMERS: Yeah.
Sim, não é feio, é só minimalista.
E então aqui temos index.html.
E assim, para uma rápida recapitulação do HTML, Allison,
você quer apenas falar sobre a página?
>> ALLISON Buchholtz-AU: Yeah.
Então, obviamente, temos o nosso HTML tag, que acaba de arquivo HTML nomes.
Temos o nosso cabeçalho aqui, com CSS Awesomeness, which-- se você voltar.
Onde fica isso?
>> TOMAS REIMERS: Oh.
Sim, você pode ver.
ALLISON Buchholtz-AU: E observe o cabeçalho
é este cabeçalho guia até aqui.
E, em seguida, "Olá, mundo!" é o texto que temos apenas
exibindo na web página, que é-- voltar.
Voltar.
Qual é apenas em nosso corpo aqui-- o texto sem formatação.
Além disso, uma coisa a notar, se você olhar aqui,
Tomas trocou-se estes dois do nosso slide.
Então, enquanto você tem tudo três deles, você está bem.
Eles podem estar em qualquer ordem que eles querem.
O que é mais importante é apenas isso você tem cada uma dessas três coisas.
>> TOMAS REIMERS: Cool.
Adicionar um tipo doc?
ALLISON Buchholtz-AU: Yeah.
TOMAS REIMERS: Yeah.
Com estilo.
ALLISON Buchholtz-AU: Aparentemente, meus microfones não gosta de mim.
TOMAS REIMERS: Oh, dá-nos um segundo apenas enquanto Allison troca seu microfone.
Então, sim.
Portanto, temos nossa página principal.
É uma espécie de unstyled.
Nós não temos muito.
Nós apenas temos basicamente texto.
Nós temos a folha de estilo.
Nós temos o título.
Então, só bare-desossada componentes fazer um site.
>> Então, a partir daí, vamos falar sobre o que é CSS
e o que parece e tudo isso.
Assim, por isso--
ALLISON Buchholtz-AU: Voltar para os slides.
TOMAS REIMERS: Voltar para os slides.
E Allison pode assumir.
>> ALLISON Buchholtz-AU: Woo.
OK.
Assim, no seu arquivo CSS, você vai ter
um monte dessas coisas chamados seletores.
Esse será apenas o base de seu arquivo CSS.
É só passar a ser muitos e muitos destes.
Assim, o selector de.
Esta é apenas a anatomia geral.
Nós vamos passar por exemplos, porque se você nunca caras
assisti minha seção, eu me sinto como coisas em abstrato
realmente não faz sentido.
Ele sempre ajuda a ver os exemplos.
>> Portanto, temos alguns selector.
Isso vai ser um identificador para o que queremos que o estilo para aplicar.
E então nós podemos ter qualquer conjunto de regras e valores.
Então seletores que você pode ver poderia ser algo como corpo,
ou parágrafo com P, ou cabeçalho, ou o que quer,
tudo o que você quer que seus tags HTML para ser.
>> Portanto, neste caso, temos corpo.
E nós temos uma regra, que esta corresponde
para o que seu estilo se aplica.
Portanto, neste caso, temos cor de fundo e peso da fonte.
Então, isso vai mudar o fundo de qualquer coisa
dentro de qualquer tag corpo do nosso arquivo HTML.
E vai dar que este valor luz azul.
>> Por isso, vai fazer a fundo azul claro.
E então qualquer coisa dentro do corpo é vai ter um peso negrito.
Por isso, só vai negrito todo o nosso texto.
E este é apenas um selector.
Mas você poderia ter muito muitos destes.
E como nós vamos mostrar depois, um pouco mais sobre a forma como
que as obras e mais exemplos de lá.
Qualquer coisa que você quer adicionar?
>> TOMAS REIMERS: No.
Allison tem.
Nós apenas estamos indo para cortar uma exemplo aqui no nosso exemplo site.
Então vamos realmente tomar esta.
É perfeito.
Então, eu estou indo só para copiar e colar que a direita em nosso arquivo main.css.
E eu estou indo para salvá-lo.
E então vamos executá-lo.
Assim, nota lado, um dos a maioria das coisas frustrantes
é, se você não salvar um arquivo, e em seguida, você, como, recarregar a página,
e como, porque não é a mudança acontecendo?
Isso acontece.
Então, aqui, vimos que fizemos a nossa website um fundo azul claro
e algum texto em negrito.
>> Gostaria também de mencionar, se você caras têm perguntas sobre qualquer coisa
estamos fazendo, faça o favor livre para nos parar e perguntar-nos.
Nós estamos totalmente dispostos para responder perguntas.
>> ALLISON Buchholtz-AU: Obviamente, com CSS, tudo se baseia em si.
Portanto, se uma coisa não faz faz sentido agora, nós
Não quero que a afundá-lo mais tarde.
>> TOMAS REIMERS: Então, vamos tipo de dissecar isso.
Então você quer começar com o selector aqui?
>> ALLISON Buchholtz-AU: Yeah.
Como eu estava dizendo antes, o corpo é apenas o nosso selector aqui.
Então, se vamos voltar para a nossa ah index--.
>> TOMAS REIMERS: Que eu apenas fechado.
Dê-me um segundo.
Então File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Então, se você observar aqui, nós ter essas tags do corpo, certo?
Assim, o selector de apenas corresponde as marcas que nós estamos falando.
Então corpo aqui.
Então, o que nós estamos dizendo é tudo-- podemos voltar?
Eu gostaria de poder apenas como tocar na tela.
Seria muito mais legal.
>> Então, qualquer coisa dentro daqueles tags do corpo, que vimos
era apenas, como, o texto, e o corpo em geral
refere-se, assim, ao fundo.
Se você quiser mudar o fundo,
que vai ser em uma tag corpo.
Só tem essas regras aplicadas a eles.
>> Então, se tivéssemos de ir para index.html e- na verdade,
podemos ter alguma coisa fora do corpo?
Se tivéssemos, como, um rodapé ou alguma coisa, não seria aplicável a este.
Mas qualquer coisa dentro essas tags do corpo vai
a ser afetados por este órgão selector que fizemos.
Então, se você tivesse que digitar outra coisa há--
>> TOMAS REIMERS: Vamos conseguir isso.
Então, se tivéssemos uma div-- de modo que é apenas uma outra marca que você pode ter.
Eu estou indo para a fechar.
Ou vamos fazer deste um parágrafo.
Então p significa parágrafo.
E dentro desse parágrafo.
E então eu digo: "Este é um texto."
Com estilo.
E então eu fiz essa regra se aplica a um ponto em vez do corpo.
Você vai ver como ele se aplica somente a o parágrafo recém-formada, à direita,
não a coisa toda.
Isso faz sentido?
>> ALLISON Buchholtz-AU: Então, isso é tudo o corpo,
mas agora o nosso selector apenas corresponde ao parágrafo.
Então, nós apenas temos negrito e azul para este ponto específico,
porque esta é a única coisa que é colocado dentro da tag p.
>> TOMAS REIMERS: Isso faz sentido classificar de como as coisas encapsular outras coisas?
ALLISON Buchholtz-AU: Além disso, apenas para dizer, como, uma das melhores maneiras
para realmente se sentir confortável com CSS é apenas fazer coisas como esta,
apenas experimentá-lo.
É muito simples de digitar algo para fora, clique em Atualizar, e ver o que acontece.
E como a maioria dos CS, experimentação pode, muitas vezes
levar a uma muito melhor compreensão intuitiva.
Ainda mais do que nós apenas, como, falando com você.
>> TOMAS REIMERS: Absolutely 100% de acordo sobre esse ponto.
Então, se nós voltar a este, vamos começar dissecando exatamente o que estes dois fazem.
Portanto, temos duas regras sobre este assunto.
Assim, o primeiro é a cor de fundo.
E você vê que nós configurá-lo igual a um valor, a luz azul.
>> Assim, em CSS, CSS é uma espécie de muito solto sobre como
você está autorizado a definir a cor.
Assim, você pode defini-los pelo nome.
Você também pode fazer algo como "vermelho".
E, em seguida, se voltarmos a este, você vai ver que o fundo é vermelho.
Você também pode obter realmente-- Eu acho que você pode ficar muito criativo com isso,
você não pode?
>> ALLISON Buchholtz-AU: I acho que você pode usar hex.
Não pode?
>> TOMAS REIMERS: Yeah.
Então você pode usar hex.
Mas estou pensando-name sábio.
Não estão lá?
ALLISON Buchholtz-AU: Você pode fazer muito poucos.
Muito parecido com a maioria das cores que você pode nome-- como, eu acho que o salmão é um.
>> TOMAS REIMERS: Vamos tentar salmão.
ALLISON Buchholtz-AU: I acho chartreuse está lá.
TOMAS REIMERS: Yeah.
Veja?
Então você pode ficar muito criativo.
>> ALLISON Buchholtz-AU: Você poderia ficar muito criativo.
Como, se você pode pensar no nome da cor, é provavelmente lá.
Se você realmente quer multa detalhe, você pode ir hex.
>> TOMAS REIMERS: Yeah.
Assim hexadecimal.
Se vocês lembram esta de volta de seu antigo PSET, Imagem Recuperar,
vocês tiveram que lidar com esses valores hexadecimais.
E tipo de recapitular o que é isso, hex tem três valores armazenados nele.
Portanto, é em grupos de dois incrementos.
Os dois primeiros representam o valor vermelho.
O segundo representa o valor de verde.
E a última é azul?
>> Então FF acontece para representar um hexadecimal 255.
Então você tem 255 vermelho, 255 verde, e 0 para azul.
E os valores variam entre 0 e 255.
>> AUDIÊNCIA: Certo.
Então, basicamente, nós poderíamos pesquisar a internet para qualquer cor que queremos,
e identificar a verdade conhecida cor espectro de combinação,
e, depois, pode colocá-lo?
ALLISON Buchholtz-AU: Exatamente.
Então você tem praticamente o controle completo sobre as cores que você quer dentro CSS.
Vamos falar sobre imagens de fundo mais tarde?
Ou queremos fazer isso?
>> TOMAS REIMERS: Yeah.
Absolutamente.
Então, primeiro, só para mostrar que vermelho e verde é amarelo.
E se você precisar de alguma ajuda para encontrar isso, você
pode Google algo como "color picker".
ALLISON Buchholtz-AU: Oh, isso é tão bom.
Eu amo o Color Picker.
>> TOMAS REIMERS: colorpicker.com é um bom exemplo.
E aqui, você vai ver que você tem um seletor de cores Photoshop-like cheio.
>> ALLISON Buchholtz-AU: Hum-hum.
Além disso, as coisas legais que você está pode gerar esquemas de cores
de modo que você não tem, like, colidir cores.
TOMAS REIMERS: E depois aqui está o valor hexadecimal aqui em cima.
Então, você sempre pode encontrar online basicamente lugares para se obter o valor hexadecimal de.
Não é uma espécie de que apenas, como, nós ver as cores do mundo em números.
É mais do que ir em linha e encontrar o que cor que queremos,
e, em seguida, levar o número para baixo.
Porque é apenas um realmente fácil maneira de referenciar as coisas em CS.
>> ALLISON Buchholtz-AU: E depois há Também--
Eu esqueço o nome exato do site.
Mas há definitivamente, I pensar, algo do Adobe
que gera esquemas de cores para você, que é muito legal, porque você
definitely-- às vezes é difícil de descobrir,
oh, se eu quiser usar esta cor, o que poderia ser mais um útil
para usar em outros lugares no meu site para, como, torná-lo agradável e coesa.
>> TOMAS REIMERS: Allison está falando um por Adobe Kuler chamado, eu acho.
É K-U-L-E-R.
ALLISON Buchholtz-AU: Eu acho que sim.
Tenho certeza de que é o único.
>> TOMAS REIMERS: O meu favorito tem sempre foi Color Scheme Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS REIMERS: Qual é agora--
>> ALLISON Buchholtz-AU: Ah, isso é bonito.
>> TOMAS REIMERS: E você pode basicamente dizer, como,
Quero três cores ao lado do outro.
E então vamos fazer algo de bom.
E então você pode obter um exemplo daquilo que pode parecer.
E então se você passar o mouse sobre qualquer um dos -los, dá-lhe o valor hexadecimal.
>> Então, assim como uma boa maneira de começar pensando em esquemas de cores
ou o que as cores em um site pode ir bem em conjunto.
Porque isso pode ser surpreendentemente não é tão fácil de escolher como você pensa.
E, em seguida, a outra coisa legal Eu sempre achei sobre este site
é se você bater exemplos, ele vai mostrar o que um site exemplo
pode parecer usando esse esquema de cores.
Enfim.
>> Voltar ao CSS real.
ALLISON Buchholtz-AU: Mas, obviamente, nós Conhecemos essas referências pode ser útil.
TOMAS REIMERS: Não, eles definitivamente pode ser útil.
Assim, a segunda regra, Allison?
>> ALLISON Buchholtz-AU: Yeah.
A segunda regra é apenas correspondente a nossa fonte.
Portanto, o peso da fonte é apenas um tipo de-- modo que o peso seria
estar se você quiser apenas, como, normal ou, como, fontes mais finas,
ou, neste caso, como, negrito.
Eu esqueço.
Qual é o se você queria ele-- está lá um mais fino do que apenas, como, normal?
TOMAS REIMERS: Eu realmente não saber se há um mais fino.
ALLISON Buchholtz-AU: Eu esqueço.
Peso Então font nós tipicamente é só usar para negrito.
Se você quiser ficar realmente em -lo, vamos mostrar-lhe.
W3Schools tem todos os diferentes coisas que você pode fazer por fontes.
Mas, basicamente, se você quiser para mudar alguma coisa sobre a pia batismal,
ele sempre vai ser, como, font-alguma coisa.
Então vai ser como, font-family se você é tentando mudar o tipo real.
Vai ser font-style se você quero fazê-lo como cursiva,
ou itálico, ou outros enfeites.
Ou mesmo font-cor, se queríamos mudar isso.
>> TOMAS REIMERS: Yup.
Assim, você pode mudar isso.
E meio que a recapitulação agora, para que você possa
ver que temos o seletor para cima aqui.
Temos essas chaves.
E então nós temos regras delimitado por ponto e vírgula.
Isso faz sentido?
Sim?
Com estilo.
Então, se isso é boa--
>> ALLISON Buchholtz-AU: Back.
TOMAS REIMERS: Vamos falar especificamente sobre o tipo de seletores que temos.
Porque agora nós temos tipo de apenas mostrado tags.
Mas vocês poderiam vê-lo plausível.
Digamos que você tenha dois parágrafos em uma página e você
quer ser capaz de estilo um, mas não o outro,
você apenas não quer limitar-se ter que usar diferentes HTML real
tags para dar-lhes diferentes estilos.
>> Portanto, temos três básicos tipos de seletores.
ALLISON Buchholtz-AU: Yeah.
Portanto, temos tag, que é o que temos vindo a falar no momento.
Então, que tipo de como seu corpo ou p.
E então nós temos classe, que é quando defini-lo em nosso arquivo CSS,
ele sempre vai ser ponto, o que quer você quer que o nome da sua classe para ser.
E isso pode se aplicar a várias coisas.
>> Digamos que você tenha cinco parágrafos e duas das três deles
precisa ser o mesmo estilo, você aplicaria uma classe a ele.
E esta é apenas a forma como o fazemos.
Nós vamos dar-lhe um exemplo de onde esta realmente aparece.
Mas se você tivesse talvez alguma tag p, depois dele, você escreveria,
classe é igual a quaisquer que sejam as classes você deseja aplicar a ele.
Então o que seletores de classe que queremos aplicar a este ponto específico,
poderíamos escrever apenas como este.
É claro, eu acho que um exemplo irá torná-lo muito mais concreta.
>> O outro temos é id, que denotamos
com um hash, ou libra, ou hashtag.
TOMAS REIMERS: octothorpe.
ALLISON Buchholtz-AU: octothorpe.
Isso funciona também.
E esta deve ser realmente único.
Eles só devem aplicar-se a uma coisa em sua página.
Então, se isso é um parágrafo específico, ou algum item em uma lista, ou o que quer,
este deve ser único.
E da mesma forma que acabamos dizer, como, class = "class1 class2"
isso pode ser apenas o id do que quer que nós temos.
TOMAS REIMERS: Yeah.
Então, vamos falar definitivamente sobre exemplos aqui.
E eu estou indo só para mergulhar direto de volta para o código.
Então, vamos olhar para o nosso HTML.
E por isso, agora tem um parágrafo.
Este é um texto.
Eu só vou para modificar lo. "Este é um texto 1."
E então nós vamos ter uma "Este é um texto 2."
>> ALLISON Buchholtz-AU: segunda.
TOMAS REIMERS: Yup.
Então, nós temos agora "Este é um texto 2", certo?
E vamos ver que, se recarregar a página, o que vamos encontrar
é que nós vamos find--
ALLISON Buchholtz-AU: Ooh.
TOMAS REIMERS: Yeah.
Nós vamos encontrar um "Este é text 1 "e" Este é um texto 2. "
>> ALLISON Buchholtz-AU: E a bela cor amarela.
>> TOMAS REIMERS: E você vai ver que o nosso selector de agora,
que se aplica a p de, ou parágrafos, afeta ambos,
porque ambos atender a condição de que ambos são uma tag p.
Isso faz sentido total.
Então a questão é, bem, o que se quiséssemos só tem uma?
Então, exatamente como Allison estava dizendo: temos duas outras maneiras de fazer isso.
Vou começar com id.
>> ALLISON Buchholtz-AU: Vamos começar com o id.
>> TOMAS REIMERS: E ambos destes são atributos.
Então atributos existem em HTML.
E o que eles são é algo que você adicionar
dentro da marca que é separar o nome da marca.
Assim, você pode ter vários atributos.
Sim?
>> ALLISON Buchholtz-AU: Eu só estava indo quer dizer, a partir do seu exemplo de PSET 7,
se algum de vocês tentar alinhar coisas para o centro,
você pode ter usado "Text align = center."
E você notou que provavelmente deveria ter centrado
seu texto ou sua barra de navegação.
Então, isso é apenas também um atributo que você pode estar familiarizado.
TOMAS REIMERS: Há um grupo de atributos que você vai ver.
Sim.
Como boa referência para PSET 7.
Temos id.
Você também pode ter classe, coisas como esta.
A única marca pode ter muitos atributos.
Então, começando com id, vamos fingir que quero ter um id de-- eu não sei.
Vamos chamá-lo especial, porque este, estamos
vai fazer negrito e sublinhado, e qualquer que seja.
ALLISON Buchholtz-AU: É Vai ser super especial.
TOMAS REIMERS: Então, isso um, temos id especial.
Assim, a maneira de selecionar que, então, é em main.css, ao invés de ter uma tag p,
você faz #special, OK?
E que seleciona o coisa com id especial.
Será que isto faz sentido para todos?
AUDIÊNCIA: Yeah.
TOMAS REIMERS: Cool.
Portanto, agora se vamos voltar, vamos see-- gritos.
Sim.
Vamos ver o que ele seleciona apenas aquele com id especial.
Sim?
Soa bem.
Sim.
>> AUDIÊNCIA: Pode ter um algo atributo de ambos classe e um id?
>> TOMAS REIMERS: Sim.
AUDIÊNCIA: OK.
E então o que acontece se você, em seguida, dar- que algumas regras das CSS que o conflito?
TOMAS REIMERS: Absolutamente.
Nós estamos indo definitivamente para falar sobre isso.
Então exatamente o que você estava recebendo em, você também pode ter classes.
Então, vamos fingir que eu tinha três parágrafos e I
queria o estilo do primeiro dois, mas não o terceiro.
Bem, sua primeira idéia pode ser, bem, eu poderia apenas dar o segundo um id.
Mas você não pode, porque um id, exatamente como Allison estava dizendo:
tem de ser único.
>> Então, ao invés de um id, o que você pode usar é que você pode usar uma classe.
E um class-- o que permite você precisa fazer é basicamente dizer,
esta pertence, como parte de um grupo.
Neste caso, o nosso grupo é chamado especial.
E o que nós vamos fazer, então, é vamos dizer-- ao invés de libra,
vamos usar ponto.
OK?
E note que a libra e dot só existem dentro do arquivo CSS,
não dentro do HTML.
ALLISON Buchholtz-AU: Sim.
Distinção importante.
>> TOMAS REIMERS: Eu tenho tinha tanta luta,
porque eu coloquei o hash no HTML e então me senti estúpido por um longo tempo.
Veja como ele seleciona ambos os únicos com essa classe?
Com estilo.
>> Agora, as coisas podem ter várias classes.
Digamos que eu queria fazer a primeira dois têm um fundo de amarelo
e os dois últimos têm uma cor de fonte de azul.
OK.
Eu realmente não sei por que eu quero fazer isso, mas eu posso.
>> ALLISON Buchholtz-AU: não pôde recomenda-se para o seu website.
Mas para os nossos propósitos, ele vai fazer.
>> TOMAS REIMERS: Não é um bom esquema de cores.
ALLISON Buchholtz-AU: Bem, amarelo e azul são minhas cores do ensino médio.
Eu não sei, no entanto.
TOMAS REIMERS: Allison de alta escola tinha um esquema de cores grande.
[Risos]
Então, o que podemos chamar isso é Vamos chamar isto-- por isso temos Especial
e temos Pretty.
Sugiro, por isso, use nomes muito mais descritivos.
ALLISON Buchholtz-AU: Sim, eu faria chamar este, como, amarelo ou azul.
>> TOMAS REIMERS: Nós não somos realmente fazer um site real,
é por isso que nós não estamos fazendo isso.
Mas se você realmente tinha um site real, você
pode ter, como, cabeçalho artigo, conteúdo do artigo, primeira palavra,
coisas desse tipo, que permitem que você seja muito mais descritivo.
Estes são realmente apenas como variáveis.
Eles devem ser nomeados de uma forma onde você pode, como-- sim, como tal.
Perfeito.
>> Assim, a cor de fundo.
E então nós vamos dizer-- de modo que o maneira de mudar a cor é apenas "cor".
E nós estamos indo para torná-lo azul.
Isso é legal.
Portanto, agora temos o dois primeiros têm especial.
Próximo um vai têm "class = bonito."
ALLISON Buchholtz-AU: E então você vai deseja adicionar "bonito" para o do meio.
TOMAS REIMERS: Yup.
E, em seguida, para o meio, adicionar "bonita", o que acontece
é você apenas tem um espaço.
Assim, o atributo de classe é uma lista separada por espaço
de todas as classes que se aplicam a essa marca.
OK?
Não é como este pertence algum tipo de classe especial chamada
"Especial, espaço, bonito."
Ela pertence a dois classes-- especial e bonito.
Sim?
Com estilo.
>> E, em seguida, se olharmos o que acontece, estamos
vai ver que primeiro tem fundo amarelo, texto preto.
Segundo um--
>> ALLISON Buchholtz-AU: --has negrito fundo amarelo com texto azul.
E o nosso último só tem a texto azul que lhe é atribuído.
>> TOMAS REIMERS: Cool?
Como seletores de trabalhar?
Impressionante.
>> ALLISON Buchholtz-AU: Queremos falar sobre o conflito agora, então?
>> TOMAS REIMERS: Então, sim.
Absolutamente.
Então, o que acontece se você ter um conflito, certo?
Vamos fingir que o primeiro configura algo como--
ALLISON Buchholtz-AU: Maybe este muda o fundo?
TOMAS REIMERS: Yeah.
Então, nós vamos fazer "bonito" mudar o fundo de salmão.
ALLISON Buchholtz-AU: Você é apenas com todas as grandes cores hoje, Tomas.
TOMAS REIMERS: Yeah.
Porque eu descobri que posso usar salmão como uma cor real.
Então, nós estamos indo só para fazer isso.
Eu também acho que por do sol é uma cor real.
AUDIÊNCIA: Por do sol é uma cor real?
ALLISON Buchholtz-AU: Vamos tentar isso.
TOMAS REIMERS: Após esta demonstração só porque no caso ele mexe-se,
Eu não quero ser a depuração.
Então, nós sabemos o salmão é uma cor real.
Assim, qualquer tentativa de o que vai acontecer?
>> ALLISON Buchholtz-AU: Alguma idéia?
>> AUDIÊNCIA: [inaudível].
>> TOMAS REIMERS: Yeah.
Então você tem o valor correto.
Basicamente, ele leva o última regra que foi dado.
>> ALLISON Buchholtz-AU: Então isso é onde cascata entrar em vigor.
>> TOMAS REIMERS: Então se lembra como nós teve que Cascading Style Sheets?
Então, por que, nós meio que significa que temos um monte de regras
que se aplica em cima uns dos outros, e eles podem também substituir o outro.
>> ALLISON Buchholtz-AU: Então o que está em baixo
irá substituir o que está em cima.
Você poderia ter regras que completamente negar alguma coisa de antemão.
É também por isso que você quer ser cuidado quando você está nomeando,
para que você não está criando regras que você está apenas substituindo completamente.
>> TOMAS REIMERS: Ou talvez você quero substituir regras.
>> ALLISON Buchholtz-AU: Ou talvez você faz.
Sim.
>> TOMAS REIMERS: Finja que você tem um classe que se aplica a maioria das coisas,
mas digamos que você quer mudar o cor de fundo para o vermelho e o tipo de letra
peso para negrito para a maioria coisas, mas para um,
só deseja a cor de fundo a ser vermelho, mas você quer todos os outros
propriedades, você poderia fazer algo como "font-weight = normal",
que passaria então a desfazer essa mudança ousada.
Sim?
Mais uma vez, a melhor maneira, eu acho que Allison disse isso, é apenas prática.
>> ALLISON Buchholtz-AU: Experimentação.
>> TOMAS REIMERS: Prática, prática, prática e experiência.
Eu conheço um monte de gente que acha que CSS é apenas um monte de e-cheque palpite
no fim do dia, quando se você quer fazer something-- como,
você tem uma idéia aproximada, mas provavelmente você ainda precisa
experimentá-lo para certificar-se Você sabe o que se parece.
>> AUDIÊNCIA: Quando você está aplicando aulas, mais do que um
ao mesmo parágrafo ou seção, não é
importa que ordem você pode digitá-los nas citações?
>> TOMAS REIMERS: Não, não em todos.
>> ALLISON Buchholtz-AU: O que importa é a ordem dentro de sua folha de estilo CSS.
AUDIÊNCIA: Você poderia repetir a pergunta?
TOMAS REIMERS: Oh.
ALLISON Buchholtz-AU: dentro classe, quando você está dando aulas
a alguma coisa no HTML, faz importa que ordem eles estão?
Não importa a ordem.
O que importa é a ordem do seletores de classe dentro do seu CSS,
dentro de sua folha de estilo.
>> TOMAS REIMERS: bom som?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS REIMERS: E depois vamos continuar a--
ALLISON Buchholtz-AU: O que temos a seguir?
Eu esqueço.
Oh, só temos exemplos.
Mas nós meio que feito aqueles.
Fizemos exemplos na mosca.
>> TOMAS REIMERS: Temos que combinar os seletores em breve.
>> ALLISON Buchholtz-AU: Oh, nós começamos a combinar seletores.
TOMAS REIMERS: Então alguns exemplos é que temos
# Libra dog--, ou hashtag, ou octothorpe, ou o que quer
que deseja chamar isso-- afiado.
>> ALLISON Buchholtz-AU: Cão da Sharp.
>> TOMAS REIMERS: Então você tem .pets.
Algo tem um id de cão, só há um cão na página.
Algo tem um id gato, há apenas um gato.
Pode haver muitos animais de estimação na página.
É por isso que deu esse classes.
Você tem um exemplo de p.
E, em seguida, assim que um dos último exemplo, onde
é algo que nós não falamos sobre, é o que acontece quando você combiná-los.
Então p.pets.
>> Então, para isso, vamos voltar para o código e introduzir another-- sim.
Então, de volta aqui.
>> ALLISON Buchholtz-AU: I sinto que este é realmente--
como apenas olhando através de exemplos é realmente o caminho para aprender isso.
Então é isso que estamos fazendo.
>> TOMAS REIMERS: Então, vamos fingir que só deseja para selecionar o texto 2, certo?
Então, nós definitivamente não pode fazer isso com um id.
Bem, nós poderíamos fazer isso com um ID, mas não tem um ID.
Eu poderia acrescentar um, mas vamos fingir que eu não quero acrescentar uma
ou ele já tem outra coisa.
Eu não posso fazer isso com isso.
A tag não é definitivamente original, certo?
E nem é a classe.
Mas você pode combinar essas coisas.
Vamos dizer que queria fazer algo que só se aplica a coisas que
tem a classe especial e que têm a classe bonita.
>> Então, o que você pode fazer é em main.css, você pode dizer, vamos primeiro excluir esta.
Você pode combiná-las.
Assim você pode fazer .Especial.
Não há espaço.
Apenas .special.pretty.
O que isso significa é algo que é tanto especial e bonito.
Isso faz sentido?
E se formos aqui, o que você vai ver
é esta regra só se aplica ao segundo, que tem ambos.
E você pode fazer isso por um monte de coisas.
Você pode dizer-- vamos fingir que eu só queria
para fazer as coisas que têm a classe bastante e que também são uma marca de parágrafo.
Então p.pretty.
Vamos fingir que eu tinha algo bonito no corpo tag.
OK?
Eu posso correr esse e eu pode ver que ele só é
vai aplicar-se a coisas que são parágrafos com a classe bonita.
E você pode combiná-las, basicamente, como muitos como você deseja.
Assim, você pode simplesmente colocá-los juntos.
Isso faz sentido?
ALLISON Buchholtz-AU: Então este tipo de é mais útil
quando, Tomas estava dizendo antes, talvez você tem um site muito complicado,
e você já tem um monte destas regras escritas,
e você só precisa combinar dois de antes.
Como em vez de escrever um inteiro novo seletor e mudá-lo lá,
você pode apenas combinar -los onde se sobrepõe.
>> TOMAS REIMERS: Ou você pode encontrar out-- vezes
há uma classe que faz a cor da fonte como azul,
e há uma outra classe que faz com que o fundo azul.
E isso simplesmente não vai funcionar.
Então você escreve um caso especial, onde, como-- mas se tiver ambos, o que você está
vamos fazer é que você vai fazem deste um esse tom de azul
e este este outro tom de azul.
Certo?
>> ALLISON Buchholtz-AU: Bom para esses tipos de exceções.
TOMAS REIMERS: Então, para pensar sobre os problemas
que pode surgir quando você combiná-los.
Com estilo.
Então, de volta para a nossa apresentação.
ALLISON Buchholtz-AU: Estamos quase lá.
TOMAS REIMERS: E parou de ligação.
ALLISON Buchholtz-AU: Oh, não.
ALLISON Buchholtz-AU: CS em o escritório, internet vai para baixo.
Oh, a ironia.
>> TOMAS REIMERS: Então, felizmente, nós podemos apresentar sem a internet, eu acho,
porque temos todos os slides aqui.
Então, vamos falar sobre a relação de etiquetas.
ALLISON Buchholtz-AU: Certo.
Assim, apenas uma espécie de ir fora do que Tomas disse:
esta é apenas uma outra maneira de fazê-lo.
Portanto, temos alguns pais seletor com um seletor de criança.
Assim, neste exemplo aqui, temos alguns corpo com uma barra de navegação classe, botão de classe.
Ah.
>> TOMAS REIMERS: Oh, desculpe.
>> ALLISON Buchholtz-AU: E Basicamente, o que isso significa
é selecionar todas as crianças, como todos esses tipos de seletores,
dentro deste selector de matriz.
E esses são os únicos ele nunca vai se aplicam.
Eu não sei se você tem uma maneira melhor de--
TOMAS REIMERS: Então eu acho que a maneira de pensar
sobre isso é lembrar como antes que tipo de como colocá-los juntos.
E, em seguida, isso significa que um elemento que corresponde a todos estes.
O que isto quer dizer é, eu quero você para combinar com tudo
dentro some-- Eu quero -lo a encontrar um seletor.
E, em seguida, dentro disso, eu quero você para combinar com coisas novas.
Certo?
Assim, em CSS, é tudo sobre tipo de ser capaz de combinar esses itens.
E você pode tentar igualar itens dentro de outros itens.
>> Então vamos realmente fazer um exemplo, e pensamos que vai esclarecer.
Então, vamos fingir que temos de especial, especial bonita, que seja.
E então nós temos uma ligação, OK?
Então lembre-se, um é um link.
Ele não vai a lugar nenhum.
E nós vamos dar-lhe o link da classe, eu acho.
Vamos dar-lhe o class-- me dar uma idéia.
ALLISON Buchholtz-AU: Cool.
TOMAS REIMERS: Coo-- vamos ir a classe bonita.
Por que não?
>> ALLISON Buchholtz-AU: OK.
TOMAS REIMERS: So coisas agora bonitas
está indo para fazer o fundo azul, cor de fundo de salmão.
Isso faz sentido.
E se fizermos isto--
>> ALLISON Buchholtz-AU: Você deseja adicionar texto
de modo que o hyperlink realmente aparece?
TOMAS REIMERS: Que seria uma boa pedida.
ALLISON Buchholtz-AU: Porque direita agora nós estamos apenas vai conseguir nada.
TOMAS REIMERS: Então este é um link.
"Este é um link."
Ah, e isso vai para ser mais um link.
Vamos dar-lhe a classe "cool".
Você está certo.
Com estilo.
Então, agora vamos pegar isso.
Nós vamos lançar um.
Nós temos um no tag especial, e nós também
vão ter um na tag bonita.
E agora o que vamos fazer é que vamos fazer cool--
o que é que quer que ele faça?
ALLISON Buchholtz-AU: Podemos torná-lo maior?
TOMAS REIMERS: Vamos dar-lhe uma borda.
ALLISON Buchholtz-AU: Poderíamos fronteira.
TOMAS REIMERS: Yeah.
Então, vamos fazer alguma coisa como, é-- fronteira e estamos
vai explicar tudo isso em um segundo.
Por enquanto--
>> ALLISON Buchholtz-AU: Para o modelo de caixa.
TOMAS REIMERS: Mas, por enquanto, estamos só vai dar-lhe uma borda.
Então, o que isso significa é que você está vai ver estes links.
E você vai ver que eles têm estes, como, bordas pretas feias, que
é legal.
>> ALLISON Buchholtz-AU: Nosso site é tão bonita.
>> TOMAS REIMERS: Yeah.
Nosso site é incrível.
Então, esses dois são links, e eles aparecem.
Agora vamos fingir que eu só queria fazer isso
se não fosse algo dentro que tinha um fundo de salmão.
Então lembre-se que este tem um fundo de salmão,
porque é de classe bonita.
>> Mas queremos dizer que só esfria que estão em classe especial, e não em sala de aula
bonita, deve ter essa fronteira.
Bem, o que você pode fazer que você é pode-se dizer, .Especial, espaço, .cool.
E o que está fazendo, quando você pensa sobre isso, é que é basicamente dizendo:
OK, encontrar-me tudo que corresponde especial.
Então, dentro dessas marcas, encontrar me tudo o que é legal.
ALLISON Buchholtz-AU: Então, uma outra maneira que pode ser bom para pensar sobre isso,
trazê-lo de volta para C, é assim como a idéia de escopo.
Então, quando você tem algum selector, como os
que temos vindo a trabalhar para, antes disso, toda a sua página web, todo o seu HTML
está dentro do seu âmbito de aplicação, certo?
Mas quando temos estes relações pai-filho,
é como se você está estreitando onde você está olhando para um lugar específico,
como se, como, nós estamos olhando para dentro uma função específica em vez
de todo o nosso arquivo.
AUDIÊNCIA: Então, com isso em mente, seria que importava se tivéssemos changed--
ALLISON Buchholtz-AU: A ordem?
AUDIÊNCIA: --o classe em CSS para .cool, espaço, .Especial?
ALLISON Buchholtz-AU: Sim, porque então que
diria, o escopo para tudo o que tem legal,
e, em seguida olhar para o que has-- Quero dizer, como, neste caso,
Eu não acho que teria mudado.
>> TOMAS REIMERS: Se tivéssemos disse o quê?
Desculpe.
>> ALLISON Buchholtz-AU: Se nós alcance-o esfriar e, em seguida,
olhar para as coisas de especial, seria o mesmo, na verdade.
>> TOMAS REIMERS: Então não seria.
>> ALLISON Buchholtz-AU: Ele não iria?
Oh, oh bem.
Estou errado.
>> TOMAS REIMERS: Então, a razão é diferente-- mistake-- comum
é que agora só o link tem legal, né?
Eu acho que a minha pergunta para vocês é, o que nesta página são acompanhadas por .cool?
Existem duas marcas aqui, certo?
Qual é este e este.
Ambos corresponder legal.
Nada mais faz.
Então, se você disse, .cool, espaço, .Especial, o que você vai dizer é:
dentro dessas marcas, o que é especial?
ALLISON Buchholtz-AU: Hm.
Isso é o que ele-- direita.
Porque é como apenas algo aqui.
>> TOMAS REIMERS: Então ele seleciona nada.
>> ALLISON Buchholtz-AU: Considerando que com especial, estamos dentro dessas marcas aqui.
>> TOMAS REIMERS: Aqueles e aquelas.
AUDIÊNCIA: OK.
Então, essas tags da barra normal?
>> TOMAS REIMERS: Sim.
Isso faz sentido?
Como é basicamente tentando restringir seu escopo.
ALLISON Buchholtz-AU: Yeah.
Acho que essa é provavelmente a maneira mais fácil de pensar nisso.
>> TOMAS REIMERS: Então, achamos isto, e encontramos este tanto combinado especial.
E então nós estamos pedindo, no prazo de esses caras, o que é legal?
E dentro deste, este fresco.
Dentro deste, nada é legal.
Portanto, esta é a única marca que permanece.
>> ALLISON Buchholtz-AU: Considerando legal é apenas dentro dessas marcas de lá.
TOMAS REIMERS: Exatamente.
E o que há de especial nas que são?
Nada.
Agora, o que eu vou dizer é se não houvesse espaço,
você está perguntando o que é legal e especial-- ou o que é bonito e especial, certo?
Se você disser .special.pretty, isso é o mesmo que .pretty.special.
>> Uma vez que a remoção do espaço é perguntando é, quando você diz .Especial,
você está pedindo, OK, quais são especiais?
E, em seguida, os que, queridos também são bonitas,
que é o mesmo, gramaticalmente, como perguntando, o que é muito,
e depois deles, o que também é especial?
Certo?
É a diferença de o que está dentro do que é.
AUDIÊNCIA: OK.
TOMAS REIMERS: Yeah.
Impressionante.
Então, com isso em mente entăo--
>> ALLISON Buchholtz-AU: Eu acho que a nossa última coisa é (em Fancy BRITISH ACCENT)
o modelo de caixa.
>> TOMAS REIMERS: O box-- [Risos] Eu amo o jeito Allison diz que.
Assim, a coisa modelo de caixa.
>> ALLISON Buchholtz-AU: Basta ter uma caixa, eu vou ser o seu modelo de caixa.
TOMAS REIMERS: Então vamos falar sobre isso.
Então, agora nós gastamos um monte tempo falando sobre seletores.
Até agora, vocês são, provavelmente, como, mestres da selectors-- você sabe,
como selecionar exatamente o conteúdo que você quer manipular em sua tela.
>> Então, agora a questão é, como exatamente você pode manipulá-lo?
Então eu acho que o mais básico maneira de pensar sobre isso
é, bem, o que exatamente é um elemento em CSS?
Nós passamos muito tempo falando, o que é uma tag,
ou o que é o mais básico representação de uma etiqueta?
>> Uma boa maneira de pensar sobre isto é, o que forma é salmão?
Que forma é, tipo, a de cor salmão fundo?
>> AUDIÊNCIA: É um retângulo.
>> TOMAS REIMERS: É um retângulo, certo?
>> ALLISON Buchholtz-AU: Não era uma pergunta capciosa.
[Risos]
>> TOMAS REIMERS: Não tentar para enganar vocês esta tarde.
Então nós temos este retângulo.
E a marca é uma p, certo?
Assim que nos dá bom crença de que o parágrafo
é representado como um rectângulo, em menos na mente do navegador, que
ela é.
>> ALLISON Buchholtz-AU: Quer dizer, navegadores são tipicamente rectangular,
por isso faz sentido.
>> TOMAS REIMERS: A idéia aqui é que todas as etiquetas dentro do CSS
são representados como um rectângulo.
E cada retângulo tem quatro peças de acordo com CSS, OK?
Você tem o conteúdo real.
É aí que o texto se encontra.
>> ALLISON Buchholtz-AU: Talvez a sua imagem.
>> TOMAS REIMERS: Yeah.
Você tem estofo, que é apenas algum tipo de espaço em branco.
Então você tem uma borda.
E então você tem margem, que é o espaço em branco fora dessa.
Então, isso não faz sentido a ninguém, por isso estamos
vou falar sobre isso por um segundo.
Então, aqui, o que vamos fazer é que vamos criar algumas divs, OK?
Desculpe-me quando I--
>> ALLISON Buchholtz-AU: Sinto-me como devemos colocar uma imagem bonito em.
>> TOMAS REIMERS: Nós definitivamente deveria.
>> ALLISON Buchholtz-AU: Eu sinto que todo mundo
poderia beneficiar de um imagem bonito, é tudo.
>> TOMAS REIMERS: Podemos todo o benefício de a--
>> AUDIÊNCIA: Sim, com certeza.
TOMAS REIMERS: OK, legal.
Assim, devemos colocar um bonito imagem em algum lugar.
ALLISON Buchholtz-AU: Eu me sinto como um coelho bonito pode ser útil agora.
TOMAS REIMERS: Claro.
ALLISON Buchholtz-AU: Fim da semana.
Tem algo adorab--
>> TOMAS REIMERS: Que tal um gatinho?
>> ALLISON Buchholtz-AU: Um gatinho funciona também.
>> TOMAS REIMERS: Cool, porque há um site para isso.
É chamado PlaceKitten.
ALLISON Buchholtz-AU: Isso é ótimo.
TOMAS REIMERS: Sim.
ALLISON Buchholtz-AU: Just for, como, imagens de espaço reservado em seu site.
TOMAS REIMERS: Hum-hum.
Há também PlacePuppy.
E há PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Realmente?
>> TOMAS REIMERS: Oh, nós não têm acesso à Internet aqui.
>> ALLISON Buchholtz-AU: [geme]
Trágico.
TOMAS REIMERS: Caso contrário, Gostaria de mostrar para vocês
como colocar imagens em seu website.
Nós vamos tentar fazer com que esta trabalhando antes temos que ir.
Mas, por enquanto, estamos apenas vai falar em cores, em seguida.
Queremos colocar fotos de kittens--
>> ALLISON Buchholtz-AU: Nós fizemos.
>> TOMAS REIMERS: --o da internet para baixo para o momento de ser.
Portanto, temos duas divs, e estamos vai dar-lhes dois ids.
Vamos chamá-lo "Primeira" e "segunda".
Então id = "primeiro".
E nós vamos dar-lhes duas cores.
Então, como vamos selecionar algo com um id de "primeiro"?
ALLISON Buchholtz-AU: Dot ou de hash?
AUDIÊNCIA: Sharp.
TOMAS REIMERS: Sharp, perfeito.
Afiado, haxixe, o que quer nós--
>> ALLISON Buchholtz-AU: Muitas coisas para chamá-lo.
>> TOMAS REIMERS: OK.
Nós vamos resolver em hashtag, e isso é o que nós estamos indo para ir com ele.
OK?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS REIMERS: Então hashtag do primeiro.
>> ALLISON Buchholtz-AU: Então você pode twittar a seminar--
hashtag CSS, hashtag legal.
TOMAS REIMERS: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, sim.
TOMAS REIMERS: OK.
Então nós temos "primeira" e "segunda".
Então, primeiro, nós vamos ter uma cor de fundo do vermelho.
ALLISON Buchholtz-AU: Uh, cólon.
TOMAS REIMERS: Yup.
ALLISON Buchholtz-AU: Eu vou ser a sua casa-checker.
TOMAS REIMERS: Allison me pegou.
Background-color de blue--
>> TOMAS REIMERS: Purple!
>> TOMAS REIMERS: Purple.
ALLISON Buchholtz-AU: Sim.
Purple minha cor favorita, e nós não usei ainda.
>> TOMAS REIMERS: Violet.
ALLISON Buchholtz-AU: Violet.
Isso funciona.
>> TOMAS REIMERS: Então, nós estamos vai ter duas divs.
Eles vão estar totalmente vazio.
Nós provavelmente deve ter algum texto.
Assim, "em primeiro lugar" vai ser "OLÁ".
E o "segundo" vai dizer--
>> ALLISON Buchholtz-AU: Adeus.
>> AUDIÊNCIA: - "mundo".
Olá, adeus.
ALLISON Buchholtz-AU: Eu vi -los em conjunto a outra semana.
TOMAS REIMERS: Os Beatles?
ALLISON Buchholtz-AU: Para reais.
Eles não são tão grandes.
Eu não gosto disto.
>> TOMAS REIMERS: Temos "OLÁ" e "adeus".
E, novamente, CSS é simplesmente fantástico, porque reconhece as nossas cores.
Não precisa mesmo se preocupe que eles existem.
Eles fazem.
>> ALLISON Buchholtz-AU: Eles existem.
>> TOMAS REIMERS: Então, eu acho que tem CSS 255 palavras para falar sobre a cor.
Se você pode pensar em uma cor fora os 255, como, eu vou ficar impressionado.
ALLISON Buchholtz-AU: Yeah.
Eu acho que vocês podem ter acabado de chegar logo depois.
>> TOMAS REIMERS: Então, aqui, você verá que nós temos duas caixas
direito em cima uns dos outros, certo?
OLÁ e adeus.
>> ALLISON Buchholtz-AU: Não há nenhum espaço entre elas.
Eles estão apenas smooshed direito em cima do outro.
>> TOMAS REIMERS: Então a primeira coisa Eu acho que devemos falar sobre
é vamos também dizer-- sim.
Então CSS representa-los como uma espécie de caixas.
E, como caixas, eles têm conteúdo.
E o conteúdo agora é uma espécie de o OLÁ ou o adeus E é isso.
OK?
>> Assim, uma das primeiras coisas que você pode fazer é que você pode adicionar preenchimento.
Padding diz quanto espaço ele deve deixar em cada lado.
Então, digamos que eu quero dizer 10 pixels em cada lado.
E eu vou dissecar isso em um segundo.
ALLISON Buchholtz-AU: Todas essas coisas aqui
vão ser principalmente em pixels para o resto do seminário.
Você vai ver que ele tem algum espaço em torno dele, certo?
Então, o que você não vê aqui é que há este tipo invisível de preenchimento
de cada lado, o que diz, como, OK, você tem a sua caixa de content--
>> ALLISON Buchholtz-AU: Você quer apenas para puxar para cima o elemento inspecionar?
>> TOMAS REIMERS: Sim, isso é uma boa idéia.
ALLISON Buchholtz-AU: Além disso, eu acho que o elemento de inspecionar é uma boa forma
para descobrir se alguma coisa está acontecendo errado, algo inesperado acontece,
inspecionando as tags e vendo o que é como sobrescrito é útil.
>> TOMAS REIMERS: Então, eu não tenho certeza se vocês podem ver esta cor.
Você pode?
Você verá este preenchimento sobre o tipo de borda.
E então você vê o real conteúdo em azul, certo?
Então esse é o muito noções básicas do modelo de caixa.
Você tem conteúdo.
Então você tem estofamento.
>> AUDIÊNCIA: Por que você não apenas use a caixa de dentro as--
>> ALLISON Buchholtz-AU: Certo.
Porque é apenas selecionando o elemento agora.
>> TOMAS REIMERS: Yup.
Outras coisas.
Então vamos falar sobre isso comando preenchimento por um segundo.
Assim, em CSS, medições precisa de ter uma unidade.
Então, primeiro você tem a quantidade.
Portanto, neste caso, já dissemos 10.
E, em seguida, o próximo temos dito é pixels, px.
Outros que você pode ter são coisas como centímetros, polegadas.
Você pode fazer coisas como: o que é de 10 polegadas?
E isso vai ser ridículo.
>> ALLISON Buchholtz-AU: Oh, boy.
>> AUDIÊNCIA: Whoa.
>> TOMAS e Allison: Yeah.
TOMAS REIMERS: Então, isso é tudo o estofamento.
Eu vou voltar para pixels.
>> ALLISON Buchholtz-AU: Pixels tendem a ser, assim, o padrão.
Quando você olha para um monte de sites, eles trabalham principalmente em pixels.
TOMAS REIMERS: Então você está indo para ver ou pixels-- os outros que você vê
é em, que é um em é igual à altura da fonte
que você está usando atualmente.
>> ALLISON Buchholtz-AU: Mm.
TOMAS REIMERS: É uma boa maneira de dizer, como, eu quero tanto espaço como minha fonte
é tomar.
ALLISON Buchholtz-AU: não sabia disso.
Você aprende algo novo a cada dia.
TOMAS REIMERS: Há uma monte de medições em CS.
Eu sugiro que você procurá-los.
Para todos os seus casos, eu acho pixels deve ser suficiente.
E eles também são o que você vai ver
na maioria dos exemplos feita em linha.
Então, vamos deixá-lo em pixels.
>> Você também pode, eu deveria dizer-- assim preenchimento sets todos os preenchimentos.
Você também pode fazer algo como "Padding-top" para apenas set--
ALLISON Buchholtz-AU: Maybe vamos buscar o nosso "OLÁ" de volta.
TOMAS REIMERS: --to apenas definir o preenchimento no topo e nada mais.
Assim, os quatro comandos são padding-top, padding-bottom, padding-left,
e padding-right.
>> ALLISON Buchholtz-AU: Assim como que seria de esperar para uma caixa.
>> TOMAS REIMERS: Yeah.
Nada muito louco lá.
Isso faz sentido?
Então esse é o preenchimento.
Eu estou indo para definir tudo os preenchimentos de volta para 10.
E então eu vou passar a fronteira.
>> Então, o que é fronteira é fronteira é um comando estranho.
Leva espécie de três coisas ao mesmo tempo.
Assim, o primeiro é o quão grande você quero que seja como uma medição.
Mais uma vez, estou usando apenas pixels.
E a última coisa que eu deve adicionar a medições
é a única coisa que não necessita de uma unidade é 0.
Na verdade, é incorreta 0 para dar uma unidade,
0 porque é entre 0 polegadas, pixels, centímetros, o que for.
Tudo isso só significa 0, certo?
Então, primeiro você dá a ele a medição.
>> Então você dar-lhe o estilo.
Então, eu vou dizer "sólido".
E nós vamos falar sobre o que isso significa.
E então, finalmente, você dar-lhe uma cor.
Então, eu vou dizer "negro".
E estas são todas as coisas que nós agora visto antes, com exceção de estilo,
mas nós vamos falar sobre isso.
Então vocês têm visto as medições, e você já viu cores.
E o que acontece é que obter este agradável borda preta em torno dele, certo?
Vocês ver como nós fizemos isso?
>> AUDIÊNCIA: Yeah.
>> TOMAS REIMERS: Cool.
Então, o que é isso?
Então, primeiro de tudo, é um pixel.
Isso é auto-evidente o suficiente, certo?
Como, é um pixel de espessura.
Ou seria um pixel, mas estou ampliada, por isso é um pouco mais
do que isso.
>> ALLISON Buchholtz-AU: E nós temos esta TV resolução ridículo.
>> TOMAS REIMERS: Yeah.
Você pode torná-lo maior, menor, o que for.
Então aqui vai uma fronteira de dois pixel.
Você verá que é duas vezes mais grosso.
A próxima coisa que você tem é a cor.
Isso não é interessante.
Eu não vou falar sobre isso, realmente.
>> ALLISON Buchholtz-AU: Mas o estilo pode ser apenas um pouco interessante.
>> TOMAS REIMERS: Yeah.
Então estilo, existem poucos que eu vejo comumente usado.
Em primeiro lugar é uma sólida, próximos um do pontilhada, eo último de uma frustradas.
E aqui é pontilhada.
Você vai ver que eles são um monte de pontos, certo?
Uma boa maneira de obter uma espécie de fronteira agradável indo, traços são também bastante popular.
>> ALLISON Buchholtz-AU: E depois, claro, eu sou
certeza de que há muitas outras estilos que você pode começar.
E nós temos um grande conjunto de links no final para vocês
ao tipo de ler e olhar para CSS mais legal.
>> TOMAS REIMERS: E depois a última coisa, nós somos
vai falar sobre o modelos de caixa rápido.
Oh, e depois de fronteira, exatamente como o preenchimento,
você também tem coisas como border-left, border-right, border-top,
border-bottom, que permitem que você para chegar a um limite específico.
Então, aqui é apenas a borda esquerda definida.
Será que isso faz sentido?
>> ALLISON Buchholtz-AU: É um fresco maneira de enfatizar as coisas ou adicionar
linhas entre os diferentes elementos.
TOMAS REIMERS: Absolutamente.
Então essa é a nossa fronteira.
E margem do último um.
Como preenchimento de Margin Exceto que não é within--
ALLISON Buchholtz-AU: É não em torno de seu elemento
mas, na verdade, em torno da totalidade caixa que temos visto.
>> TOMAS REIMERS: Yeah.
Allison disse que perfeitamente.
Não é, como, dentro de sua elemento, que é em torno de toda a caixa.
Isso significa que coisas como fundo não se aplicam a ele.
E é basicamente diz, como, eu não quero nada
em tanto espaço para mim.
Assim como temos aqui uma margem de 10 pixels.
Portanto, nada menos de 10 pixels deve ser o próximo a mim.
Isso é o tipo de sua espaço, mas meio que não.
Então esse é o muito noções básicas do modelo de caixa.
Isso faz sentido?
Cool, legal.
ALLISON Buchholtz-AU: Awesome.
Então agora eu acho que nós apenas temos nossos recursos legais
que nós o levaremos caras através muito rapidamente.
E nós vamos actually-- bem, temos internet ainda?
>> TOMAS Reimers: Deixe-nos ver se consigo abrir up--
deixe-me ver se eu pode obter internet rápida
enquanto Allison fala sobre qualquer coisa Allison quer falar.
ALLISON Buchholtz-AU: Então basically-- eu não
sei o que mais eu posso dizer neste momento.
Mas estes são alguns realmente bons recursos.
Estes são os que Tomas e eu usei
e que, na verdade, utilizado para preparar para isso.
W3Schools é aquele que você vocês deveriam ter visto antes.
Recomendamos para um monte de coisas com CSS.
Eu sei que eu recomendo a minha seção o tempo todo.
>> Uma das grandes coisas é que ele permite que você tipo de confusão com CSS
e veja as mudanças neste instantaneamente,
como, em dupla janela ver que ele tem.
Assim você não precisa se preocupar com a criação de sua própria página web,
ou a criação de vhost em sua appliance local e host local,
e receber todo o trabalho material.
Ele está incorporado à direita dentro da página.
>> E tem esses pequenos lições que você pode
percorrer para aprender mais sobre seletores,
ou aprender sobre a manipulação de sua pia batismal, ou um fundo, ou uma imagem.
E você tem estes resultados instantâneos que você
Não é necessário fazer qualquer outro trabalho de preparação para.
Então, eu amo W3Schools.
Ele é fabuloso.
Está trabalhando?
>> TOMAS REIMERS: Yeah.
Não, não é.
Você quer que eu tente e reinicie o computador?
Ou queremos a--
>> ALLISON Buchholtz-AU: Quer dizer, bem, este também será online.
Todos os slides será online.
Então, eu só recomendo fazer estes.
>> Isso é ótimo como apenas como uma folha de fraude.
É só todo o básico comandos que você tem.
É ótimo quando você é o primeiro começando o seu site.
Porque talvez você não faz quero entrar em todos
o nitty verdadeiro corajoso -design pesado coisas.
Você só precisa formatá-lo de uma forma que tipo de faz sentido e vontade
fazer por enquanto.
E se você realmente quer para chegar a ele, eu sei
isto é, tal como, um dos Referências favoritas de Tomás.
Estávamos usando-o para prep, e é fabuloso.
É o desenvolvedor da Mozilla.
>> TOMAS REIMERS: Então Mozilla são as pessoas que fazem Firefox.
E isso é apenas o seu próprio desenvolvedor de referência, o que eu acho que é incrível.
E tem um maravilhoso lista de recursos.
Então, nós have--
>> ALLISON Buchholtz-AU: E então última nota é
quando você está tentando projetar seu site,
inspirar-se as coisas que você acha que são bonitas.
Inspecionando o elemento, inspecionar o código fonte
pode ser super útil para tentar descobrir
como o estilo do seu próprio site.
>> Muitas vezes, eu sinto que o melhor forma, além de experimentação,
é só de olhar para coisas que são bonitas.
Eu acho que é realmente difícil de apenas tipo de projetar as coisas em seu próprio país,
especialmente no início.
Então por favor, olhe para websites que você gosta de olhar.
Descobrir o que faz eles atraente para você.
E, em seguida, sinta-se livre para tentar replicar isso.
>> TOMAS REIMERS: Certo.
Mesmo como websites como este, você pode ver
há definitivamente uma div no topo.
E então você tem uma outra div dentro aqui, que é Awesomeness CSS.
E então você tem um monte de links aqui.
Se você realmente só inspecionar elementos, você pode classificar de
começar a ver o que fazer sites parecer, e como eu posso
recriar que, se eu quisesse.
Isso faz sentido?
Por isso, só tem três minutos do fim.
Então perguntas?
Qualquer um deles?
Sim.
>> AUDIÊNCIA: Para a cor retângulo, como você
have-- se você não quer que ele atravessando a página inteira, poderia
você tiver feito isso vá em frente só metade da página ou apenas o texto?
>> TOMAS REIMERS: Sim, com certeza.
Então deixe-me ver realmente.
Eu tenho duas idéias.
Então, primeiro de tudo, você Também é possível usar porcentagens.
>> AUDIÊNCIA: Sério?
>> ALLISON Buchholtz-AU: Então, alguma coisa a olhar para cima é o posicionamento relativo.
É algo que nós Não tenho tempo para entrar,
mas é algo que eu definitivamente recomendo que vocês merecem ser visitados.
>> TOMAS REIMERS: porcentagens assim.
E ver como nós fizemos isso apenas 50% da largura?
ALLISON Buchholtz-AU: Se você realmente saber o número de pixels,
você pode ser mais preciso dessa forma.
Você pode mexer com ele.
Mas 50%.
Se fôssemos para redimensionar nosso navegador, seria torná-lo menor.
>> TOMAS REIMERS: Bem, é basicamente 50% agora, eu acho.
É de 50%, e, em seguida, a margem foi adicionado a isso.
CSS tem um monte de manias.
Então, agora, este é 50% da largura da página.
Mas lembre-se que você tem 10 pixels decolado de cada lado.
Então, se você tivesse que mover essa contra à margem esquerda do browser,
em seguida, ele se pareceria com 50%.
Mais uma vez, como eu disse, CSS pode ser um monte de e-cheque palpite.
Tipo, você acha que algo é vai se comportar de uma maneira,
mas comporta-se de forma totalmente diferente.
>> ALLISON Buchholtz-AU: E você acabou de ficar mais esperto,
e você só obter uma melhor intuição para ele como você se move longitudinalmente.
>> TOMAS REIMERS: E fica pior e pior.
Então, é realmente apenas uma corrida.
>> ALLISON Buchholtz-AU: Isso é super encorajador.
Queremos que eles gostam CSS.
>> TOMAS REIMERS: CSS é impressionante.
Lembre-se que.
Outras questões?
>> ALLISON Buchholtz-AU: A única coisa.
Algo mais?
Com estilo.
>> TOMAS REIMERS: Awesome.
>> ALLISON Buchholtz-AU: Bem, se você caras têm dúvidas, mais tarde,
estamos sempre disponíveis, como de costume.
Você provavelmente vai ver alguns de nós para projetos finais
e definitivamente no hackathon.
>> TOMAS REIMERS: Absolutamente.
E na feira.
>> ALLISON Buchholtz-AU: E na feira.
Oh.
>> TOMAS REIMERS: Olhe para a frente a veja todo o awesome--
>> ALLISON Buchholtz-AU: Vamos ver todos os seus sites impressionantes
que vai ser bonito.
TOMAS REIMERS: Você sempre pode ver, como, os sites
que teve, como, bom CSS e, em seguida, como aqueles que não tentar fazer CSS.
ALLISON Buchholtz-AU: Além disso, outra coisa, mais uma coisa de olhar para
é Bootstrapping.
Então Bootstrap é grande.
>> TOMAS REIMERS: Google que se você--
>> ALLISON Buchholtz-AU: Google-lo.
Ele é fabuloso.
Você vai adorar.
E agora que você tem um conhecimento básico de CSS,
ele vai fazer muito mais sentido.
Impressionante.
Obrigado, pessoal.
>> TOMAS REIMERS: Muito obrigado.