Olá novamente! Estou de volta e hoje falaremos um pouco sobre Folhas de estilos ou Style sheets (ou Cascade style sheets, isto é, em cascata), como são conhecidas originalmente. Elas são utilizadas para formatar o HTML diferentemente da forma antiga, as quais as tags tinham o domínio desta função.
Existem diversos motivos para se utilizar as folhas de estilo, segue alguns:
- Maior controle do resultado apresentado;
- Maior versatilidade na formatação;
- Redução do esforço de criação e manutenção de sites web;
- Páginas mais velozes
Adicionando Style sheets ao HTML
Existem três formas de se utilizar folhas de estilos:
- Estilo In-line: São modificações das tags diretamente na tag HTML em questão. Por exemplo: <h2 style="margin:0px;font-size:12pt">Teste de margem zero</h2>
- Estilo incorporado: Apresenta seus códigoas dentro da página mas são agrupados dentro da tag <HEAD>...</HEAD> em uma tag própria para isso. Esta tag própria chama-se <STYLE>...</STYLE>. Note que dentro da tag STYLE haverá apenas definições de CSS. Desta forma é importante dizer a tag STYLE que o código descrito ali é um tipo de texto que será interpretado como CSS. Logo teremos o seguinte código como exemplo:
[...]
<HEAD>
<STYLE type="text/css">
H2{
Margin:0px;
Font-size:12pt;
}
</STYLE>
</HEAD>
[...]
- Estilo vinculado: O estilo vinculado quer dizer que as definições de estilo não estão dentro do arquivo atual, mas sim em outro arquivo criado apenas para executar esta função. Estes arquivos devem possuir a extensão ".CSS" – (cascade style sheet). Além disso, é necessário que o arquivo HTML tenha alguma referência do arquivo de estilos criado externamente. A tag <LINK> poderá fazer esta ligação entre eles.Veja o exemplo:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
Os estilos são escritos da mesma forma que o incorporado.
Cascading order
Quem manda em quem!? Se eu criar uma definição in-line e em seguida criar uma vinculada quem vai ser exibida, a in-line ou a vinculada?
Bem, segundo as especificações da W3C (órgão que regulamenta os padrões de programação para WEB) foi definida a ordem de precedência para o caso de definições simultâneas para evitar um possível conflito. Desta forma temos o que se segue:
- Os estilos In-line possuem preferência sobre os demais seguidos pelos...
- ...estilos Incorporados e por ultimo os...
- ...estilos Vinculados.
Usando CSS
Para se definir um estilo precisamos declarar um atributo para chamar a definição. Para isso existem três formas.
- Usando o nome da tag. Nesta declaração você indica que TODAS as tags HTML com este mesmo nome sofrerão a tal mudança. Exemplo: H2 {font-size:8pt;} Partindo do pressuposto que estamos declarando estilos no padrão Vinculado, isto significa que todas as tags H2 encontradas neste arquivo (ou outros desde que esteja linkado ao arquivo da definição CSS) serão afetadas.
- Usando o nome da CLASS. Neste exemplo uma tag declarada no HTML deverá possuir um atributo CLASS com um nome referenciando um estilo. Exemplo: <span class='textoAzul'>...</span>. O valor "TextoAzul", se houver referência para este atributo no arquivo css, adotará as definições ali definidas. Isso servirá para todas as outras Tags com esta declaração de class. A declaração, entretanto deve ser antecedida por um ponto na implementação da definição, o que mostra que o estilo foi referenciado no atributo class. Exemplo:
.textoAzul{
color:blue;
}
Note o ponto antes do nome do Class.
- Usando o ID como referência. Neste caso o estilo utiliza como definição o ID de uma tag HTML. Contudo na implementação devemos usar o símbolo "#" para antecipar o ID. Imagine a tag <DIV ID="topo">...</DIV>. Neste contexto, poderíamos implementar a seguinte definição:
#topo{
Background-color: #C0C0C0;
Color: #000000;
}
Isto significa que a tag DIV com aquele ID (ou outras tags desde que possuam o mesmo ID) terá como exibição, a implementação do código referenciado no arquivo css.
Unidades
Em Style sheets podemos usar valores em muitas medidas, inclusive em porcentagem. A tabela abaixo poderá dar algumas dicas:
Medida | Significado |
In | Polegadas |
em | Altura da fonte do elemento |
cm | Centímetros |
Pc | Picas |
Pt | Pontos (use para as fontes, como no word) |
Px | Pixels (o mais utilizado) |
% | Porcentagem |
As cores podem ser utilizadas de três maneiras: empregando o seu nome em inglês, valor hexadecimal ou em RGB. Veja os exemplos de uso de cores:
Nome em inglês:
Color: green;
Hexadecimal:
Color: #00FFFF;
RGB:
Color: rgb(255,0,0);
Finalizando
Não iremos tratar das propriedades das folhas de estilo hoje. Mas já deu pra se ter o gostinho de seu uso. Gostaria de ressaltar aqui a importância do profissional conhecer sobre esta tecnologia. Lembro que o nas buscas por profissionais do ramo, principalmente nas entrevistas, elas são cobradas. Logo, é um diferencial saber utilizá-las mesmo que só profissionalmente.
Em uma próxima oportunidade falaremos mais sobre CSS, ok?
Abraços e não deixem de comentar!
Nenhum comentário:
Postar um comentário