Este documento descreve vários elementos de CSS, incluindo:
1) Como incluir estilos CSS em um documento HTML de três formas - inline, embutida ou como arquivo externo.
2) A ordem de precedência da "cascata" de estilos CSS.
3) Diferentes tipos de seletores CSS como elementos, IDs, classes, grupos e descendentes.
4. CSS
atualmente: organização em “modelos”
Desenvolvidos de forma independente mas complementam-se!
(X)HTML CSS JavaScript
estrutura /
apresentação comportamento
conteúdo
5. CSS
introdução
O HTML é usado para estruturar conteúdos. CSS é usado para formatar
conteúdos estruturados.
CSS veio revolucionar o mundo do web design. Os benefícios concretos do
uso de CSS incluem:
• controle do layout de vários documentos a partir de uma simples folha de
estilos;
• aplicação de diferentes layouts para servir diferentes suportes (ecrã,
impressora, PDA, smartphone...);
• maior velocidade de carregamento;
• maior acessibilidade e interoperabilidade;
7. CSS
definições
as definições de CSS permitem-nos separar a estrutura da forma de um
documento (X)HTML.
O (X)HTML é usado para definir a estrutura através das tags mas toda a
formatação (fontes, cores, imagens de fundo, molduras, links, formatação do texto,
etc.) é realizada pelas definições de CSS.
Um ficheiro de CSS não é mais do que um conjunto de definições várias
(embebidas na head do documento ou num ficheiro externo).
8. CSS
inclusão dos estilos no documento HTML
a CSS pode ser incluída num documento HTML de três formas: inline, embebida
ou como ficheiro externo.
9. CSS
inclusão dos estilos no documento | CSS inline
esta é a forma mais antiga, ainda do tempo da utilização das tabelas como
elemento de estrutura do HTML. Neste caso a definição é escrita juntamente com
o código HTML.
<p style="text-align: left"> texto bla bla bla</p>
10. CSS
inclusão dos estilos no documento | CSS embebida
desta forma colocamos o código dentro <head>
da HEAD da página HTML a que
<style type="text/css">
queremos aplicar a CSS. <!--
Com este método os estilos são body {
aplicados só à página onde estão margin: 0;
padding: 0;
colocados. text-align: center;
background-color: #333333;
Não é uma boa solução para aplicar a }
um site dado que se quisermos mudar a
-->
CSS temos que mudar página a página. </style>
</head>
11. CSS
inclusão dos estilos no documento | CSS externa
o ficheiro .css é criado externamente ao ficheiro nomedoficheiro.css
HTML. Só temos que fazer a ligação do
<style type="text/css">
CSS ao HTML com um link na head <!--
<head> body {
<link rel="stylesheet" type="text/css" href="…/ margin: 0;
css/nomedoficheiro.css"/> padding: 0;
</head> text-align: center;
background-color: #333333;
}
Ou podemos fazer a importação do
-->
ficheiro CSS </style>
<style type="text/css">
@import url (http://...../nomedoficheiro.css)
</style>
12. CSS
inclusão dos estilos no documento | CSS externa
qualquer destes métodos é realizado colocando a instrução de link ou importação
na head do HTML.
Usando um ficheiro externo todas as páginas HTML ligam-se a um ficheiro CSS.
Isto significa que, se for preciso alterar formatação do site só temos que alterar um
ficheiro CSS, e não mudar todas as páginas HTML, uma a uma.
Logo:
• A manutenção é mais fácil;
• O tamanho é reduzido;
• A largura de banda é reduzida;
• A flexibilidade é melhorada.
A forma mais usada é a CSS externa. No entanto, é possível ter num mesmo
documento HTML as três formas, ou seja, inline, embebida e externa. É, no
entanto, preciso ter em atenção a ordem de leituras dos vários estilos e a
implicação que têm uns com os outros.
13. CSS
a ordem da “cascata” | leitura
como sabemos um documento HTML pode conter definições CSS inline,
embebidas e externas. Ora quando coexistem num mesmo documento poderá
haver conflitos o que pode originar situações anómalas e renders estranhos do
documento HTML.
Leitura:
A ordem de leitura destes estilos, quando em simultâneo num HTML, é a seguinte:
1. CSS existente no browser
2. CSS externa
3. CSS embebida
4. CSS inline
14. CSS
a ordem da “cascata” | a cascata
quando existe mais do que um estilo num documento HTML, estes funcionam em
cascata numa folha de estilo virtual com a ordem acima descrita.
A última regra da cascata é a que tem prioridade.
A ordem de prioridade é a seguinte:
1. Inline
2. CSS embebida
3. CSS externa
4. CSS do browser
Isto quer dizer que em caso de regras iguais com valores diferentes a inline
sobrepõe-se à embebida e esta à externa.
É importante saber que mesmo quando existem duas declarações iguais na
mesma css, a última regra da lista das declarações é a que prevalece. É, também,
importante a posição das folhas de estilo na head do HTML, a ultima folha CSS na
ordem do HTML é a que tem predominância.
15. CSS
a ordem da “cascata” | a cascata | inerência
propriedades e valores em tags parent têm inerência sobre as child tags (é como
na vida real!)
Quando um selector está ligado por uma relação de parentesco a outro ou está
contido nele, assume as propriedades do selector onde está contido.
Se, por exemplo, declararmos no selector body a property font-family todo o texto
da página HTML vai assumir esta propriedade.
16. CSS
a ordem da “cascata” | a cascata | inerência por exemplos
body {font-family: Verdana, serif;}
se quisermos outro estilo dentro do HTML temos que o realizar pelas respectivos
selectores. Por exemplo:
h1 {font-family: Georgia, serif;}
p {font-family: Tahoma, sans-serif;}
Agora as tags <h1> terão a fonte Georgia e não Verdana anteriormente declarada
na tag body.
Mas se declararmos
h1 {font-size: 12px;}
a fonte seria Verdana, a font declarada na tag body.
Por inerência uma tag ganha o estilo da tag pai.
17. CSS
declaração de um estilo | os seletores
tal como o HTML usa tags, o CSS usa seletores.
O seletor referencia o elemento HTML que queremos formatar. A propriedade é
um atributo do selector que queremos formatar e o valor está intimamente
relacionado com a formatação do elemento.
Cada selector pode ter múltiplas propriedades; e cada propriedade tem valores
independentes.
body {
background: #eeeeee;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
Neste exemplo o body é o seletor; a definição é o conjunto das instruções
escritas entre as chavetas, background, é uma propriedade de body; #eeeeee é o
valor do background nesta definição.
18. CSS
declaração de um estilo | os seletores
a propriedade e o valor estão separados por dois pontos (:) e rodeados por
chavetas ({ }).
Quando um valor é constituído por mais que uma palavra, deve estar entre aspas.
Também podemos especificar mais do que uma propriedade na mesma
declaração. Para isto, devemos separar cada propriedade e o respectivo valor com
um ponto e virgula (;)
p{ text-align: center; color: black; font-family: arial }
19. CSS
declaração de um estilo | os seletores
dos tipos de seletores mais usados (não é uma lista completa) podemos referir
os seguintes:
• Element selectors
• ID selectors
• Class selectors
• Group selectors
• Descendent selectors
• Pseudo-class selectors
Estes tipos de seletores podem ser divididos em dois géneros: tipo e autor. O
primeiro diz respeito aos selectores que identificam os elementos de HTML, o
segundo pode ser criado pelo autor da CSS.
20. CSS
declaração de um estilo | os seletores
seletor
{
propriedade : valor ;
} declaração
21. CSS
declaração de um estilo | os seletores | element selectors
<p> <h1> <em> <span>, etc.
referenciam as tags HTML que formatam.
Por exemplo: o element selector corresponde à tag <h1>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
color: #333333;
}
22. CSS
declaração de um estilo | os seletores | element selectors
p a:link :visited :hover h1
{ { {
text-align:center; /*isto é um comentário...*/ color:black;
color:black; text-decoration:none; font-family:arial
font-family:arial color:black; }
} font-family:arial
}
23. CSS
declaração de um estilo | os seletores | ID selectors
definem-se com o sinal cardinal (#) e deve ser usado uma única vez em cada
documento HTML. Pode, no entanto, haver mais do que um seletor com o mesmo
ID, mas não está conforme as especificações da W3C. O documento pode ser
correctamente rendido pelo browser, mas não será validado.
Quando queremos usar vários seletores com o mesmo nome devemos usar classes
em vez de ID.
Os ID são muito usados para definir os elementos estruturais do documento HTML,
como é o caso das DIVs.
#caixa {
background-color: #FF9900;
margin: 0px;
padding: 5px;
float: left;
height: 300px;
width: 300px;
}
24. CSS
declaração de um estilo | os seletores | ID selectors
#tituloPrinc #hiperligacao #capa
{ { {
text-align:center; /*isto é um comentário...*/ color:black;
color:black; text-decoration:none; font-family:arial
font-family:arial color:black; }
} font-family:arial
}
<div id="capa"> a infografia em portugal </p>
25. CSS
declaração de um estilo | os seletores | class selectors
com os seletores de classe podemos definir diferentes estilos para o mesmo
tipo de elemento num documento HTML.
Por exemplo, podemos ter dois tipos de parágrafos no documento:
p .right {text-align: right}
p .left {text-align: left}
Os atributos de classe podem ser usados localmente (inline) no documento
HTML. Os selectores de classe devem começar com um ponto e podem ter o
nome que quisermos. Podemos usar várias vezes a mesma classe no mesmo
documento.
.imagem {
height: 300px;
width: 300px;
border: thin solid #333333;
margin: 20px;
}
26. CSS
declaração de um estilo | os seletores | class selectors
.tituloPrinc .hiperligacoes .capa
{ { {
text-align:center; /*isto é um comentário...*/ color:black;
color:black; text-decoration:none; font-family:arial
font-family:arial color:black; }
} font-family:arial
}
<p class="tituloPrinc"> atelier de multimédia </p>
...
<p class="tituloPrinc"> a infografia em portugal </p>
27. CSS
declaração de um estilo | os seletores | group selectors
é possível agrupar selectores e com isso reduzir o código. Os selectores agrupados
devem estar separados com vírgulas (,)
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
28. CSS
declaração de um estilo | os seletores | descendent selectors
podemos usar selectores descendentes. #lateral h1 {
font-family: Verdana, Arial,
É útil quando queremos formatar um
Helvetica, sans-serif;
determinado elemento dentro de um font-size: 0.97em;
contexto específico, ou só dentro de line-height: 1;
uma dada DIV. Deve existir um espaço font-weight: 900;
color: #FF6600;
entre os descent selectors. Neste }
exemplo estaríamos a formatar os h1
cujo ID fosse lateral.
Já se quisermos formatar o elemento h1 h1 {
para todo o documento, então font-family: Verdana, Arial,
Helvetica, sans-serif;
utilizariamos este exempo: font-size: 0.97em;
line-height: 1;
font-weight: 900;
color: #FF6600;
}
29. CSS
declaração de um estilo | os seletores | pseudo-class selectors
permitem definir o aspecto das hiperligações, sendo, portanto, os seletores
relevantes para o aspeto gráfico e manipulação da interface.
Diz-se que é uma pseudo-class, dado que o seu estado é variável por depender da
interação do utilizador. Devem seguir esta ordem: a: link, a: visited, a:hover,
a:active
Geralmente, para uma interação eficaz os seletores a e :visited, têm a mesma
definição e o :active é de pouca utilização. Portanto, são relevantes as definições
dos selectores a e :hover.
a, :visited { a:hover {
font-family: Arial, Helvetica, sans-serif; color: #FFF;
font-size: 0.9em; background-color: #666;
color: #000; }
text-decoration: none;
}
ex. ex.
http://esev.comze.com/demo/HTML/css/selectores.html http://esev.comze.com/demo/HTML/css/selectores.html
30. CSS
os comentários
os comentários CSS são uma forma prática de organizarmos código. Servem,
como o próprio nome indica, para inserir texto em forma de comentário que ajuda
o autor a relembrar a organização e a forma das definições ou para organizar o
documento CSS em partes lógicas.
São, também, extremamente úteis para partilhar código, permitindo que outra
pessoa compreenda o porquê daquela organização ou definição.
/*isto é um comentário CSS*/
31. CSS
definir a CSS de forma concisa
Quando criamos as regras de CSS podemos compactar o código.
Por exemplo esta definição:
.imagem {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}
pode ser escrita assim:
.imagem {
margin: 20px;
border: thin solid;
}
Isto permite-nos poupar tempo e permitir um render mais rápido do documento.
38. CSS
layout das páginas | tipos de layout
existem quatro tipos de layouts:
• Fixo (fixed)
• Elástico (elastic)
• Liquido (liquid)
• Hibrido (hybrid)
39. CSS
layout das páginas | tipos de layout | layout fixo
no layout fixo, as medidas são fixas, logo não existe alteração da estrutura da
página quando se muda de resolução e ou de dimensão do monitor.
http://esev.comze.com/demo/css/layout/layfixocentrado.html
40. CSS
layout das páginas | tipos de layout | layout elástico
o layout elástico, tem a aparência de um
layout fixo, mas aumentando ou
diminuindo a fonte o layout acompanha o
redimensionamento da fonte.
É um layout flexível porque é constituído
por unidades de medida relativas e a
largura é relativa à largura da fonte do
browser utilizado.
Temos sempre o mesmo número de linhas
e palavras se aumentarmos ou
diminuirmos o layout com a janela do
browser.
http://esev.comze.com/demo/css/layout/layelasticoocentrado.html
41. CSS
layout das páginas | tipos de layout | layout líquido
o layout liquido usa colunas em
percentagem.
Ao redimensionar a janela do browser o
layout adapta-se ao tamanho.
http://esev.comze.com/demo/css/layout/layliquidocentrado.html
42. CSS
layout das páginas | tipos de layout | layout híbrido
o layout hibrido, é uma
combinação do elástico e do
liquido.
Por exemplo, podemos ter o
conteúdo de uma DIV em ems
(font-size: 1 em;) e o conteúdo
de outra em percentagem (font-
size: 100%).
Logo, uma DIV vai manter
sempre a sua estrutura enquanto
que a outra vai adaptar-se face
ao redimensionamento da janela
do browser.
http://esev.comze.com/demo/css/layout/layhibrido.html
43. CSS
posicionamento
Existem quatro tipos de posicionamento possíveis para as DIVs:
• estático (static)
• relativo (relative)
• absoluto (absolute)
• fixo (fixed)
Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
44. CSS
posicionamento | estático
o posicionamento estático corresponde ao fluir normal dos elementos num
documento HTML, ou seja, as DIVs são posicionadas de cima para baixo, da
esquerda para a direita. Se uma DIV for reposicionada através de CSS, a DIV
imediatamente abaixo toma o seu lugar.
Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
45. CSS
posicionamento | relativo
o posicionamento relativo é um reposicionamento de uma dada DIV relativamente à
sua posição estática, ou seja, relativamente à sua posição estática a DIV está
deslocada no eixo X tantos pixels e no eixo y outros tantos pixels.
Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
46. CSS
posicionamento | absoluto
o posicionamento absoluto é calculado tendo em conta a janela do browser. Neste
caso as coordenadas X e Y da DIV estão em perfeita correlação com as dimensões
da janela do browser.
Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
47. CSS
posicionamento | fixo
o posicionamento fixo permite manter uma DIV fixa na janela do browser, que não
mexe com o movimento do Scroll.
Permite-nos criar efeitos como os realizados com os antigos frames.
Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/