Agora vamos mudar a cor do texto do H-1 e os 3 anos agora
é que a cor do bootstrap padrão escuro irá aqui e poderemos fazer a cor H-1 branca e a cor H-3 branca e atualizar.
E nós obtemos texto branco assim.
Mas também podemos fazer isso, é combinar estes dois porque eles são idênticos e fazem H-1 vírgula H-3 e
isso fará ambos os brancos.
Sempre que temos uma vírgula, apenas seleciona grupos diferentes.
Então, todos os gêmeos envelhecem três e parece exatamente o mesmo.
Mas podemos até simplificar isso e atribuir tudo no corpo para ser cor branca.
E você pode pensar que haveria um problema que pode mudar ou o botão pode mudar ou barra de navegação, mas lembre-se
de que esses são mais específicos.
Nós temos aulas do Bootstrap que estão fazendo isso versus isso são simplesmente H-1 e H-3, eles não
têm nenhuma classe ou IDs e são mais fáceis de ignorar com seus próprios estilos, definindo
a cor do corpo em branco, o H1 e os três anos herdaram essa cor e tudo o resto também.
Foi simplesmente anulado.
Então, se inspecionarmos, digamos esse botão e damos uma olhada.
Quando a selecionamos e você vê que a cor está definida para esta cor é 3 3 3 pela classe padrão do botão.
Mas se continuarmos deslizando para baixo, você verá que o corpo aqui ajustou a cor para branco e
simplesmente passa a ser interrompido.
Tudo bem.
Então, novamente, isso disse que ambos eram brancos.
Agora vamos trabalhar no tamanho da fonte.
Assim, são H-1.
Queremos que seja dobrado, o que atualmente não é.
um e daremos um peso de fonte de 700, que é como usamos a atualização em negrito .
Então, isso precisa ser ousado e eu quero que seja 5 cms, que é
cinco vezes maior, lembre-se do que o elemento pai, então vamos selecionar cada
Você pode vê-lo em negrito.
Agora, vamos também torná-lo muito maior, então tamanho da fonte 5 E-M.
Agora volte e nós vamos.
Então está olhando mais de perto.
Agora, essa relação entre o H1 e o H-3 parece exatamente a mesma.
Nós não precisamos fazer nada para o H-3 agora deve obter a imagem para se comportar da maneira que queremos.
E para fazer isso, vou mostrar-lhe algo que não vimos antes.
Eu vou mover o escuro para o lado direito e se eu inspecionar o elemento de idade ele fora ou o
corpo, eles verão que ambos pararam antes do final da página.
Então, aqui mesmo.
Esse é o fim da idade para o meu documento.
Então, quando eu digo a minha imagem para cobrir o corpo e eu disse que é o tamanho do fundo para cobrir e a
posição do fundo para se centrar, leva em consideração o tamanho do corpo e quando o corpo acaba aqui, ele se comporta de
forma diferente.
O que faremos para corrigir isso é dar ao elemento HTL uma altura de 100 por cento, o
que significa ocupar 100% do contêiner, que é apenas a janela inteira do documento.
Altura masculina 100 por cento e voltaremos.
Vamos fazer a tela cheia agora e atualizar.
E nossa imagem funciona do jeito que esperamos e eu diminui.
E isso parece ser bom para mim também.
Agora, temos duas coisas principais a serem focadas.
O primeiro é o H. R. É muito amplo para nós, suposto ser muito menor.
E então eu também quero me concentrar na fonte aqui.
Bem, começar a escolher a obra de arte e tudo o que queremos fazer é dar uma com de 400 pixels.
Então, no nosso C Ss, selecionaremos h na parte inferior com 400 pixels.
Aqui vamos nós.
Outra coisa que vou fazer,
é um pouco esburacada, que você não tenha notado que eu vou entrar aqui e dar uma Forder no topo.
Um pixel sólido.
Então eles têm uma cor aqui que é f 8 8 8.
E, em seguida, também um fundo de borda que é um pixel sólido e esta será uma cor transparente.
Zero zero zero zero ponto dois.
Então, isso não lhe dará o efeito de uma sombra.
Então, preste atenção.
É realmente difícil de ver.
Eu nem sei se eu vou
pegar no elenco de tela, mas o que temos é uma borda e, logo, logo abaixo da borda,
uma linha cinza clara que faz parecer que há uma leve sombra que se mostra um pouco melhor em relação à cores mais claras.
ESTÁ BEM.
Então,
você não pode ver isso o suficiente se confiar em mim ou você pode se livrar da imagem de fundo e será mais fácil de ver lá também.
Em seguida, vamos nos concentrar nos ícones com os quais eu usei divertido.
Então eu tenho isso aberto.
Diversão.
Impressionante.
Eu sei.
E também receberemos o CD aqui.
Se você clicar em começar, há um CDN que você poderia copiar lá.
Coloque isso em nosso aplicativo e também faça
isso no topo da economia e então vamos dar uma olhada nos ícones reais.
E o primeiro que sabemos que usamos é um PA.
E para fazer tudo o que precisamos é de classe alta ECOs F A F A dash PA.
Então coloco isso dentro do botão.
Então, se vamos ao botão logo antes de começar, adicionei isso em.
Agora, se voltarmos e atualizarmos, você pode ver se temos um pequeno botão e temos uma
impressão de palma em seguida, temos dois ícones aqui para se inscrever e fazer login.
E aqueles dois eu lembro do que são.
Eu só vou fazer isso aqui ao lado do registro depois que escrevemos, você quer adicionar outro ícone.
Exceto que esta classe de tempo não é F-8 PA, mas F. UMA. dash user dash Plus, que nos dá esse ícone com o sinal de mais e log in
é a mesma coisa sem o plus.
Então, um usuário de tablaturas e nós temos esses dois ícones.
Há uma outra coisa que fiz, que talvez não tenha notado qual é a sombra do texto.
Então, há uma sombra em torno de todo o texto aqui e vê-lo pode ver aqui.
É ao redor do H-1 e a sombra H-3 e tecnologia é algo que podemos definir com a sombra do traço de texto SS.
E há um monte de peças para ele.
Então você pode ver aqui que estamos sentando o deslocamento X o deslocamento y.
Então, o quão longe das palavras deve ir a sombra.
Então, também estamos definindo o raio daqueles borrões Então, basicamente, como deve ser grosso.
E então, a cor e a sombra que estou usando são um pouco complicadas.
Há muitas peças, então vou entrar e digitar uma peça de cada vez no arquivo CSSA.
Então, dentro do div de conteúdo, adicionará sombra de tabelas de texto e depois o primeiro fará.
Parâmetros zero de 4 pixels 3 pixels e tornarei realmente óbvio começar
por torná-lo vermelho e se eu atualizar, há a sombra que estamos adicionando primeiro.
Agora vá e adicione o segundo com
uma vírgula e recuar um pouco e então queremos 0 pixels 8 pixels 13 pixels e depois laranja aqui e dê uma olhada nisso.
da laranja brilhante e, depois, há uma terceira sombra, que é de 0 pixels, que lembra que este
primeiro número é o deslocamento X e, em seguida, o deslocamento Y 18 pixels e depois 23 pixels
é o raio e nós iremos faça com que este seja amarelo e podemos ver que temos a sombra do título vermelho brilhante.
Você pode ver que temos uma imagem mais borrada embaixo
E então a laranja que está um pouco mais longe.
E então, o amarelo que é muito mais desfocado e muito mais largo.
Então queremos mudar essas cores.
Nós não queremos trabalhar com isso.
Então, as cores são um pouco menos emocionantes.
O primeiro.
Zero zero zero zero 0. 4.
Um próximo, em vez de 0. 4 0. 1.
E então mais um que também é 0. 1.
Então usando R. G. B-A estamos apenas definindo diferentes tons de cinza.
E nós vamos lá.
Muito menos excitante, mas espero que você ainda possa vê-lo aqui.
É muito mais sutil, mas apenas adiciona um pouco de profundidade à página.
Ótimo.
Então é tudo o que precisamos fazer.
Deixe-me voltar e apenas embrulhe algumas coisas.
O grande ponto que quero fazer aqui é
que podemos usar o bootstrap e confiar nisso, mas não confiamos em todos os seus estilos.
Então, sim, mantivemos a barra de navegação
do mesmo, embora no último vídeo mostrei como você poderia alterar a cor da barra de navegação, mas mudamos as fontes que adicionamos imagens de fundo.
Então, realmente, simplesmente usamos o bootstrap como base fundamental e,
em seguida, adicionamos todos os estilos no topo e não levou muito.
Mas acho que fizemos algo que parece relativamente respeitável com apenas algumas linhas de código.
E vamos ser honestos metade de tudo gordo, esse texto, Shadowline, ali mesmo.
Impressionante.
Então, o site pareceu relativamente bom.
Terminamos com o bootstrap por enquanto.
Em seguida, vamos para Javascript na próxima unidade, o que é realmente emocionante.
Nós estaremos afastando-nos da criação de sites e coisas
que ficam bonitas um pouco para que possamos nos concentrar apenas em Javascript.
fazem coisas que não se parecem legais.
Mas, então, vamos trazer tudo de volta e fazer alguns sites bonitos que realmente
Então, isso está chegando, espero que o bootstrap tenha gostado desta unidade.
E, como sempre, recomendo que você baixe o código se tiver alguma dúvida.
Está na descrição deste vídeo.
Tudo bem, eu vejo a próxima unidade