65
Aula 1:

CSS3: Start (aula 1)

Embed Size (px)

DESCRIPTION

Curso de Extensão em Desenvolvimento Web - Módulo II: CSS3. Curso de Sistemas de Informação da ULBRA Cachoeira do Sul

Citation preview

Page 1: CSS3: Start (aula 1)

Aula 1:

Page 2: CSS3: Start (aula 1)
Page 3: CSS3: Start (aula 1)

1. Docência

Gustavo Zimmermann

• Desde 2003

• Capacitação

• Profissionalizante

• Palestras

2. Projetos • Analista de Sistemas

• Analista de Internet

• Gerente de Projetos

3. Desenvolvedor

• Desk

• Web

• Sistemas de Informação (ULBRA) • Gerencia de Projetos (ESPM) • Gestão de Projetos (UNINTER)

Page 4: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

CSS3 - Start

Acessos

1. Portfolio : http://gust4vo.com

2. Site do Curso: http://gust4vo.com/cursos/extensaosi

3. E-mail: [email protected]

Acessos

Page 5: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

a origem HTML e CSS

Page 6: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

A origem do HTML

A linguagem de marcação surgindo para solucionar o problema de um

cientista que queria uma forma de divulgar seus artigos na rede, para

isso, ele criou algo simples, restrito a comunidade científica e usado

apenas para estrutura o conteúdo e exibir um texto de forma coerente.

Mas a linguagem usada pelos cientistas se tornou padrão da Internet, e

com o tempo, passou a ser mais testada.

CSS3 - Start

a origem

Page 7: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

A origem do CSS

Todos queriam imagens, cores e designer avançado. E o HTML

antigo não suportava isso, então foram adicionadas novas tags. Isso

solucionou o problema por um tempo, mas começou a surgir outro

grande problema. Com os novos recursos, designers e desenvolvedores

de websites, abusavam da criatividade e enchiam suas paginas de

fontes e estilos visuais, mas para alterar uma linha até que era mais

simples, porem quando se queria mudar a cor de um link, por

exemplo, e esse link estava em 300 paginas diferentes, era

trabalho manual mesmo, um por um, tag por tag.

CSS3 - Start

a origem

Page 8: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

A origem do CSS 1995

CSS3 - Start

a origem

Håkon Wium Lie

Bert Bos

Apresentaram a proposta do CSS que

logo foi apoiada pela W3C. A ideia

geral era, utilizar HTML somente para

estruturar o website e a tarefa de

apresentação fica com o CSS disposto

em um arquivo separado .css ou no

próprio HTML demarcado pelas tags.

Page 9: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

O que é

CSS?

Page 10: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

CSS formata a informação

Essa informação pode ser qualquer coisa:

imagem, texto, vídeo, áudio ou qualquer

outro elemento criado.

CSS3 - Start

O que é CSS?

Page 11: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Seletores Simples

Page 12: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

A sintaxe geral:

CSS3 - Start

Seletores Simples

seletor {

propriedade: valor;

}

Page 13: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Utilização

• Inline

• Incorporado

• Externo

CSS3 - Start

Seletores Simples

Page 14: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Utilização: inline

CSS3 - Start

Seletores Simples

<p style=“propriedade: valor;”>

Conteúdo

</p>

Page 15: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Utilização: incorporado

CSS3 - Start

Seletores Simples

<!DOCTYPE html>

<html lang=“pt-br”>

<head>

<title>Título da página</title>

<style>

p{

propriedade: valor;

}

</style>

</head>

<body>

<p>Conteúdo</p>

</body>

</html>

Page 16: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Utilização: externo

CSS3 - Start

Seletores Simples

<!DOCTYPE html>

<html lang=“pt-br”>

<head>

<title>Título da página</title>

<link rel=“stylesheet” type=“text/css” href=“media/css/estilos.css” />

</head>

<body>

<p>Conteúdo</p>

</body>

</html>

p{

propriedade: valor;

}

Arquivo HTML

Arquivo CSS

Page 17: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Seletores

• TAG

• CLASSE (“.”)

• IDENTIFICADOR (“#”)

CSS3 - Start

Seletores Simples

• COMPOSIÇÃO • Encadeada • Agrupada

Page 18: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Seletores: Tag

CSS3 - Start

Seletores Simples

p{

propriedade: valor;

}

Page 19: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Seletores: Classe

CSS3 - Start

Seletores Simples

<p class=“nome-da-classe”>Conteúdo</p>

.nome-da-classe{

propriedade: valor;

}

HTML

CSS

Page 20: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Seletores: Identificador

CSS3 - Start

Seletores Simples

<p id=“nome-do-identificador”>Conteúdo</p>

#nome-do-identificador{

propriedade: valor;

}

HTML

CSS

*A principal diferença entre Classe e Identificador é a reutilização. Classes podem ser

reutilizadas em uma mesma página, já Identificadores são elementos únicos na página,

normalmente utilizados na formatação de estruturas.

Page 21: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Seletores: Composição

CSS3 - Start

Seletores Simples

div#nome-identificador{

propriedade: valor;

}

≠ div #nome-identificador{

propriedade: valor;

}

<div id=“nome-identificador”>

Conteúdo

</div>

<div>

<p id=“nome-identificador”>Conteúdo</p>

</div>

Page 22: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Seletores: Composição Encadeada

CSS3 - Start

Seletores Simples

div p span{

propriedade: valor;

}

Page 23: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Tipos de Seletores: Composição Agrupada

CSS3 - Start

Seletores Simples

div, p, span{

propriedade: valor;

}

Page 24: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Famílias

Page 25: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: font

CSS3 - Start

Famílias

As propriedades para as fontes, definem as características (os valores na regra

CSS) das letras que constituem os textos dentro dos elementos HTML.. As

principais propriedades básicas para fontes são:

color:..........................................................cor da fonte

font-family:...........................................tipo de fonte

font-size:...................................................tamanho de fonte

font-style:................................................estilo de fonte

font-variant:.........................................fontes maiúsculas de menor altura

font-weight:..........................................quanto mais escura a fonte é (negrito)

Page 26: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

color:

• código hexadecimal: #FFFFFF

• código rgb: rgb (255,235,0)

• nome da cor: red, blue, green...etc

CSS3 - Start

Famílias

Família: font

Page 27: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

font-family:

• Família Fontes: nome da fonte,

• ex:"verdana", "helvetica", "arial", etc.

• Família Genérica: nome genérico,

• ex:"serif", "sans-serif", "cursive", “fantasy” ou

“monospace”.

CSS3 - Start

Famílias

Família: font

Page 28: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

font-size: • xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

• smaller

• Larger

• %

• length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

CSS3 - Start

Famílias

Família: font

Page 29: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

font-style:

• normal: fonte normal na vertical;

• italic: fonte inclinada.

• oblique: fonte obliqua;

CSS3 - Start

Famílias

Família: font

*O valor oblique é como se fosse a fonte romana sendo simplesmente deslocada obliquamente para a

direita. Se você testar essa estilização em textos, vai notar que, dependendo da fonte, não vai haver

nenhuma diferença entre uma fonte em itálico e uma oblíqua. E realmente a diferença a pouca, e em

alguns casos é simplesmente igual.

Page 30: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

font-style:

CSS3 - Start

Famílias

Família: font

normal

italic

oblique

Page 31: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

font-variant:

• normal: fonte normal;

• small-caps: TRANSFORMA EM MAIÚSCULAS DE MENOR ALTURA.

CSS3 - Start

Famílias

Família: font

Page 32: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

font-bold:

CSS3 - Start

Famílias

• 200

• 300

• 400

• 500

• normal

• bold

• bolder

• lighter

• 100

• 600

• 700

• 800

• 900

Família: font

Page 33: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

CSS3 - Start

Famílias

+ Informações: http://www.w3.org/TR/CSS2/fonts.html

Família: font

Page 34: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: text

CSS3 - Start

Famílias

As propriedades para textos, definem as características (os valores na regra CSS)

dos textos inseridos dentro dos elementos HTML.

color:............................................................cor da fonte

letter-spacing....................................espaçamento entre letras;

word-spacing...................................espaçamento entre palavras;

line-height............................................espaçamento entre linhas;

white-space.......................................como o browser trata os espaços em branco;

text-align.................................................alinhamento do texto;

text-indent............................................recuo do texto;

text-decoration...............................decoração do texto;

text-transform..................................forma das letras.

Page 35: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

letter-spacing:

• normal: é o espaçamento default;

• lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...). São

válidos valores negativos.

word-spacing:

• normal: é o espaçamento default;

• lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...). São

válidos valores negativos.

CSS3 - Start

Famílias

Família: text

Page 36: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

line-height:

• normal: é o espaçamento default;

• lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...). São

válidos valores negativos.

word-spacing:

• normal: os espaços em branco serão ignorados pelo browser;

• pre: os espaços em branco serão preservados pelo browser;

• nowrap: o texto será apresentado todo ele numa linha única na tela.

Não há quebra de linha até ser encontrada uma tag <br />.

CSS3 - Start

Famílias

Família: text

Page 37: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

text-align:

• left: alinha o texto a esquerda;

• right: alinha o texto a direita;

• center: alinha o texto no centro;

• justify: justifica o texto.

text-indent:

• lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...);

• % : porcentagem da largura do elemento pai.

CSS3 - Start

Famílias

Família: text

Page 38: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

text-decoration:

• none: nenhuma decoração;

• underline: coloca sublinhado no texto;

• overline: coloca um sobrelinhado no texto;

• line-through: coloca uma linha em cima do texto.

CSS3 - Start

Famílias

Família: text

Page 39: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

text-transform:

• none: texto normal;

• capitalize: Todas As Primeiras Letras Do Texto Em Maiúsculas;

• uppercase: TODAS AS LETRAS DO TEXTO EM MAIÚSCULAS;

• lowercase: todas as letras do texto em minúsculas.

CSS3 - Start

Famílias

Família: text

Page 40: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: text

CSS3 - Start

Famílias

+ Informações: http://www.w3.org/TR/CSS2/text.html

Page 41: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box

CSS3 - Start

Famílias

Cada caixa tem uma área de conteúdo (por exemplo, um texto, uma imagem, etc) e

áreas circunvizinhas espaçamento, borda e margem opcionais. O diagrama a seguir

mostra como essas áreas se relacionam e a terminologia usada para se referir a peças de

margin, border e padding.

margin-top MARGIN m

arg

in-rig

ht m

arg

in-l

eft

margin-bottom

BORDER border-top

border-bottom

bo

rder-rig

ht

bo

rder

-lef

t PADDING padding-top

padding-bottom

paddin

g-rig

ht p

addin

g-l

eft

CONTEÚDO

Margin

Border

Padding

Conteudo

Page 42: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » margin

CSS3 - Start

Famílias

A propriedade para margens, define um valor para espessura das margens dos

elementos HTML.

margin-top..................................define a margem superior;

margin-right.............................define a margem direita;

margin-bottom.....................define a margem inferior;

margin-left..................................define a margem esquerda;

margin................................................maneira abreviada para todas as margens.

Page 43: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » border

CSS3 - Start

Famílias

As propriedades para as bordas, definem as características (os valores na regra

CSS) das quatro bordas de um elemento HTML.

border-width:...............................espessura da borda

border-style:....................................estilo da borda

border-color:.................................cor da borda

Page 44: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » border

CSS3 - Start

Famílias

border-top-width:................................................. espessura da borda superior border-top-style:..................................................... estilo da borda superior border-top-color:....................................................cor da borda superior ----------------------------------------------------------------------------------

border-right-width:............................................ espessura da borda direita border-right-style:.................................................estilo da borda direita border-right-color:...............................................cor da borda direita ----------------------------------------------------------------------------------

border-bottom-width:.......................................espessura da borda inferior border-bottom-style:...........................................estilo da borda inferior border-bottom-color:.........................................cor da borda inferior ----------------------------------------------------------------------------------

border-left-width:...................................................espessura da borda esquerda border-left-style:.......................................................estilo da borda esquerda border-left-color:.....................................................cor da borda esquerda

Page 45: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » border

CSS3 - Start

Famílias

border-top:.....................maneira abreviada para todas as propriedades da borda superior;

border-right:..............maneira abreviada para todas as propriedades da borda direita;

border-bottom:......maneira abreviada para todas as propriedades da borda inferior;

border-left:....................maneira abreviada para todas as propriedades da borda esquerda;

border:.................................maneira abreviada para todas as quatro bordas.

Page 46: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » border

CSS3 - Start

Famílias

color:

• código hexadecimal: #FFFFFF

• código rgb: rgb (255,235,0)

• nome da cor: red, blue, green...etc

Page 47: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » border

CSS3 - Start

Famílias

style

*A propriedade style ainda possui os atributos none que remove a borda e hidden que a deixa escondida..

Page 48: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » border

CSS3 - Start

Famílias

width

versão simplificada:

seletor{

border: solid 1px #000000;

}

Page 49: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box » padding

CSS3 - Start

Famílias

A propriedade para espaçamentos (alguns traduzem como "enchimento"),

define um valor para os espaçamentos entre o conteúdo e as bordas dos

elementos HTML.

padding-top.......................define o espaçamento superior;

padding-right..................define o espaçamento direito;

padding-bottom............define o espaçamento inferior;

padding-left........................define o espaçamento esquerdo;

padding......................................maneira abreviada para todos os espaçamentos.

Page 50: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: modelo box

CSS3 - Start

Famílias

+ Informações: http://www.w3.org/TR/CSS2/box.html

Page 51: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: background

CSS3 - Start

Famílias

As propriedades para textos, definem as características (os valores na regra CSS)

dos textos inseridos dentro dos elementos HTML.

background-color........................ cor do fundo;

background-image..................... imagem de fundo;

background-repeat..................... maneira como a imagem de fundo é posicionada;

background-attachment.......se a imagem de fundo "rola" ou não com a tela;

background-position.................como e onde a imagem de fundo é posicionada;

background...........................................maneira abreviada para todas as propriedades;

Page 52: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

color:

• código hexadecimal: #FFFFFF

• código rgb: rgb(255,235,0)

• nome da cor: red, blue, green...etc

• transparente: transparent

CSS3 - Start

Famílias

Família: background

Page 53: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

image:

• URL: url(caminho/imagem.gif)

CSS3 - Start

Famílias

Família: background

repeat:

• não repete: no-repeat

• repete vertical e horizontal: repeat

• repete vertical: repeat-y

• repete horizontal: repeat-x

Page 54: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

attachment:

• imagem fixa na tela: fixed

• imagem "rola" com a tela: scroll

CSS3 - Start

Famílias

Família: background

Page 55: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

position:

CSS3 - Start

Famílias

Família: background

• center left

• center center

• center right

• bottom left

• bottom center

• bottom right

• x-pos y-pos

• x-% y-%

• top left

• top center

• top right

Page 56: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: background

CSS3 - Start

Famílias

+ Informações: http://www.w3.org/TR/CSS2/colors.html#background

Page 57: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: list

CSS3 - Start

Famílias

A propriedade list define as características (valores) das listas HTML.

list-style-image..........................imagem como marcador da lista;

list-style-position....................onde o marcador da lista é posicionado;

list-style-type.................................tipo do marcador da lista;

list-style.................................................maneira abreviada para todas as propriedades;

Page 58: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

list-style-image:

CSS3 - Start

Famílias

Família: list

none

URL: url(caminho/marcador.gif);

list-style-position:

outside: marcador fora do alinhamento do texto

inside: marcador alinhado com texto

Page 59: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

list-style-type:

CSS3 - Start

Famílias

Família: list

1. none: sem marcador

2. disc: círculo (bolinha cheia)

3. circle: circunferência (bolinha vazia)

4. square: quadrado cheio

5. decimal: números 1, 2, 3, 4, ...

6. decimal-leading-zero

7. lower-roman: romano minúsculo i, ii, iii, iv, ...

8. upper-roman: romano maiúsculo I, II, III, IV, ...

9. lower-alpha: letra minúscula a, b, c, d, ...

10. upper-alpha: letra maiúscula A, B, C, D, ...

Page 60: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

list-style-type:

CSS3 - Start

Famílias

Família: list

11. lower-greek

12. lower-latin

13. upper-latin

14. hebrew

15. armenian

16. georgian

17. cjk-ideographic

18. hiragana

19. katakana

20. hiragana-iroha

21. katakana-iroha

*Os tipos de 11 a 21 são de uso

específico e sem suporte total pelos

navegadores atuais

Page 61: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Família: list

CSS3 - Start

Famílias

+ Informações: http://www.w3.org/TR/CSS2/generate.html#lists

Page 62: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

CSS Sprite

Page 63: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

O que é?

CSS3 - Start

CSS Sprite

Pra quem não conhece, essa é uma técnica que se baseia em combinar

diversas imagens em uma só, em busca de diminuir o número de requisições

HTTP para o servidor. E essa é apenas uma de suas aplicações, no mundo dos

games, por exemplo, ela é muito usada para fazer animações.

Tutorial CSS Sprite: http://tableless.com.br/css-sprites/

normal:

hover:

Page 64: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

<fim />

Page 65: CSS3: Start (aula 1)

prof. Gustavo Zimmermann | [email protected]

Referências Bibliográficas

CSS3 - Start

Referências

CSS2. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Disponível em <http://www.w3.org/TR/CSS2/>. Acessado em 14 de AGO de 2014.

HTML Progressivo. A propriedade font-style - Estilizando Fontes com CSS. Disponível em <http://www.htmlprogressivo.net/2014/02/Fonte-em-Italico-Propriedade-font-style-italic-normal-oblique-Tutorial-CSS.html>. Acessado em 05 de SET de 2014.

PEREIRA, Altieri. A origem do CSS, um pouco da história. Disponível em <http://www.devmedia.com.br/a-origem-do-css-um-pouco-da-historia/15195>. Acessado em: 13 de AGO de 2014.

SILVA, Maurício Samy (Moujor). Tutoriais CSS, Web Standards, Acessibilidade, HTML, XHTML, Padrões Web. Disponível em <http://maujor.com>. Acessado em: 13 de AGO de 2014.