Visão Geral do CSS
O que é CSS – benefícios de utilização
CSS significa Cascade Style Sheet (Folha de Estilo em Cascata)...
O CSS é uma linguagem de estilos para layout de paginas de HTML, O CSS é responsável pela personalização, nele podemos alterar cor, fonte, tamanho, bordas e etc… dentro das paginas de html.
Antigamente os estilos eram escritos nas tags do html. Imagine só, você é um Web Master (Era assim que era chamado as pessoas que mexiam com sites), você havia feito 50 paginas html para uma empresa, todas com a mesma fonte, mesma cor de fundo e de texto. Pensou? Muito trabalho não? Mesmo que seja o ctrl + c e ctrl + v, fazer isso 50 vezes é muito maçante.
Então foi ai que Håkon Wium Lie em 1994 propôs a criação do CSS, onde trabalhou junto com Tim Berners-Lee e Robert Cailliau.
Com a invenção (ou mais um achado) o CSS veio em 17 Dezembro de 1996. Ai quebrou o galho, voltemos ao pensamento anterior, você um Web Master tem que fazer 50 paginas html, com a mesma fonte, mesma cor de fundo e de texto, porém não é mais necessário editar pagina a pagina, não, agora basta criar uma folha de estilo em cascata (CSS), adicionar esta linha dentro das tags <head></head>, <link rel=”stylesheet” type=”text/css” href=”estilo.css”> ficando desda maneira:
Código:
|
|
1
2
3
4
5
|
<head>
...
<link rel="stylesheet" type="text/css" href="estilo.css">
...
</head>
|
Formas de utilização (externo, embutido, inline)
As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas:
- Importadas ou linkadas;
- Incorporadas;
- Inline.
Folha de estilo externa
Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).
O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir .
1
2
3
| ... <link href="estilo.css" rel="stylesheet" type="text/css" />... |
A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada a seguir.
1
2
3
4
5
6
7
| <head>...<style type="text/css"> @import url("estilo.css");</style> ... </head> |
O navegador “lerá” as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas.
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser gravadas com uma extensão .css
Folha de estilo incorporada ou interna
Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.
Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.
As regras de estilo incorporadas e válidas para o documento, são declaradas na seção head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
| <head>...<style type="text/css"><!--body { background: #000; url(imagens/minhaimagem.gif); }h3 { color: #f00; }p { margin-left: 15px; padding:1.5em; }--></style>...</head> |
O navegador “lerá” as regras de estilo na própria página, e formatará o documento de acordo com elas.
Nota: Um navegador ignora normalmente as tags desconhecidas. Isto significa que um navegador antigo que não suporte estilos, ignorará a tag <style>, mas o conteúdo da tag será mostrado na tela. É possível impedir que um navegador antigo mostre o conteúdo da tag, “escondendo-o” através do uso da marcação de comentário do HTML.
Observe a inclusão dos símbolos <!— (abre comentário) —> (fecha comentário) no código acima. Nos dias atuais mesmo os navegadores mais antigos ainda em uso suportam CSS e a prática de se marcar regras de estilo com sinais de comentário HTML está em desuso.
Folha de estilo inline
Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style.
Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento.
A sintaxe para aplicar estilo inline é mostrada a seguir:
1
2
3
| <p style="color:#000; margin: 5px;"> Aqui um parágrafo de cor preta e com 5px nas 4 margens.</p> |
Folhas de estilo múltiplas
Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica.
Suponha, uma folha de estilo externa com as seguintes declarações para o seletor h2:
1
2
3
4
5
| h2 {color: #fc0;text-align: center;font: italic 9pt Verdana, Sans-serif;} |
e, uma folha de estilo interna com as seguintes propriedades para o seletor h2:
1
2
3
4
5
| h2 {color: #fc0;text-align: center;font: italic 10pt Verdana, Sans-serif;} |
Estando ambas as folhas vinculadas ao documento há um conflito no tamanho da fonte para o elemento h2. e Sendo a folha interna declarada depois da externa na seção head do documento, prevalecerá a folha interna e a fonte de h2 terá o tamanho igual a 10 pt.
Retirado de : : Maujor Tutorial CSS – Maneiras de vincular CSS à documentos
Nenhum comentário:
Postar um comentário