Criar um site é uma ótima maneira de se expressar. Embora existam muitas ferramentas de construção de sites, escrevê-las você mesmo é uma maneira divertida de aprender mais sobre como os sites funcionam nos bastidores. Um bom projeto para iniciantes é criar um site e adicionar uma imagem de fundo com CSS. Este projeto irá ajudá-lo a trabalhar com HTML e CSS.
O que é CSS?
CSS significa Folha de Estilo em Cascata. É uma linguagem de programação que permite estilizar linguagens de marcação. Uma dessas linguagens de marcação é HTML ou Hyper-Text Markup Language. HTML é usado para criar sites. Embora você possa controlar parte do estilo do site usando HTML, o CSS oferece muito mais controle e opções de design.
Criando um site básico com HTML
Visto que CSS é apenas uma linguagem de estilo, para usá-lo, primeiro precisamos de algo para estilizar. Um site muito básico será suficiente para começarmos a brincar com CSS. Nossa página exibirá "Hello World".
Olá Mundo
Caso você não esteja familiarizado com HTML, vamos examinar rapidamente o que todos os elementos fazem. Conforme mencionado, HTML é uma linguagem de marcação, o que significa que usa tags para marcar o que é o texto. Sempre que você vê uma palavra cercada por
<> é uma etiqueta. Existem dois tipos de tags, uma tag que marca o início de uma seção usando <> e outra que marca o final de uma seção usandoEm nosso exemplo, temos quatro tags. O html tag indica quais elementos fazem parte do site. O cabeça tag contém as informações do cabeçalho que não são exibidas na página, mas são necessárias para criar a página. Todos os elementos exibidos estão entre os corpo Tag. Temos apenas um elemento exibido, o p marcação. Diz ao navegador que o texto é um parágrafo.
Relacionado: 10 exemplos de código CSS simples que você pode aprender em 10 minutos
Quer saber mais sobre como usar CSS? Experimente estes exemplos básicos de código CSS para começar e, em seguida, aplique-os às suas próprias páginas da web.
Adicionando CSS ao HTML
Agora que temos uma página simples, podemos personalizar o estilo com CSS. Nossa página é muito simples agora e não há muito que possamos fazer, mas vamos começar destacando nosso parágrafo para que possamos distingui-lo do fundo adicionando uma borda.
Olá Mundo
Agora, nosso parágrafo será circundado por uma borda preta. Adicionar uma descrição de estilo em CSS à nossa tag de parágrafo informou ao site como estilizar o parágrafo. Podemos adicionar mais descrições. Vamos aumentar o espaço em branco, ou preenchimento, ao redor de nosso parágrafo e centralizar nosso texto.
Olá Mundo
Nosso site parece melhor, mas nosso HTML está começando a ficar confuso com todas as descrições na tag de parágrafo. Podemos mover essas informações para o nosso cabeçalho. Nosso cabeçalho é para as informações de que precisamos para exibir o site corretamente.
Olá Mundo
Agora nosso HTML é mais fácil de ler. Você vai notar que tivemos que mudar algumas coisas. A tag de estilo informa as informações de estilo do navegador da web, mas também qual estilo deve ser definido. Em nosso exemplo, usamos duas maneiras diferentes de dizer o que estilizar. O p na tag de estilo diz ao navegador da web para aplicar esse estilo a todas as tags de parágrafo. O #ourParagraph seção diz para estilizar apenas os elementos com o id ourParagraph. Notar que eu ia informações foram adicionadas à tag p em nosso corpo.
Importando um arquivo CSS para o seu site
Adicionar as informações de estilo ao cabeçalho torna nosso código muito mais fácil de ler. No entanto, se quisermos estilizar muitas páginas diferentes da mesma maneira, temos que adicionar esse texto no topo de cada página. Isso pode não parecer muito trabalho, você pode copiar e colar afinal, mas cria muito trabalho se você quiser alterar um elemento posteriormente.
Em vez disso, vamos manter as informações CSS em um arquivo separado e importar o arquivo para estilizar a página. Copie e cole as informações entre as tags de estilo em um novo arquivo CSS ourCSSfile.css.
p {
alinhamento de texto: centro
}
#ourParagraph {
estilo de borda: sólido;
preenchimento: 30px;
}Em seguida, importe o arquivo para o arquivo HTML.
Olá Mundo
Adicionando uma imagem de fundo com CSS
Agora que você tem uma base sólida em HTML e CSS, adicionar uma imagem de fundo será moleza. Primeiro, identifique a qual elemento você deseja fornecer uma imagem de plano de fundo. Em nosso exemplo, adicionaremos um plano de fundo a toda a página. Isso significa que queremos mudar o estilo do corpo. Lembre-se de que as tags do corpo contêm todos os elementos visíveis.
corpo{
imagem de fundo: url ("sky.jpg");
}
p {
alinhamento de texto: centro
}
#ourParagraph {
estilo de borda: sólido;
preenchimento: 30px;
}Para alterar o estilo do corpo em CSS, primeiro use o corpo palavra-chave. Em seguida, adicione colchetes como fizemos antes de {}. Todas as informações de estilo do corpo devem estar entre chaves. O atributo de estilo que queremos mudar é imagem de fundo. Existem muitos atributos de estilo. Não espere memorizá-los todos. Marque um Folha de dicas de propriedades CSS com atributos que você deseja lembrar.
Relacionado: 8 efeitos HTML interessantes que qualquer pessoa pode adicionar ao seu site
Após o atributo, use dois pontos para indicar como você irá alterar o atributo. Para importar uma imagem, use url (). indica que você está usando um link para apontar para a imagem. Coloque a localização do arquivo entre colchetes entre aspas. Finalmente, termine a linha com um ponto e vírgula. Embora o espaço em branco não tenha significado no CSS, use recuo para tornar o CSS mais fácil de ler.
Nosso exemplo é parecido com este:
Se sua imagem não estiver sendo exibida corretamente devido ao tamanho da imagem, você pode alterar a imagem diretamente. No entanto, existem atributos de estilo de plano de fundo em CSS que você pode usar para alterar o plano de fundo. As imagens menores que o fundo serão repetidas automaticamente no fundo. Para desligar isso, adicione fundo de repetição: não repetir; para o seu elemento.
Também há duas maneiras de fazer uma imagem cobrir todo o plano de fundo. Primeiro, você pode definir o tamanho do fundo para o tamanho da tela com tamanho do fundo: 100% 100%;, mas isso esticará a imagem e poderá distorcê-la muito. Se você não quiser que as proporções da imagem mudem, você também pode definir o tamanho do fundo para cobrir. Cover fará com que a imagem de fundo cubra o fundo, mas não distorce a imagem.
Mudando a cor de fundo
Vamos mudar uma última coisa. Agora que temos um histórico, nosso parágrafo é difícil de ler. Vamos deixar seu fundo branco. O processo é semelhante. O elemento que queremos modificar é #ourParagraph. O # indica que "ourParagraph" é um nome de id. Em seguida, queremos definir o cor de fundo Atribua ao branco.
corpo{
imagem de fundo: url ("sky.jpg");
}
p {
alinhamento de texto: centro
}
#ourParagraph {
cor de fundo: branco;
estilo de borda: sólido;
preenchimento: 30px;
}Muito melhor.
Continuando a projetar seu site com CSS
Agora que você sabe como alterar o estilo de diferentes elementos HTML, o céu é o limite! O método básico para alterar os atributos de estilo é o mesmo. Identifique o elemento que deseja alterar e descreva como alterar o atributo. A melhor maneira de aprender mais é brincar com diferentes atributos. Desafie-se a mudar a cor do seu texto a seguir.
Quer aprender HTML para codificar seus próprios sites e aplicativos? Use estes exemplos de página da web e código-fonte para aprender HTML e CSS.
- Programação
- HTML
- Designer de Web
- CSS
J. Seaton é um escritor de ciências especializado em analisar tópicos complexos. Ela tem um PhD pela University of Saskatchewan; sua pesquisa se concentrou na utilização de aprendizagem baseada em jogos para aumentar o envolvimento dos alunos online. Quando ela não está trabalhando, você a encontrará lendo, jogando videogame ou fazendo jardinagem.
Assine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Mais um passo…!
Confirme o seu endereço de e-mail no e-mail que acabamos de enviar.
