Transcrições
1. Introdução ao CSS: Bem-vindo ao
módulo CSS deste curso. Neste módulo,
aprenderemos sobre CSS. Css significa Folhas de estilo
em cascata. Ele é usado para estilizar a página da Web. Agora lembre-se de que sempre que te
ensinar sobre HTML, mostrei este diagrama, que é se eu tiver que limpar
diferentes extremidades de uma página da Web, dividirei meu trabalho
em três partes. Na primeira parte, vou
estruturar a página da Web. Na segunda parte, vou
projetá-lo com tom. E na terceira parte, adicionarei a lógica
contrariada com o paciente. Agora, vimos que, para
estruturar a página da Web, usamos linguagem de marcação HTML, para
não descer a
página da Web, usamos CSS, também conhecido como folhas de
estilo em cascata.
2. Sintaxe CSS: Para escrever CSS, temos
que seguir algumas regras. Chamamos essa sintaxe de regras. Então, antes de tudo, temos que
digitar o selecionado, que neste caso é dP, dy. Agora vamos discutir mais sobre seletores na palestra dos
seletores. Depois disso, temos que abrir
e fechar os suportes encaracolados. Em seguida, temos que adicionar
o nome da propriedade, que neste caso é colorido. E então temos que
adicionar o cólon. Depois disso, temos que
adicionar o valor da propriedade, que neste caso é vermelho. E então temos que digitar esse ponto e vírgula para
encerrar a instrução, não recapitular rapidamente. Uh, primeiro de tudo,
adicionamos este seletor. Depois disso, adicionamos
esse seletor de propriedades. Depois disso, adicionamos
esse valor de propriedade.
3. Como usar CSS em arquivo HTML: Nesta palestra,
aprenderemos sobre como adicionar arquivos CSS e HTML. Então, antes de tudo,
criarei um documento chamado adicionando HTML de ponto CSS. Conhecimento de gênero,
o código boilerplate. Vou mudar o título para CSS. Dentro da tag body,
vou gerar uma tag P. E adicionarei aqui
adicionando CSS e HTML. Agora vamos ver se este
documento e copiar o caminho. Considerado que meu parágrafo
apareceu aqui. Existem três maneiras de
adicionar CSS e HTML. A primeira maneira é o CSS embutido. Para isso, adicionarei um atributo de
estilo aqui. Agora, dentro desse atributo de estilo, adicionarei o nome da propriedade, que neste caso é colorido. Em seguida, adicionarei o
valor da propriedade. Então, vou adicionar aqui. Agora vou adicionar o ponto e vírgula. Agora vamos salvar este documento. Você pode ver que um
parágrafo normal está na cor vermelha. Essa é a primeira
maneira de adicionar CSS. Agora, o segundo caminho
é o CSS interno. Então, vou remover isso daqui. Então, para isso, temos que adicionar as tags de
estilo dentro da tag head. Dentro da tag de estilo,
temos que adicionar o selecionado, que neste caso
é p. E então temos que abrir e fechar
os colchetes encaracolados. Dentro desse colchete encaracolado, primeiro
temos que escrever
o nome da propriedade para ele. Vou adicionar aqui cor. Agora vamos mudar
a cor para azul. Agora vamos salvar este documento. Recarregue a página. Você pode ver no parágrafo
tem cor azul. Não ouvi falar disso é CSS externo. Para isso, removerei
este deck de azulejos daqui. Agora vamos salvar este documento. E agora vamos criar mais
um arquivo. E vou nomear aqui styles.css. Agora você pode nomear o que
quiser aqui, mas você precisa adicionar
a extensão CSS de ponto. Agora, dentro do arquivo CSS. Primeiro de tudo, temos que
usar o seletor, que neste caso é p. Então temos que abrir e
fechar os suportes encaracolados. Discutirá mais
sobre seletores nesta palestra de palestras. Agora, dentro do seletor
refere-se a ter que escrever o nome da propriedade. Então vou deixar a cor do cabelo. Em seguida, temos que ler
o valor da propriedade. Vou chegar aqui verde. Vou salvar o documento. E então temos que vincular
esses estilos de arquivo CSS ponto a este arquivo HTML para esse
inseto a cabeça até, temos que usar a tag de link
para esse tipo aqui link. E, em seguida, pressione a tecla Tab. Depois disso dentro
do atributo HREF, você precisa adicionar o
caminho do arquivo CSS. Então agora meu
arquivo HTML e CSS NA mesma pasta. Então, deixarei o
nome desse arquivo CSS. Agora vamos salvar este documento
e recarregar esta página. Agora você pode ver que o
parágrafo tem cor verde. Então, para recapitular rapidamente, vimos que
existem três maneiras de
adicionar o CSS e o arquivo HTML. A primeira maneira é o CSS embutido, o segundo caminho é o CSS interno e é difícil
é o CSS externo. Css é a boa maneira de
escrever CSS e o arquivo
HTML porque, ao
criar projetos grandes, temos que escrever um
monte de código CSS e neutralizamos todo esse
código em um arquivo. Essa é a boa maneira pela qual separamos o CSS e o HTML.
4. Selecionadores em CSS: Neste vídeo,
discutiremos sobre seletores. Então, o que eu
fiz foi criar esse arquivo HTML. Agora, dentro desse arquivo HTML, vou gerar um código
boilerplate. No título,
recebo aqui seletores. Agora, dentro desta tag body, vou gerar uma tag p. E então, dentro desta tag p, vou escrever aqui,
este é um parágrafo. Agora digamos que eu queira
estilizar esse elemento HTML. Para suportar esse elemento HTML, a primeira maneira é
adicionar seu atributo de estilo. Então eu adicionarei à sua
cor. Então eu adicionaria 200. Não, vou ver se
este documento HTML, depois disso, copiarei
o caminho daqui. Agora você pode ver que a cor
deste parágrafo não é. Essa é uma maneira rápida de
estilizar este parágrafo. Digamos que eu tenha um arquivo de demonstração muito
grande. Não quero adicionar
estilos em linha li aqui porque quero adicionar muito estilo
a esse elemento. O que vou fazer é
remover esse bloco daqui. Então vou salvar este documento. Em seguida, dentro do arquivo CSS. Vou escrever para meus estilos aqui. Primeiro de tudo, vou
vincular esse arquivo CSS e agora vou salvar este
documento e recarregar a página. Agora posso ver que a cor do
meu parágrafo é preta porque não adicionei
nenhum estilo lá. Agora, o que vou fazer
é entrar neste arquivo CSS e depois
estilizarei esses elementos p para
estilizar esse PLMN. Primeiro de tudo, tenho que
selecionar esse elemento p. A primeira maneira de
selecionar esse elemento p é usar a tag div selecionada. Para isso,
entrarei no arquivo CSS. E então eu adicionaria aqui p. Se, se eu quisesse selecionar uma
tag no arquivo HTML, eu só tenho que digitar
esse nome de tag. Então é por isso que eu
escrevi aqui p, Não, vou abrir e fechar
os colchetes encaracolados. Então aqui vou pegar meus estilos. Então, por exemplo, vou
adicionar aqui cor azul. Não se preocupe se você não
entender essa propriedade. Vou explicar essa pobreza
na palestra de cores
por enquanto só para entender que essa propriedade nos
dá a cor
no texto. Então, vou salvar esse arquivo. Em seguida, atualizarei esta página. Você pode ver que uma cor escura
deste parágrafo ficou azul. Agora vou adicionar sua tag H1 e, em seguida,
adicionarei aqui o cabeçalho. Vou salvar este documento. Você pode ver no meu cabeçalho
apareceu aqui. Agora vou contar esse título. Da mesma forma, o que
fizemos aqui com a tag P, farei isso com a tag H1. Vou digitar H1, e então abrirei e
fecharei as chaves encaracoladas, e então mudarei a
cor para, digamos verde. Também adicionei aqui ponto e vírgula
para encerrar esta declaração. Agora vamos salvar este documento
e recarregar a página, não o doutorado do meu
título é verde. O segundo tipo de
seletor é aula de aula. O que vou fazer é copiar e colar isso
várias vezes. Escreverei aqui dois, aqui, três, e então
não estou aqui por enquanto. Eu removerei esse
título para o cabeçalho um. Vou salvar este documento
e recarregar a página. Você pode ver os cabeçalhos aparecerem. Agora digamos que eu queira
estilizar todos esses elementos. A primeira maneira que posso fazer isso, posso adicionar todos os
textos e estilos aqui. O que estou tentando dizer é que
vou estilizar todas as
tags separadamente. Por exemplo, se eu
quisesse suportar a tag h2,
chegarei aqui é dois. E então vou deixar a cor.
E então vamos dizer marrom. Então eu tenho que fazer isso
por todos os elementos. Agora, por exemplo, quero que todos esses elementos
adicionem o mesmo estilo. Este exemplo eu quero adicionar a mesma cor em todos esses
elementos, que é marrom. A primeira maneira
que posso fazer isso é copiar isso e depois
colarei aqui. E então eu vou
colá-lo aqui também. E então eu tenho que fazer
isso com todas as tags. Desta forma,
repeti a mesma coisa
repetidas vezes
para todas as tags. E geralmente é considerado uma má prática repetir
as mesmas coisas. Então, o que vou fazer é adicionar um atributo a todas as tags, que é o atributo class. Para isso,
pressionarei a tecla Alt e depois vou clicar aqui, também aqui, e também aqui. Agora vamos pressionar o espaço e
então eu não terei aula. Este é o futuro do código VS. Posso adicionar vários cursores. Deixe a classe dela ser igual a duas
e, em seguida, aspas duplas. Então, digamos que minha turma. Você pode adicionar qualquer valor aqui. Agora vou copiar isso
e salvar a estimativa. Para não selecionar as classes, temos que usar a tecla ponto. Então, antes de tudo,
removerei tudo isso daqui. Então vou digitar um ponto, e depois colarei
a mesma coisa, que eu copiei aqui. Então, basicamente, tudo o que temos que adicionar
a chave de período
e, em seguida, temos que
adicionar o mesmo valor, que fornecemos
no atributo class. Agora, vou abrir e
fechar os colchetes encaracolados, e então deixarei
você ter cor. E então eu tenho aqui marrom. Não, vou salvar esse arquivo.
Em seguida, recarregue a página. Agora você pode ver que todos os meus elementos não têm cor marrom. Agora vamos dizer que tenho mais
um cabeçalho H1. Então vou adicionar
aqui o título um. Eu removerei esse conhecimento de atributo de todas as
classes, salvarei esse arquivo e,
em seguida, recarregarei esta página. Você pode ver que todos os meus
estilos estão decididos. Não, vou diminuir o zoom daqui. Então vamos dizer que eu só quero
estilizar esse título. Cabeçalho. Se eu selecionar esse
cabeçalho com a letra de texto, esse cabeçalho
também será
selecionado automaticamente porque este também
é um cabeçalho H1. Então o que posso fazer é
adicionar um atributo de classe aqui. E então vou adicionar
aqui a classe de cabeçalho. Agora vou copiar esta
aula daqui. E vamos ver se o documento, e então eu vou colar
essa classe aqui. Por enquanto,
removerei esse estilo. Agora vou abrir e fechar
os suportes encaracolados. E então, dentro desses
suportes encaracolados, adicionarei cor. Agora vamos salvar esse
arquivo, recarregar esta página. Agora considere isso
apenas este cabeçalho. Esta é a maneira certa de fazer isso, mas eu só quero
selecionar esse cabeçalho. E geralmente usamos classes para selecionar um ou mais tipos
de títulos ou elementos. O que posso fazer é obter aqui ID e salvarei este documento. E, em seguida, dentro do
arquivo CSS para selecionar o ID, temos que usar a hashtag, faca
hashtag e salvar este documento e
atualizar esta página. E você pode ver que
nada mudou aqui. O que vou fazer é
mudar essa cor para vermelho. Agora vou salvar esse
arquivo, recarregar esta página. Você pode ver que o cabeçalho foi estilizado
separadamente
usando o seletor de ID.
5. Cores em CSS: Neste vídeo, discutiremos
sobre cores em CSS. Primeiro de tudo,
criarei um novo arquivo chamado cores ponto HTML. Vou fechar todos
os tipos daqui. No título. Vou
adicionar cores de cabelo em CSS. Agora, dentro desta tag body, vou digitar D. Então vou digitar aqui,
este é um parágrafo. Agora vou salvar esse arquivo. Para ver isso claramente,
vou ampliar pressionando Control e, em seguida, a maioria
vai para esta final, eu não quero criar
um arquivo CSS específico, então é por isso que vou
usar o CSS interno. Sabemos antes de tudo, selecionarei esta tag p
usando o seletor de tags. Se eu escrever aqui a cor, agora
vou salvar o documento. Você pode ver que a cor
do meu parágrafo é porque eu adicionei
uma cor atribuída. Agora, o atributo de cor faz
é agende a cor do texto. Ele não muda a
cor do plano de fundo. Ele só muda a cor
do texto na palestra de
fundo, aprenderemos como mudar o
debate sobre esse elemento p. Por enquanto, basta entender
que o buffer de cores t muda
apenas a
cor do texto. Agora, há muitas maneiras de
adicionar valores na cor para d. A primeira maneira é que posso escrever
diretamente o
nome dessa cor, que é nesse caso que
fiz aqui. Agora, a segunda maneira é que
posso digitar o valor hexadecimal, você sabe, o valor hexadecimal
é um código de cores de seis dígitos. Os dois primeiros dígitos
representam o radical e o segundo dois dígitos
representa a cor verde
e, em seguida, os dois últimos dígitos
representam a cor azul. Por exemplo, se eu escrever
aqui 00, FF, B15
e, agora, se eu
salvar este documento, agora você pode ver que a cor
da minha tag p mudou. O segundo formato
da cor de escrita é formato
RGB para a
sintaxe da escrita, formato
IJ é RGB. E então temos que anexar os colchetes
fechados. E então, dentro desses colchetes, o primeiro valor que damos
representa a reticular. O segundo valor que damos
representa a cor verde. E o terceiro valor dará
representa a cor azul. E todo o valor
varia de 0 a 255. Por exemplo, se eu escrever aqui 59. E então digamos 5795, salvou um documento e
recarregue esta página. Você pode ver que minha
cor apareceu aqui. Agora, você não precisa se lembrar de
todos os códigos de cores. Se você acabar com o código VS. E então você pode
diretamente quem está aqui, e então você receberá
esse seletor de cores. Agora você pode escolher qualquer
cor do seu desejo. Vamos fazer isso
bem, e esse é o código de cores dessa cor. Agora, se eu salvar o documento
e recarregar esta página, você pode ver em Micron
apareceu aqui, a parte do desativado escrevendo o valor da cor é RGBA. Valor. Para isso,
adicionarei aqui RGB. As três primeiras letras, RGB, representa o
vermelho, o verde e o azul. Os últimos oito
representam o alfa. O que eu quis dizer com alfa é duzentos e cinquenta e
nove, trinta e oito. Então 75. Sabe, eu tenho que
escrever aqui o valor alfa. Esse valor varia de 0 a um. Se eu digitar aqui 0, a
cor será totalmente transparente. Se eu adicionar aqui, a
cor é totalmente opaca. Por exemplo, se eu
escrever aqui 0.7, e se eu salvar este documento
e recarregar esta página, você poderá ver os efeitos
Alfa aqui. Se eu adicionar um 0, então a cor ficará totalmente
transparente e não conseguimos vê-la. Você pode vê-lo. Não consigo ver
a cor. Se eu adicionar aqui. Agora, se eu salvar este documento
e recarregar a página, você poderá ver que a cor
está totalmente visível. Próxima maneira de escrever o valor HSL de
Kennedy. Então, vou adicionar aqui. Em seguida, os suportes encaracolados.
O primeiro valor representa o u e o segundo valor
representa a saturação. O terceiro valor
representa a leveza. O valor desse enorme é em graus variando
de 0 a 360. Se eu adicionar aqui 25, e então esse valor de saturação
está na porcentagem, então não terei 9%. Então a leveza também
é percentual de valor diário. Vou adicionar aqui uma faca
T6% e salvar o documento
e carregaremos esta página. Você pode ver que a
cor apareceu aqui. Agora, vou te mostrar um truque para esse
truque se eu adicionar aqui. E então aqui, você pode ver no meu seletor de cores
apareceu aqui, 95 mudar essa cor para,
digamos, tipo esverdeado. E então, se eu clicar aqui, pela primeira vez,
obterei esse valor hexadecimal. Se eu clicar na sua segunda vez, obterei esse valor HSL.
6. Comentários CSS: Nesta palestra, vamos dar
uma olhada nos comentários em CSS. Primeiro de tudo, criarei um novo arquivo chamado
comentários ponto HTML. Agora, dentro deste arquivo HTML de ponto de
comentários , em
primeiro lugar, vou
gerar um código boilerplate. E então
deixarei seus comentários. Dentro dessa tag body, vou gerar um elemento H1. Então vou chegar aqui doendo. Agora vou gerar uma
tag de estilo dentro desta tag head. Agora, enquanto
aprendemos HTML, vimos o que são
comentários e como escrever comentários em HTML. Então, para recapitular rapidamente, para escrever comentários em HTML, primeiro
temos que digitar
o colchete angular, depois o ponto de exclamação
e, em seguida, temos que digitar
d traço duplo também, temos que digitar isso
para feche este comentário. E qualquer coisa entre isso, vamos considerá-lo como um comentário. Por exemplo, se eu escrever
comentários e, em seguida, ele o
considerará como um comentário e ele não será renderizado no navegador, não escrever comentários em CSS, temos que digitar o
ponto de exclamação. E então, para
fechar este comentário, temos que digitar o
ponto de exclamação. Agora, qualquer coisa entre esses bem considerados como
um comentário em CSS. Por exemplo, se eu
escrever aqui o comando, ele considerará
isso como um comentário.
7. Fundos de CSS: Neste vídeo, discutiremos
sobre planos de fundo em CSS. Primeiro de tudo, criarei um novo arquivo chamado
backgrounds dot HTML. Dentro desse arquivo. Primeiro de tudo, vou gerar um código
boilerplate. Então eu vou mudar esse
título para plano de fundo. Como CSS dentro dessa tag body, vou gerar a tag H1. Então vou adicionar aqui o cabeçalho. Depois dessa média,
gere uma tag p. E então vou acrescentar aqui,
este é um parágrafo. Agora vamos salvar este documento e depois copiar o
caminho daqui. Você pode ver no cabeçalho
e o parágrafo apareceu aqui. Agora vou digitar o estilo de cabelo. Agora vamos falar sobre o plano de
fundo desde o CSS. Portanto,
as propriedades de fundo CSS nos
permitem estilizar planos
de fundo de um elemento HTML. Por exemplo, se eu
escrever o corpo dela. Então vamos discutir sobre
o primeiro Verde passado, que é a propriedade de
cor de fundo. Então, vou adicionar aqui a cor
de fundo. Em seguida, vou digitar um nome de cor. Vamos escolher a cor do chocolate. Agora vamos salvar este documento. Em seguida, atualize esta página. Você pode ver que a cor
de
fundo do corpo mudou para cor de chocolate em vez
de cor de fundo. Se eu tiver colorido. Se eu salvar este documento
e atualizar a página, você poderá ver que a cor
do texto de tudo dentro da tag do corpo mudou
para cor de chocolate. Agora, também posso adicionar cor de
fundo em elementos
HTML como HL7 e P. Por exemplo. Digite aqui. Em seguida, vamos adicionar a cor
de fundo. Não aceite este documento. Em seguida, atualize esta página. Você pode ver que a cor de
fundo do cabeçalho mudou para azul. Agora não consigo ver esses textos
nessa cor de fundo, então também mudarei a cor
do texto para branco. Agora vamos salvar este documento
e atualizar esta página. Você pode ver que a cor
mudou para branco e, em seguida, o plano de fundo
mudou para azul. Agora vamos falar sobre a segunda propriedade de
fundo, que é a propriedade de
imagem de fundo. Para isso,
selecionarei uma tag de corpo. E então, dentro desta tag corporal, adicionarei aqui uma imagem
de fundo. Agora, dentro dessa imagem de
fundo, tenho que usar a função URL. Então, para isso, tenho que digitar um URL e, em seguida, abrir e
fechar os colchetes. Agora, dentro desse suporte,
tenho que usar o quartzo, então usarei as aspas duplas. Você também pode usar aspas simples. Agora, dentro dessas aspas duplas, temos que dar o
caminho da imagem. Agora você pode ver que minha imagem e esse arquivo estão
na mesma pasta. Então eu posso
digitar diretamente o nome
desta imagem aqui, bg dot GIF. Agora vamos salvar esse
arquivo, recarregar esta página. Você pode ver que minha
imagem apareceu aqui. Não, não consigo
ver claramente esse texto, então vou mudar a cor do
texto para branco. Para isso, adicionarei a cor do cabelo. Então eu digitaria aqui, certo? Você também pode dar a essa
cor de texto uma e p tag separadamente. Mas se eu tiver um contêiner, que neste caso é corpo, posso digitar diretamente a
cor branca e tudo neste corpo
terá descolorido. Então, agora, se eu atualizar esta página, você pode ver que minha cor
mudou para branco. Agora também posso dar essa imagem de fundo
em elementos também. Então, sua tarefa é
tentar isso sozinho. Agora, por padrão, a propriedade de imagem de
fundo é repetida a imagem
horizontal e verticalmente. Então, para evitar isso, temos que digitar aqui repetição de fundo. Então temos que escrever
aqui sem repetir. Se eu digitar nó repetir,
então a imagem que queríamos repetir na horizontal
e na vertical. E se eu quiser repetir
esta imagem horizontalmente, então posso escrever aqui, repetir x. Agora, se eu salvar esse arquivo, recarregue esta página, você pode ver que minha imagem se
repetiu horizontalmente. Agora, se eu quiser repetir
essa imagem verticalmente, posso adicionar aqui repetir por nove. Se eu carregar esta página, você poderá ver na minha imagem
repetida verticalmente. Agora, não temos nenhum
conteúdo extra nesta tag corporal. Portanto, a imagem cortou daqui, não as segundas propriedades de
fundo, propriedade de posição de
fundo. Então, antes de tudo, vou
avisá-la dessa batida. Então vou deixar a posição de
fundo dela. Então, se eu escrever aqui direito, então se eu salvar este documento
e recarregar esta página, você pode ver no meu
plano de fundo está à direita e no topo. Se eu digitar seu centro, salvar esse arquivo e
atualizar esta página, você poderá vê-lo agora meu
plano de fundo não está centralizado. Também posso definir esta posição de
fundo adequada D neste elemento também para discutir sobre o anexo de
fundo sobre t. Então, se eu digitar aqui
rolando no anexo, geralmente podemos digitar
aqui dois valores. O primeiro valor, rolagem, se eu digitar sua
rolagem e depois salvar este arquivo e atualizar esta página, agora você não pode ver
nada de novo aqui. Para isso. Vou digitar aqui p, então vou digitar o carregamento 25. Vamos ver. Agora, o que
eu fiz
foi copiar e colar esta tag p duas vezes. Agora, se eu rolar este documento, você pode ver que essa
imagem também rola. Se eu alterar isso para corrigido, salvar esse
arquivo e atualizar esta página. Você pode vê-lo agora se eu rolar o documento na
imagem está corrigida aqui. Agora, também tenho uma propriedade
abreviada de fundo, o que significa que posso substituir todas as partes
de fundo por uma única propriedade. Portanto, a sintaxe disso é, antes de tudo, temos que
adicionar um seletor. Então temos que digitar
aqui fundo. Depois disso. Primeiro de tudo, temos que
adicionar uma cor de fundo. Depois disso, temos que
adicionar uma imagem de fundo. Agora temos que separar
essas propriedades com velocidade após um
fundo diversificado, repita. Depois que eu tiver que digitar seu anexo em
segundo plano. Depois disso, tenho que digitar
aqui a posição de fundo. Vou comentar esta parte L. Vamos ver um exemplo de usar esta propriedade
abreviada do quarto. Vou deixar o corpo dela.
Então, antes de tudo, eu anuncio seus antecedentes. Depois disso, digitei
aqui a cor de fundo. Agora, se eu não quiser adicionar essa propriedade de cor de fundo, posso ignorar isso. Por exemplo, posso
adicionar diretamente essa propriedade de
imagem de fundo. Então, para isso, vou
digitar esse URL. E então vou digitar
o nome da imagem. Então eu tenho que digitar seu espaço. E então eu tenho que adicionar essa propriedade de repetição de
fundo. Então, vou deixar você saber repetir. Então eu tenho que adicionar essa propriedade de anexo de
carga. Agora, se eu não
quiser adicionar essa propriedade, posso pular isso
daqui. Depois disso. Eu tenho que adicionar essa posição de
fundo sobre T. Então vou escrever aqui no centro. Em seguida, temos que adicionar esse
ponto e vírgula para finalizar a instrução. Agora vamos salvar esse arquivo e,
em seguida, fazer referência ao discurso. Agora você pode ver que as partes em
segundo plano se
aplicaram aqui com essa
única propriedade abreviada. É muito útil ao
criar sites.
8. Modelo de caixa CSS: Nesta palestra, discutiremos sobre o modelo de caixa no CSS. Modelo de caixa é um
conceito muito importante para conhecer NCSS, conhecer todos os elementos HTML como uma caixa retangular
na página da Web, contém muitas propriedades,
como preenchimento de margem, etc Agora vou resumir todas
essas propriedades em suma, preenchimento cria um espaço entre o conteúdo
e a borda. A propriedade border,
como o nome especifica, adiciona uma borda no elemento. A propriedade margin cria
um espaço fora do quadro.
9. CSS Borders: Nesta palestra,
discutiremos sobre fronteiras em CSS. Então, antes de tudo, criarei um novo arquivo chamado
Borders dot HTML. Primeiro de tudo, vou
gerar um código boilerplate. Agora, dentro deste título,
escreverei aqui bordas em CSS. Agora, dentro desta tag body, vou gerar uma tag p. E então eu adicionarei
aqui o parágrafo. Agora vamos salvar este documento e depois copiar o
caminho daqui. Você pode ver que o
parágrafo apareceu aqui. Não, vou digitar penteado. Em seguida, dentro da
tag style, adicionarei o CSS. Primeiro de tudo,
selecionarei esta tag p. Em seguida, adicionarei as propriedades
da borda. Agora, as bordas, como
o nome sugere, na borda
do elemento HTML. O primeiro atributo na borda é
o atributo de estilo de
borda. Por isso eu acrescentaria
aqui fronteiras com a Tailândia. Há muitos valores para a
propriedade de estilo de borda que você pode ver aqui para o mais usado é
o Sólido tracejado e nenhum. Então, por exemplo,
vou adicionar aqui sólido. Agora, a segunda propriedade
é a propriedade border-radius. Então, dentro dessa propriedade,
posso adicionar valores em pixel ou alguns
valores predefinidos, como meio fino, etc. Você pode pesquisar
no Google por mais valor predefinido
para borda com liberdade. Agora, para este exemplo, vou deixar aqui dez pixels. Não essa propriedade difícil é
a propriedade de cor da borda. Agora, a propriedade de cor da borda, como o nome sugere,
na cor da borda. Por exemplo,
adicionarei aqui um preto. Agora vamos salvar esse
arquivo, recarregar esta página. Você pode ver que a
fronteira apareceu aqui. Se eu mudar esse
sólido dois tracejados. Agora, se eu salvar esse arquivo e a displasia de carga,
você pode vê-lo. Observe que a borda está tracejada. Saiba que vou mudar
isso para sólido. Em seguida, adicionarei essa
largura de borda a cinco pixels. Agora vamos salvar esse
arquivo, recarregar esta página. Você pode ver agora que a
borda parece boa. Agora também posso especificar uma borda
com dois ou quatro valores. Como por exemplo, se eu cheguei
aqui cinco pixels para pixel. Isso significa que a taxa de borda na parte superior e inferior será cinco pixels e o mandado de borda na esquerda e na direita
será de dois pixels. Agora vamos salvar esse arquivo
e recarregar esta página. Você pode ver na taxa de
água e esquerda ou em dois pixels e superior e
inferior são cinco pixels. Também posso adicionar quatro valores aqui. Por exemplo, se eu adicionar seis
pixels e digamos dez pixels. Agora vamos salvar esse arquivo. Agora, o que isso significa é a taxa da
borda na parte superior será cinco pixels para pixel na
parte inferior será seis. Pixel à esquerda
terá dez pixels. Agora, se eu carregar esta página, você
poderá ver as alterações aqui. Agora, há uma propriedade
abreviada de borda, o que significa que posso especificar
toda essa propriedade em
uma única propriedade de borda.
Para isso, vou adicionar aqui. O primeiro valor dessa
borda é a borda dela. A segunda propriedade
é o estilo de borda. Cor da borda.
Vou comentar isso. Agora vou mostrar o exemplo da propriedade abreviada de manteiga. Vou adicionar aqui borda. E então a primeira propriedade
é melhor ler a propriedade. Então, vou adicionar aqui, digamos que três pixels. A segunda propriedade é o
estilo de borda sobre t servlet aqui, propriedade
sólida é a propriedade de cor da
borda. Então, vou adicionar aqui. E então adicionarei o
ponto e vírgula para finalizar a declaração. Agora vamos salvar esse arquivo. Recarregue isso. Você pode ver que a
propriedade abreviada funciona bem. Agora há
mais um nome de propriedade, raio de
borda sobre t. Para isso, adicionarei aqui border-radius. Nenhuma área de fronteira subúrbio t é
usada para arredondar as bordas. Por exemplo, se eu
adicionar nossos dois pixels, ele desaparecerá. Você pode ver que a borda
é um formulário arredondado aqui. Vou mudar isso para, digamos 30 pixels. Agora vamos defender esse arquivo. Então você pode ver que a
borda agora está arredondada. Essas são propriedades muito úteis
ao criar sites.
10. Margins e pinches: Nesta palestra, discutiremos sobre Hoover que ele sentiu em CSS. Primeiro de tudo,
criarei um novo nome de arquivo paira o ponto HTML. Agora, dentro deste arquivo, primeiro lugar, vou
gerar um código boilerplate. Então, no
nível do título aqui, passe o mouse sobre os efeitos. Agora, dentro desta tag body, criarei uma tag H1. Agora, vou adicionar aqui o cabeçalho. Agora vamos salvar esse
arquivo e copiar o caminho. Agora vou gerar uma tag de estilo. Agora vamos falar sobre os efeitos do
mouse. Para criar um efeito de focalização, temos que usar uma pseudo-classe
hover. Agora vamos discutir mais sobre pseudo-classes e
pseudo-seletores mais tarde. Para criar um efeito de passar o mouse. Primeiro de tudo, temos que
digitar esse seletor. Então temos que digitar dois pontos. Depois disso, temos que
digitar o mouse. Então temos que abrir e
fechar os suportes encaracolados. E então temos que escrever
nossas propriedades aqui. Agora você pode adicionar muitas
propriedades em efeitos de passar o mouse. Primeiro de tudo, vou
digitar aqui. E então vou digitar aqui, passar o mouse. Agora eu quero mudar a cor. Quando alguém paira
sobre o cabeçalho, eu vou chegar aqui a cor. Então vou digitar aqui o nome da
cor, digamos marrom. Agora vamos salvar esse arquivo
e atualizar esta página. Você pode ver se eu passar o mouse aqui, a cor muda para mesclar. Agora, também posso alterar
a cor de fundo. Então vou deixar o passado dela. Então vou digitar seu preto, e então mudarei
essa cor para branco. Agora vamos salvar esse
arquivo e atualizar esta página. Por aqui. Você pode ver no fundo, cor mudou para preto e a cor deste texto
mudou para mordida.
11. Altura e largura: Neste vídeo,
discutiremos sobre as
propriedades de altura e largura em CSS. Primeiro de tudo, criarei um HTML de ponto de altura
e largura de nome de arquivo. Agora vou gerar
um código boilerplate. Então, no título
aqui, altura e largura. Agora, dentro dessa tag body, vou gerar uma tag H1. E então vou
adicionar aqui o cabeçalho. Agora vamos salvar esse arquivo. Você pode ver que o
título apareceu aqui. Agora vou abrir e fechar essa tag de título
dentro desta tag de cabeça. Agora vamos selecionar essa
tag H1 usando o seletor de tags. Agora vamos discutir sobre a propriedade
altura e largura. Portanto, eu não li
propriedades nos permite adicionar altura e largura
no elemento HTML. Observe que as propriedades de altura
e largura estão dentro do
preenchimento e da borda. Para explicar isso claramente, adicionarei uma borda na única. E então vou adicionar aqui
dois pixels, vermelho sólido. Salve esse arquivo. Você pode ver que a fronteira
apareceu aqui. Agora vamos usar a propriedade
height. Então, dentro disso, posso adicionar o valor do pixel, bem
como o valor da porcentagem. Por exemplo,
adicionarei aqui 100 pixels, salvo esse arquivo e
recarregarei esta página. Você pode ver que no
cabeçalho não cabeçalho tem a altura de 100 pixels. Se eu clicar com o botão direito do mouse lá e
clicar neste inspetor. Você pode ver que o Chrome Developer
Tools apareceu aqui. Agora, o que
vou fazer é clicar aqui. Então eu vou clicar aqui. Ele
virá na parte inferior. Você pode ver no cabeçalho
que eu adicionei aqui aparece aqui. Então eu posso clicar neste cabeçalho e, em seguida,
você pode ver aqui todas
as propriedades CSS que
apliquei na tag H1. Também posso alterar a
altura daqui. E para isso eu vou clicar aqui. E então, pressionando
a tecla de seta para cima, o valor aumentará. Ao pressionar a tecla de seta para baixo, o valor diminuirá. Agora, eu também posso fazer
isso com uma fronteira. Então também posso escolher
a cor daqui. Você pode ver que o
seletor de cores apareceu aqui, eu posso mudar essa cor. Observe que essas mudanças são
temporárias. Se eu atualizar esta página
, todas as alterações
desaparecerão. Para definir as alterações. Primeiro, você precisa fazer
a alteração e depois copiar todas as alterações
que você fez aqui
e, em seguida, colá-lo em seu código-fonte.
Para salvar esse arquivo. Remova-o daqui.
Salve esse arquivo. Agora considerado, as
mudanças apareceram aqui. Agora vamos falar sobre
livrar a propriedade. Vou mudar isso para 100 pixels e depois
vou digitar aqui. Em seguida, também posso adicionar
o valor de pixel , bem
como o
valor percentual na propriedade root. Por exemplo, vou
digitar aqui 60 pixels. Agora vamos salvar esse arquivo
e atualizar esta página. Você pode ver que o
writ é de 60 pixels e você pode ver que o
cabeçalho está transbordando aqui. Se eu escrever aqui overflow
oculto, salve este arquivo. Agora, se eu atualizar esta página, você pode ver que a parte do
telefone está oculta. Também posso definir esse estouro na direção horizontal e
vertical. Nesse caso, o estouro é da direção horizontal. Vou mudar isso para, digamos, 200 pixels. Atualize esta página. Você
pode começar com aqui. Agora também posso definir a
taxa no valor percentual, como também posso adicionar aqui 50%. Salve esse arquivo,
atualize esta página. Você pode ver que
o material 3D 50, 50% por cento é calculado
a partir do elemento pai porque o elemento pai tem
a taxa de 100%, o elemento filho foi calculado
automaticamente. Está livre. Agora também posso começar a
altura 250%, está aqui. Agora vamos salvar esse
arquivo, recarregar esta página. Você pode ver que nada
aconteceu aqui
porque você pode ver
que a taxa do elemento
pai não é a largura
total desse navegador. Se eu passar o mouse aqui, você pode ver que a altura
do elemento pai, ele não cobre
a página da Web completa. É por isso que esse
problema ocorre. Agora vou lhe dizer como corrigir esse problema no sexo
responsivo,
quando falaremos
sobre a capacidade de resposta.
12. Efeitos de hover: efeitos de o hover.: Nesta palestra, discutiremos sobre Hoover que ele sentiu em CSS. Primeiro de tudo,
criarei um novo nome de arquivo paira o ponto HTML. Agora, dentro deste arquivo, primeiro lugar, vou
gerar um código boilerplate. Então, no
nível do título aqui, passe o mouse sobre os efeitos. Agora, dentro desta tag body, criarei uma tag H1. Agora, vou adicionar aqui o cabeçalho. Agora vamos salvar esse
arquivo e copiar o caminho. Agora vou gerar uma tag de estilo. Agora vamos falar sobre os efeitos do
mouse. Para criar um efeito de focalização, temos que usar uma pseudo-classe
hover. Agora vamos discutir mais sobre pseudo-classes e
pseudo-seletores mais tarde. Para criar um efeito de passar o mouse. Primeiro de tudo, temos que
digitar esse seletor. Então temos que digitar dois pontos. Depois disso, temos que
digitar o mouse. Então temos que abrir e
fechar os suportes encaracolados. E então temos que escrever
nossas propriedades aqui. Agora você pode adicionar muitas
propriedades em efeitos de passar o mouse. Primeiro de tudo, vou
digitar aqui. E então vou digitar aqui, passar o mouse. Agora eu quero mudar a cor. Quando alguém paira
sobre o cabeçalho, eu vou chegar aqui a cor. Então vou digitar aqui o nome da
cor, digamos marrom. Agora vamos salvar esse arquivo
e atualizar esta página. Você pode ver se eu passar o mouse aqui, a cor muda para mesclar. Agora, também posso alterar
a cor de fundo. Então vou deixar o passado dela. Então vou digitar seu preto, e então mudarei
essa cor para branco. Agora vamos salvar esse
arquivo e atualizar esta página. Por aqui. Você pode ver no fundo, cor mudou para preto e a cor deste texto
mudou para mordida.
13. Como criar um botão: Nesta palestra,
criaremos projetos simples e pequenos
usando HTML e CSS. Então, antes de tudo, criarei um novo arquivo chamado
botões ponto HTML. Agora vou gerar
um código boilerplate. No título,
adicionarei aqui o botão. Então, dentro desta tag body, vou gerar uma tag de botão. E então aqui
vou deixar Click Me. Agora vamos salvar este documento. Agora você pode ver que o
botão apareceu aqui. Agora vou suportar esse
botão usando CSS. Vou suportar isso usando
o CSS interno. Para isso, vou
digitar seu estilo. Depois disso,
selecionarei esse botão. Agora, antes de tudo, adicionarei
um preenchimento a este botão. Para isso, deixarei ela preencher
dez pixels
da parte superior e inferior e 20 pixels da mão
esquerda e direita. Agora vamos atualizar esta página. Você pode ver que o preenchimento
apareceu aqui. Vamos aumentar esse preenchimento
para 15 pixels e 25 pixels. Agora vamos recarregar esta página. Agora você pode ver que os
efeitos do preenchimento aqui. Agora vamos adicionar uma cor
de fundo. Então vamos adicionar a cor
bariônica. Vamos salvar esse arquivo,
recarregar esta página. Você pode ver que a
corrente em segundo plano apareceu aqui. Não, eu não quero essas fronteiras. O que vou fazer é digitar borda
deles e depois
adicionarei aqui nenhum, nenhum. Salve esse arquivo,
recarregue esta página. Você pode ver que a fronteira
foi daqui. Também quero aumentar
o tamanho da fonte. Para isso, vou digitar o tamanho da fonte
deles. Então vou digitar aqui,
digamos 20 pixels. Não, eu não
falei com você sobre essa propriedade de tamanho de fonte. Basicamente, aumenta
o tamanho da fonte. Você pode pesquisar mais sobre essa
propriedade nos dutos MDM. Agora vamos salvar esse
arquivo, recarregar esta página. Você pode ver que a
fonte aumentou. Agora eu quero adicionar
algumas propriedades. Quando alguém passar o mouse sobre esse
botão, digite o botão aqui. Em seguida, adicionarei um efeito de focalização. Nisso, vou mudar
a cor de fundo para algo mais escuro. Agora vamos salvar esse arquivo
e atualizar esta página. Você pode ver as alterações. Se alguém que estava
nesse botão, eu não quero discursivo. O que posso fazer é digitar aqui o cursor. Então eu adicionarei aqui um ponteiro. Agora, eu não te ensinei sobre propriedade
discursiva também. E basicamente o
cursor sobre t muda o cursor quando
alguém que estava neste botão, como se eu salvar esse arquivo
e atualizar a página, você pode ver que o
cursor mudou para 0,9. Se eu inspecionar esse
botão, você poderá ver todos
os estilos que
escrevi aqui.
Vou clicar nisso. Então eu vou clicar aqui. Basicamente, ele ativa
o estilo de passar o mouse. O que posso fazer é mudar essa propriedade quântica daqui. E você pode ver que os valores, é
claro, são propriedades. Você pode experimentar
mais valores a partir daqui. Estes são botões simples
que estamos estilizando.
14. Posições CSS: Nesta palestra, discutiremos
sobre posições em CSS. Então, antes de tudo, criarei um novo arquivo chamado
oposições ao HTML. Agora vamos gerar
um código boilerplate. Então, dentro deste título, adicionarei aqui
posições em CSS. Agora, dentro desta tag body, vou gerar uma div com
uma classe de contêiner. Então, para isso, vou
digitar contêiner de pontos. E então
pressionarei a tecla tab. Ele gerará automaticamente uma div com uma classe de contêiner. Agora vamos estilizar essa diferença. Então, para isso,
usarei o estilo interno. Em seguida, selecionarei esta div
com a aula de aula. Primeiro de tudo,
darei essa altura de DBA. Então darei uma altura de, digamos, 100 pixels. Então eu darei um
mandado de 100 pixels. Em seguida, adicionarei uma
borda de dois pixels. Sólido. Conhecimento, salve esse arquivo
e copie o caminho daqui. Agora você pode ver que a
div apareceu aqui. Agora o que vou fazer
é criar mais
uma div com a
classe de canalizados. Se. Agora vou estilizar essa div. Primeiro de tudo, selecionarei essa div usando a
aula de aula. E então vou dar a isso
uma altura de 50 pixels. Então eu darei a isso
uma taxa de 50 pixels. Depois disso,
darei a isso uma borda de dois pixels, preto sólido. Salve esse arquivo e
atualize esta página. Você pode ver um diversificado
apareceu aqui. Vamos aumentar a altura
e nos livrar desse desenvolvimento. Então vou digitar aqui quinhentos
e quinhentos pixels. Também aumentou o
item livrado dessa div. Vou digitar seus 100 pixels
e depois 100 pixels. Salve esse arquivo e
atualize esta página. Você pode ver agora que
está parecendo bom. Agora,
as propriedades de posição CSS são usadas quando você deseja posicionar um
elemento específico na página da Web. Se eu quisesse posicionar
isso geralmente significava que adicionarei uma propriedade
de posição. Depois, há muitos valores
na propriedade position. O primeiro valor é
posicionado em relação. Portanto, se eu digitar um ou parente de
posição, então teremos que especificar
a propriedade CSS superior. Digite aqui no topo. E então vou
digitar 20 pixels. Salve esse arquivo e
atualize esta página. Você pode ver que
há uma lacuna de 20 pixels da
parte superior desse elemento. Nove quintos inspecionam
esse elemento. Então, se eu aumentar
essa lacuna de cima, você poderá ver essas
mudanças no tom. Agora também posso adicionar mais uma
propriedade, que é a esquerda. E então vou adicionar
aqui 20 pixels. Você pode ver que agora há uma lacuna de 20 pixels
da esquerda. Também posso aumentar e
diminuir esse valor. Também pode adicionar o valor inferior, bem
como o
direito à propriedade. O motivo pelo qual essa propriedade
direita e inferior não
está funcionando agora
porque eu já especifiquei a propriedade CSS superior e
esquerda acima. Então, se eu atualizar esta página, você pode ver que agora
tudo está normal. Outra posição, posições de
propriedade relativa, o elemento em relação
ao elemento pai. Está falando sobre propriedade
absoluta persa. Então, se eu digitar sua
posição absoluta, não esse elemento
se porciona em relação
ao elemento do corpo. Então, se eu digitar esquerda, então 0. Agora, se eu salvar esse arquivo
e fazer referência a esse bilhão não restante,
vou digitar aqui à direita. Agora, se eu salvar esse arquivo
e atualizar esta página, você pode vê-lo agora
esse elemento tem posição em
relação ao corpo. Se eu digitar a posição dela parente
no elemento pai. Agora, se eu salvar esse arquivo
e atualizar esta página, você pode
vê-lo agora que ele
se posicionou em relação ao
elemento pai, que neste caso
é o contêiner, porque eu adicionei a posição relativo em seu elemento pai. Observe suas tarefas para jogar
com propriedades de dispersão.
15. Floats CSS: Nesta palestra,
discutiremos sobre flutuadores em CSS. Então eu já criei um novo arquivo chamado
floats dot HTML. Agora, dentro desse arquivo, vou gerar um código
boilerplate. No título, chegarei
aqui flutua em CSS. Agora, dentro desta tag corporal, criarei uma div com
uma classe de contêiner. E então dentro desta div, criarei mais duas divs com a classe da
caixa um e a caixa dois. Então, farei isso com
a ajuda do amador. Para isso vou digitar aqui caixa de
pontos, dash dollar. Então vou digitar em dois. Então, se eu pressionar a tecla Enter, então você pode ver
que eu gerei mais
duas divs com a classe
da caixa um e a caixa dois. Agora vou suportar
isso por isso. Vou digitar o estilo de cabelo. Agora vou selecionar este contêiner com a ajuda da palestra de aula. Depois disso,
darei uma altura de 200 pixels de canto superior direito.
Vou dar uma fronteira. E vou digitar aqui
para pixel preto sólido. Conhecimento para ver
se este phi lá, então eu copiarei
o caminho daqui. Agora você pode ver que
D apareceu aqui. Selecionarei esta
caixa. Para isso. Vou digitar aqui dot box1. Então vamos dar uma
altura de 200 pixels. Depois disso,
darei uma taxa de 50%. Vou dar-lhe uma cor
de fundo. Primeiro de tudo, vamos
salvar esse arquivo. E então, na primeira página, você pode ver que a caixa
apareceu aqui. Também adicionarei o mesmo
estilo na caixa também. Vou mudar essa cor
de fundo. Agora vamos salvar esse arquivo
e atualizar esta página. Você pode ver que dois
chefes apareceram aqui. Agora, se eu digitar aqui, flutue para a esquerda. Vamos salvar esse arquivo
e atualizar esta página. Esta caixa não está à
esquerda deste contêiner. O que vou fazer é
digitar aqui, flutuar à direita, salvar este arquivo
e atualizar esta página. Você pode ver que esta caixa
agora está à direita e
esta caixa está à esquerda. Os flutuadores são úteis
ao criar navbar. Você pode vê-lo aqui. Posso escrever o nome da empresa e aqui posso adicionar uma navegação. Nenhum flutuador é muito
útil nos primeiros dias. Mas agora no CSS moderno, temos flexbox e grade
para facilitar nossa vida. Aprendemos sobre flexbox e
grade nos módulos posteriores. Agora sua tarefa é
ler mais sobre a propriedade
floats
no MDM. Patos.
16. Como criar uma barra de navegação: Nesta palestra,
criaremos essa barra de navegação usando HTML e CSS a partir do que
aprendemos até agora. Primeiro de tudo,
já criei um novo nome de arquivo, navbar dot HTML. Agora vou gerar
um código boilerplate. Dentro deste título,
vou escrever aqui navbar. Então, dentro desta
tag de corpo, criarei uma div com uma classe de navbar. Dentro desta div, criarei uma div mais com uma classe de logotipo. Agora, dentro desta div, criarei uma tag H1
e, em seguida, vou
digitar o nome da empresa. Não este será o nosso logotipo. Agora vou criar um URL
com a classe de e navegação serão
nossos links de navegação. Vou digitar aqui. Então, dentro
desta LI, vou digitar a. Depois disso, cada tipo aqui. Se o usuário clicar neste link, quero que o usuário
permaneça nesta página da Web. Para isso, vou
digitar aqui hashtag. Depois de um duplo gênero
amanhã, como tags. Para isso, copiarei isso
e colarei várias vezes. No segundo,
escreverei aqui, entre em contato. No terceiro,
vou escrever aqui sobre. Então acabe em quarto lugar que
vou escrever aqui, galeria. Vamos salvar esse arquivo e, em seguida,
copiar o caminho daqui. Agora você pode ver que a tag H1 e
UL apareceu aqui. Agora vamos estilizar isso. Permitido
usarei CSS interno, então vou digitar seu estilo. Então aqui, em primeiro lugar, selecionarei esta classe navbar. Aqui. Primeiro de tudo,
darei uma altura de 80 pixels, e depois
darei uma borda de,
digamos, dois pixels
sólidos e depois pretos. Para salvar esse arquivo,
você pode ver que o botão
apareceu aqui
para estilizar isso. Então, antes de tudo,
selecionarei esse logotipo. Vou digitar aqui altura. Então vou dar-lhe uma
altura de 80 pixels. Então eu
darei uma taxa de 20%. Depois disso, adicionarei
uma cor de fundo. Vamos adicionar uma cor de fundo. Agora vou suportar
essa navegação. Para isso, vou digitar
aqui a navegação por pontos. Depois de tocar duas vezes
aqui, altura, ATP. Em seguida, o escrito de 80%. Então eu adicionaria uma
cor de fundo de, digamos verde. Salve esse arquivo. Agora eu quero que isso seja flutuante
no olho esquerdo. Vou aplicar aqui
a propriedade fluida. Então vou digitar sua esquerda.
E então, na navegação, todos os tipos aqui flutuam à direita. Agora vamos ver se este arquivo
e atualizar esta página. A razão pela qual isso não
está operando à esquerda é por causa da margem. Então, se eu inspecionar isso, você pode ver na
navegação que há, por padrão, margem de 16 pixels
na parte superior e inferior. Então, para remover essa margem, vou digitar aqui margem. Então vou digitar 0. Agora você pode ver que a margem foi removida de cima e de baixo. Agora você também pode ver
que também há um preenchimento à
esquerda de 40 pixels. Também removerei esse preenchimento. Para isso, vou
digitar aqui preenchimento. Então, cada tipo aqui é 0. Agora você sabe, você
pode ver que ele está perfeitamente lá, certo? Agora vou copiar
isso para propriedades. E vou colá-lo aqui. Salve esse arquivo e
atualize esta página. Quero remover esses
pontos desta tag LI. O que posso fazer é
selecionar essa tag LI. Então, para selecionar este ícone de todos os
eletrônicos, a primeira maneira é que posso dar a todos esses nomes
de subclasse elétrica. E a segunda maneira é antes de tudo selecionar
essa navegação. E depois disso adicionarei um espaço e depois
vou digitar aqui. Agora, o que essa propriedade
faz é procurar todas as linhas que
estão na navegação. Além disso. Então, dentro dessa aliança, adicionarei uma propriedade
que é do tipo de estilo de lista. Então eu vou digitar aqui nenhum. Salve esse arquivo e
atualize esta página. Você pode ver que todos os pontos
desapareceram daqui. Mais valores neste tipo
de estilo de lista, você pode jogar com todos
os valores sozinho. Agora também quero remover
esse sublinhado na ETag. Para isso antes de tudo,
selecionarei isso uma tag. Então, para fazer isso,
selecionarei essa navegação
para qualquer tipo. E então vou digitar aqui.
Agora, o que isso faz é procurar todos os vivos que estão na navegação. E ele
procurará toda a ETag que estão na tag LI. Ele selecionará isso todas as tags. Não, vou digitar sua decoração de
texto. E então eu digitaria
aqui nenhum, nenhum, e salvaria esse arquivo e
referenciaria esse paciente. Você pode ver que todos os sublinhados desapareceram
da ETag devido a este texto
para a propriedade de degradação. Não, eu quero que isso esteja no centro. O que posso fazer é selecionar o H1. Então vou digitar
aqui texto alinhar. Então vou digitar seu centro. Não aceite este arquivo
e atualize esta página. Você pode ver que nosso
texto não é central. Etiquetas leves. Eu não liguei para eles. Quero fazer essa introdução. O que vou fazer é essa tag LI. Vou digitar aqui, flutuar. Então vou digitar aqui direito. Agora vamos salvar este documento
e atualizar esta página. Você pode ver que agora
todos estão no lado direito. O que eu quero é que eu quero tudo
isso no lado esquerdo. Para isso vou digitar
aqui, flutuar para a esquerda. Conhecimento, salve esse arquivo
e atualize esta página. Você pode ver agora, todos
esses arianos foram embora agora eu queria adicionar a
margem em sua vida, Dagan. Então vou digitar aqui margem. E vamos adicionar 20
pixels e dez pixels. Salve esse arquivo e
atualize esta página. Você pode ver que uma margem
apareceu aqui. Eu queria mudar a margem. O que vou fazer é
clicar com o botão direito do mouse aqui e depois
clicar neste inspetor. Agora vou clicar
nesta área de luz. Então eu vou mudar
a margem daqui. Vou aumentar essa margem. 30 pixels serão bons. E então também
aumentarei essa margem. E 20 pixels eu acho bom. O que vou fazer é copiar isso e depois
colá-lo aqui. Agora eu quero aumentar o tamanho da
fonte dessa tag. Agora eu quero aumentar o tamanho da
fonte dessa tag. Para isso, vou digitar o tamanho da
fonte 20 pixels. Agora vamos salvar esse arquivo e você pode vê-lo agora ele
está melhor. Agora, o que vou fazer é remover esse
plano de fundo daqui. Eu removerei essa
cor de fundo. Além disso, essa cor de fundo. Em seguida, adicionarei uma
cor de fundo na barra de navegação. Então vou colar a cor de fundo
que copiei. Salve esse arquivo e
atualize esta página. Você pode ver que a textura não
está parecendo boa. O que vou fazer é mudar a cor do texto para
branco no Etag. Então também alterarei a cor do
texto para o cabeçalho. Agora vamos salvar esse arquivo
e depois atualizar esta página. Você pode vê-lo.
Observe que parece bom. Agora, uma coisa eu notei que
há peças daqui. Vou inspecionar isso. Então você pode ver que
na tag do corpo
há alguma margem
de todos os lados. O que vou fazer é antes de tudo, selecionar
essa tag de corpo. E então vou
digitar aqui margem. Em seguida, vou digitar aqui 0900, salvar este arquivo e
depois atualizar esta página. Você pode
vê-lo agora que está parecendo bom. Então esta foi nossa barra de navegação
básica que criamos
usando HTML e CSS. Não usamos float. Então, ao criar
navbar em CSS moderno, em
vez disso, usamos flexbox. Veremos o que é o
Flexbox e
aprenderemos sobre flexbox
nas próximas palestras.
Piyush Jha, Web Developer & Educator
