OK, então é hora de realmente escrever alguns C S S.
Muito exitante.
Antes de fazer isso, ainda que precisemos ter algum velho ele Al que podemos modelar.
Então, eu vou seguir em frente e sublime, criar um novo arquivo, salve-o, coloque o meu desktop por agora e
vou chamar isso de mim.
HMO.
Use esse pequeno truque para obter o esqueleto da placa da caldeira e esta será uma página muito simples.
Estou dizendo que agora não vai ficar lindo quando terminarmos aqui.
Nós vamos mudar algumas cores.
Estamos apenas examinando os princípios básicos de como tudo isso funciona em conjunto.
Então eu vou e cada um sobre mim e então
vamos dizer uma coceira por meus hobbies.
Sinta-se livre para se adaptar a você mesmo.
Vamos adicionar uma lista e alguns aliados e vamos fazer cozinhar e cozinhá-lo e salvar esse arquivo.
Vamos apenas verificar novamente.
Vamos abri-lo.
Ótimo.
Aqui está o nosso site maravilhoso que vamos usar.
Então, antes de começar a escrever o sucesso, devemos decidir onde colocar o sucesso.
E existem algumas escolhas.
Então, nas notas, há dois que eu estou fazendo referência nesta página e o primeiro que eu vou contar
agora não é uma boa idéia.
Estou mostrando isso apenas para que você esteja ciente por dois motivos.
da folha de estilo separada e, antes da CSSA, você realmente fez isso em todos os elementos.
Uma dessas, é a única maneira de copiar os elementos antes
Então, deixe-me mostrar um exemplo.
Eu quero fazer essa primeira mentira roxa.
Eu diria estilo e, em seguida, na citação, diga Color Purple e isso funcionará.
E isso muda para ser roxo.
Então, há um problema, porém, o que é se eu quero que os três sejam roxos eu preciso ir
em frente e duplicar isso sempre.
Qual é muito trabalho.
E então, se eu decidir, não quero que eles sejam verdes, então preciso mudar três lugares diferentes para
serem verdes.
E, obviamente, esse problema é muito pior quando você tem centenas do mesmo elemento com o
mesmo estilo em uma determinada página.
Então, esta é uma má idéia.
E a outra razão, esta não é uma ótima idéia, é que queremos separar nosso h tim L da RCA.
É essa idéia da separação de preocupações.
Queremos que nossa CSSA seja autônoma em seu próprio arquivo.
Queremos envelhecer para ser seu próprio arquivo com apenas a estrutura.
C Ss é apenas o estilo.
Então, neste momento, essa é uma mistura estranha dos dois.
Então eu vou me livrar disso e, no outro lado das notas, algo é chamado de ataque de estilo.
Então, uma tag de estilo nos permite escrever a sintaxe C Ss, onde realmente selecionamos coisas e temos as chaves
que não podíamos fazer aqui.
Mas o que podemos fazer é fazer isso dentro de um documento h t m l.
agora escrever algumas tags e seletores C Ss dentro daqui.
Então, na cabeça, se avançarmos e simplesmente criar a etiqueta chamada de estilo e podemos dar-lhe esse tipo de atributo igual a barra
de texto C Ss podemos
Então lembre-se que temos este é o seletor de regras gerais e, então, temos propriedades dentro das chaves e então valor e,
em seguida, um ponto e vírgula.
Então, vou comentar isso, por sinal, para fazer comentários.
SS usa barra e o asterisco e, em seguida, asterisco e barra.
Então, quero dizer, vou deixar isso aqui.
E vamos começar mudando o H-1 para ser roxo.
Então, da forma como escrevemos isso, se seguimos esse padrão, selecioná-lo.
Então vamos escrever cada uma e outra vez e passaremos muito tempo em diferentes tipos
de seletores.
Então, agora, estamos aprendendo sobre um chamado de seletor de elementos que levou a selecionar
com base em um tipo de elemento que é H-1.
Então, agora vamos adicionar uma propriedade aqui e neste vídeo, vamos apenas mantê-lo extremamente
simples e usar cor.
coisa que podemos fazer é mudar todos os aliados para serem laranja e fazer isso selecionamos com um seletor de elementos novamente e podemos fazer isso logo depois.
Então eu digo cor e depois roxo e salve esse recarregamento ou página de volta e nós obtemos
um H-1 roxo. Então, a próxima
Não precisamos de vírgulas ou de qualquer outra pontuação.
Nós apenas fazemos outra regra, aqui, aplicamos cintas curly e desta vez vamos dizer que a cor é laranja.
Então, a razão pela qual estamos fazendo isso é que eu quero mostrar que esse seletor Elyse não
apenas seleciona uma seleciona todas as mentiras.
Então, atualizamos os três deles agora são laranja.
Da mesma forma com a H-1 se tivéssemos muitas h.
Então eu vou apenas adicionar três.
Todos seriam roxos.
Outra coisa que eu vou mostrar aqui é se eu precisar encontrar outro estilo para cada um depois e eu digo que
ele deve ser azul, ele
fica azul.
Todos ficam azuis.
E isso acontece com algo que aprenderemos muito mais sobre o que
acontece quando há informações de estilo conflitantes.
E, neste caso, mudamos todos para serem roxos.
E depois, mudamos todos para serem azuis.
Então, o que veio depois ganhou a batalha, acho.
ESTÁ BEM.
Então, o problema com o que acabamos de fazer, embora pareça bem, mas, infelizmente, ainda está em
nosso HMO.
E acabei de terminar dizendo há alguns minutos queremos separá-lo ou sair dele e R C S
nós não queremos que eles estejam conectados.
Bem, queremos que estejam conectados, não queremos que os CCs sejam aninhados dentro de seu HMO.
Então funcionalmente funciona exatamente da mesma maneira.
Nós não vemos nenhuma diferença visual, mas bem, o que realmente queremos fazer é usar uma tag de link.
Então, o que uma etiqueta de link nos permite fazer é escrever ou ver SS em um arquivo totalmente separado e, em seguida, conectado
com a etiqueta de link em vez de nossa cabeça, que basicamente irá obter o conteúdo desse arquivo e alma e estilo
de tudo em nossa idade.
Tim L. dado o conteúdo desse arquivo.
e vamos colocar o RC SS aqui, então vamos salvá-lo e eu apenas vou chamar isso.
Então, para escrever, podemos começar por fazer um novo arquivo
C Ss você chama isso o que quiser, mas precisa ser dot C Ss e eu estou colocando
no mesmo diretório que meu arquivo HDMI.
A próxima coisa que vou fazer é apenas definir alguns estilos e aqui, então, H-1, digamos que
a cor é vermelha e a cor das mentiras é verde.
E enquanto estivermos aqui, vamos mudar isso também.
Cor roxa.
Ótimo.
Então, nós temos o CSSA definido aqui, é claro, e vou comentar isso por enquanto.
Claro, embora eles não estejam conectados agora.
Então fizemos um arquivo, mas não está conectado.
Então, para fazer isso, precisamos usar a tag do link.
Então, eu gostaria de apenas digitar o link e, em seguida, clicar em aba e você pode ver que existe esse atributo importante que
o texto sublime quer que preenchamos o que é chamado de A-Trak e funciona como a calha em
uma tag de âncora e isso Dê uma chegada.
Damos um lugar para encontrar o arquivo.
Então, neste caso, este arquivo acaba de ser chamado para nós, então escrevemos seqüestros, sim, salvar e atualizar.
Agora você pode ver que lemos H-1 uma página roxa 4 e aliados verdes, então vamos tudo o que vamos fazer.
No que diz respeito ao estilo, por enquanto.
Então, para recapitular aqui, a primeira coisa que discutimos é usar o atributo de estilo para adicionar estilo na linha,
que parece que esse estilo é igual e depois dê uma propriedade e esta é uma má idéia por dois motivos.
O primeiro dos quais é que não queremos desordenar ou H Tim L com um monte de estilos.
Queremos que estejam separados.
E a segunda razão é que é uma dor se queremos mudar as coisas.
É uma grande duplicação se queremos fazer todos os 3H um tópico.
Nós devemos copiar esse código para três lugares diferentes.
A próxima coisa que aprendemos sobre o uso da etiqueta de estilo e a etiqueta de estilo nos permite escrever C S nós
dentro do nosso h Timo.
E funciona bem.
Isso nos permite usar a sintaxe CSSA, onde podemos selecionar todos de uma vez.
O problema com isso é que não queremos colocar R C S S diretamente enfurecido por ele.
algo que deseja adicionar rapidamente alguns estilos, você não quer fazer um novo arquivo e depois conectado.
Mas você usará isso ocasionalmente se você estiver apenas depurando
Você acabará por excluí-lo depois.
Então, esse é realmente o momento em que eu uso isso.
É apenas para fins de demonstração rápida.
Mas o que realmente queremos usar é o link que marca a tag do link.
É apenas uma referência a outro arquivo.
Então, precisamos de um arquivo preenchido com estilos que precisa terminar com o Dotsie, avalie-o e depois conecte-o com
o atributo H ref e isso é tudo o que precisamos fazer.
Uma coisa que eu esqueci de mencionar é que você definitivamente quer colocar tags e estilos de link na sua cabeça.
Esse é realmente o ponto da cabeça é onde você coloca as coisas que na verdade não estão
na página, não os elementos, mas as coisas que têm a ver com esses elementos, por isso, fontes que você está incluindo folhas
de estilo e, eventualmente, javascript