Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eu lhes apresento o elemento body:
view plaincopy to clipboardprint?
<body>
<!-- todo o conteudo do site aqui dentro -->
</body>Todos nós o conhecemos, mas será que estamos utilizando-o de verdade?
O body é o elemento no nosso documento responsável por ser o container de todo conteúdo do site.
Diferente do <head>, o que está dentro do <body> é oque fica, ou ficará, disponível para a visualização do visitante, como títulos, textos e imagens. Todos nós já usamos o body para isso, mas o que mais podemos fazer com ele?
Pode parecer absurdo falar isso, mas convém lembrar: o body é uma tag HTML; e como tal, aceita atributos: veja! Os mais interessantes são o id e a class.
Vocês já tinham colocado um desses no body de algum site?
view plaincopy to clipboardprint?
<body id="home">
Usar o body com um ID
É uma proposta interessante e nos ajuda a economizar alguns elementos de estruturação de layout de vez em quando. Por exemplo, aqueles layouts onde a home do site difere por poucas coisas das páginas internas, como: topo mais alto, ou o rodapé inexistente. Esse tipo de situação de ser facilmente resolvida usando o atributo ID no body.
Sendo a home, estilizamos o topo diferente do que ele seria nas internas:
view plaincopy to clipboardprint?
body#home #header { height: 200px; }
#header { height: 100px; }
A marcação HTML fica intacta e assim evitamos coisas, como #header_home. E isso nos levará a escrever um CSS mais bonito também. Afinal, fizemos um condicional no CSS!
Usar o body com uma ou mais CLASSes
Na verdade, eu comecei explicando o ID, porém hoje em dia, eu prefiro uma CLASS:
view plaincopy to clipboardprint?
<body class="home">
E tudo pelo simples motivo de poder usar mais de uma. Com CLASSes, temos todos os benefícios que citei do ID:
view plaincopy to clipboardprint?
body.home #header { height: 200px; }
#header { height: 100px; }
E é possível colocar mais de uma, veja:
view plaincopy to clipboardprint?
<body class="cursos html">
A motivação disso é um menu dropdown.
view plaincopy to clipboardprint?
<li>Cursos
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>Assim cada página interna teria uma combinação de CLASS para o body diferente:
class="cursos html?, class="cursos css?, class="cursos javascript?. A vantagem disso, é que a class="cursos? é comum a todos eles e no CSS podemos fazer facilmente um destaque naquele item de menu - se estivermos dentro de um dos filhos. Mais uma vez, levamos o poder do CSS à outro nível!
Tendo a CLASS HTML, CSS e sabendo que cada página interna terá somente um título H1, podemos, por exemplo, fazer o H1 ser azul na página de HTML, ser vermelho na página de CSS e ser de qualquer outra cor por padrão, nas páginas em que não definirmos nada.
view plaincopy to clipboardprint?
.html h1 { color: #00f; }
.css h1 { color: #f00; }
h1 { color: #000; }
A grande sacada disso é não precisarmos adicionar nada mais no HTML, além das respectivas classes no body.
O body é pai de todo mundo
Conhecendo o efeito cascata do CSS e sabendo que tudo o que o visitante verá está dentro do body do documento, é melhor usar a herança do CSS para definir os padrões do site, como:
view plaincopy to clipboardprint?
body { font-size: 12px; font-family: Tahoma, sans-serif; color: #333; }
E por que o body? Porque todos os elementos posteriores herdarão dele e isso tudo com uma especificidade bem baixa. Então, não precisamos brigar para sobrescrever estilos.
Deve ter ficado implícito, mas quero ressaltar com uma ressalva: todos os elementos, menos os de formulário. Por algum motivo que desconheço, input, select e textarea, não herdam ?naturalmente? as definições de fonte declaradas no body.
view plaincopy to clipboardprint?
body, input, select, textarea {
font-size: 12px; font-family: Tahoma, sans-serif; color: #333;
}
Com isso, cobrimos todas as tags e não estragamos as definições padrões, como: <small> terá uma fonte menor que o body e <h1> continua com uma fonte maior. Por esse motivo que não uso o seletor global * para esse trabalho. Ele aplica a todos os elementos, mas de forma ?forçada?; elemento por elemento. E não por herança como ocorre quando trabalhamos com o body.A ideia é brigarmos menos com nós mesmos. E só sobrescrever poucas propriedades. Isso é ótimo por uma outra questão: não corremos o risco de ?esquecer? de alguma tag, visto que com uma declaração simples, e aproveitando a herança do CSS, nós a atingimos. Por este motivo não gosto daqueles CSS resets gigantescos e milagrosos - entretanto isso é assunto para um próximo artigp.
O body aceita CSS
Sabe aquele fundo do topo com degradê e aquela linha do header que vai de uma ponta a outra do browser? Então, aplica como background do body. Simples assim! Descartamos a necessidade de um #wrap_header, e jogamos em uma só imagem como background do body, pois ele mesmo já tem de graça para gente, 100% de largura da viewport.
Esse é apenas um exemplo para tentar ?abrir? a mente. As possibilidades são muitas. Às vezes, precisamos rever coisas ?óbvias? ou ?básicas?, pois podem fazer coisas impressionantes.
http://imasters.com.br/artigo/23749/css/elemento-html-body-como-aproveita-lo-melhor
Carregando comentários...