Construa seu primeiro site (e zumbis Thwack com HTML e CSS)

1. Introdução - o que vamos construir: Olá. Meu nome é John Ray. Vou ajudá-lo a criar seu primeiro site e Flax Zombies com HTML e CSS Neste curso, vamos criar um site simples de duas páginas baseado em um ensaio escrito pelo médico Alexander Boople Construiremos esta página de estudo de índice de Shamel aqui, que contém o ensaio completo E então também criaremos uma página de biografia, que inclui algumas de suas coisas favoritas por algum motivo e uma foto do estimado médico Boople. Tudo bem. Vamos entrar nisso. 2. Manipulando arquivos de mortos-vivos: Antes de falarmos sobre como criar um site, quando você precisa começar a falar sobre arquivos. Diga olá para Zombie Bob. Agora, Bob, como zumbi, sabe algumas coisas. Ele sabe que o cérebro é bom. Ele sabe que por acaso tem todos os seus membros. Ele sabe que é uma parte individual do apocalipse. Ele sabe em que ninho de zumbis está e outros zumbis em seu ninho, como Sally, Jamal e Carlos. Aqui está um arquivo. Agora, um arquivo tem conhecimento semelhante. File Bob sabe que ele tem todos os seus dados. Acontece que ele sabe que é um dado ou informação individual independente. Ele sabe em qual pasta está. Ele conhece outros arquivos nessa pasta como Sally dot MP three, Jamal dot CSS e Carlos dot Agora, Bob está em seu ninho e ele conhece todos os zumbis nele Da mesma forma, o Arquivo Bob pode ver todos os arquivos diferentes que estão na mesma pasta que ele. Um arquivo é uma unidade de dados e um computador designados por um nome e extensão de arquivo. As pastas são como um bucket no qual você pode colocar arquivos e outras pastas, e os sites geralmente são compostos por vários arquivos e pastas. arquivo HML típico pode ter muitos arquivos associados a ele, incluindo CSS, JavaScript, imagens, vídeo, áudio e muito mais Esses arquivos podem não estar na mesma pasta do arquivo HTML. Às vezes, os ninhos têm subninhos e, às vezes, as pastas têm subpastas No entanto, quando você tem uma subpasta ou um subconjunto, Zombie Bob nem File Bob podem realmente ver o que está nessas Eles só podem saber o que está lá se souberem. E podemos dizer a eles o que está lá por meio de um caminho. O caminho é basicamente como ir de um arquivo para outro ou de um zumbi para outro em pastas diferentes Os caminhos podem ir para uma subpasta, para uma pasta parental ou ancestral, ou ambas Há alguns personagens diferentes que usamos nos caminhos. O primeiro é o período, que significa o diretório atual. onde quer que seja o arquivo de onde estamos indo, dois pontos significam o diretório principal, que significa que estamos subindo um nível E o Slash separa as pastas ou diz que olhe para a próxima Quando contarmos a Zombie Bob onde está Evite e onde está o submarino, ele poderá vê-la Com o File Bob, uma vez que fornecemos um caminho aqui, barra e ponto, subpasta, barra e gif, ele pode encontrar o gif do evento e usá-lo em seu Slash é a pasta como um todo. No Slash, temos vários arquivos. No Slash, ainda temos o Zombie, que é outra pasta que contém arquivos Temos apocalypse, que é outra pasta que contém alguns arquivos Resistance, que é uma subpasta do apocalipse, que é uma subpasta E temos LeRoy, que é uma subpasta de resistência, que é uma subpasta de apocalipse Como saímos do slash? Estaremos neste diretório para, neste caso, falar sobre dot HTM. Como estamos na mesma pasta de barra, você pode simplesmente escrever sobre HTML com pontos Ele não precisa investigar nada. Você também pode escrever uma barra de pontos em HTML. que apenas garantiria que estivéssemos no diretório atual e depois sobre esse HTML, mas a barra de pontos é assumida, portanto, não é necessária Jogos HTML. O HTML dos jogos está aqui. O mesmo tipo de coisa. Jogos HTML ou jogos HTML. Agora, Bob dota o HTML. O HTML Bob dot está, na verdade , na pasta Zombie. Nós podemos fazer Zombie Bob dot HTML. Ou também podemos fazer dot slash Zombie slash Bob dot HTML. Agora, de agora em diante, não vou incluir a barra de pontos, isso é apenas suposto. Tudo bem. HTML de pontos vermelhos. Fred dot HTML está aqui. Então, vamos para o apocalipse. Slash HT M. Em seguida, vamos para Juan, que está na resistência Então vamos para o apocalipse. Resistência ao corte. Corte um.tm. Para o número seis, vamos fazer Index DHTL na barra Leroy Então isso vai ser apocalipse. Resistência ao corte. Corte o Leroy. E corte. Agora, o HTML com pontos de índice é o arquivo padrão. Se uma página da web está apenas procurando por algo, o Índice IHL geralmente é fornecido No entanto, também é bom incluir o nome do arquivo. Então, você pode simplesmente usar apocalypse slash resistance slash slash Leroy, mas também pode usar slash Index dot HTML para garantir que ele chegue ao lugar slash resistance slash slash Leroy, mas também pode usar slash certo . Tudo bem. Por fim, vamos passar do HTML de um ponto, que está aqui, para HTML de ponto zumbi, que está aqui Faça isso, precisamos subir a pasta, então vamos colocar pontos em uma barra. Então, se estamos em um, subimos um nível, agora estamos no apocalipse Precisamos subir mais um nível. Barra de pontos. Isso significa subir um nível, depois subir outro nível, e então precisamos de HTML com pontos de zumbi, e esse é o caminho 3. Usando editores de código para parar o apocalipse: O importante a ser discutido são os editores de código. Neste curso, usarei o código VS, e você pode usá-lo, mas talvez queira usar outra coisa. Editores de texto simples No Windows, você tem o bloco de notas, que é um curso de trabalho padrão, você pode definitivamente criar HTML e CSS no bloco de notas. Isso não é um problema. No MAC, há edição de texto, você precisa ter certeza de que está no modo de texto simples. Se estiver no modo de enriquecimento de texto, ele não salvará o arquivo corretamente e não funcionará da mesma maneira, pois salvará várias outras informações envolvidas Portanto, certifique-se de que seja o modo de texto sem formatação. Agora, esses dois editores funcionarão bem, mas não são recomendados O motivo é porque existem algumas opções melhores. Uma coisa que muitas dessas opções que vou examinar fazem é o código de cores, o código. E isso significa que coisas de certos tipos, seus elementos HTML, seus seletores CSS terão cores diferentes A vantagem disso é que, se algo deveria ser um seletor, mas tem a cor errada, você pode perceber que isso é um erro e que digitou algo errado ou algo não está funcionando bem, então isso pode realmente ajudá-lo a identificar Algumas opções gratuitas ou NoPed plus. Isso é somente para Windows, mas funciona bem. Há colchetes, que devem funcionar em qualquer plataforma. código VS, novamente, é o que estou usando neste curso, mas não é necessário que você o use. Qualquer um deles funcionará bem. Mas todos os três são gratuitos. Também há suprimentos e textos que muitas pessoas realmente gostam, embora isso tenha um custo. Realmente, qualquer outra ferramenta de codificação que suporte HTML e CSS seria adequada Qualquer um deles funcionará enquanto você codifica em casa. 4. Noções básicas de HTML: Ele vai falar sobre o que é HTML e como ele funciona. O que é HTML? Significa linguagem de marcação de hipertexto É a estrutura ou esqueleto de uma página da web. É uma forma de marcar o conteúdo de uma página da web. Há quatro partes em um elemento HTML. Primeiro, temos a tag de abertura, depois os atributos, o conteúdo e a tag de fechamento. Ao abrir as etiquetas, comece com um sinal menor que ou um colchete angular esquerdo Em seguida, eles são seguidos pelo nome da tag, P para parágrafo, por exemplo. Existem muitas etiquetas diferentes e, em seguida, fecharei com um sinal maior que ou um colchete angular reto Por exemplo, temos uma tag P de abertura. Temos uma tag B de abertura para negrito, sobre a qual falaremos um pouco mais tarde, e uma tag de abertura DIV, sobre a qual também falaremos um pouco mais tarde Mas esses são alguns exemplos de etiquetas de abertura. A seguir, temos alguns atributos. Um atributo é um ou mais pares de nomes e valores aplicados a um elemento HTML. E os atributos normalmente fazem uma das três coisas. Eles vão identificar um elemento. Usaremos muito isso com CSS, onde retiramos algo da página e depois modificamos Os atributos modificarão o comportamento de um elemento, como alterar a cor, alterar a fonte , várias coisas diferentes ou definirão conteúdo externo. Isso acontece com imagens, links para um arquivo diferente ou uma página diferente, e os atributos aparecerão entre a tag de abertura e o sinal maior que ou o colchete angular reto E alguns exemplos seriam definir uma classe, que é um atributo de identificação de data ars no P ou um ID de aviso de zumbi, outro atributo de identificação no elemento dI ou tag di Em seguida, temos o conteúdo, normalmente é texto ou outros elementos HTML Ele aparecerá entre as tags de abertura e fechamento ou dentro do elemento. Alguns elementos têm limites nos tipos de elementos que podem conter, e alguns elementos só podem aparecer dentro de alguns outros elementos. Alguns exemplos podem ser que este parágrafo tenha gosto de cérebro, ou parece que aparece um zumbi rastejando Temos a tag de fechamento, que espelhará a tag de abertura, exceto que incluirá uma barra após a lente e o sinal Para espelhar nossas tags de abertura anteriores, temos uma barra P, barra B ou barra div Nem todos os elementos HTML exigem uma tag de fechamento. Elas são chamadas de etiquetas vazias ou de fechamento automático. Normalmente, se um atributo contém conteúdo, como elementos de imagem, ou se o elemento não tem conteúdo como quebras de linha, ele não tem uma tag de fechamento. Temos aqui uma etiqueta P de abertura com zumbis, e depois temos uma etiqueta de abertura, não, etiqueta de fechamento, família, etiqueta P de fechamento e, em segundo lugar, temos outra etiqueta P de abertura Então temos uma marca ocular de abertura, temos um tesouro B que abre, fecha B, fecha e, fecha P. Isso é o que chamamos de aninhamento Se você abrir um elemento em HTML, precisará fechá-lo antes de fechar o elemento pai ou o elemento acima dele. Nós olhamos para isso em cores. Temos, por exemplo, aqui, que este está totalmente encapsulado dentro do P, é considerado filho do elemento P. Então temos aqui que o B é totalmente delimitado pelo i, e o I é totalmente delimitado pelo P. B é dito ser filho de I, I é dito ser filho de P e B é dito ser neto de P. Você também pode fazer o contrário e dizer que P é pai de I, I é pai de B e P é avô de B. Agora, esse é um A menor quantidade de código que você pode ter começa com um tipo de documento, que não é tecnicamente HTML, mas existe para informar ao navegador o que é esse documento Em seguida, temos nosso elemento HTML de abertura. Isso apenas define onde está o HTML. O cabeçalho será a informação sobre a página e, em seguida, o corpo será tudo o que será exibido na página. Vamos realmente dar uma olhada nisso e fazer alguma codificação ao vivo 5. Codificação ao vivo em HTML - página inicial: Temos apenas as etiquetas que você viu anteriormente, os elementos. Temos nosso tipo de documento de abertura, que informa ao navegador que essa é uma página HTML. Temos um elemento HTML. Eu adicionei um atributo ang aqui para mostrar que está em inglês. Isso pode ser útil para muitas coisas, mas navegadores, leitores de tela mecanismos de pesquisa os ajudam a saber em que idioma está, para que possam preparar traduções e coisas assim com mais facilidade ou saber do que traduzir. Também temos um elemento principal, que será a informação sobre a página. não temos nada disso, mas vamos editá-lo mais tarde. Temos um elemento corporal. O que vai mostrar tudo na página. Agora, eu tenho isso configurado para que, quando eu salvar algo aqui, ele apareça aqui. Se eu, por exemplo, adicionar Just a hello world. Ajuda se você soletrar corretamente. Olá, mundo, e eu o salvo. Em seguida, aparece aqui. O elemento P aparece aqui. A próxima coisa que vamos fazer é adicionar o que é chamado de H ou título de nível um. Este é o cabeçalho de nível superior, você também tem H um, H dois , H três, h4h5 e H seis, sendo o cabeçalho de nível um o nível superior e, normalmente, divide seu conteúdo com subtítulos e outras coisas com H dois, depois H três e assim por diante Deixe-me dizer isso e veremos como é. Portanto, um título é, por padrão, muito maior do que o texto normal e também em negrito. Então, ajude-o a se destacar como um título. cabeçalhos são, na verdade, elementos em nível de bloco, onde criam espaço acima e abaixo de si mesmos A próxima coisa que veremos é, na verdade, um elemento span, que é tecnicamente um elemento embutido Vou usá-lo apenas para exibir a assinatura do nosso médico Buble, que escreveu o ensaio em que estamos trabalhando Ou a página esa em que estamos trabalhando. Tecnicamente, é um elemento embutido, o que significa que não criaria espaço acima e abaixo de si mesmo, mas como esse H está acima dele, o H criará espaço e, em seguida, a próxima coisa que usaremos também será um elemento em nível de bloco Mas se eu clicar em salvar, vai mostrar que existe o nome do Dr. Pople A próxima coisa que vamos adicionar é um texto. Na verdade, tenho isso aqui no texto do conteúdo. Feche essa gaveta e aqui temos um monte de textos que podemos usar Vou copiar esse texto aqui. Tudo isso são parágrafos. Isso é para a página de índice. Parte disso será usada para a página sobre ou biografia. Vou colar esse conteúdo indiretamente. Se eu clicar em salvar, você verá que tudo parece um parágrafo gigante. Não há continuidade de parágrafos aqui. Não respeita necessariamente o espaçamento dos nossos parágrafos Para fazer isso, precisamos adicionar elementos p ao redor de nossos parágrafos Se eu clicar em salvar, você verá que nosso primeiro parágrafo toma forma. Não se preocupe com esse espaçamento aqui. É só por causa do editor. Em seguida, vou adicionar mais alguns parágrafos. Como você pode ver, continuaremos adicionando parágrafos. Novamente, não se preocupe com esse espaçamento. É estranho e, como você pode ver, não aparece aqui. E agora vou ampliar a adição do resto dos parágrafos. Sim. Tudo bem, e estamos de volta. Ok. A próxima coisa que vamos fazer é examinar e descobrir onde eu rotulei algumas coisas que deveriam estar em negrito Qualquer coisa que tenha esses asteriscos, vou substituir por uma tag em negrito Na verdade, existem duas tags em negrito ou duas tags que criarão negrito. Uma é a tag B, que vimos um pouco de tudo adicionar aqui ao redor dela. Se eu disser isso, você pode ver que agora está em negrito. A outra tag é a tag forte, e isso significa forte ênfase. A razão pela qual existem dois é porque, inicialmente, eles são realmente fortes e não cordões. Deixe-me consertar isso aí. Inicialmente, quando a linguagem foi criada, a tag Bol B era tudo o que tínhamos. E havia alguma preocupação de que isso não estivesse fornecendo informações suficientes sobre o conteúdo. Não estava sendo semântico o suficiente. Então eles adicionaram a tag Strom para torná-la um pouco mais específica e um pouco mais para torná-la um pouco mais semântica No entanto, o Strom tem muito mais letras para digitar e, portanto, os desenvolvedores não acabaram usando o stro com mais frequência E assim a etiqueta Bol continuou viva. Agora, com o HMO cinco, ambos são aceitáveis, então você pode usar o que quiser Agora vamos ver os elementos I e M, onde eu fiz esses sublinhados, vamos adicionar itálico, I para itálico Assim como o negrito, há dois elementos para itálico. Uma é, que aqui se parece com isso, que já vimos um pouco antes. Se eu disser isso, você pode ver que fica em itálico. Da mesma forma que negrito e forte, B e Strong, eles queriam que o elemento fosse mais semântico ou queriam uma versão mais semântica do elemento, então adicionaram o EM para Mas, novamente, qualquer um é aceitável, use o que fizer mais sentido para você Se eu disser isso novamente aqui, isso também está em itálico Tudo bem Agora que temos nosso conteúdo em nossa página, vamos adicionar um pouco de navegação. Logo abaixo da etiqueta corporal aqui, logo abaixo da etiqueta corporal de abertura, vou adicionar E então este é o começo. Temos um elemento A, que originalmente significa âncora, mas é nossa tag de link Tudo o que vincularmos estará nesse atributo ARF. E então o texto do link será esse texto aqui. Então, vou apenas vinculá-lo ao Index DHTO, que é esse mesmo arquivo Vou clicar em salvar e, seguida, você pode ver que há um link aqui. Se eu clicar nele, ele simplesmente abrirá o mesmo índice HTL Não precisamos nos preocupar com isso agora. Mas vamos acabar tendo duas páginas neste site. Então, vou adicionar um link para isso agora, mesmo que ainda não tenhamos criado essa página, será doctor Gopals bio bio dot HTML E então eu vou fazer uma biografia. Guarde isso. Agora temos dois elementos lá em cima, dois elementos A lá em cima. Normalmente, a navegação é colocada em uma lista não ordenada porque são elementos relacionados, então essa é mais a forma semântica de associá-los E também vamos usar uma tag estrutural chamada NAV para navegação Então, vou adicionar o NAV aqui primeiro. Que é um elemento estrutural. Então, na verdade, não faremos nenhuma alteração. Então, se eu salvá-lo, ele não fará nenhuma alteração no front-end no momento, mas vamos usá-lo muito mais tarde para CSS e também garantir que haja uma e também garantir estrutura adequada na página. Agora vou adicionar essa lista não ordenada. Portanto, uma lista não ordenada começa com UL. E então cada item terá um item LI para o item da lista. E então vamos fechar a UL. Depois de salvá-lo. Então você pode ver que agora está em uma lista não ordenada ou em uma lista com marcadores Vamos brincar com isso um pouco mais tarde, quando chegarmos ao CSS, mas agora ele está devidamente estruturado. Agora, com isso, temos nossa estrutura NAB aqui, mas há mais estrutura em uma página do que isso Existem vários elementos estruturais diferentes. Por exemplo, temos um cabeçalho, que pode contornar o cabeçalho. Agora, deixe-me enfatizar também que o cabeçalho e os cabeçalhos são muito diferentes Portanto, um cabeçalho aqui é para mostrar o topo da página, enquanto o cabeçalho é uma informação sobre a página. cabeçalhos também são conteúdos que serão exibidos na página e, portanto, vão para o cabeçalho seguir, temos o principal, que é o conteúdo principal da página, que neste caso é o ensaio do Dr. Buble Vou fechar a rede principal aqui embaixo. Também vou adicionar um elemento de rodapé com algum conteúdo Cole isso aqui. Então, temos uma comida. Temos um RH. HR significa régua horizontal. É uma tag vazia, portanto, não precisa de uma tag de fechamento. Só vai desenhar uma linha na página. Então temos um elemento p aqui, tag P com algumas informações. E depois fechando P, fechando o rodapé. Vou salvar isso para que possamos vê-lo em ação aqui, e aqui temos todo o nosso conteúdo. Você notará aqui que isso reduziu o espaço. Isso é menos do que está em vermelho. Isso porque, enquanto o navegador está descobrindo, não está percebendo que não é um código Ainda não tem certeza do que é. Ser menos do que o pecado normalmente iniciará o código. Será algo que não deve ser exibido no front-end. O navegador descobre, entende o que queremos aqui, mas, na verdade, a melhor coisa a fazer é configurá-lo para e comercial LT ponto e vírgula, que significa LT é menor que Ampersand LT. O Cticon nos mostrará o mesmo colchete angular esquerdo. Se eu clicar em salvar. Observe que não houve nenhuma mudança lá, e isso porque é o mesmo símbolo. Nós também podemos. Opa. Defina o símbolo maior que. Aqui, vou adicionar um espaço, que será o sinal maior de San do que. E como o Ampersand agora designa um caractere especial ou designa isso, exibiremos um caractere especial semble exibiremos um ampersand que queremos exibir agora deve ser definido como ampersand AMP Nada disso deve mudar. Não honra o espaço lá. Mas podemos fazer mais do que apenas esses símbolos. Também podemos fazer o símbolo de direitos autorais. E o símbolo de direitos autorais é Ampersand Copy. ALS, e você pode ver que agora é o símbolo de direitos autorais. Essas são chamadas de entidades HTML e nos permitem escrever caracteres que não estão em nossos teclados na página Agora que temos nosso conteúdo e nossa estrutura principal para nosso HTML de pontos de índice, vamos salvá-lo e criar nossa segunda página, nossa biografia HTL. 6. Codificação ao vivo em HTML: página bio: A maneira mais fácil de criar bio Dot HTL é em vez de começar do zero Podemos pegar o Index dot HTL e salvá-lo como Bio Dot HTML para que possamos começar com uma estrutura e esse tipo de coisa Vou acessar Arquivo Salvar como e alterá-lo para bio DH TML Eu salvo. Agora temos o Biodi TML, mas você notará que também aqui embaixo temos HTML com pontos de índice Agora são duas cópias uma da outra. Também vou abrir o texto com pontos do conteúdo, então ainda temos acesso a ele. Tudo bem Agora, biografia, sabemos com certeza que esse conteúdo não está correto. Então, vamos excluir esse conteúdo aqui. Se o salvarmos agora, ele não será atualizado aqui, mas isso é porque ainda estamos analisando o índice em HTL aqui Eu deveria ser capaz de clicar na biografia, e aqui estamos com o HTML do ponto bio. Vou pegar o conteúdo H one e colocá-lo aqui. Em seguida, vou clicar em Salvar e podemos ver se esse é o correto ou esse é o conteúdo, e agora podemos distinguir mais facilmente uma parte de duas páginas. Agora vou pegar o conteúdo daqui. Eu vou copiá-lo. Não é biografia do índice. Vou colá-lo. Novamente, teremos muito trabalho pela frente. Vou começar a adicionar tags P. Agora temos vários títulos diferentes aqui. Vou adicionar duas tags H às suas coisas favoritas e vou adicionar uma extensão desta pequena nota aqui para que possamos estilizá-la separadamente. Agora vou colocar uma UL ou uma lista não ordenada de suas coisas favoritas LI LI ao redor de cada item. E feche o UL. Esse dois vai ser um H dois. Agora, essas serão uma lista ordenada. Uma lista ordenada é apenas um OL versus um UL. Vou adicionar LI, usar o mesmo elemento LI em que fizemos um fechamento, e agora está tudo lá. Deixe-me clicar em salvar e veremos o novo conteúdo aqui. Temos nosso parágrafo. um H dois, temos nossa extensão. Temos uma lista não ordenada. Temos outro H dois, temos nossa lista ordenada e, é claro, temos o rodapé e o RH, etc Agora, como você deve ter notado, enquanto eu estava trabalhando, também há alguns lugares para adicionar itálico e negrito Vamos continuar e fazer isso agora. Tudo bem Fizemos nossas alterações em itálico e negrito Agora vamos adicionar um sinal de marca registrada depois disso , porque o Dr. Bob escolheu registrá-lo E isso é Ampersand Trade, e aí aparece ali mesmo A última coisa que vamos fazer com o HTML é adicionar uma imagem. Então, eu vou voltar aqui e direto para dentro desse elemento P. Vou adicionar elementos de imagem. Agora, uma imagem é, na verdade, uma etiqueta de fechamento automático ou vazia. Então vá para a imagem e, em seguida, ele usa o que é chamado de SRC como fonte para encontrar a imagem E esse é o PNG. Vou clicar em salvar, e você pode ver que ele está em toda a sua glória. Outra coisa que queremos adicionar às imagens é o que chamamos de texto alternativo. E essa é uma forma de os mecanismos de pesquisa e os leitores de tela poderem acessar o conteúdo da imagem. Eu vou pegar isso daqui. Use um atributo. Usa um atributo l. Eu tenho esse conteúdo. Eu juro, deixe-me pegá-lo. Tudo bem E aí aparece. Clique em salvar. Observe que não há alteração na imagem porque o atributo não , então mostrarei apenas dois leitores de tela e mecanismos que estão lendo o código ou qualquer outro programa que esteja lendo o código. Agora temos nosso HTL instalado. Vamos dar uma olhada no CSS. 7. Noções básicas de CSS: CSS significa folhas de estilo em cascata. Se o HTML é o esqueleto, então o CSS é a carne e a roupa Ele permite que você defina cores, fontes e todos os tipos de coisas diferentes. A cascata do CSS. Os estilos não afetam apenas um único elemento. Eles percorrem o documento em cascata de pai para filho. Por exemplo, se você definir uma cor de texto no elemento do corpo, ela cairá em cascata por todos os elementos secundários Há três partes em uma regra CSS. Primeiro é o seletor, depois a propriedade e, em seguida, o valor A parte entre colchetes é normalmente chamada de bloco de declaração, e a coisa toda como um todo é chamada O seletor selecionará quais elementos aplicar as propriedades Pode ser um elemento, como P, di ou main, todos elementos que acabamos de ver, e você pode selecionar todos esses elementos em uma página usando o seletor de elementos Eles podem ser uma classe que usa o atributo de classe HTMLs, nomeie-a como quiser, então classe é igual a zumbis, mortos-vivos, políticos mortos-vivos Você também tem um ID, que é um valor do atributo ID do HTML, e para isso, você vai usar uma hashtag Para as aulas, você usará um período para designar que é uma aula Para IDs, você usará uma tag de hash para designar que é uma ID e também pode usar uma combinação Por exemplo, isso seleciona qualquer elemento P que esteja dentro de outro elemento com um ID de apocalipse, não precisa ser um filho direto, pode ser um neto, um descendente muito mais distante, descendente muito mais distante Isso selecionará qualquer div que seja um elemento com uma classe de zumbi e selecionará qualquer elemento com uma classe de político que esteja dentro de uma Propriedade. Esse é o aspecto que você quer mudar. E há muitos exemplos, mas coisas como cor, cor de fundo, estilo de fonte, família de fontes, muitos , muitos mais. E depois o valor. Valores são o valor para o qual você está alterando a propriedade a partir do valor padrão ou de outro valor que você disse anteriormente. O tipo de dados permitido depende da propriedade. Algumas propriedades aceitam apenas palavras-chave específicas e algumas propriedades aceitam apenas números ou números com unidades específicas. Alguns aceitam os dois. Agora vamos dar uma olhada em um pouco de CSS. 8. Codificação ao vivo em CSS: adicionando estilo: Então, vamos pegar nossas páginas HTML aqui e eu vou voltar ao nosso índice para que possamos vê-lo funcionando a partir daqui. E eu preciso adicionar um elemento de estilo aos nossos loops. Eu ainda estou na biografia lá. Deixe-me voltar aqui. Índice. Vou adicionar um elemento de estilo. E nesse elemento de estilo, posso colocar nosso CSS. A primeira coisa que vou fazer é selecionar todas as etiquetas H one e mudar sua cor para um vermelho alaranjado. Vermelho alaranjado. Há muitas maneiras diferentes de configurar a cor. Vermelho alaranjado é uma palavra-chave que funciona para cores. Vou guardar isso, e agora nosso H é vermelho alaranjado. Também queremos tornar nosso H um pouco maior em tamanho. Vou definir o tamanho da fonte. Então, qual é o tamanho de 50 pixels? O padrão é 16, então definir um tamanho de fonte de 50 pixels vai torná-la muito maior. Como você pode ver lá. A próxima coisa que eu quero fazer é modificar essa assinatura Vou definir um intervalo. Vou definir um estilo de fonte, que muda itálico para itálico e dá a ela uma cor cinza Se eu disser isso, você pode ver que ele diminuiu um pouco a ênfase e colocou em itálico Então, eu quero me livrar dessas balas aqui em cima. A maneira de fazer isso é flexionar a UL e definir o tipo de estilo ou o tipo de estilo de lista como nenhum Salvar. Agora eles se foram. O único problema é que temos uma UL em nossa biografia que também a removerá. A maneira de contornar isso, a maneira de alterá-lo apenas nesta UL e não em outras ULs é localizá-la ou definir um seletor descendente Então NAV UL. Qualquer UL dentro de um NAV é o único que será afetado A próxima coisa que queremos fazer é em vez de tê-los assim, exibi-los em linha para que fiquem um após o outro Portanto, vou mudar neste caso, novamente, não quero afetar todos os LIs. Eu só quero afetar os LIs em um NAF e vou definir a exibição em linha E então eu quero adicionar um pouco de preenchimento para que eles tenham um pouco de espaço entre si Isso adicionará dez pixels de preenchimento. Isso apenas adiciona espaçamento ao redor deles. Agora, você pode ver que há uma grande lacuna aqui, que não é bem assim. Todos os elementos têm algum preenchimento e margem padrão. Portanto, esse UL, por padrão, tem um monte de preenchimento e margem porque tem esses marcadores Então, vou definir seu preenchimento para zero e sua margem para zero Salvou, e agora está lá. Ainda está um pouco diferente, e isso se deve ao seu preenchimento de dez pixels ao redor Dez pixels ao redor. Agora, outra coisa que eu gostaria de fazer é que em vez de ter a navegação aqui, eu queira voar até aqui. Assim, você pode fazer isso facilmente configurando o alinhamento correto do texto, ele alinhará o texto à direita Se eu salvar, ele voa até aqui porque agora está alinhado à direita em vez de alinhado à esquerda, como está por padrão Agora, isso está um pouco perto do topo, então eu quero adicionar um pouco de espaçamento acima aqui Também quero adicionar algum espaçamento entre esses dois. Vou pegar apenas a Nave não vou mudar os elementos dentro dela Eu vou dizer que a margem é superior a 100 pixels. Eu salvo. Lá vamos nós, e depois margeamos o fundo. 50 pixels, e eu cliquei em salvar, e agora há mais espaço entre os dois. Agora, eu gosto desse vermelho alaranjado, então quero expandir seu uso. Eu vou fazer esses dois links ficarem alaranjados também. Então eu vou dizer N A Eu só quero selecionar os elementos A. Eu quero fazer a cor laranja vermelha, mesma cor de antes. Salvar. Agora eles são vermelho-alaranjados. E agora que eles têm uma cor diferente, fica muito mais claro que eles podem ser um link. Então, vou remover essa decoração de texto sublinhado. Não. Salve, e agora não há nenhuma linha lá embaixo. E outra coisa que queremos fazer é marcar em qual página estamos. A maneira mais fácil de fazer isso é adicionar uma classe à página em que estamos. Atualmente, isso é indexado em dH TL, vou adicionar uma classe a L Classe é igual à página atual Agora, se eu salvá-lo, o que vou fazer agora, nada muda porque não escrevemos nenhum estilo para editar isso. Mas antes de prosseguirmos, e para não esquecer, vou copiá-lo e colá-lo aqui, mas colocá-lo no link da biografia, mas colocá-lo no link da biografia, já que esse é o link que é a página atual aqui. Guarde isso para que não esqueçamos. Tudo bem. Agora, vou escrever um estilo para isso. Como é uma aula, vou escolher uma página atual. S. Então eu vou definir a borda inferior, porque eu só quero que ela fique na parte inferior. Então eu vou definir vermelho alaranjado. Então, as bordas, na verdade, assumem três valores diferentes. Vou definir sólido e, em seguida, a largura é de dois pixels. Sólido é o estilo. Você pode ter pontos ou várias outras coisas, mas estou definindo a cor, o estilo e a largura. Eu salvo. Agora, ele destaca em qual página estamos. Tudo bem. Bem, vamos olhar mais para o rodapé. Esse rodapé é bom Gosto da linha aqui, mas acho que seria se também pudéssemos torná-la dessa cor, aquela cor vermelha alaranjada, um pouco de rodapé HR. Desta vez, vou colocar a borda no topo , porque é isso que trata da borda dos RH ou o que trata da cor de um RH, vou defini-la em dois pixels novamente, sólida, e a cor Como você pode ver, a ordem exata não importa porque está bem claro quais são essas coisas. Vou clicar em salvar, e aqui temos um vermelho alaranjado. Agora, outra coisa que seria legal é não fazer com que ela se estenda por todo o caminho, mas talvez por uma porcentagem porque se tornarmos isso maior ou menor, não queremos necessariamente que seja 100%. Se eu definir um valor específico, ele pode ser muito grande em alguns momentos e muito pequeno em outros. Vou definir uma largura de 60%. E o que isso significa é que vai ter 60% da largura de seu pai. Agora, vamos trabalhar um pouco mais com o rodapé. Quero alinhar o texto ao centro, para que o texto fique centralizado E então eu também quero adicionar um pouco de espaço aqui para que fique claro onde começa e termina. Eu salvo. Deixe-me rolar um pouco para baixo Agora você pode ver que agora está centralizado, parece um pouco melhor. Há algum espaço aqui para diferenciá-los . Então isso é bom. Outra coisa que acontece é que, se formos até o fim, ela continua a crescer o mais amplamente possível, que provavelmente não é o que queremos. Normalmente, é muito mais difícil ler uma linha que atravessa toda a página. Então, vamos definir um tamanho x. Então, eu vou definir o Nav. Você pode fazer várias coisas, vários seletores em uma declaração se fizer uma vírgula entre eles Aqui estou configurando todos os cabeçalhos e rodapés principais do Nav. Vou definir uma largura máxima de 1.000 pixels para eles e uma margem automática para garantir que estejam centralizados ao serem salvos Ele salvou. Em seguida, abro e agora está centralizado Uma coisa que perdemos aqui é que, quando eu defini a margem automática no Nav, ela eliminou a margem extra que adicionamos acima e abaixo dela E também me livrei dele nos rodapés, e agora está bem perto Portanto, há uma maneira fácil de corrigir isso. O que vou fazer é, em vez de colocá-lo em cada um desses elementos, criar um div, dar a ele uma classe de wrapper E eu vou envolvê-lo em torno de todos os elementos. Tudo bem. Agora, digamos que isso acabou não fazendo nada porque eu ainda não mudei o CSS. Então, em vez de selecionar todas essas coisas, agora vou selecionar apenas o invólucro Vou clicar em salvar. Agora, o NAV tem sua margem para trás, o rodapé tem sua margem para trás e, se eu o abrir, só vai para 100 pixels Se formos até a biografia, perceberemos que ela não tem mais nenhum desses recursos. Há uma maneira simples de fazer isso. Você pode clicar ou copiar todo esse estilo. E então eu vou colá-lo aqui. Vou clicar em salvar e agora temos o mesmo estilo disponível para nós Temos o rodapé aqui, temos o título, todas essas coisas Se formos muito grandes. Oh, se formos muito grandes, isso não impede. O motivo é porque não adicionamos o invólucro. Então, vamos adicionar o invólucro div aqui. Role até o final. Isso economiza. Agora, se formos longe demais, isso ainda impede que ele vá muito longe. Agora estamos de volta aqui. OK. Há mais algumas coisas que queremos fazer sobre isso. Quero dizer, essa imagem é boa. Gostamos da foto do doutor B, mas ela simplesmente não parece muito correta onde está, na verdade, o texto não flui ao redor dela. Nós podemos fazer o que é chamado de flutuação. Então faça a imagem e então eu vou flutuar. O que a flutuação faz é puxar o elemento para fora do fluxo normal e enviá-lo para a direita, ou você também pode enviá-lo para a esquerda e permitir que o conteúdo flua ao redor dele Então, vou clicar e salvar, e agora você pode ver que o conteúdo agora está fluindo em torno dele. Isso é melhor. Essa imagem ainda é bem grande. Ainda temos coisas bem próximas disso. O que vou fazer é fazer mais algumas mudanças aqui. Vamos definir uma margem esquerda esquerda de cinco pixels e uma margem inferior. De cinco pixels também. Salvar. Isso nos ajudou um pouco. Temos um pouco de espaço lá. Então, eu também quero alterar sua largura no valor de 300 pixels e vamos mudar sua altura. Eu economizo, isso atrapalhou um pouco. E isso porque não mantivemos a proporção. Nós o forçamos a ficar em um quadrado quando não está. Então, deixe-me excluir isso, eu salvo e agora fica automaticamente muito melhor. A outra coisa que você pode fazer é definir sua altura como automática e, em seguida, garantir que tudo o que você definir aqui, definitivamente permanecerá com a proporção apropriada. 9. Te pego mais tarde, Zombigator: Por fazer esse curso? Se você gostou, deixe um comentário. Isso realmente ajuda a divulgar. E você também pode conferir meus outros cursos no Skillshare Se você quiser mais conteúdo, eu ainda tenho mais no Instituto und dot, onde há livros, jogos, recursos e até mesmo algum currículo. Obrigado. Tenha um ótimo dia.