Olá a todos.
Bem-vinda de volta.
É hora de começarmos nosso projeto final.
Eu realmente espero que quando você terminar com isso, você vai ter algo de
que você se sente muito orgulhoso e que você vai querer compartilhar.
Novamente, nosso objetivo é que vamos escrever uma folha de estilo e
estilo três arquivos HTML diferentes.
Agora, quando você começar,
eu vou assumir que você tem a segunda tarefa graduada feita.
Você pode se sentir livre para alterar isso o quanto quiser, mas
eu preciso saber que essas mudanças estão concluídas.
Muito bem, deixa-me mostrar-te o nosso “antes “e o nosso “depois “para
onde vamos com este projecto final.
Então vamos ver o que fizemos até agora neste curso.
Tivemos nossa primeira visualização em HTML.
Nosso próximo, deixamos bem claro.
Nosso terceiro, onde adicionamos em algum estilo diferente.
E finalmente,
em nosso quarto, pode não parecer muito diferente nesta primeira página, mas
onde eu realmente vou fazer você se concentrar é na página do Teams, e nesta tabela.
Você será capaz de ver que eu realmente saí e
coloquei um monte de estilo nesta mesa.
E a razão pela qual escolhi mesas é porque esta será uma chance para nós entrarmos e
usarmos essas pseudoclasses.
Use esses pseudo-elementos, use alguns gradientes,
todas essas pequenas coisas que podem ser um pouco difíceis de alcançar,
mas uma vez que você tem feito, parece realmente bom.
Então vamos falar sobre cada uma dessas pequenas partes.
Então, mais uma vez, apenas um pequeno lembrete, faça uma única folha de estilo.
Eu não quero uma folha de estilo diferente para
cada página, você quer uma que vai cobrir todo mundo.
E vamos usar pseudo-elementos e pseudo-classes.
Então, se você parece um pouco confuso sobre isso, não se esqueça,
nós temos slides que cobrem isso, bem como alguns de nossos exemplos de código juntos.
Então vamos começar com a tabela porque isso é a maior parte da página.
No mínimo, quero que vá em frente e estilize a fonte, a largura
e a margem.
Agora, quando você estiliza a fonte, há muitas opções diferentes que você pode olhar.
Você pode ter diferentes famílias de fontes.
Você pode alterar o tamanho, o peso e a altura da linha.
Uma das razões pelas quais eu recomendo a altura da linha, é que quando você faz
isso, é muito mais fácil centralizar o texto dentro das linhas se você tiver feito
a altura da linha igual ao tamanho do texto.
Para sua largura, não quero que sua mesa ocupe toda a página.
Quero que ocupe um lugar provavelmente entre 75 e 90%.
E uma das razões pelas quais eu quero que você faça isso,
é porque eu quero que você centralize a mesa.
Quero que brinque com a propriedade da margem.
E descobrir como você pode ocupar a quantidade certa de espaço e
colocá-lo exatamente onde você quer.
Em seguida, vamos olhar para o cabeçalho da mesa.
Então o cabeçalho da tabela parece um pouco diferente das outras linhas, e
realmente tem esse significado semântico importante.
Então, usando as tags de cabeçalho da tabela, vamos ser capazes de dobrar essa
idéia de que estamos estilizando diferente e isso significa algo diferente.
Então, primeiro, altere a cor do plano de fundo.
Assim que você fizer isso funcionar,
eu quero que você tente colocar em uma cor de fundo gradiente.
Agora não se esqueça, a fim de usar gradiente,
você vai precisar colocar em alguns prefixos do navegador.
Em seguida, adicione uma borda, mas eu só quero que você arredonde os dois cantos superiores,
não a coisa toda, e, em seguida, também fazer a borda inferior mais espessa.
Finalmente, quando você terminar com isso, vá em frente e
adicione apenas pelo menos uma outra propriedade, algo que você acha que seria legal.
Uma vez que você tenha o título da tabela feito, vamos em frente e colocar em algum estilo para
as linhas da tabela.
A primeira coisa que eu quero que você faça, e há uma razão para isso,
é que eu quero que você defina a opacidade das linhas da tabela para algum valor de cerca de 0,8.
Em algum lugar por lá.
Onde você ainda pode ler o texto, mas está um pouco desbotada.
Em seguida, quero que você verifique se a primeira coluna de cada linha da tabela
está alinhada à esquerda e as outras duas estão centralizadas.
Agora, você pode fazer esse estilo dentro de seus elementos de linha da tabela, ou
você pode estar fazendo isso dentro dos elementos da tabela, esses TDs.
Depende de como você entra e tenta estilizar isso.
Finalmente, quero que vá em frente e coloque outra pseudo-classe.
Onde quando alguém paira sobre qualquer uma das linhas,
vai mudar de uma espécie de desbotada para uma cor mais escura.
E vou mostrar-vos um exemplo disso antes de continuar.
Então, se você notar nesta tabela,
o texto está um pouco desbotado por ser cor de fonte preta sólida.
Então é aí que entra a opacidade.
Agora, quando eu passar o mouse sobre o nome de cada equipe,
você verá que a fonte fica um pouco mais escura.
Eu não mudei a cor da fonte aqui, eu não mudei a família de fontes, ou
o tipo, ou qualquer coisa assim.
Em vez disso, o que eu mudei foi a opacidade para configurá-lo como 1.
Então, agora, quando meu pairar sopra,
ele volta para aquele tipo original de valor desbotado.
Cada um dos elementos da tabela pode levar qualquer quantidade de estilo que você
deseja dar-lhe.
Mas o que eu quero ver você fazer é que eu quero ver você estilizar o preenchimento, a cor
da fonte e a cor do fundo.
E eu quero que você defina o raio da borda para dois pixels.
Você nunca seria capaz de ver esse tipo de
diferença indistinguível ou sutil na mesa.
Então eu quero que você coloque, só para que quando eu disser para fazer isso,
você perceba que há uma mudança real lá.
Finalmente, esta seria uma grande chance para
você fazer algo que eu não me protegi.
Parte de ser um web designer é aprender a sair e
procurar diferentes propriedades com as quais você pode jogar.
Por isso, encorajo-te a sair e olhar para a sombra de texto.
É algo que uso no meu exemplo.
Então, se você realmente quer tentar replicá-lo, vá em frente e tente usá-lo você mesmo.
Mais uma vez, usaremos a classificação de pares para esta tarefa.
E as notas serão baseadas no nível de conclusão e em algum nível de estética.
Os padrões de codificação adequados sempre serão aplicados, mas
você pode especificar o tamanho de tela preferido.
Então, se alguém decidir pegar seu CSS e aplicá-lo ao HTML, você
pode deixar que ele saiba que isso realmente parece melhor em uma tela grande ou um pequeno dispositivo móvel.
Agora, há na verdade muitas,
muitas maneiras de você mudar esta folha de estilo ao redor.
E não quero que te preocupes em ultrapassar todos os padrões.
Mas se você decidir algo um pouco louco, um pouco diferente, e
algo que outras pessoas podem não entender.
Eu realmente recomendo que você coloque isso perto do fundo da sua folha de estilo.
Para que as pessoas que olham para o seu código possam realmente se concentrar nos requisitos reais
e depois se surpreender com suas inovações realmente legais.
Então eu estou esperando que isso é algo que realmente vai ajudar a solidificar sua
compreensão do CSS.
Se você tiver problemas, você deve se sentir livre para usar os fóruns de discussão e
realmente perguntar às pessoas qualquer coisa que você não tem certeza sobre.
Ou apenas compartilhe algo legal que você tem que trabalhar.
Boa sorte.