Estilização com classes

sábado, 19 de março de 2016

Estilização com classes

Para podermos estilizar os elementos que criamos, vamos precisar de uma forma de selecionarmos no CSS cada coisa. Já vimos seletor de tag e por ID. Ou seja, pra estilizar nosso menu<nav>, podíamos fazer:


nav {
   ...
}

Mas imagine que podemos ter muitos NAV na página e queremos ser mais específicos. O ID é uma solução:


<nav id="menu-opcoes">

</nav>

E, no CSS:


#menu-opcoes {
  ...
}

Vamos ver uma terceira forma, no uso de classes. O código é semelhante mas usa o atributo class no HTML e o ponto no CSS:


<nav class="menu-opcoes">

</nav>

E, no CSS:


.menu-opcoes {
  ...
}

Mas quando usar ID ou CLASS?

Ambos fariam seu trabalho nesse caso. Mas é bom lembrar que ids são mais fortes, devem ser únicos na página, sempre. Embora esse nosso menu seja único agora, imagine se, no futuro, quisermos ter o mesmo menu em outro ponto da página, mais pra baixo? Usar classes facilita reuso de código e flexibilidade.

Além disso, um elemento pode ter mais de uma classe ao mesmo tempo, aplicando estilos de várias regras do CSS ao mesmo tempo:


<nav class="menu-opcoes menu-cabecalho">
...
</nav>


.menu-opcoes {
    // código de um menu de opcoes
    // essas regras serão aplicadas ao nav
}
.menu-cabecalho {
    // código de um menu no cabeçalho
    // essas regras TAMBÉM serão aplicadas ao nav
}

No caso do ID, não. Cada elemento só tem um id, único.

Preferimos o uso de classes pra deixar em aberto reaproveitar aquele elemento em mais de um ponto depois. Vamos fazer isso na sacola também:


<p class="sacola">
  Nenhum item na sacola de compras
</p>

Reutilizando uma classe para diversos elementos

Pode ser interessante criar uma classe que determina a centralização horizontal de qualquer elemento, sem interferir em suas margens superior e inferior como no exemplo a seguir:


.container {
  margin-right: auto;
  margin-left: auto;
}

Agora, é só adicionar a class "container" ao elemento, mesmo que ele já tenha outros valores para esse atributo:


<div class="info container">
  <p>Conteúdo que deve ficar centralizado</p>
</div>

3.7 - Exercícios: header semântico

Já temos o arquivo index.html criado. Vamos apagar seu único parágrafo, pois adicionaremos conteúdo que fará sentido.

Crie o arquivo estilos.css na pasta css do projeto, que será onde escreveremos o CSS visual da página. Adicione também a tag<link> apontando para css/estilos.css:
```
<link rel="stylesheet" href="css/estilos.css">
```

Próximo passo: criar o cabeçalho. Use as tags semânticas que vimos no curso, como <header>, <nav>, <ul>, <li>, etc. Crie links para as páginas do menu. E use <h1> para representar o título da página com o logo acessível.


<header>
  <h1><img src="img/logo.png" alt="Mirror Fashion"></h1>

  <p class="sacola">
    Nenhum item na sacola de compras
  </p>

  <nav class="menu-opcoes">
    <ul>
      <li><a href="#">Sua Conta</a></li>
      <li><a href="#">Lista de Desejos</a></li>
      <li><a href="#">Cartão Fidelidade</a></li>
      <li><a href="sobre.html">Sobre</a></li>
      <li><a href="#">Ajuda</a></li>
    </ul>
  </nav>
</header>

Já podemos até testar no navegador. Repare como a página, embora sem estilo visual, é utilizável. É assim que os clientes não visuais lerão nosso conteúdo. Qual a importância de uma marcação semântica?

Vamos criar a estilização visual básica do nosso conteúdo, sem nos preocuparmos com posicionamento ainda. Ajuste as cores e alinhamento dos textos. Coloque o ícone da sacola com CSS através de uma imagem de fundo do parágrafo:


.sacola {
  background: url(../img/sacola.png) no-repeat top right;

  font-size: 14px;
  padding-right: 35px;
  text-align: right;
  width: 140px;
}

.menu-opcoes ul {
  font-size: 15px;
}

.menu-opcoes a {
   color: #003366;
}

Aproveite e configure a cor e a fonte base de todos os textos do site, usando um seletor direto na tag <body>:


body {
  color: #333333;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

Teste no navegador e veja como nossa página começa a pegar o design.

Tecnologia da Informação - TI

Total de visualizações de página

sábado, 19 de março de 2016