Post on 18-Dec-2014
description
INTR
ODUÇÃO AO C
SS
PR
OF.
L EO
NA
RD
O S
OA
RE
S
Campus Garanhuns
LEMBRAM COMO APLICAMOS ESTILOS AO NOSSO TEXTO?• Utilizamos as tags <b> para negrito,
<i> para itálico, <u> para sublinhar e assim por diante…
• Há algum problema em utilizar essas tags?
REUTILIZAÇÃO DE ESTILOS ENTRE PÁGINAS
PROBLEMA!
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<font color="red" size='10'>Concurso no Facebook dará...</font><br/>
<font color="red" size='10'>Ex de verônica costa: ...</font>
</body>
</html>
E SE FOR PRECISO ALTERAR ESTES ESTILOS PARA TODOS OS ELEMENTOS?
E SE…
• Podessemos definir estilos e aplicar em vários elementos
• Estes estilos se propagassem quando forem alterados
SOLUÇÃO<html>
<head>
<meta charset='utf-8' />
<style type='text/css'>
.estilo{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<font class='estilo'>Concurso no Facebook dará...</font><br/>
<font class='estilo'>Ex de verônica costa: ...</font>
</body>
</html>
O QUE UTILIZAMOS?
• Estilos nos permitem definir como será o visual de elementos HTML
• Podemos aplicá-lo a um ou mais elementos HTML e todos serão afetados pelo estilo
• Mas, onde estudamos esta área?
O QUE É CSS?
• Linguagem de estilo utilizada para definir a aparência de elementos HTML
Cor
Fonte
Tamanho
Estilos
Posicionamento
POR QUE UTILIZAR CSS
• Facilitar a reutilização de estilos entre páginas
• Promover separação entre conteúdo e apresentação
FAÇAM O TESTE
Texto em azul
Texto em negrito
Texto em azul e negrito
EXEMPLO
<font color='blue'>Texto em azul</font><br />
<b>Texto em negrito</b><br />
<b><font color='blue'>Texto em azul e negrito</font></b><br />
COMO FAZER UTILIZANDO CSS?
<span style='color:blue'>Texto em azul</span><br />
<span style='font-weight:bold'>Texto em negrito</span><br />
<span style='color:blue;font-weight:bold'>Texto em azul e negrito</span><br />
EXEMPLO
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<span style='color:blue'>Texto em azul</span><br />
<span style='font-weight:bold'>Texto em negrito</span><br />
<span style='color:blue;font-weight:bold'>Texto em azul e negrito</span><br />
</body>
</html>
ONDE PODEMOS UTILIZAR CSS?
• Textos
• Imagens
• Divs
• Tabelas
• Qualquer elemento HTML
SÍNTAXE DO CSS
O QUE SÃO SELETORES EM CSS?
• Definem onde os estilos serão aplicados
• Todo elemento HTML que estiver relacionado ao seletor em questão será afetado por seu CSS
• Para uma lista completa de seletores pesquisem em: http://www.w3schools.com/cssref/css_selectors.asp
ALGUNS SELETORES CSS
Seletor Exemplo Descrição
.class .estilo Seleciona todos os elementos da classe .estilo
#id #nome Seleciona o elemento cujo id = “nome”
* * Se aplica a todos os elementos HTML
Elemento p Se aplica a todos os elementos <p>
Elemento, elemento
p, span Se aplica a todos os elementos <p> e <span>
Elemento elemento
div span Se aplica a todos os elementos <span> dentro de elementos <div>
EXEMPLOS DE SELETORES<html>
<head>
<style>
.estilo { color:red; }
#nome { color:red; }
* { color:red; }
p { color:red; }
p, span { color:red; }
div p { color:red; }
</style>
</head>
</html>
O QUE SÃO AS PROPRIEDADES E VALORES?• Definem qual será a modificação ao
seletor e seu respectivo valor
• Para alterar a cor do texto de um elemento <span> para azul, poderíamos utilizar a propriedade color seguida pelo valor blue. Exemplo:
<span style=‘color:blue’>Texto em azul</span>
SeletorPropriedade Propriedade
QUAIS SÃO AS PROPRIEDADES E VALORES EXISTENTES?• Há algumas propriedades existentes somentes
para elementos de texto <p>, <span>, etc
• Há propriedades que somente funcionam com elementos que podem possuir largura no browser, como <div>
• As propriedades variam para cada elemento, havendo propriedades comuns a alguns deles
• Referência com propriedades CSS: http://www.abpsoft.com/criacaoweb/cssguiaref.html
EXERCÍCIO• Criem 2 elementos <p> cada um com textos
dentro, 2 <span> e 1 <div> em uma página HTML• OBS: Deve haver um elemento <span> dentro do elemento
<div> e outro elemento <span> fora• OBS: Um dos elementos <p> deve ter uma id igual a ‘texto’, o
outro não
• Apliquem o estilo color:green para o span que está dentro do div
• O estilo color:blue para o elemento <p> que tenha a id ‘texto’
• E o estilo color:yellow para os demais <p> e <span>
COMO UTILIZAR O CSS?
• CSS inline
• CSS interno
• CSS externo
CSS INLINE
• Todos os elementos HTML possuem um atributo style
• Neste atributo incluimos os estilos separados por ;
<span style='color:blue'>Texto</span>
CSS INLINE – QUANDO DEVO UTILIZAR?
• Utilize quando apenas um elemento receberá o estilo
CSS INTERNO
• Primeira forma de reutilizar estilos
• Possibilita que os estilos sejam reutilizados apenas na página onde foram declarados
• Utiliza a tag <style> para definição dos estilos
CSS INTERNO - EXEMPLOS
<html>
<head>
<style type='text/css'>
span {
color: blue;
}
</style>
</head>
<body>
<span>Texto</span>
</body>
</html>
CSS EXTERNO
• Possibilitam separar os estilos da página HTML
• Estilos CSS ficam armazenados em arquivos .css
• Facilita a reutilização entre múltiplas páginas HTML
CSS EXTERNO - EXEMPLO
estilo.css
span {
color: blue;
}
CSS EXTERNO - EXEMPLO
Index.html
<head>
<link rel="stylesheet" type="text/css" href=”estilo.css" />
</head>
<body>
<span>Texto</span>
</body>
EXERCÍCIOS
• Com base no exercício 1 de vocês removam as tags <b>, <i>, dentre outras por estilos em CSS
• Utilizem inicialmente o css inline, após o css interno e em seguida o css externo
MANIPULAÇÃO DE TEXTOS EM CSS
• Cores
• Alinhamento
• Decoração
• Transformação
• Indentação
CORES DE TEXTO
• Propriedade: color
• Valores:•Hexadecimal•Nome de cores•RGB
• Exemplo:span { color:red; }span { color:#FF0000; }span { rgb(255,0,0); }
ALINHAMENTO DE TEXTO
• Propriedade: alignment
• Valores:• center• justify• right
• Exemplo:span { text-alignment:center; }span { text-alignment:justify; }span { text-alignment:right; }
DECORAÇÃO DE TEXTO
• Propriedade: text-decoration
• Valores:•none
• Exemplo:
span { text-decoration:none; }
TRANSFORMAÇÃO DE TEXTO
• Propriedade: text-transform
• Valores:• uppercase (maiúscula), lowercase (minúscula) e
capitalize (primeira em maiúscula)
• Exemplo:span { text-transform:uppercase; }
INDENTAÇÃO DE TEXTO
• Propriedade: text-indent
• Valores:• Números inteiros em pixels
• Exemplo:
span { text-indent:50px; }