Scribd
Carregar
32 visualizações46 páginas

Web 5

Enviado por

Ícaro Prado
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
32 visualizações46 páginas

Web 5

Enviado por

Ícaro Prado
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 46

Desenvolvimento de

Aplicações para
Internet
Aula 5 – CSS

Prof. Me. Ícaro Prado


CSS
CSS
CSS

• Cascading Style Sheets - Folhas de Estilo em Cascata;


• Linguagem de estilos que define o layout de documentos Web;
• Não é linguagem de programação;
• Controla o posicionamento e formatação dos elementos HTML;
• Fontes, cores, espaçamentos, bordas etc.;
• Regras baseadas na seleção dos elementos;
• Separa o conteúdo (responsabilidade do HTML) da apresentação
gráfica;
• É uma especificação do W3C.
Como Adicionar CSS no HTML

CSS externo
• Utiliza o elemento <link> para referenciar um arquivo com
código CSS
• Várias páginas podem utilizar o código CSS do arquivo
• Melhor separação entre conteúdo e estilos

CSS interno
• Utiliza o elemento <style> dentro do <head>
• Estilos específicos da página, não compartilhados
Como Adicionar CSS no HTML

CSS inline
• Atributo style
• O uso deve ser evitado (difícil manutenção)
CSS Externo
CSS Interno
CSS Inline
Ordem em Cascata

Qual estilo será usado quando houver mais de um estilo


especificado para um mesmo elemento HTML?

Prioridades:

• Estilo inline (atributo style)


• Folhas de estilo externas (tag <style>)
• Folhas de estilo internas
Comentários CSS

Começa com /* e termina com */


Regra, Seletor e Propriedade
Múltiplas Regras e Seletores
Agrupando Seletores
Tipos de Seletores: Elementos
Tipos de Seletores: Id
Tipos de Seletores: Filho
Tipos de Seletores: Classe
Tipos de Seletores: Classe
Tipos de Seletores: Seletor Universal

O seletor universal (*) seleciona todos os elementos HTML na


página.

A regra CSS abaixo afetará todos os elementos HTML na página:

*{ * { margin: 0; padding: 0; }
text-align: center;
color: blue;
}
Ajuste de Cor
Plano de Fundo

As propriedades de plano de fundo CSS são usadas para


adicionar efeitos de plano de fundo para elementos.
Background-Color

Especifica a cor de fundo de um elemento.

body {
background-color: green;
}

p{
background-color: #000000;
}
Background-Image

Especifica uma imagem a ser usada como plano de fundo de um


elemento.

body {
background-image: url(“../imagens/fig.png”);
}

p{
background-image: url (“../imagens/fig.png”);
}
Background-Image

Por padrão, a propriedade background-image repete uma


imagem na horizontal e na vertical.

- repeat-x: imagem repetida apenas horizontalmente.

background-image: url(“../imagens/fig.png”);
background-repeat: repeat-x;
Background-Image

- repeat-y: imagem repetida apenas verticalmente.

body {
background-image: url(“../imagens/fig.png”);
background-repeat: repeat-y;
}
Background-Image

- no-repeat: sem repetição.

body {
background-image: url(“../imagens/fig.png”);
background-repeat: no-repeat;
}
Background-Position

Usada para especificar a posição da imagem de fundo.

body {
background-image: url(“fig.png”);
background-repeat: no-repeat;
background-position: right top;
}
Background-Attachment

Especifica se a imagem de fundo deve rolar ou ser fixa (não


rolará com o resto da página).

body {
background-image: url(“../imagens/fig.png”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed; /*fixed ou scroll*/
}
Fonte
Fonte

Exemplo:
Fonte
Fonte
Texto
Text-Decoration

- text-decoration-color: para definir a cor da linha de decoração.

- text-decoration-style: para definir o estilo da linha de


decoração. Valores: solid, double, dotted, dashed, wavy.

- text-decoration-thickness: para definir a espessura da linha de


decoração. Valores: auto (padrão), px ou %.

- text-decoration: none - para remover o sublinhado dos links.


Texto

text-shadow: adiciona sombra ao texto.

Especificamos a sombra horizontal (2px) e a sombra vertical


(2px), uma
cor (red) e o efeito desfoque (5px).

h1{
text-shadow: 2px 2px 5px red;
}
Link

Os links podem ter estilos diferentes dependendo do estado em


que estão.

Os quatro estados de links são:

• a:link - um link normal e não visitado


• a:visited - um link que o usuário visitou
• a:hover - um link quando o usuário passa o mouse sobre ele
• a:active - um link no momento em que é clicado
Link
Propriedades Comuns Utilizadas com
Links

1) text-decoration
Usada para remover sublinhados de links.
Nesse caso o valor da propriedade é none.

2) background-color
Usada para especificar uma cor de fundo para links.
Exemplo

a:link {
color: green;
text-decoration:none;
background-color=“#FFFF”; }

a:hover {
color: red;
text-decoration:underline; }
Atividade Prática

1) Faça um arquivo HTML com um CSS contendo as propriedades


abaixo e aplique-o em algum texto feito por você ou retirado da
internet. Defina o CSS em um arquivo externo.

a) Toda tag <p> deverá ter a cor do texto DarkBlue, alinhamento


justificado, fonte Helvetica de tamanho 12pt e um recuo de
primeira linha (identação) de 4pt.
Atividade Prática

b) Toda tag <h1> deverá ter a cor do texto DarkRed, alinhamento


centralizado e fonte Verdana de tamanho 18pt.

c) Toda tag <h2> deverá ter a cor do texto preta, alinhamento à


esquerda, fonte Verdana de tamanho 14pt e a cor de fundo
amarela.

d) A tag <body> deverá ter cor de fundo Tan e uma imagem de


fundo alinhada à direita e ao topo da página.
Atividade Prática

e) Crie um menu com as propriedades:


Atividade Prática

f) Altere o menu:
- Retirar o sublinhado do link quando passamos o mouse sobre
ele.
- Altere a fonte para: Helvetica, negrito, cor olive e tamanho
large.
Atividade Prática

2) Reproduza a página ao lado


utilizando HTML e CSS.

- Utilize os diversos tipos de


seletores (elemento, id,
classe, filho, etc.).

- Estilize os estados do link.


Atividade Prática

3) Criar uma regra css para a construção de um menu


semelhante a imagem abaixo:

• No estado inicial os itens do menu deverão ter cor de fundo


cinza e cor do texto branco.
• No estado hover, deverá ter cor de fundo azul celeste e cor de
texto cinza.

Você também pode gostar