Antes de pensar em começar a escrever qualquer linha de código é necessário analisar e definir as principais áreas da página que será feita. Para isso é importante ter em mente que o HTML é exibido no navegador de acordo com a ordem de leitura do idioma da página. Por exemplo, ao lermos qualquer texto em português, começamos a ler de cima para baixo, atacando cada linha da esquerda para direita. Funciona igual para os navegadores, lembrando que existem elementos que são renderizados em bloco, ou seja, ocupam toda a largura da página, e elementos renderizados em linha, que ocupam somente o espaço do seu conteúdo.
Antes do HTML5 seria normal definirmos as seções do nosso layout por meio de várias <div> representando o rodapé ou a parte de conteúdo da nossa página. Porém, com o HTML5, podemos utilizar algumas tags próprias, separando assim nossa página em <header>, <section> e <footer>.
Além de facilitar o entendimento e a manutenção do documento, esse tipo de marcação é útil pois auxilia os sistemas de busca presentes na WEB hoje (Google, Yahoo!, Bing, etc) a entender melhor a estrutura da página, melhorando assim a indexação da mesma, sendo considerado uma técnica crítica para o Marketing Digital.
Sabendo disso, podemos utilizar então a tag <header> para o cabeçalho de nossa página, a tag <footer> para o rodapé e a tag <section> para o conteúdo. A tag <nav> pode ser utilizada para blocos de navegação primários, como por exemplo, uma listagem de ícones ou links.
Uma tag que carrega um valor semântico muito forte é a tag <h1>, responsável pelo título/logo da página. Ela é utilizada pelos sistemas de busca, que associam a página em questão com o que estiver contido nessa tag. Seria comum pensarmos em associar essa tag com algum texto, porém um logo tem um apelo visual muito mais forte. Mas isso, teoricamente, atrapalharia essa associação correto? De certa forma sim, mas existem maneiras de contornar esse "problema": substituir por uma imagem!
Note que ao utilizar a tag <img> não seria necessário nenhuma implementação extra, visto que a mesma possui um atributo denominado alt=, que fica responsável por renderizar um texto alternativo caso a imagem não esteja disponível ou quando a página é acessada por um cliente não visual.
Como esse não é o caso da tag <h1>, iremos ter que acertar o tamanho do elemento para o tamanho do nosso logo, inserir o logo em si e esconder o texto do título. Para esconder o texto podemos utilizar um atributo denominado text-indent com um valor negativo muito alto, fazendo com que o texto seja assim renderizado "fora dos limites da tela". Dessa forma, o CSS do nosso <h1> ficaria dessa forma:
header h1 {
/* aqui iremos colocar o tamanho do elemento h1 igual ao tamanho da imagem */
height: 100px;
width: 225px;
/* agora iremos inserir a imagem como plano de fundo do elemento h1 */
background-image: url(logo.png);
/* por fim iremos esconder o texto */
text-indent: -9999px;
}
Podemos utilizar 2 seletores no nosso CSS para nos ajudar a estilizar a página: class e id. A diferença básica entre um e outro é que o id deve ser único por página, ou seja, nenhum outro elemento da nossa página inteira pode possuir o mesmo valor para esse atributo, enquanto que class pode ser repetida em todos os elementos da página caso desejar. Dessa forma, utilizando class podemos reutilizar o código com muito mais facilidade.
Quando nenhum estilo é especificado para os elementos HTML o navegador acaba por utilizar diversos estilos padrões, que são diferentes de navegador para navegador. Isso pode acarretar problemas ao longo do tempo, visto que algumas inconsistências de layout podem surgir entre diferentes navegadores.
Para que esse tipo de problema não ocorra foram criados alguns estilos base chamados de CSS Reset, que consistem em definir um valor básico para todas as características do CSS, substituindo os valores padrões do navegador. Segue uma lista com alguns CSS Reset de maior destaque:
Alguns elementos do HTML são do tipo block, enquanto outros são do tipo inline. Porém, algumas vezes pode ser interessante e necessário utilizar esses elementos com uma renderização diferente. Para isso, basta utilizarmos o atributo display no arquivo de CSS. Pegando por exemplo o elemento <li>de uma <ul>, podemos definir:
ul li {
display: inline;
}
Ë possível utilizar propriedades de coordenada para posicionar um elemento na página, como por exemplo, top, bottom e right. Mas para que elas funcionem é necessário acrescentar um atributo ao elemento: position. Esse atributo ainda pode receber alguns valores, como static, relative, absolute ou fixed.
Um elemento com posição static permanece sempre em seu local de origem dentro da página, ou seja, caso sejam utilizadas as propriedades de coordenada elas não serão respeitadas.
Para que as coordenadas sejam utilizadas basta que o valor relative seja passado. Com isso, o posicionamento será obedecido em relação à posição original do elemento na página. Por exemplo:
.elemento {
position: relative;
top: 100px;
left: 50px;
}
O elemento terá acrescentado ao seu topo 100px e 50px acrescentados à esquerda, o que fará com que o elemento seja renderizado mais para baixo e para direita.
O valor absolute é um pouco mais complexo. Atua de forma semelhante ao relative, porém, seu posicionamento só utiliza como parâmetro o posicionamento na página caso nenhum elemento que seja seu pai na estrutura do HTML possua algum posicionamento diferente de static. Caso algum elemento pai possua, por exemplo, position: relative;, o posicionamento do elemento com o valor absolute será determinado com base no posicionamento desse elemento pai.
O último valor sempre vai utilizar como referência a porção visual do documento no navegador, e irá manter essa posição mesmo que ocorra alguma rolagem na tela, sendo assim uma propriedade essencial para assegurar que algo será sempre visto.
Existe um elemento em HTML responsável por capturar os dados inseridos pelo usuário e submeter os mesmos a algum serviço da internet: <form>.
Os dados são passados para o <form> por meio da tag <input>, que é definida pela propriedade type. Os valores de type podem ser: search, utilizado na captura de dados, submit, um botão para submeter os dados e image, que possui a mesma funcionalidade de submit, porém é possível utilizar a imagem que desejar em vez de um botão.
Podemos deslocar elementos ao longo da página os mantendo alinhados da forma que for necessária utilizando float: left; ou float:right; por exemplo, o que deslocaria nosso elemento para esquerda ou para a direita, fazendo o mesmo "flutuar".
Porém, supondo que seja necessário alinhar 2 elementos na parte esquerda da página, o primeiro elemento funcionaria perfeitamente, porém o segundo, mesmo que float: left; esteja declarado, ficará do lado direito desse elemento. Para resolver esse impasse utilizamos a propriedade clear.
Caso um elemento possua o atributo clear: left; definido, estará sendo indicado que nenhum elemento que possua o atributo float é permitido na esquerda desse elemento, fazendo com que o elemento que possua clear definido seja renderizado na linha seguinte caso a condição seja verdadeira. Dessa forma, clear só pode receber dois valores: left e right.
Por meio do CSS podemos transformar e decorar um texto. A propriedade text-transformé responsável por essas mudanças. Seus valores possíveis são:
-
uppercase - Todas as letras ficam em maiúsculo.
-
lowercase - Todas as letras ficam em minúsculo.
-
capitalize - Apenas a primeira letra de cada palavra fica em maiúsculo.
O navegador adiciona algumas decorações para nossos textos, como por exemplo, os links sublinhados. É possível remover tais decorações como no exemplo:
.elemento_sem_decoracao {
text-decoration: none;
}
Além de none é possível passar como valor: underline, o padrão dos links sublinhados, overline, uma linha em cima do texto, line-through, uma risca no meio do texto e blink, onde o texto fica piscando.
Algumas propriedades são passadas de pai para filho, em cascata, como por exemplo:
<div id="praia_grande">
<h1>Eu moro em Praia Grande</h1>
<h2>Meus amigos viajam para Praia Grande apenas no verão</h2>
</div>
#praia_grande {
color: red;
}
No exemplo, os 2 títulos irão herdar a cor vermelha da <div> pai. Geralmente, as propriedades não herdadas são as que afetam o box do elemento, como width, margin e padding.
Porém, essa situação é contornada caso a propriedade em que a herança seja necessária receba o valor inherit. Por exemplo, caso um elemento necessite herdar a margem de seu pai, podemos utilizar margin: inherit;.
Algumas vezes iremos precisar modificar a forma como alguns elementos são renderizados, por exemplo, alterando o seu display para inline. Porém, algumas propriedades como width e height só funcionam se o elemento for renderizado no formato block. E se, em algumas dessas vezes necessitarmos renderizar, por exemplo, uma licomo inline, mantendo tais atributos? Para isso o HTML nos fornece a opção display: inline-block, que manterá o o elemento em linha e fará uso das propriedades específicas de um elemento renderizado como block.
Além dos seletores de classe, ide tag, o CSS possui seletores mais avançados, como:
input[value] {
color: red;
}
O seletor acima atua sobre todos os elementos <input> que contenham o atributo "value", alterando sua cor para vermelho. É possível também atuar sobre um valor específico do atributo, como por exemplo, input[type="text"].
span[class|="informativo"] {
color: green;
}
Já o seletor acima atua em todas os <span> na qual o atributo class comece com a palavra "informativo" seguido de um hífen e qualquer outro valor logo após, como por exemplo, "informativo-compras" ou "informativo-vendas". Também é possível buscar uma palavra em específico apenas, procurando a mesma em todo o conteúdo da tag, como por exemplo, input[value~="efetivadas"].
Utilizando CSS3 podemos fazer uso de outros operadores com sinais que lembram expressões regulares, como por exemplo:
/* busca inputs com valor "nome" começando com "cliente" */
input[nomeˆ="cliente"]
/* busca inputs com valor "nome" terminando com "efetivadas" */
input[nome$="efetivadas"]
/* busca inputs com valor "nome" contendo "vendas" em qualquer posição */
input[nome*="vendas"]
É possível fazer com que a versão 8 do IE seja capaz de lidar com as tags únicas do HTML5. Para isso basta fazer o download de um hack denominado html5shiv. É possível ainda carregar o código diretamente. Basta adicionar no header da página:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->