CSS3: Start (aula 1)
-
Upload
gustavo-zimmermann -
Category
Internet
-
view
522 -
download
3
description
Transcript of 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 | [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
prof. Gustavo Zimmermann | [email protected]
a origem HTML e CSS
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
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
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.
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?
prof. Gustavo Zimmermann | [email protected]
Seletores Simples
prof. Gustavo Zimmermann | [email protected]
A sintaxe geral:
CSS3 - Start
Seletores Simples
seletor {
propriedade: valor;
}
prof. Gustavo Zimmermann | [email protected]
Tipos de Utilização
• Inline
• Incorporado
• Externo
CSS3 - Start
Seletores Simples
prof. Gustavo Zimmermann | [email protected]
Tipos de Utilização: inline
CSS3 - Start
Seletores Simples
<p style=“propriedade: valor;”>
Conteúdo
</p>
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>
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
prof. Gustavo Zimmermann | [email protected]
Tipos de Seletores
• TAG
• CLASSE (“.”)
• IDENTIFICADOR (“#”)
CSS3 - Start
Seletores Simples
• COMPOSIÇÃO • Encadeada • Agrupada
prof. Gustavo Zimmermann | [email protected]
Tipos de Seletores: Tag
CSS3 - Start
Seletores Simples
p{
propriedade: valor;
}
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
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.
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>
prof. Gustavo Zimmermann | [email protected]
Tipos de Seletores: Composição Encadeada
CSS3 - Start
Seletores Simples
div p span{
propriedade: valor;
}
prof. Gustavo Zimmermann | [email protected]
Tipos de Seletores: Composição Agrupada
CSS3 - Start
Seletores Simples
div, p, span{
propriedade: valor;
}
prof. Gustavo Zimmermann | [email protected]
Famílias
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)
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
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
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
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.
prof. Gustavo Zimmermann | [email protected]
font-style:
CSS3 - Start
Famílias
Família: font
normal
italic
oblique
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
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
prof. Gustavo Zimmermann | [email protected]
CSS3 - Start
Famílias
+ Informações: http://www.w3.org/TR/CSS2/fonts.html
Família: font
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.
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
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
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
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
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
prof. Gustavo Zimmermann | [email protected]
Família: text
CSS3 - Start
Famílias
+ Informações: http://www.w3.org/TR/CSS2/text.html
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
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.
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
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
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.
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
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..
prof. Gustavo Zimmermann | [email protected]
Família: modelo box » border
CSS3 - Start
Famílias
width
versão simplificada:
seletor{
border: solid 1px #000000;
}
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.
prof. Gustavo Zimmermann | [email protected]
Família: modelo box
CSS3 - Start
Famílias
+ Informações: http://www.w3.org/TR/CSS2/box.html
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;
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
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
prof. Gustavo Zimmermann | [email protected]
attachment:
• imagem fixa na tela: fixed
• imagem "rola" com a tela: scroll
CSS3 - Start
Famílias
Família: background
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
prof. Gustavo Zimmermann | [email protected]
Família: background
CSS3 - Start
Famílias
+ Informações: http://www.w3.org/TR/CSS2/colors.html#background
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;
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
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, ...
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
prof. Gustavo Zimmermann | [email protected]
Família: list
CSS3 - Start
Famílias
+ Informações: http://www.w3.org/TR/CSS2/generate.html#lists
prof. Gustavo Zimmermann | [email protected]
CSS Sprite
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:
prof. Gustavo Zimmermann | [email protected]
<fim />
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.