Webmaster
& Webdesign - Disciplina: Criação de Sites
I
Prof: Jose Silveira - Nota de aula 10
C S S
Formato CSS geral: H1 { color: green } - Selector { propriedade: valor; ... }
No caso de
arquivo CSS exatamente como acima.
Nas sessão <head> use: <style ... > h1,
h2 {color: red ; ... }
InLine - nas tags use: ... <DIV style="propriedade:
valor ; ... " > t e x t o </style>
Lembretes:
Quando o valor contiver espaços devera vir entre aspas.
As propriedades/valores não são case-sensitive. os espaços não interferem, exeto entre valores
Com várias propriedades em uma unica declaração, separar com (;) ponto e virgula.
Geralmente utilizamos InLine as tags <DIV> para multiplas linhas ou <SPAN> para uma linha ou palavra.
Em cascata: as propriedades se somam ou caso repetidas vale a ultima declarada.
A prioridade é da mais próxima do conteúdo (ou seja inline, interna, externa).
Posicionamento html é relativo, no css pode ser absoluto.
Existem propriedades que definem todas de um grupo em uma unica.
Quando vc erra um valor da propriedade, normalmente nada acontece (não gera erro).
As pseudo-classes permitem-nos associar efeitos especiais a selectores CSS ou a partes de selectores. (links com cores e efeitos)
Pseudo-elementos - (primeira letra, primeira linha, etc)
Exercicio:
O que é definido pela propriedade ... e que valores pode assumir?
--- --- (lista de propriedades ...)
Como se escreve: as cores, as medidas
51-colocar uma figura ao lado direito de um parágrafo.
54-colocar imagem na posição 100x100 px na página.
55-que propriedade torna um conteudo invísível.
50-para que pode ser usada a propriedade DISPLAY
Criar uma página com fundo azul claro, imagem na lateral esquerda e repetida para baixo, que não rola junto com a tela.
Questoes sobre cada grupo de propriedades ...
--- --- (ver exemplos na cs_09ex_ArtificeWeb.html)
|
Pseudo-classe |
W3C |
Finalidade |
|
active |
CSS1 |
Define o estilo a aplicar a um link seleccionado |
|
hover |
CSS1 |
Define o estilo a aplicar a um link quando o ponteiro do rato está sobre ele |
|
link |
CSS1 |
Define o estilo a aplicar a um link que ainda não foi visitado |
|
visited |
CSS1 |
Define o estilo a aplicar a um link que já foi visitado |
|
first-child |
CSS2 |
Define o estilo as aplicar ao primeiro dos elementos que se encontram dentro de um outro elemento (primeiro descendente.) |
|
lang |
CSS2 |
Permite definir atributos estilísticos diferentes para aplicar ao texto escrito numa determinada língua |
Exemplo de uso:
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
Veja ooutro exemplo “Dar outros estilos a uma ligação” no Artifce.web:
http://www.artifice.web.pt/tutoriais/cntd/tut_css16.html
|
Pseudo-elementos |
W3C |
Finalidade |
|
first-letter |
CSS1 |
Define um estilo especial para a primeira letra de um texto. |
|
first-line |
CSS1 |
Define um estilo especial para a primeira linha de um texto. |
|
before |
CSS2 |
Insere algum conteúdo antes de um elemento |
|
after |
CSS2 |
Insere algum conteúdo depois de um elemento |
A regra @media – para tipos diferentes de mídias...
A regra @media permite-nos definir numa mesma folha de estilos, propriedades diferentes para serem aplicadas a tipos de media diferentes. Os estilos definidos no exemplo seguinte dizem ao browser para apresentar o texto no écran com o tipo de letra Verdana e com 14px de tamanho. Quando a página é impressa deve ser usado o tipo de letra Times com o tamanho 10pt. Tanto no écran como na impressão o texto estará em negrito (bold):
Veja em: http://www.artifice.web.pt/tutoriais/cntd/tut_css18.html
|
Media Type |
Descrição |
|
all |
Usa-se para definir estilos para todos os tipos de media |
|
aural |
Usa-se para definir estilos para sintetizadores de voz |
|
braille |
Usa-se para definir estilos a aplicar a texto escrito em braille |
|
embossed |
Define estilos para textos a imprimir em impressoras braille |
|
handheld |
Usa-se para definir estilos para pequenos aparelhos móveis (PDAs, telefones móveis, ...) |
|
|
Define estilos para quando a página é impressa sobre papel |
|
projection |
Define estilos para quando a página é apresentada num projector (slides, por exemplo) |
|
screen |
Estilos para apresentação em écran de computador |
|
tty |
Estilos para apresentação em terminais com recursos limitados (caracteres com tamanho fixo e outras limitações) |
|
tv |
Define estilos a aplicar quando a página é apresentada num televisor ou aparelho semelhante |
Material de referencia no Artifice.web:http://www.artifice.web.pt/tutoriais/cntd/tut_css19.html
Ref. A impressão no tut_css20.html.
Exercicio: http://www.artifice.web.pt/tutoriais/cntd/tut_css21.html