Introdução ao CSS

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 para negrito,

 para itálico, 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>

Concurso no Facebook dará... 

Ex de verônica costa: ...

</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>


<style type='text/css'>

.estilo{

color:red;

font-size:30px;

}

</style>

</head>

<body>

Concurso no Facebook dará... 

Ex de verônica costa: ...

</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

Texto em azul 

Texto em negrito 

Texto em azul e negrito 

COMO FAZER UTILIZANDO CSS?

Texto em azul 

Texto em negrito 

Texto em azul e negrito 

EXEMPLO

<html>

<head>


</head>

<body>

Texto em azul 

Texto em negrito 

Texto em azul e negrito 

</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 

Elemento, elemento

p, span Se aplica a todos os elementos e 

Elemento elemento

div span Se aplica a todos os elementos 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 para azul, poderíamos utilizar a propriedade color seguida pelo valor blue. Exemplo:

Texto em azul

SeletorPropriedade Propriedade

QUAIS SÃO AS PROPRIEDADES E VALORES EXISTENTES?• Há algumas propriedades existentes somentes

para elementos de texto , , 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 cada um com textos

dentro, 2 e 1 <div> em uma página HTML• OBS: Deve haver um elemento dentro do elemento

<div> e outro elemento fora• OBS: Um dos elementos 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 que tenha a id ‘texto’

• E o estilo color:yellow para os demais e 

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 ;

Texto

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>

Texto

</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>

Texto

</body>

EXERCÍCIOS

• Com base no exercício 1 de vocês removam as tags , , 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; }

Education

Introdução ao CSS