Visão Geral CSS
O que é
Um Pouco de História
A princípio, estilizar e formatar as páginas HTML não era a intenção primordial dos desenvolvedores, até que essa linguagem expandiu-se e tornou-se popular e então foram incluídas algumas qualidades nela, dentre elas, a possibilidade de alterar algumas aparências para o documentos (entenda atributos de algumas tags), porém isto tornava o código complexo e não tinha o mesmo comportamento em todos navegadores.
Pensando nessa questão, Håkon Wium Lie resolveu propor uma solução por meio da criação do CSS (Cascading Style Sheets), juntamente com Bert Bos, que foi convidado pelo primeiro a participar do projeto, iniciado em 1994. Apresentaram sua proposta em 95 a W3C, que se interessou e criou uma equipe para trabalhar com a dupla.
Finalmente, em 96 temos a primeira recomendação do CSS, que foi aperfeiçoado e teve sua segunda recomendação em 98. E atualmente está sendo desenvolvida sua terceira versão.
Bert Bos e Håkon Wium Lie , respectivamente
Benefícios de Sua Utilização
Podemos dizer que a desvantagem de utilizar CSS é nenhuma, isso mesmo, além de possibilitar a padronização do projeto, também auxilia na manutenção das páginas, já que é possível alterar a aparência de todo o site em apenas um documento de estilo, mas isso será abordado a seguir.
Formas de Utilização
Existem três formas de implementar o CSS, porém a mais utilizada e sugerida é a externa, começaremos por ela:
Externa: Toda a formatação é feita num arquivo separado, salvo com a extensão .css, que deve ser linkado no head da página, exemplo:
Embutido: Maneira raramente utilizada, exceto para fins didáticos, em que o estilo fica dentro da página HTML, na tag <style>, entre <head> e </head>, por exemplo:
<head>
<style type="text/css">
p {color:#222;font-family:Arial;}
</style>
</head>
Inline: Também utilizada apenas para fins didáticos, a formatação é feita nas tags, por meio do atributo style.
Texto
Tipos de Seletores
Podemos atribuir a formatação em três tipos de seletores:
Elemento HTML: como o próprio nome sugere, definimos aparência para as tags, por exemplo: Definir que todos os h1 serão vermelhos e em negrito: h1{color:#F00;font-weight:bold}
IDs: definimos um identificador especifico para cada elemento que queremos formatar, no arquivo CSS o indicamos com o # antes do nome de identificação, já no código fonte, definimos a identificação com id=nome do elemento. Exemplo:
No código: <div id=”retangulo_azul”></div>
Na folha de estilo: #retangulo_azul{width:100px;height:75px;background-color:#00F}
Classes: seletor utilizado quando queremos formatar vários elementos que pertençam a mesma classe, ou seja, possuem algo em comum. No código definimos a classe por meio do atributo class seguido do nome da classe e no arquivo CSS inserimos . seguido do nome da classe:
No código: <p class=”texto_comunicados”>COMUNICADO!</p>
No CSS: .texto_comunicados{color:#CF0;text-align:center;font-weight:bold}
COMUNICADO!
Sintaxe
Comentários: são usados para explicar o código de forma a auxiliar numa futura manutenção. É inserido entre /* e */, e são ignorados pelo browser. Um comentário pode ser inserido em qualquer parte do código, ocupando uma linha ou mais. Também pode ser inserido em qualquer linha que componha uma regra CSS.
Regras CSS: as regras CSS são constituídas de três elementos: o seletor (já visto no tópico anterior), a propriedade do seletor e seu valor, e devem ser declarados da seguinte forma:
Obs.:Quando tivermos mais de um seletor que receberá a mesma formatação, podemos declarar a mesma regra para eles, separando-os por vírgulas.
Sempre que tivermos mais de uma propriedade, devemos separá-las por ponto e virgula.
Unidades
No CSS, quando falamos de unidades de medida, estamos nos referindo a medidas na horizontal e vertical, positivas (+) ou negativas (-), apresentadas nas formas relativa, absoluta ou em porcentagem.
Relativas: mais apropriadas para desenvolvimento de sites responsivos, são unidades cujo valor depende de outra medida. Tipos:
-px (pixel): o valor apresentado será relativo à resolução da tela do dispositivo em que a página será renderizada (desktop, smartphone, tablets, etc).
-em: o valor é relativo ao tamanho da fonte do seletor em que ele foi declarado. Por exemplo:
Neste exemplo podemos perceber que a altura da linha será equivalente a 28pt e a margem interna será 21pt, já que 1em é equivalente a 14pt.
Caso não seja declarado uma valor para fonte em nenhum momento, é adotado o valor padrão dos browsers para 1em = 16px.
-ex: valor relativo a altura da letra ‘x’ minúscula da fonte herdada, caso não haja propriedade de fonte no seletor, o valor é herdado do elemento parente.
Absolutas: unidades que não dependem de outras medidas nem são herdadas, cujos valores também são usados fora da Web e definidos pelo Sistema Internacional de Medidas. Essas unidades são:
- in (polegada ou inch): 1in = 2,54cm;
- cm (centímetro);
- mm (milímetro): 1mm = 0,1cm;
- pt (ponto ou point): 1pt = 1/72in;
- pc (paica ou pica): 1pc = 12pt;
Porcentagem: essa unidade é exibida de acordo com um valor estabelecido antes, seja no mesmo elemento em que é utilizada ou então num elemento pai. Exemplo:
#geral {width:900px;height:700px}
#cabecalho {height:20%}
Pode-se deduzir que a altura ocupada pelo #cabecalho será aproximadamente 180px, já que sua porcentagem é relativa ao #geral.
Obs.: Para que a porcentagem seja apresentada corretamente, os elementos devem estar relacionados corretamente no código, por exemplo: no código do exemplo acima, o #cabecalho (header ou div) deve estar dentro do #geral (section ou div).
Comentários
Postar um comentário