Oi.
Bem-vindo à nossa primeira palestra verdadeiramente técnica em nosso curso CSS.
Trata-se de adicionar estilo às suas páginas.
Se você veio para este curso comigo do nosso curso HTML,
você sabe que eu sei que você pode fazer arquivos HTML gerais.
Mas até agora, você pode não tê-los estilizado em tudo.
O que eu quero que você saiba antes mesmo de começarmos a estilizar, e você começar
a colocar suas próprias reviravoltas nas páginas, é que o mesmo arquivo HTML pode parecer
diferente quando visto em navegadores diferentes, e há algumas razões para isso.
Primeiro, algumas tags não são suportadas em alguns navegadores enquanto estão em outros.
Então, se você já usou a tag de detalhes, você pode ver que às vezes sua página
terá pequenas setas ou pequenas marcações diferentes nelas e outras vezes ela não terá.
Então, isso se resume a tags que são suportadas.
Mas também, cada navegador tem seu próprio estilo padrão diferente.
E o que esse estilo padrão diz é que é assim que eu quero que meus cabeçalhos H1 pareçam, ou
isso é o quanto de preenchimento que eu quero em torno dos meus parágrafos.
Então, se você acessar exatamente a mesma página em navegadores diferentes, pode ser difícil
dizer, mas você verá pequenas diferenças em como as coisas são feitas.
Mas, em geral, esse visual padrão é realmente simples.
E a maioria das pessoas que conheço não querem que suas páginas pareçam simples.
Eles querem colocar um pouco de estilo.
Então, vamos começar a olhar para maneiras de fazer isso.
Uma maneira de adicionar estilo é pensar em adicioná-lo diretamente ao texto.
Agora, à medida que o HTML evoluiu, passamos de ter tags que eram distintamente sobre cores,
e sobre centralização diferente, e coisas assim.
Para dizer não, não, não queremos etiquetas que tenham a ver com estilo.
Nós só queremos tags que tenham a ver com conteúdo.
As pessoas diziam: “Ok, podemos fazer isso, mas eu quero torná-lo bonito.
Então, como eles fizeram isso é que eles adicionaram atributos de estilo.
Então, neste caso, eu peguei uma tag h1 e adicionei o atributo style e
simplesmente disse “cor:azul”.
E o que isso vai fazer é que ele vai fazer este cabeçalho h1 particular
tem fonte azul para ele.
Então, é muito simples.
É uma boa maneira de entrar e adicionar um estilo simples à sua página.
No entanto, isso ainda meio que quebra nossa regra
de querer separar conteúdo do estilo.
Porque se você quiser mudá-lo para, digamos, vermelho ou verde ou
algo assim mais tarde, você vai ter que entrar e
mudar a tag, porque você vai ter que mudar o atributo.
Então eu realmente tentei sair do meu caminho para não usar isso em tudo, e em vez disso,
ter o hábito de fazer as coisas da maneira certa.
E a maneira certa de estilizar suas páginas é usar CSS.
As folhas de estilo em cascata são basicamente uma maneira de escrever regras que dizem como você
deseja estilizar todos os parágrafos, como deseja estilizar todos os títulos, ou
como deseja estilizar algumas de suas imagens.
É uma
maneira muito agradável e específica que todos podem seguir para fazer essas escolhas de estilo.
E as regras são definidas assim.
Primeiro você tem que colocar seu seletor, e
seletor é apenas uma espécie de uma maneira extravagante de dizer o que é que você quer estilo.
No nosso caso, vamos começar apenas dando ao seletor
nomes de tags diferentes, como h1 ou parágrafo.
Uma vez que você encontrar qual tag é que você deseja estilizar,
você diz qual propriedade é que você deseja alterar.
Então podemos olhar para coisas como cor, cor de fundo,
quanto espaço colocamos em torno dela, vamos cobrir tudo isso.
Mas por agora, vamos começar muito simples e lidar com cores.
Então, você tem que dar a cada propriedade um valor,
dizendo qual cor você quer que ela seja.
Então, de um lado, temos o muito genérico, como escrevemos uma regra.
E por outro lado, escrevi uma regra muito específica que diz, hey,
sempre que você vir um cabeçalho h1, eu quero que você faça a cor da fonte azul.
Então fizemos exatamente o que fizemos quando incorporamos usando a tag estilo,
mas agora é muito genérico, e não estamos falando de um título específico.
Não estamos a falar de uma etiqueta específica.
Então, quando você escreve essas regras, a sintaxe é muito importante.
Muitas vezes, quando você escreve HTML, o navegador é muito bom para você e
se você esquecer de fechar uma etiqueta ela diz, tudo bem,
eu sei o que ela quer que eu faça e vai colocar a página de qualquer maneira.
Quando você está fazendo CSS,
se você é desleixado com o que chamamos de sua sintaxe, você vai ficar em apuros.
Então, os colchetes e os ponto-e-vírgula são muito importantes.
Então, deixe-me mostrar novamente quando voltarmos aqui,
você pode ver que eu tenho um colchete inicial e
um colchete de fechamento, e eu tenho esse ponto-e-vírgula bem no final.
Você precisa se lembrar de incluí-los.
E uma das razões pelas quais eu falo sobre isso é que quando você começa a escrever seu código,
quando você escolhe um bom editor, e a maioria dos editores são muito bons, como Sublime
ou TextWrangler, TextEdit, Notepad ++, eles vão colocar cores para você.
Então, de repente, se você está olhando para suas regras CSS e
você está tipo, uah, eu meio que esperava que as coisas fossem cores diferentes, mas
em vez disso tudo é branco ou tudo é vermelho.
Dá uma dica de que você estragou a sintaxe da regra.
Na mesma linha, eu só quero dizer aqui que quando você está escrevendo sua regra
você pode colocar comentários para meio que ajudar você a depurar e
ajudá-lo a explicar para si mesmo o que você está indo.
E é assim que os comentários são feitos em CSS.
Você só faz o /*, */ de novo.
Então, o que acontece se você quiser fazer mais do que apenas uma propriedade?
E se ao invés de dizer que você quer que a cor seja azul,
você também quer que a cor de fundo seja amarela?
Bem, não há problema.
Você pode ter quantas combinações de valor de propriedade quiser.
Você só precisa se lembrar de separá-los com ponto-e-vírgula.
Então, neste caso, novamente,
eu defini a cor para azul e a cor de fundo para amarelo.
Tudo bem,
agora que você sabe como escrever uma regra, como é que realmente os fazemos funcionar?
Bem, há duas maneiras e
a primeira maneira que eu vou falar é chamado usando uma folha de estilo interno.
Então, como você pode ver aqui no meu código, eu tenho o modelo básico do nosso arquivo.
E dentro das tags de cabeça, eu coloquei essa tag de estilo, é onde
você vai querer colocar suas regras, elas são definidas dentro desse estilo.
Então agora, dentro da etiqueta de estilo, adicionei o h1, a cor azul, e
terminei minha etiqueta de estilo.
Então o que acontece agora é que quando o navegador abre sua página,
ele chega na seção principal que diz, oh ótimo,
ela escreveu algumas regras, vamos ver o que ela quer que eu faça.
E ele vai saber para percorrer sua página e
aplicar esta regra a todas as tags H1.
E se você tem várias regras, incluindo parágrafos, imagens, coisas assim,
ele vai saber, eu quero aplicar isso a todas as instâncias em todo o arquivo.
Está bem.
Agora há uma boa chance de você estragar tudo porque eu faço isso 80%
do tempo quando estou desenvolvendo na aula, e
o que eu faço é esquecer de fechar essa etiqueta de estilo.
E se você esquecer de fechar essa marca de estilo na parte inferior,
bem, na verdade, sua página pode acabar ficando em branco.
Portanto, não surte quando você começar a fazer isso pela primeira vez se sua página estiver em branco,
provavelmente significa que você esqueceu de fechar a tag de estilo.
Tudo bem.
Então, as folhas de estilo internas são realmente agradáveis
quando você está apenas tentando criar um estilo para cima de uma página.
Tudo bem?
E eu costumo fazer isso apenas para que eu possa manter todo o meu código em um arquivo em vez de ir para
frente e para trás e para frente.
Mas imagine que você tem um site onde você vai ter 10,20, 1.000
páginas diferentes e você quer que todas elas tenham um olhar muito consistente sobre elas.
Você não quer ter que entrar e dizer que se você quer mudar uma cor,
você não quer ter que entrar e abrir cada um desses arquivos para que
você possa mudar a cor para vermelho ou verde.
Em vez disso, o que você deseja usar é usar algo chamado
folhas de estilo externas.
A maneira como ele funciona com uma folha de estilos externa é que você coloca suas regras
em um arquivo diferente.
Então, você abre um arquivo,
você vai salvá-lo algo como mystyle com uma extensão de arquivo.css.
Então agora o navegador sabe, oh tudo em HTML, esse é o conteúdo.
Tudo em .css, esse é o layout.
Agora, quando você faz sua folha de estilo externa, parece exatamente como fizemos
no interno, exceto que você não usa uma tag de estilo.
Então, depois de colocar suas regras em um arquivo separado,
tudo o que você precisa fazer é adicionar um link na seção principal.
Então, neste caso, eu
entrei, coloquei meu link, eu preciso que ele saiba o relacionamento por causa da folha de estilo.
E você tem que se lembrar de colocar o nome do arquivo.
Então, mais uma vez, é aqui que vai ser realmente importante
que você está nomeando as coisas de maneiras que eles fazem desde para você.
Você pode vincular a quantas folhas de estilo diferentes quiser, na
maioria das vezes começamos com uma.
Então, agora que tivemos essa folha de estilos,
cada arquivo que vincula a ela compartilhará essa folha de estilos.
Então lembra quando eu mencionei que você pode ter um site com 10, 20,
1000 páginas para ele e você decide mudar essa cor de azul para vermelho ou verde ou
algo assim?
Isso é ótimo.
Tudo que você precisa fazer é abrir style.css, alterar uma linha de código, e
agora você acabou de alterar potencialmente milhares de páginas Ok,
então vamos falar por um segundo sobre essa idéia de folhas de estilo em cascata.
O que significa que estamos em cascata?
Bem, quando o navegador vai para a sua página, a primeira coisa que ele vai olhar
é ir, tudo bem, talvez eles não estão me dizendo nada.
Como faço para fazer cabeçalhos h1 normalmente?
Quão grande eu faço essa fonte?
Tem seu próprio tipo de valores padrão.
Mas então ele vai e olha e diz, oh há folhas de estilo externas.
Porque se assim for, vou substituir os padrões do meu navegador e
colocar as regras que estão nesta folha de estilos externa em vez disso.
Em seguida, vai verificar o estilo interno.
Esse estilo que você tem na seção da cabeça.
Porque, em geral, o navegador pensa, hm, talvez haja algo realmente especial
sobre esta página em particular, e aqui ela quer que eu faça essas regras em vez disso.
Finalmente, qualquer um desses estilos embutidos em que você usar a tag atributo,
eles terão a maior precedência de todos.
Então pode ser muito confuso, porque você pode começar a escrever regras diferentes,
e você não consegue entender por que alguns estão funcionando e outros não estão.
É aqui que a parte em cascata entra novamente.
Primeiro, ele examina os padrões, depois externos, internos e, em seguida, inline.
É por isso que você realmente quer evitar usar qualquer estilo inline porque
ele praticamente anula todas as suas regras de estilo.
Tudo bem, então nós sabemos como esses quatro vão, mas e se você tiver um seletor E,
você tiver ligado a duas ou três folhas de estilo diferentes, e
esse mesmo H1 foi definido como azul, verde e amarelo, mas em arquivos diferentes.
Como o navegador sabe o que fazer?
Bem, como funciona é que as regras do arquivo mais recente têm precedência.
E o que eu quero dizer com o arquivo mais recente, significa que ele vai para a seção principal
e vai um, dois, três, e ele meio que olha para a ordem que você listou,
e o último que você listou é o que vai ter precedência.
Está bem?
Bem, e se você tiver um seletor no mesmo arquivo, e
você tiver escrito H1 várias vezes?
Isso pode realmente acontecer um pouco.
Especialmente se você decidir sair e fazer parte de uma grande empresa de desenvolvimento,
você escreve algum código, e então alguém escreve algum código, ou,
como eu digo aos meus graduandos, talvez você tenha saído e se divertido muito uma noite,
e você chegou em casa e decidiu, eu vou codificar!
E você esquece que já escreveu algumas regras.
Bem, se for esse o caso, mais uma vez,
o navegador vai olhar o que viu pela última vez.
Então, neste caso, eu tenho duas regras para h1.
Um escreve na cor para azul.
E eu disse, hey eu quero que você use esta família de fontes aéreas.
E mais tarde, pode haver um monte de coisas aqui,
pode não haver nada, e eu digo “hey, eu quero que você use uma fonte da família Times”.
Como o navegador vai olhar para isso vai cair,
doo-doo-doo-doo-doo e dizer, eu vou fazer toda a fonte azul, e
eu vou ir em frente e fazer a fonte família Times.
É que sempre vai usar o último que viu.
Então, novamente, a regra mais recente tem precedência,
se ela estava dentro do seu código ou veio de arquivos diferentes.
Há, no entanto, uma maneira de sobrescrever isso.
Suponha que esteja escrevendo algo e saiba que quer que algo seja assim.
Você não se importa se alguém sobrescreve.
Você realmente quer ter certeza que as pessoas não estão usando estilo inline,
coisas diferentes como essa.
O que você pode usar é que você pode usar o! Atributo importante aqui.
Então aqui eu tenho uma família de fontes, Arial, e eu tenho importante aqui.
Então, mesmo que mais tarde eu decida substituí-la com as vezes, o navegador vai dizer
não, eu sei que ela realmente queria que eu usasse Arial, e isso funciona.
Então vamos em frente e olhar para um exemplo do que eu quero dizer com todos esses precedentes.
Eu sei que só de me ouvir pode ser um pouco esmagador, então eu tenho um
exemplo rápido mostrando as diferentes maneiras e então eu meio que vou terminar esta palestra.
Então vamos começar usando o atributo style.
Como você pode ver aqui, eu escrevi o código, e
eu usei o atributo de estilo para este cabeçalho h1, e este parágrafo.
Então, neste caso, eu quero que meu título h1 seja azul, e meu parágrafo seja vermelho.
E o que eu realmente quero mostrar a vocês é que
o único parágrafo que foi alterado para texto vermelho ou fonte vermelha foi o primeiro.
O outro ainda é negro.
Então a única maneira de estilizar é se você entrar e você mudar
cada tag para fazer com que pareça do jeito que você quer.
Se eu quisesse que todos os parágrafos fossem vermelhos, eu teria que ir lá e
colocar estilo igual, estilo igual.
Neste exemplo há apenas dois,
mas você pode imaginar como seria realmente irritante se você tivesse um monte, ok?
No nosso próximo exemplo, temos um estilo interno.
Nesse caso, coloquei minha marca de estilo na parte superior e adicionei regras para
parágrafos e títulos H1, e deve lidar com ambos.
Então agora não há mais nada aqui, minha etiqueta está sozinha.
E se você olhar para o resultado, vamos para cá.
Você pode ver que agora, mesmo que meu HTML não tenha nenhum tipo de estilo
em tudo, ambos os parágrafos são vermelhos aqui e assim como o cabeçalho.
Tudo bem?
O último exemplo que tive para você é que peguei exatamente essas mesmas regras e as
coloquei em uma folha de estilo externa.
Novamente, não há marca de estilo aqui.
São apenas as próprias regras.
E então eu tive que voltar para o arquivo HTML, e você pode ver bem aqui,
perto do topo, eu tenho hey, vamos link para a folha de estilo que eu quero.
Agora, eu quero apontar isso com muito cuidado para você.
Se você notar, Eu tenho CSS/folha ExternalStyle.
Isso significa que minha folha de estilo está em uma pasta especial chamada css.
Desenvolvedores realmente enfatizam que você faz isso,
porque você quer que seu código seja meio organizado em partes diferentes.
Então, novamente, da mesma forma,
agora tenho uma página que usa folhas de estilo externas e parece muito boa.
Então todo esse código vai estar disponível para você olhar para ele, mas
eu quero que você tipo de brinca com ele o máximo que puder.
Mas, eu quero usar este exemplo final para
ajudá-lo a entender como a cascata funciona.
Então aqui, eu tenho minha folha de estilo externa.
Vou até aqui por um segundo.
Vá para o meu, e eu vou acrescentar, uma última coisa.
Desculpe, isso vai ser constrangedor.
E eu vou dizer que você sabe o quê?
Em vez disso, eu quero que essa fonte seja preta novamente, e eu termino com ela.
Vou mostrar-te o que acontece quando fazes asneira rapidamente.
Vou guardá-la, vou recarregar a minha página e tudo desapareceu.
Era disso que eu estava falando.
Você realmente quer ter certeza de incluir essa etiqueta de estilo.
Faça isso. Certifique-se de fechá-lo.
Tudo bem.
Então agora o que eu tenho acontecendo aqui é que meu navegador tem seu navegador padrão.
Tem uma folha de estilo externa, e agora também tem uma interna.
Então vamos ver que cor vai ser,
se vai ser azul ou se vai ser preto.
E como você pode ver, é preto.
Assim, à medida que você começar a estilizar, será muito importante que você veja
diferentes maneiras de separar o conteúdo da formatação.
Além de olhar para as diferentes maneiras que você pode fazer essa formatação.
Então, uma das primeiras coisas que quero que vocês pensem
é como essa ideia de
folhas de estilo externas e internas realmente joga na separação entre conteúdo e formatação.
E, ao mesmo tempo, quero que entenda que nem sempre
seguimos todas as regras.
No começo, sempre temos que começar com
exemplos muito simples para ajudar vocês a solidificar o que está acontecendo com CSS.
Então eu só vou terminar isso agora com uma
breve demonstração de um exemplo que eles têm em csszengarden.com porque
eu acho que ele realmente traz para casa a idéia de que CSS pode ser muito poderoso.
Então vamos dar uma olhada.
Então, neste site,
CSS Zen Garden, Eles realmente fizeram um ótimo trabalho de mostrar
todas as maneiras diferentes que você pode formatar exatamente o mesmo arquivo, mas de maneiras diferentes.
Então aqui em cima, se você der uma olhada, você pode ver que esta é a folha de estilo de uma pessoa
para decorar ou estilizar este documento.
Agora, sem mudar nada do HTML, alguém entrou e disse: “Ei,
você sabe o que, isso é legal, mas eu vou estilizá-lo assim.
Parece completamente diferente.
É o mesmo HTML exato, mas parece completamente diferente.
Da mesma forma, temos este aqui, o mesmo HTML exato.
Mas você não poderia parecer diferente,
porque eles adicionaram algum CSS e JavaScript a ele que é diferente.
Então venha comigo.
Vamos codificar muita coisa neste curso.
Vamos jogar muito com este curso.
Você vai estar bagunçando muito neste curso.
Mas mal posso esperar que
você desenvolva algo que realmente reflita como você quer que sua página fique.
Obrigado.