CPW-06-Introdução CSS

Construção de Página Web
Introdução CSS
Felipe Thomas
Cascading Style Sheets (CSS)
Folhas de Estilo em Cascata
Instituto Federal Sul-rio-grandense | câmpus Charqueadas 2

O que é o CSS?
• [Navegadores] Interpretam o código que vem em

arquivos de um servidor
• ou arquivo do PC mesmo
• Front-end
• HTML
• CSS
• JavaScript

O que é o CSS?
4
Principal Objetivo do CSS
• Separar o estilo do conteúdo

• O conteúdo é o HTML
• O estilo é o CSS
• A forma de apresentar pode variar de
acordo com o estilo que daremos ao
conteúdo
5
Antes do CSS...
• HTML é bem limitado

• Como vocês podem ter notado,
as páginas que vocês criaram
até agora são bem simples
• Sem muita possibilidade de
formatação e organização do
conteúdo
Breve história do CSS
- Criado em 1994
- Håkon Wium Lie
- Trabalhava no CERN com o
criador do HTML
- Lançada mesmo em 1996
- Suporte no IE3

Atualmente
• CSS está na versão 3

• Já passou por alterações e
evoluções
• Mantido pela W3C
• Suportado pela grande maioria
dos navegadores

Como colocar CSS
• Existem 3 formas de inserir CSS no código

HTML
• inline ⇒ em linha
• internal ⇒ interna
• external ⇒ externa
9
CSS inline
- Testem aí...
<p style="color:#ff0000; font-size:48px; font-weight:bold;
background-color:#0000ff; width:300px;"> Este é um parágrafo!
</p>
<p style="color:#ff0000; font-size:48px; font-weight:bold;

background-color:#0000ff; width:300px;"> Este é outro
parágrafo! </p>
10
CSS inline
• Qual o problema do exemplo anterior?

• Não há como replicarmos o código para as demais tags, ou seja,
não há reaproveitamento.
• Se quisermos aplicar o mesmo estilo a todas as tags <p>?
• E o objetivo do CSS, separar estilo de conteúdo?
11
CSS interno
• Dentro do próprio arquivos HTML …

<head>
• Separado dentro do <head> </head> <style>
• Dentro do marcador <style> </style> /*estilos aqui!*/
• Reduz o código replicado </style>

</head>
• [ainda] Não é recomendável de usar <body>
• Tem alguns problemas... ...
12
Como colocar CSS?
• Agora o estilo não está mais direto no marcador que deve ser
customizado;
• Devemos indicar qual tag estamos estilizando;
• Para isso o CSS tem 3 elementos básicos:
seletor { atributo : valor-do-atributo; }
13
Seletor
• Seleciona os marcadores html que serão afetados pelo estilo

definido
• sempre vem primeiro, antes da definição de estilo
• uma das formas de seleção é colocar o marcador html que vai ser
aplicado o estilo
• outra forma é definirmos uma classe ou id para o marcador

14
Separadores
• { } ⇒ separador de bloco
• define o estilo do seletor anterior ao { }
• : ⇒ divide o atributo do valor
• ; ⇒ encerra um par atributo-valor
• podemos ter mais de um atributo por bloco
seletor {
atributo1 : valor-do-atributo1;
atributo2 : valor-do-atributo2;
} 15
Atributo
• É a propriedade do HTML que vai ser modificada

• HTML tem muitas propriedades
• Como vocês viram no exemplo da tag <p> anteriormente
16
Valor do atributo
• É o valor da propriedade que vai ser aplicado nos elementos

css selecionados
• Altera o valor do atributo
17
CSS interno
<head>
• Como que ficaria o CSS <style>
interno? p
{
• Observem que declaramos color: #ff0000;
font-size: 48px;
apenas uma vez a tag p; font-weight: bold;
background-color: #0000ff;
• Testem alterando os valores; width: 300px;
}
</style>
</head>
<body>
<p> Este é um parágrafo! </p>
<p> Este é o segundo parágrafo! </p>
</body> 18
CSS interno
• Qual problema de usar css interno?

• Reaproveitamento entre arquivos
• Usar em mais de um arquivo HTML tem de copiar ele no head de cada um deles
• Outro problema está no carregamento da página, ela fica mais “pesada”
19
CSS externo
- Criar uma pasta /css

- criar um arquivo primeiro-estilo.css
- salvar o conteúdo do estilo do slide anterior
20
CSS externo
• Colocar o css dentro do HTML por link de estilo

• <link>
• rel ⇒ relationship
• href ⇒ caminho para o css
• Criar o arquivo HTML ao lado (css1.html)
<head>
<link rel="stylesheet" href="css/primeiro-estilo.css">
</head>
21
Cores

Cores
• Existem várias formas de definir

cores
• Hexadecimal
• Nome
• RGB(A)
• HSL(A) à A vem de alpha
• Cada um deles produz as mesmas
cores
• Só que de formas diferentes
Cores Hexadecimal
- Composto por # e mais 6 dígitos

hexadecimais (0-f)
- 16^6 = 16.777.216 de cores
- Cada par de dígitos é uma cor do RGB
- na ordem do RGB, ou seja
- #ff0000 é vermelho (red)
- #00ff00 é verde (green)
- #0000ff é azul (blue)
Cores Nomes
- Nomes em Inglês de algumas cores

- 140 cores, o nome da cor mesmo
- blue, red, green, ...
- variações (nem todas cores tem)
- dark, light, medium, pale, …
- darkblue
- lightblue
- mediumblue
Cores Nomes
• Criem uma página html de exemplo

• Com marcadores h1, h2, h3 e h4
• Criem o arquivo css
• Coloquem o arquivo css no html externamente
• Coloquem no css o exemplo para ver
h1 {color: blue; }
h2 {color: lightblue; }
h3 {color: mediumblue; }
h4 {color: darkblue; }

Cores RGB e HSL
• RGB é o hexadecimal disfarçado

• função rgb(int,int,int)
• cada int vai de 0-255 (00-ff)
• rgb(255,0,0) ⇒ red
• HSL é diferente
h1 {color: hsl(240, 100%, 50%); }
• função hsl(int, %,%) h2 {color: rgb(0,0,255); }
• int = matiz ~ cor h3 {color: mediumblue; }
h4 {color: darkblue; }
• % = saturação
• % = brilho
Cores RGBA e HSLA
• RGBA e HSL são os mesmo rgb e hsl

• só que com alpha
• função rgba(int, int, int, double)
• função hsla(int, %, %, double)
• o double é o alpha
h1 {background-color: rgba(0,0,255,0.9); }

Atributos CSS

color
• O atributo color altera a cor do texto da tag selecionada
h1 { color: hsl(240, 100%, 50%); }

h2 { color: rgb(0,0,255); }
h3 { color: mediumblue; }
h4 { color: darkblue; }

background-color
• Define a cor de fundo da tag selecionada
h1 { background-color: blue; }
h2 { background-color: lightblue; }
h3 { background-color: mediumblue; }
h4 { background-color: darkblue; }

Atributos globais CSS
• E se eu quiser que todos textos da página sejam cinza escuro?

• Os atributos que ficam um nível abaixo de body herdam este estilo
body {
color: darkGrey;
}

Atributos globais CSS

• E se apenas o <h1> precisa ter um estilo diferente?
body {
color: darkGrey;
}

E a exceção?

• E se apenas o <h1> precisa ter um estilo diferente?
body {
color: darkGrey;
}
h1 {
color: black;
}
background-[alguma-coisa]
• Define outros estilos além de cor

• Busquem uma imagem na internet
• Criem uma pasta imgs e colem esta imagem nela
• Renomeiem a imagem para background-repeat.jpg
• Testem o estilo abaixo
body {
background-color: black;
background-image: url("../imgs/background-repeat.jpg");
background-repeat: repeat;
background-position: right bottom;
background-attachment: fixed;
}
background-image
• O que faz?
• se tirar ele, o que acontece?
• Troque body por <h1>
body {
}
background-repeat
• O que faz?
• Tentem o valor com repeat, repeat-x, repeat-y, no-repeat
body {
}
background-repeat
• Padrão é repeat
• repete x e y da página
• repeat-x ⇒ eixo x
• repeat-y ⇒ eixo y
• no-repeat ⇒ não repetir

background-position
- O que faz?
- se tirar ele, o que acontece?
body {
}
background-position
• Define a primeira posição do fundo

• 2 valores
• primeiro é o horizontal
• right, left, center
• segundo é o vertical
• bottom, top, center
• troquem os valores do position

background-position
• Valor padrão é
• right top
• Conforme alterarmos a posição
• o repeat ficará diferente
body {
background-position: center center;
}
background-attachment
• O que faz?
body {
}
background-attachment
• Define se o comportamento do fundo ao rolar a tela

• Pode ser
• scroll (padrão)
• fixed
• Alterem aí para ver...

CPW-06-Introdução CSS

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CPW-06-Introdução CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Construção de Página Web

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 2

• [Navegadores] Interpretam o código que vem em

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 3

• Separar o estilo do conteúdo

• HTML é bem limitado

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 7

• CSS está na versão 3

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 8

• Existem 3 formas de inserir CSS no código

<p style="color:#ff0000; font-size:48px; font-weight:bold;

• Qual o problema do exemplo anterior?

• Dentro do próprio arquivos HTML …

• Reduz o código replicado </style>

seletor { atributo : valor-do-atributo; }

• Seleciona os marcadores html que serão afetados pelo estilo

seletor { atributo : valor-do-atributo; }

• É a propriedade do HTML que vai ser modificada

seletor { atributo : valor-do-atributo; }

• É o valor da propriedade que vai ser aplicado nos elementos

seletor { atributo : valor-do-atributo; }

• Qual problema de usar css interno?

- Criar uma pasta /css

• Colocar o css dentro do HTML por link de estilo

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 22

• Existem várias formas de definir

- Composto por # e mais 6 dígitos

- Nomes em Inglês de algumas cores

• Criem uma página html de exemplo

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 26

• RGB é o hexadecimal disfarçado

• RGBA e HSL são os mesmo rgb e hsl

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 28

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 29

• O atributo color altera a cor do texto da tag selecionada

h1 { color: hsl(240, 100%, 50%); }

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 30

• Define a cor de fundo da tag selecionada

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 31

• E se eu quiser que todos textos da página sejam cinza escuro?

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 32

• E se eu quiser que todos textos da página sejam cinza escuro?

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 33

• E se eu quiser que todos textos da página sejam cinza escuro?

• Define outros estilos além de cor

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 38

• Define a primeira posição do fundo

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 40

• Define se o comportamento do fundo ao rolar a tela

Instituto Federal Sul-rio-grandense | câmpus Charqueadas 43

Você também pode gostar