Bem vindo de volta.
Agora que temos a funcionalidade básica do nosso aplicativo de lista de tarefas feito, é hora de nos concentrar
em fazê-lo parecer isso.
Portanto, definitivamente temos muitos caminhos para ir.
E vamos atacar essa peça por vez.
Vou tentar fazer isso na ordem mais lógica possível.
maiores, como as cores de fundo e as fontes, assegurando que temos a margem direita e o preenchimento
neste grande recipiente aqui e depois nos concentraremos em algumas das coisas mais nuances.
Começaremos com algumas das peças
OK, vamos começar aqui.
A primeira coisa que faremos, farei uma tela cheia.
Comecemos por apenas pressionar isso.
Esta é a nossa div de recipientes.
Vamos adicionar uma margem para o topo para que possamos ter mais espaço aqui.
Então, vamos voltar para nossos C S S e podemos fechar ou javascript por enquanto.
Nossa div tem uma idéia de container e então vamos selecionar e selecionar o que você já fez.
E ao invés de uma margem de OTTO zero, dê uma centena de pixels na parte superior e inferior.
E lembre-se de que precisamos do x se tivermos zero, não precisamos de X, mas se tivermos um número que fazemos.
Vamos dar uma olhada agora.
OK, então agora eles estão começando no mesmo lugar.
Eles têm a mesma margem lá.
A próxima coisa que faremos é adicionar uma cor de plano de fundo a esse recipiente que este possui.
É um pouco difícil de ver, mas quando eu eliminar algo que mostra através das costas.
É essa a cor aqui mesmo.
Então, de novo.
Então, vamos adiante e adicionamos isso.
Então, em vez de contêiner, diga fundo e a cor.
Eu vou apenas ler isso é F 7 7 depois de 7.
Bem desse jeito.
E vamos verificar como isso parece.
ESTÁ BEM.
Então temos a mesma cor cinza que temos aqui.
É o mesmo cinza claro.
A próxima coisa que faremos é trabalhar na fronteira.
E isso realmente não tem uma borda.
O que tem é uma sombra de caixa muito pequena.
Então, ainda não vimos a sombra da caixa.
Eu vou demonstrar isso aqui e entrar no MT-NW e é apenas uma maneira de adicionar um efeito de sombra.
Então, se eu rolar para baixo, você pode ver aqui algumas sombras de caixa diferentes e vamos
ter uma luz muito leve, mas se você perceber isso, há uma sombra muito pequena.
Então, a sintaxe e a sombra que vamos usar irá livrar-se da nossa fronteira é sombra das tabelas da caixa 0 0 3
pixels e, em seguida, uma cor e nossa cor será basicamente preto, mas é R. G. E então, vamos torná-lo realmente realmente transparente.
Então, apenas perceptível.
E se eu atualizar.
Não temos fronteira agora, mas há uma pequena sombra em torno desse elemento.
ESTÁ BEM.
Isso é tudo o que faremos ao contêiner por enquanto.
Vamos atacar o H-1.
Então, este encabeçando aqui.
Então, na nossa era, eu só considerei um H1.
Não tem identificação ou nada e está tudo bem.
Vamos ao arquivo CSSA e começamos adicionando uma cor de fundo.
Então, vamos selecionar cada um e o plano de fundo
é uma cor que é 2 9 8 0 seja 9 e eles vão economizar e atualizar e agora temos o tom de azul correto.
Então, também mudamos a cor da fonte
para o branco e rapidamente mostramos isso.
Tudo bem.
Lentamente, aproximando-se mais aqui.
A próxima coisa que faremos é não dar nenhuma margem e agora vamos nos livrar desse espaço que tínhamos aqui.
Como você pode ver aqui, não há margem.
Este é o nosso H-1.
Há preenchimento aqui.
Então, o texto não está correto contra a borda, como acontece aqui.
Mas não há margem na parte externa da caixa azul.
Esta é a nossa entrada de texto e que também aumentou o preenchimento, mas também não há margem em torno disso.
Então, vamos começar adicionando algum preenchimento em torno de nossa lista de tarefas.
H-1 Então, aqui vamos adicionar 10
pixels para a parte superior e inferior e 20 pixels para a esquerda e direita e salve.
Você pode ver que estamos nos aproximando.
Precisamos alterar o tamanho da fonte.
Precisa mudar a fonte.
Nós também vamos colocar em maiúscula tudo isso e podemos fazer isso até agora.
Você deve saber que um dos meus favoritos é o texto transformar maiúsculas.
Eu apenas acho que é muito legal.
Lá vamos nós, todos os maiúsculas, o
tamanho da fonte precisa ser de 24 pixels, portanto, o tamanho da fonte 24 x e economize OK, a última coisa que faremos é ter certeza de que é um peso de fonte normal.
Portanto, um H1 por padrão é realmente em negrito e não queremos isso.
Então, faremos o Funt normal ou também poderemos escrever o peso da fonte 400.
Aqui vamos nós.
livrar desses pontos de bala.
Agora é apenas uma questão de mudar a fonte que vai voltar para a próxima coisa que você deseja resolver é se
Você pode ver se não temos pontos de bala aqui.
Esses pontos de bala são considerados o estilo padrão do navegador.
Então, vamos substituir isso.
Nós vamos selecionar o UL que eles estão dentro e dizer estilo de lista nenhum.
E se voltarmos e atualizando, agora não temos pontos de bala.
preenchimento seja zero e que irá atualizar aqui e não apenas se livrar do espaço nos
lados do poço, temos espaço aqui que nós Preciso trabalhar, mas essa é a mentira, não a própria UL.
Outra coisa que eu vou fazer é homenagear você bem, que a margem seja zero e que o
Então vamos voltar para isso.
Agora vamos adicionar a fonte correta e o nome dessa fonte é rubato e faz parte das fontes do Google.
Então eu tenho isso aberto aqui e eu vou apenas fazer uma busca por ele.
E aqui vamos nós.
Adicione à coleção, em seguida, use.
E vamos querer uma maneira normal.
Vamos adicionar em negrito e também médio.
Agora vamos em frente e copie este link para o nosso HMO e podemos fechar esta janela.
Volte para onde cada equipe aqui e apenas coloque em cima
e guarde, então iremos ao nosso para ver avaliar e vamos adicionar alguns estilos ao corpo.
Tudo usa essa fonte para que possamos adicionar a família de fontes de forma robótica.
Bem desse jeito.
E se voltarmos agora e atualizar nosso H-1 é praticamente lá.
Além deste botão que não tocamos em todas as fontes, a mesma
cor do espaçamento é tudo o que é bom.
E nossos aliados estão chegando lá.
Eles têm a fonte correta.
Precisamos trabalhar em alguns dos problemas de espaçamento e preenchimento.
A próxima coisa que abordaremos são as cores de fundo sobre as mentiras.
Então, todas as outras mentiras.
Vai de uma cor branca branca pura para esta cor cinza que temos como um fundo do.
Então, podemos usar o SS para adicionar estilos a todos os outros aliados.
Então vamos fazer isso agora.
A primeira coisa que faremos
é selecionar todos os aliados e dar-lhes um plano de fundo de branco para que possamos fazer isso com F F F ou branco ou R-GA 255 255 a 55 e então faremos todas as outras mentiras.
E a sintaxe para isso é uma mentira e uma criança para terminar.
E isso também e bem definido um padrão de todos os outros.
E se fizéssemos três e diria cada terço, mas nós só queremos todos os outros.
E nós faremos a cor do fundo
o mesmo f7 f7 f7 que usamos para o fundo do contêiner e atualizamos.
Agora é difícil de ver porque eles são um pouco pequenos, mas todas as outras mentiras agora são essa cor cinza.
Então adicione mais alguns e veja que eles alternam perfeitos.
Agora vamos abordar a questão do auge das mentiras e também do preenchimento.
A primeira coisa a fazer é dar-lhes uma
altura de 40 pixels para que todos os aliados tenham uma altura de 40 x e voltem a atualizar.
OK, então eles ocupam a quantidade certa de espaço.
Agora, se os comparamos, a fonte tem alguns problemas.
E também precisamos adicionar algum preenchimento.
Em seguida, vamos mudar a propriedade da altura da linha nas mentiras para que nosso texto seja centrado verticalmente.
Agora, a linha é basicamente alta.
Nós vamos fazer com que ele atinja os
40 pixels inteiros, mostre altura da linha 40 x e isso não altere o tamanho da fonte, ele apenas muda o tamanho da linha.
Agora são 40 pixels.
Então, a linha ocupa toda essa área.
A próxima coisa menor é a cor que temos de preto e a cor que usei não é exatamente preta.
É um pouco mais leve.
Então, vamos configurar a cor e é seis seis seis atualizar e, em seguida, vamos em seguida vamos abordar a entrada.
Então temos algumas coisas que você precisa fazer.
O primeiro deles é garantir que ele ocupe a quantidade certa de espaço.
Então, essa entrada é muito maior e não é apenas preenchimento ou margem o tamanho da fonte é maior.
Temos também uma nova cor de fundo.
E há uma borda quando clicamos.
Então, vamos trabalhar em todos esses e começaremos simplesmente adicionando um tamanho de fonte maior.
Então, selecionaremos o tamanho da fonte de entrada e
definiremos o tamanho da fonte para 18 pixels.
E enquanto estivermos aqui, faremos a cor do plano
de fundo, bem como a cor de fundo e é o mesmo 7 7 1/2 7.
Bem desse jeito.
E vamos atualizar.
ESTÁ BEM.
Estamos nos aproximando.
A próxima coisa que faremos é adicionar uma largura e a largura que vamos dar é 100 por cento.
Então, agora, apenas faz parte do caminho do recipiente.
Se atualizarmos, agora vai todo o caminho.
Mas temos alguns pequenos problemas.
A primeira coisa que queremos cuidar é algum preenchimento lá.
Então, vamos adicionar o preenchimento de 13 pixels nos 13 pixels superiores do lado à direita.
13 pixels na parte inferior e 20 pixels à esquerda.
Então você pode ver isso.
Nós temos top e bottom são 13.
E à esquerda há 20 pixels.
Então, se eu estivesse fresco. Agora temos uma entrada maior que ocupa a quantidade certa de espaço.
Nós temos um problema que é que a entrada agora é muito longa.
Quando dissemos que com deveria ser 100 por cento que com era,
na verdade, apenas o conteúdo e não incluiu o preenchimento e não incluiu a margem, o que significa que a
nossa contribuição passa muito além do final da div e ao invés de mexer com o preenchimento.
Quero mostrar uma outra maneira de mudá-lo, que é uma propriedade chamada Dimensionamento da caixa.
Então, com dimensionamento de bloco você tem algumas opções diferentes, mas
basicamente controla como a caixa é dimensionada no modelo de caixa.
E vamos mudá-lo para a caixa Dasch de borda.
E o que isso eu vou apenas lê
diz que as propriedades de largura e altura incluem o preenchimento e a borda, mas não a margem.
Então, se mudarmos para a
caixa de borda que eu vou fazer agora, vamos entrar aqui, apenas adicione a caixa de caixa de dimensionamento da caixa e salve-a antes de seguir em frente.
Vou ressaltar que esta é uma dessas propriedades que queremos ter os prefixos.
Assim, o Web Kit e Mozy são Moz e a bagunça da Microsoft.
Não vou fazer isso agora.
Será no código da solução.
Mas demora muito para digitar.
Então, ele funcionará exatamente como está no Chrome, pelo menos eu atualizo agora.
Nossa caixa inclui o preenchimento na borda, mas não inclui a margem.
Então, acabamos com um ajuste perfeito.
Em seguida, vou dar uma cor à fonte quando eu entro lá.
Então, tudo o que precisamos fazer.
cor, é essa cor.
Eu vou apenas tirar a mesma cor do H-1 e ir para a nossa entrada e apenas dizer
E se atualizarmos agora e começamos a digitar lá, nós vamos.
Agora vamos nos concentrar no efeito.
Quando clicamos sobre o que se chama focagem na entrada, você pode ver aqui, nós conseguimos uma borda em torno dela.
Então precisamos trabalhar nisso.
Agora, temos o efeito de foco padrão.
Então, há um seletor para esse foco de cócplone de entrada, assim como o pseudocutor do hover.
Essas células serão executadas somente quando nos concentramos em uma entrada.
Então vou fazer o fundo branco quando nos concentramos nisso.
Eu também vou dar uma borda de três
pixels de sólida. A cor azul com a qual trabalhamos e daremos um
esboço de não um esboço refere-se a esse resplendor irritante que obtemos do próprio navegador.
Agora, se nos concentrarmos
na entrada, obtemos esta nova borda azul e também mudamos a cor de fundo, por isso é cinza agora é branco.
Então, é tudo o que precisamos fazer para a
entrada, embora devamos ir e adicionar o texto do espaço reservado que temos aqui.
Então eu irei para o índice HTL e ao lado da entrada ou na entrada adicionarei o atributo do espaço reservado.
E isso pode ser o que quiser.
Eu apenas vou fazer coincidir.
Então, é adicionar novo para fazer e atualizar.
Aqui vamos nós.