(PDF) CSS3: Start (aula 1)

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)

prof. Gustavo Zimmermann | contato@gust4vo.com

CSS3 - Start

Acessos

1. Portfolio : http://gust4vo.com

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

3. E-mail: contato@gust4vo.com

Acessos

prof. Gustavo Zimmermann | contato@gust4vo.com

a origem HTML e CSS

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

prof. Gustavo Zimmermann | contato@gust4vo.com

O que é

CSS?

prof. Gustavo Zimmermann | contato@gust4vo.com

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?

prof. Gustavo Zimmermann | contato@gust4vo.com

Seletores Simples

prof. Gustavo Zimmermann | contato@gust4vo.com

A sintaxe geral:

CSS3 - Start

Seletores Simples

seletor {

propriedade: valor;

}

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Utilização

• Inline

• Incorporado

• Externo

CSS3 - Start

Seletores Simples

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Utilização: inline

CSS3 - Start

Seletores Simples

Conteúdo

</p>

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Utilização: incorporado

CSS3 - Start

Seletores Simples

<!DOCTYPE html>

<head>

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

<style>

p{

propriedade: valor;

}

</style>

</head>

<body>

<p>Conteúdo</p>

</body>

</html>

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Utilização: externo

CSS3 - Start

Seletores Simples

<!DOCTYPE html>

<head>

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

</head>

<body>

<p>Conteúdo</p>

</body>

</html>

p{

propriedade: valor;

}

Arquivo HTML

Arquivo CSS

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Seletores

• TAG

• CLASSE (“.”)

• IDENTIFICADOR (“#”)

CSS3 - Start

Seletores Simples

• COMPOSIÇÃO • Encadeada • Agrupada

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Seletores: Tag

CSS3 - Start

Seletores Simples

p{

propriedade: valor;

}

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Seletores: Classe

CSS3 - Start

Seletores Simples

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

.nome-da-classe{

propriedade: valor;

}

HTML

CSS

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Seletores: Composição

CSS3 - Start

Seletores Simples

div#nome-identificador{

propriedade: valor;

}

≠ div #nome-identificador{

propriedade: valor;

}

Conteúdo

</div>

<div>

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

</div>

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Seletores: Composição Encadeada

CSS3 - Start

Seletores Simples

div p span{

propriedade: valor;

}

prof. Gustavo Zimmermann | contato@gust4vo.com

Tipos de Seletores: Composição Agrupada

CSS3 - Start

Seletores Simples

div, p, span{

propriedade: valor;

}

prof. Gustavo Zimmermann | contato@gust4vo.com

Famílias

prof. Gustavo Zimmermann | contato@gust4vo.com

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)

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

prof. Gustavo Zimmermann | contato@gust4vo.com

font-style:

CSS3 - Start

Famílias

Família: font

normal

italic

oblique

prof. Gustavo Zimmermann | contato@gust4vo.com

font-variant:

• normal: fonte normal;

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

CSS3 - Start

Famílias

Família: font

prof. Gustavo Zimmermann | contato@gust4vo.com

font-bold:

CSS3 - Start

Famílias

• 200

• 300

• 400

• 500

• normal

• bold

• bolder

• lighter

• 100

• 600

• 700

• 800

• 900

Família: font

prof. Gustavo Zimmermann | contato@gust4vo.com

CSS3 - Start

Famílias

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

Família: font

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

Família: text

CSS3 - Start

Famílias

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

Família: modelo box » border

CSS3 - Start

Famílias

width

versão simplificada:

seletor{

border: solid 1px #000000;

}

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

prof. Gustavo Zimmermann | contato@gust4vo.com

Família: modelo box

CSS3 - Start

Famílias

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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;

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

attachment:

• imagem fixa na tela: fixed

• imagem "rola" com a tela: scroll

CSS3 - Start

Famílias

Família: background

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

Família: background

CSS3 - Start

Famílias

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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;

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

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, ...

prof. Gustavo Zimmermann | contato@gust4vo.com

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

prof. Gustavo Zimmermann | contato@gust4vo.com

Família: list

CSS3 - Start

Famílias

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

prof. Gustavo Zimmermann | contato@gust4vo.com

CSS Sprite

prof. Gustavo Zimmermann | contato@gust4vo.com

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:

prof. Gustavo Zimmermann | contato@gust4vo.com

<fim />

prof. Gustavo Zimmermann | contato@gust4vo.com

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.

http://www.w3.org/TR/CSS2/

http://www.htmlprogressivo.net/2014/02/Fonte-em-Italico-Propriedade-font-style-italic-normal-oblique-Tutorial-CSS.html

http://www.devmedia.com.br/a-origem-do-css-um-pouco-da-historia/15195

http://maujor.com/

CSS3: Start (aula 1)

Internet

Start collection

Unb 2012.1 - dweb - 05 - css3 - fundamentos

HTML5, CSS3 e o futuro da web

Minicurso introdução ao html5 e css3

Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3

Palestra / Novidades No CSS3 / Instituto Infnet

HTML5 e CSS3

Start Stop

Movimentação de imagens com CSS3

Curso de css3 unidade 1 - introdução ao css

CSS3: Seu desenho vai virar código, e agora?

Css3 - Flex Box e Efeitos

HTML5 e CSS3 : Por onde começar no mercado editorial ?

INF550 - Computac¸ao em Nuvem I˜ Apache Sparkislene/2018-inf550/aula-spark.pdf · DARPA Intrusion Detection Evaluation Start Start Src Dest Src Dest Attack Date Time Duration Serv

CSS3 - Maurício Samy Silva

[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

CSS3: CSS3 (aula 2)

Palestra html5 e CSS3

HTML5 CSS3 - gva.esjaimesegundo.edu.gva.es/.../treball/Internet/html/ria-03-HTML5-CSS3.… · HTML5 y CSS3 HTML5 beginPath Le dice al contexto del canvas que se va a empezar a dibujarse

HTML5 + CSS3 - Do Zero e do Jeito Certo