CSS: Introdução
CSS:
introdução
(Elivelto Ebermam)
A linguagem de marcação de hipertextos (HTML) é usada na
construção da estrutura básica das páginas Web. Já as folhas de estilo em
cascata (do inglês: cascading style sheets, abreviado por CSS) são um mecanismo
para adicionar estilo (como fontes, cores, espaçamentos) ao documento web [1].
Popularmente falando, a função do CSS é deixar as páginas web bonitas.
A sintaxe do CSS é diferente do HTML, ou seja, a forma de
escrever é um pouco diferente.
Código CSS
No CSS escrevemos regras, e essas regras dizem como que os
elementos HTML serão mostrados na página. Veja um exemplo:
Agora vamos detalhar um pouco mais:
O primeiro elemento de uma regra CSS é o seletor. O seletor é o
elemento que queremos aplicar a regra. No exemplo o nome do elemento é p, e p é
usado para parágrafo lá no HTML (tag <p> lembra?). Assim a regra será
aplicado aos parágrafos da página web.
Depois fazemos a declaração da regra. A declaração da regra
inicia com a abertura de chave { e termina com o fechamento de chave }.
Entre as chaves definimos as propriedades dos seletores e seus
respectivos valores. No exemplo temos a propriedade font-family, que define
qual fonte deverá ser utilizada. Depois do nome da propriedade devemos colocar
dois pontos (:) e a seguir colocar o valor da propriedade. Nesse caso o valor
da propriedade é Arial, que se refere a fonte arial. Para finalizar a
propriedade usamos ponto e vírgula (;). Podemos
continuar escrevendo propriedades e seus valores. No exemplo também escrevemos
outra propriedade: color. Esse propriedade define a cor da fonte (cor da
letra), e nesse caso foi utilizado o valor blue, que é usado para a cor azul.
Assim essa regra diz que os parágrafos terão fonte arial e cor azul.
Mas onde eu escrevo o código CSS?
Como foi dito, o CSS adiciona estilo as páginas web, que são as
páginas HTML. Então esse código CSS tem que estar vinculado ao documento HTML.
Existem três formas de fazer essa vinculação: interna, externa e em linha. A
forma mais apropriada é a externa, pois pode-se elaborar um arquivo CSS e
aproveitá-lo para diversas páginas web diferentes. Entretanto, como estamos
construindo os exemplos em um editor online, não é possível usar a vinculação
externa. Assim, usaremos a vinculação interna.
Vinculação externa
Nesse tipo de vinculação, o HTML e CSS são construídos em
arquivos diferentes. Para vincular o CSS ao HTML, temos que adicionar uma linha
dentro do cabeçalho (tag <head>) do arquivo HTML. Veja:
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
A única coisa que modificamos é o valor de
href. No exemplo o valor é “estilo.css”, isso significa que a página web irá
buscar as regras CSS no arquivo estilo.css. Se você nomeou seu arquivo CSS como
exemplo.css, você terá que alterar o valor de href para “exemplo.css” no
arquivo HTML.
Vamos construir um exemplo com dois
arquivos: exemplo.html e estilo.css :
A esquerda está o arquivo HTML e a direita
está o arquivo CSS.
Como foi dito, a vantagem desse tipo de
vinculação é que pode-se reaproveitar as regras do arquivo CSS para vários
documentos HTML, para isso é necessário apenas adicionar uma linha dentro de
head do documento.
Vinculação interna
Na vinculação interna, como o nome já diz,
escrevemos o código CSS no próprio documento HTML, mais especificamente, dentro
do head. Entretanto, para isso devemos utilizar a tag <style>, veja:
Note que, a forma de
escrever o código CSS é o mesma, não importa se ele está dentro do arquivo HTML
ou em um arquivo CSS separado. A diferença é que na vinculação interna o código
CSS será escrito dentro da tag <style> .
Vinculação em linha
Na vinculação externa e
interna, uma regra para parágrafo vale para todos os parágrafos da página. Isso
também ocorre para os demais elementos: uma regra para h1 vale para todos os
títulos de nível 1 da página web e assim por diante. Porém, isso não é válido
na vinculação em linha: se você quiser que a letra do parágrafo seja azul, você
terá que escrever a regra CSS em todos os parágrafos.
A vinculação em linha ocorre
como um atributo das tags no HTML, chamado style, veja:
No exemplo, no primeiro
parágrafo aplicamos uma regra CSS para deixar a letra laranja. A regra CSS está
no valor do atributo style:
style="color : orange;"
Note que não é necessário
escrever o nome do seletor e nem chaves {}, como era usado nos exemplos
anteriores.
#muitobom
ResponderExcluir#melhorprofessor