introdução ao css
DESCRIPTION
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.TRANSCRIPT
![Page 1: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/1.jpg)
INTR
ODUÇÃO AO C
SS
PR
OF.
L EO
NA
RD
O S
OA
RE
S
Campus Garanhuns
![Page 2: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/2.jpg)
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?
![Page 3: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/3.jpg)
REUTILIZAÇÃO DE ESTILOS ENTRE PÁGINAS
![Page 4: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/4.jpg)
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>
![Page 5: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/5.jpg)
E SE FOR PRECISO ALTERAR ESTES ESTILOS PARA TODOS OS ELEMENTOS?
![Page 6: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/6.jpg)
E SE…
• Podessemos definir estilos e aplicar em vários elementos
• Estes estilos se propagassem quando forem alterados
![Page 7: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/7.jpg)
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>
![Page 8: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/8.jpg)
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?
![Page 9: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/9.jpg)
O QUE É CSS?
• Linguagem de estilo utilizada para definir a aparência de elementos HTML
Cor
Fonte
Tamanho
Estilos
Posicionamento
![Page 10: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/10.jpg)
POR QUE UTILIZAR CSS
• Facilitar a reutilização de estilos entre páginas
• Promover separação entre conteúdo e apresentação
![Page 11: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/11.jpg)
FAÇAM O TESTE
Texto em azul
Texto em negrito
Texto em azul e negrito
![Page 12: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/12.jpg)
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 />
![Page 13: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/13.jpg)
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 />
![Page 14: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/14.jpg)
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>
![Page 15: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/15.jpg)
ONDE PODEMOS UTILIZAR CSS?
• Textos
• Imagens
• Divs
• Tabelas
• Qualquer elemento HTML
![Page 16: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/16.jpg)
SÍNTAXE DO CSS
![Page 17: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/17.jpg)
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
![Page 18: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/18.jpg)
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>
![Page 19: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/19.jpg)
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>
![Page 20: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/20.jpg)
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
![Page 21: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/21.jpg)
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
![Page 22: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/22.jpg)
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>
![Page 23: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/23.jpg)
COMO UTILIZAR O CSS?
• CSS inline
• CSS interno
• CSS externo
![Page 24: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/24.jpg)
CSS INLINE
• Todos os elementos HTML possuem um atributo style
• Neste atributo incluimos os estilos separados por ;
<span style='color:blue'>Texto</span>
![Page 25: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/25.jpg)
CSS INLINE – QUANDO DEVO UTILIZAR?
• Utilize quando apenas um elemento receberá o estilo
![Page 26: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/26.jpg)
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
![Page 27: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/27.jpg)
CSS INTERNO - EXEMPLOS
<html>
<head>
<style type='text/css'>
span {
color: blue;
}
</style>
</head>
<body>
<span>Texto</span>
</body>
</html>
![Page 28: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/28.jpg)
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
![Page 29: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/29.jpg)
CSS EXTERNO - EXEMPLO
estilo.css
span {
color: blue;
}
![Page 30: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/30.jpg)
CSS EXTERNO - EXEMPLO
Index.html
<head>
<link rel="stylesheet" type="text/css" href=”estilo.css" />
</head>
<body>
<span>Texto</span>
</body>
![Page 31: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/31.jpg)
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
![Page 32: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/32.jpg)
MANIPULAÇÃO DE TEXTOS EM CSS
• Cores
• Alinhamento
• Decoração
• Transformação
• Indentação
![Page 33: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/33.jpg)
CORES DE TEXTO
• Propriedade: color
• Valores:•Hexadecimal•Nome de cores•RGB
• Exemplo:span { color:red; }span { color:#FF0000; }span { rgb(255,0,0); }
![Page 34: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/34.jpg)
ALINHAMENTO DE TEXTO
• Propriedade: alignment
• Valores:• center• justify• right
• Exemplo:span { text-alignment:center; }span { text-alignment:justify; }span { text-alignment:right; }
![Page 35: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/35.jpg)
DECORAÇÃO DE TEXTO
• Propriedade: text-decoration
• Valores:•none
• Exemplo:
span { text-decoration:none; }
![Page 36: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/36.jpg)
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; }
![Page 37: Introdução ao CSS](https://reader034.vdocuments.site/reader034/viewer/2022042518/5496d1edac7959092e8b51c8/html5/thumbnails/37.jpg)
INDENTAÇÃO DE TEXTO
• Propriedade: text-indent
• Valores:• Números inteiros em pixels
• Exemplo:
span { text-indent:50px; }