6. 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
7. 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
8. 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.
10. 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?
18. prof. Gustavo Zimmermann | contato@gust4vo.com
Tipos de Seletores: Tag
CSS3 - Start
Seletores Simples
p{
propriedade: valor;
}
19. 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
20. 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.
25. 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)
26. 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
27. 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
28. 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
29. 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.
30. prof. Gustavo Zimmermann | contato@gust4vo.com
font-style:
CSS3 - Start
Famílias
Família: font
normal
italic
oblique
31. 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
33. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start Famílias
+ Informações: http://www.w3.org/TR/CSS2/fonts.html
Família: font
34. 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.
35. 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
36. 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
37. 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
38. 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
39. 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
40. prof. Gustavo Zimmermann | contato@gust4vo.com
Família: text
CSS3 - Start Famílias
+ Informações:
http://www.w3.org/TR/CSS2/text.html
41. 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
margin-right
margin-left
margin-bottom
BORDER
border-top
border-bottom
border-right
border-left
PADDING
padding-top
padding-bottom
padding-right
padding-left
CONTEÚDO
Margin
Border
Padding
Conteudo
42. 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.
43. 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
44. 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
45. 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.
47. 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..
49. 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.
51. 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;
54. 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
55. 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
57. 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;
58. 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
59. 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, ...
60. 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
61. prof. Gustavo Zimmermann | contato@gust4vo.com
Família: list
CSS3 - Start Famílias
+ Informações:
http://www.w3.org/TR/CSS2/generate.html#lists
63. 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:
65. 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.