Uma introdução às classes em html e css

Escusado será dizer que o desenvolvimento web é enorme. Grande parte disso ocorre porque quase todo mundo está na Web. No entanto, há uma escassez de desenvolvedores em campo, e é por isso que o currículo de desenvolvimento web está tão prontamente disponível e gratuito também. Com isso em mente, mostraremos um pouco do que é HTML e CSS. Mais especificamente, mostraremos como as "aulas" funcionam.

Não o estamos iniciando desde o início, pois já existem toneladas de currículo grátis. Em vez disso, mostraremos especificamente como as aulas funcionam, pois é um componente necessário para criar um estilo no seu site. Também achamos que valeria a pena abordar antes de publicarmos a API do Bootstrap do Twitter, já que as classes também são um componente necessário.

Como um aviso, se você é completamente novo em HTML e CSS, isso provavelmente não é um bom começo para você. Se você está familiarizado com isso, não deve ser muito difícil de entender. Mas, se você está procurando um tutorial completo para iniciantes, há muitas ótimas opções online. Para citar alguns, há FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity e muito mais. Se você optar por começar a pesquisar em um desses, eu recomendo continuar com um (como o Free Code Camp) e finalizá-lo antes de iniciar outro, pois muito do conteúdo "básico" pode ser bastante repetitivo.

Com isso fora do caminho, vamos nos aprofundar no que são as classes.

Como as aulas funcionam

As aulas são extremamente úteis. Eles eliminam a repetitividade do estilo de HTML. Sem aulas, você definiria cada elemento da sua marcação individualmente. E se você tivesse dois dos mesmos elementos, mas quisesse estilizar cada um deles de maneira diferente? Seria uma bagunça completa. É por isso que temos aulas. As classes adicionam alguma estrutura organizacional ao seu HTML, permitindo que você mantenha seu código relativamente limpo. Não apenas isso, mas as classes podem ser usadas mais de uma vez. Em outras palavras, você nunca precisará criar as mesmas regras de estilo duas vezes.

A seguir, como são as classes em nossa etiqueta, rótulo, palavra-chave:

Como você pode ver, na etiqueta do nosso corpo, temos dois

elementos com diferentes classes. O primeiro

A tag possui a classe "head1", enquanto a segunda tag possui a classe "head2". Portanto, em nosso CSS, em vez de aplicar estilo apenas ao

elemento, podemos aplicar estilo a essas classes individuais. Por que queremos fazer isso?

O principal motivo é que você não deseja todo o seu

elementos para ter o mesmo estilo. Isso criaria muitas dores de cabeça ao criar um site e, além disso, os sites não pareceriam muito bons. As classes nos permitem aplicar estilo apenas a uma instância da tag, nem todas

tags no documento. Então, como você escreve uma classe em HTML? Como isso:

Algum conteúdo

Você pode adicionar a propriedade "class" a quase qualquer elemento HTML.

Ótimo! Então, nós temos aulas, mas no estado atual elas não estão fazendo nada. Isso porque ainda não adicionamos nenhuma regra de estilo à classe. Para fazer isso, precisaremos criar um documento .css separado. Só vou chamá-lo de main.css. Nesse documento, criaríamos uma classe como esta:

Para selecionar uma classe que queremos estilizar, fazemos o seguinte:

.head1 {cor: vermelho; alinhamento de texto: centro; }

Dentro das chaves existem todas as “regras” (ou estilo) que aplicamos a essa classe. Existem muitas regras diferentes que você pode colocar nessa classe. No meu caso, alterei a cor do texto para vermelho usando a regra "cor" e centralizei o texto usando a regra "alinhamento de texto". Você pode encontrar uma lista completa de regras de CSS, bem como sua documentação na Rede de Desenvolvedores da Mozilla.

Agora, nosso estilo ainda não é aplicado às classes em nosso documento HTML, e isso é porque ainda não vinculamos os dois arquivos. Volte para o seu arquivo HTML e no , você deseja vincular seu arquivo CSS fazendo o seguinte:

Seu documento HTML deve ficar assim:

E seu projeto de teste deve ficar assim na Web:

Para um vídeo mais detalhado que percorre essas etapas, veja abaixo.

Vídeo

Conclusão

E isso é tudo o que há nas aulas! Eles são realmente simples de entender. Obviamente, nos sites grandes e populares que você visita, as regras nas aulas são muito mais complicadas do que abordamos, mas, na forma mais básica, é assim que elas funcionam.

Se você tiver alguma dúvida ou tiver problemas em seguir muito tempo, informe-nos nos comentários abaixo ou nos fóruns da PCMech! Ou, se você estiver interessado em um guia completo para iniciantes em HTML / CSS no PCMech, não deixe de nos informar também!