{"id":62,"date":"2022-06-03T16:46:52","date_gmt":"2022-06-03T19:46:52","guid":{"rendered":"https:\/\/fariart.com.br\/blog\/?p=62"},"modified":"2024-05-13T14:19:13","modified_gmt":"2024-05-13T17:19:13","slug":"css-para-iniciantes-estruturando-uma-pagina","status":"publish","type":"post","link":"https:\/\/fariart.com.br\/blog\/css-para-iniciantes-estruturando-uma-pagina\/","title":{"rendered":"CSS para iniciantes: Estruturando uma p\u00e1gina"},"content":{"rendered":"\n

Neste post, vamos resumir o CSS para iniciantes<\/strong> que est\u00e3o entrando nesse mundo do desenvolvimento web<\/strong>. Criar sites \u00e9 algo divertido e curioso no come\u00e7o, mas quando somos sobrecarregados de informa\u00e7\u00e3o nova, fica um pouco cansativo.<\/p>\n\n\n\n

Se voc\u00ea est\u00e1 aqui, chegou em um momento onde CSS<\/strong> se tornou uma necessidade na sua vida. Ou voc\u00ea tenha come\u00e7ou a estudar HTML<\/strong> h\u00e1 poucas semanas e est\u00e1 querendo aprofundar seus conhecimentos, ou voc\u00ea quer apenas editar determinado item no template do seu blog e a \u00fanica forma de fazer isso \u00e9 entendendo como funciona o CSS<\/strong>. Seja l\u00e1 qual for a sua necessidade, voc\u00ea est\u00e1 de parab\u00e9ns por buscar conhecimento!<\/p>\n\n\n\n

O que \u00e9 CSS?<\/h2>\n\n\n\n

CSS<\/strong> \u00e9 a linguagem de estilo que nos permite deixar as p\u00e1ginas da web atrativas e bem formatadas, sem ele, todo site teria a mesma cara do Wikpedia.<\/p>\n\n\n\n

Ele \u00e9 um complemento do HTML e um depende do outro para que tudo d\u00ea certo. Ilustrando de forma simples, HTML<\/strong> \u00e9 como se fosse o solo, base, tijolos e telhado de uma casa, j\u00e1 o CSS<\/strong>, \u00e9 como se fosse as tintas nas paredes, os m\u00f3veis e toda a decora\u00e7\u00e3o.<\/p>\n\n\n\n

\"CSS
Foto: jamesmarkosborne<\/a><\/figcaption><\/figure>\n\n\n\n

Ent\u00e3o resumindo, HTML<\/strong> sem CSS<\/strong> \u00e9 como uma obra n\u00e3o finalizada. Voc\u00ea tem sorte, porque hoje existem milhares de conte\u00fados ricos sobre o mesmo tema. Na minha \u00e9poca, eu precisei de um livro de 300 p\u00e1ginas para aprender o tal do CSS<\/strong> que todos estavam falando no momento. Ent\u00e3o, nem pense em desanimar!<\/p>\n\n\n\n

Como funciona o CSS?<\/h2>\n\n\n\n

Existem 3 formas de editar o CSS. Aqui no post, vamos usar apenas a forma externa<\/strong>, mas temos outro post que mostram as Conhe\u00e7a as 3 formas de usar CSS<\/a><\/strong>.<\/p>\n\n\n\n

Usar o CSS externo<\/strong> \u00e9 bem simples, n\u00f3s vamos usar o HTML<\/strong> normalmente, mas vamos criar tamb\u00e9m um outro arquivo com extens\u00e3o “.css<\/strong>” aonde vamos escrever toda a parte visual do nosso site.<\/p>\n\n\n\n

Se voc\u00ea nunca criou um arquivo HTML<\/strong>, \u00e9 s\u00f3 criar um bloco de notas<\/strong> e copiar o que estiver no campo de “HTML” abaixo e salvar com extens\u00e3o “.html<\/strong>“.<\/p>\n\n\n\n

\n
\n
\"Ilustra\u00e7\u00e3o
nome_do_arquivo.html<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n
\n
\"Ilustra\u00e7\u00e3o
nome_do_arquivo.css<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

Caso voc\u00ea n\u00e3o conhe\u00e7a o funcionamento do HTML \u00e9 importante voc\u00ea ter em mente que ele \u00e9 construido atrav\u00e9s de tags que s\u00e3o abertas por um “< >” e fechadas por um “<\/ >”. Por exemplo, quando abrimos uma tag com o nome fict\u00edcio de <<\/strong>tagdeexemplo<\/em>><\/strong>, tudo que escrevermos depois dela estar\u00e1 dentro dela at\u00e9 fecharmos com outra <\/<\/strong>tagdeexemplo<\/em>><\/strong>.<\/p>\n\n\n\n

A partir de agora, \u00e9 importante voc\u00ea acompanhar os passos que eu vou fazer aqui para que voc\u00ea crie a sua primeira folha de estilos separada do seu html.<\/p>\n\n\n\n

Crie o seu HTML<\/strong> copiando o c\u00f3digo abaixo e salve como index.html<\/strong>:<\/p>\n\n\n\n

<html>\n  <head>\n  <\/head>\n  <body>\n  <\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
 Agora crie o seu CSS<\/strong> copiando o c\u00f3digo abaixo e salve como estilo.css<\/strong>:<\/p>\n\n\n\n
body{}<\/code><\/pre><\/div>\n\n\n\n
Certifique-se de que ambos est\u00e3o na mesma pasta<\/strong>.<\/p>\n\n\n\n
Agora no HTML<\/strong>, vamos chamar o arquivo CSS para que os dois trabalhem juntos. Para isso, dentro da tag head, voc\u00ea vai colocar:<\/p>\n\n\n\n
<head>\n  <link rel="stylesheet" href="estilo.css">\n<\/head><\/code><\/pre><\/div>\n\n\n\n
Acima n\u00f3s estamos falando pro navegador que, os elementos visuais da p\u00e1gina est\u00e3o no arquivo estilo.css<\/strong>. E com isso podemos come\u00e7ar a trabalhar.<\/sup><\/p>\n\n\n\n
Abra o arquivo index.html no navegador (voc\u00ea pode dar duplo clique ou arrastar o arquivo para a janela do seu navegador), note que ele est\u00e1 em branco, vamos come\u00e7ar aplicando estilos \u00e0 nossa p\u00e1gina. Existem muitas propriedades para utilizarmos no CSS<\/strong>, mas nesse post eu vou abordar as mais utilizadas e f\u00e1ceis de lembrar.<\/p>\n\n\n\n
Para que voc\u00ea visualize melhor o que vamos fazer aqui, montaremos a seguinte estrutura:<\/p>\n\n\n\n
\n
\n
\"Estrutura
P\u00e1gina que vamos montar no Tutorial<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
Na imagem, temos:<\/p>\n\n\n\n
    \n
  1. Um topo<\/strong> preenchendo a p\u00e1gina horizontalmente.<\/li>\n\n\n\n
  2. Um menu<\/strong> preenchendo a p\u00e1gina na horizontal igual o topo.<\/li>\n\n\n\n
  3. Um bloco cinza<\/strong> na esquerda com margem entre o topo e o canto esquerdo.<\/li>\n\n\n\n
  4. Um bloco verde<\/strong> na direita com margem entre o topo, o bloco 1 e o canto direito.<\/li>\n\n\n\n
  5. Um texto<\/strong> preenchendo o resto da p\u00e1gina, mas tamb\u00e9m com margens laterais na mesma medida que os dois blocos de cima.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n
    Vamos colocar nossos seletores<\/strong> no arquivo CSS<\/strong> antes de estruturar o HTML:<\/p>\n\n\n\n
    body{}\n\n.topo{}\n.menu{}\n.bloco1{}\n.bloco2{}\n\np{}<\/code><\/pre><\/div>\n\n\n\n
    Aqui estamos apenas organizando as ideias no arquivo, a altera\u00e7\u00e3o acima n\u00e3o deve mudar sua p\u00e1gina.<\/sup><\/p>\n\n\n\n
    O que s\u00e3o esses seletores e para que servem?<\/h3>\n\n\n\n
    Eles servem para mapear os elementos. Por exemplo, o nome que eu colocar entre o “.<\/strong>” e o “{<\/strong>” ser\u00e1 o nome do meu seletor<\/strong>. Ent\u00e3o se eu quiser chamar meu “topo<\/strong>” de “parte_de_cima<\/strong>“, eu tenho que usar “.parte_de_cima{}<\/strong>” no lugar de “.topo{}<\/strong>“.<\/p>\n\n\n\n
    Sintaxe<\/h2>\n\n\n\n
    Sintaxe<\/strong> \u00e9, basicamente, o que colocamos no nosso CSS<\/strong>. No c\u00f3digo anterior temos 6 sintaxes (body<\/em>, .topo<\/em>, .menu<\/em>, .bloco1<\/em>, .bloco2<\/em> e p<\/em>).<\/p>\n\n\n\n
    A Sintaxe<\/strong> \u00e9 composta por tr\u00eas itens; um seletor<\/strong> onde iremos definir, dentro das chaves, as propriedades<\/strong> com seus respectivos valores<\/strong>. Podemos colocar quantas propriedades<\/strong> forem necess\u00e1rias dentro do mesmo seletor<\/strong>.<\/p>\n\n\n\n
    Existem 5 tipo de seletores, mas no CSS b\u00e1sico<\/strong>, usamos apenas os 3 principais:<\/p>\n\n\n\n
    \n
    \n
    \"CSS
    Seletor tag<\/strong><\/figcaption><\/figure>\n\n\n\n
    <seletor><\/strong><\/seletor<\/strong>><\/p>\n<\/div>\n\n\n\n
    \n
    \"CSS
    Seletor class<\/strong><\/figcaption><\/figure>\n\n\n\n
    <body class<\/strong>=”seletor”><\/p>\n<\/div>\n\n\n\n
    \n
    \"CSS
    Seletor id<\/strong><\/figcaption><\/figure>\n\n\n\n
    <body id<\/strong>=”seletor”><\/p>\n<\/div>\n<\/div>\n\n\n\n
    Neste tutorial vamos usar apenas seletores de classes<\/strong> e um seletor de tag<\/strong>. As propriedades<\/strong> e os valores<\/strong> voc\u00ea vai entender conforme fazemos os pr\u00f3ximos passos.<\/p>\n\n\n\n
    Para facilitar sua compreens\u00e3o, usaremos divs<\/strong> para chamar todos os elementos que n\u00e3o forem par\u00e1grafo.<\/p>\n\n\n\n
    O que \u00e9 uma div e para que serve?<\/h3>\n\n\n\n
    A div<\/strong> \u00e9 um elemento gen\u00e9rico onde podemos colocar qualquer coisa no HTML. \u00c9 como uma caixa onde vamos colocar informa\u00e7\u00f5es e organizar onde quisermos do tamanho que quisermos e decorar como quisermos.<\/p>\n\n\n\n
    Nesse caso estamos usando a div<\/strong> para chamar os estilos do CSS para o HTML atrav\u00e9s da class. Ent\u00e3o, para que haja um elemento “f\u00edsico” para se “materializar” no HTML, estamos chamando uma DIV<\/strong>.<\/p>\n\n\n\n
    Chamando as DIVs<\/h3>\n\n\n\n
    Agora vamos chamar as divs<\/strong> dentro do corpo do HTML<\/strong> entre as tags “<body><\/body>”. A ordem para montar a estrutura do exemplo ser\u00e1 pensando de cima para baixo e da esquerda para a direita. Lembrando que a div tamb\u00e9m \u00e9 uma tag, ent\u00e3o ela deve abrir com <div> e fechar com <\/div>.<\/p>\n\n\n\n
      <body>\n    <div class="topo"><\/div>\n    <div class="menu"><\/div>\n    <div class="bloco1"><\/div>\n    <div class="bloco2"><\/div>\n    <p>Cole ou digite o texto que quiser aqui<\/p>\n  <\/body><\/code><\/pre><\/div>\n\n\n\n
    Assim como fizemos no arquivo CSS, estamos apenas organizando a estrutura. A \u00fanica coisa que aparecer\u00e1 no seu arquivo ap\u00f3s salvar e atualizar a p\u00e1gina \u00e9 o que est\u00e1 dentro do <p><\/strong>par\u00e1grafo<\/em><\/p><\/strong>.<\/sup><\/p>\n\n\n\n
    \n
    Propriedade width<\/strong><\/p>\nWidth = Largura<\/cite><\/blockquote>\n\n\n\n
    Agora vamos come\u00e7ar a dar vida ao site atrav\u00e9s do CSS. Primeiro vamos conhecer a propriedade width<\/strong>, que define a largura<\/strong> dos elementos.<\/p>\n\n\n\n
    body{}\n\n.topo{\n  width:100%;\n}\n.menu{\n  width:100%;\n}\n.bloco1{\n  width:50%;\n}\n.bloco2{\n  width:50%;\n}\n\np{}<\/code><\/pre><\/div>\n\n\n\n
    Acabamos de dizer para o navegador que o menu e o topo v\u00e3o preencher a tela inteira com a largura de 100%. E os blocos 1 e 2 ter\u00e3o a largura de 50%, preenchendo metade da tela cada um.<\/sup><\/p>\n\n\n\n
    \n
    Propriedade height<\/strong><\/p>\nHeight = Altura<\/cite><\/blockquote>\n\n\n\n
    Agora, vamos conhecer a propriedade height<\/strong>, que define a altura<\/strong> dos elementos:<\/p>\n\n\n\n
    body{}\n\n.topo{\n  width:100%;\n  height:200px;\n}\n.menu{\n  width:100%;\n  height:50px;\n}\n.bloco1{\n  width:50%;\n  height:300px;\n}\n.bloco2{\n  width:50%;\n  height:300px;\n}\n\np{}<\/code><\/pre><\/div>\n\n\n\n
    Acabamos de dizer as alturas dos elementos em pixel para o navegador. Agora ele saber\u00e1 a altura exata de cada elemento que chamamos no HTML.<\/sup><\/p>\n\n\n\n
    Por enquanto o nosso arquivo continua em branco apenas com o par\u00e1grafo escrito, certo? Para come\u00e7ar a enxergar as mudan\u00e7as, vamos conhecer a propriedade background<\/strong>.<\/p>\n\n\n\n
    \n
    Propriedade background<\/strong><\/p>\nBackground = Fundo<\/cite><\/blockquote>\n\n\n\n