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)

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

a origem
HTML e CSS

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

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

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.

O que é
CSS?

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?

Seletores Simples

A sintaxe geral:
CSS3 - Start
Seletores Simples
seletor {
propriedade: valor;
}

Tipos de Utilização
•Inline
•Incorporado
•Externo
CSS3 - Start
Seletores Simples

Tipos de Utilização: inline
CSS3 - Start
Seletores Simples
<p style=“propriedade: valor;”>
Conteúdo
</p>

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>

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

Tipos de Seletores
•TAG
•CLASSE (“.”)
•IDENTIFICADOR (“#”)
CSS3 - Start
Seletores Simples
•COMPOSIÇÃO
•Encadeada
•Agrupada

Tipos de Seletores: Tag
CSS3 - Start
Seletores Simples
p{
propriedade: valor;
}

Tipos de Seletores: Classe
CSS3 - Start Seletores Simples
<p class=“nome-da-classe”>Conteúdo</p>
.nome-da-classe{
propriedade: valor;
}
HTML
CSS

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.

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>

Tipos de Seletores: Composição Encadeada
CSS3 - Start
Seletores Simples
div p span{
propriedade: valor;
}

Tipos de Seletores: Composição Agrupada
CSS3 - Start
Seletores Simples
div, p, span{
propriedade: valor;
}

Famílias

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)

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

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

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

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.

font-style:
CSS3 - Start
Famílias
Família: font
normal
italic
oblique

font-variant:
•normal: fonte normal;
•small-caps: TRANSFORMA EM MAIÚSCULAS DE MENOR ALTURA.
CSS3 - Start
Famílias
Família: font

font-bold:
CSS3 - Start
Famílias
•200
•300
•400
•500
•normal
•bold
•bolder
•lighter
•100
•600
•700
•800
•900
Família: font

CSS3 - Start Famílias
+ Informações: http://www.w3.org/TR/CSS2/fonts.html
Família: font

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.

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:
•lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...). São válidos valores negativos.
Família: text

line-height:
•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 />.
Família: text

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

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

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

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

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

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.

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

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

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.

CSS3 - Start
Famílias
color:
•código rgb: rgb (255,235,0)

CSS3 - Start
Famílias
style
*A propriedade style ainda possui os atributos none que remove a borda e hidden que a deixa escondida..

CSS3 - Start
Famílias
width
versão simplificada:
seletor{
border: solid 1px #000000;
}

Família: modelo box » padding
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.

Família: modelo box
CSS3 - Start
Famílias
+ Informações: http://www.w3.org/TR/CSS2/box.html

Família: background
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;

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

image:
•URL: url(caminho/imagem.gif)
CSS3 - Start
Famílias
repeat:
•não repete: no-repeat
•repete vertical e horizontal: repeat
•repete vertical: repeat-y
•repete horizontal: repeat-x

attachment:
•imagem fixa na tela: fixed
•imagem "rola" com a tela: scroll
CSS3 - Start
Famílias

position:
•center left
•center center
•center right
•bottom left
•bottom center
•bottom right
•x-pos y-pos
•x-% y-%
•top left
•top center
•top right

CSS3 - Start
Famílias
+ Informações: http://www.w3.org/TR/CSS2/colors.html#background

Família: list
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;

list-style-image:
Família: list
none
URL: url(caminho/marcador.gif);
list-style-position:
outside: marcador fora do alinhamento do texto
inside: marcador alinhado com texto

list-style-type:
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, ...

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

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

CSS Sprite

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:

<fim />

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.

CSS3: Start (aula 1)

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a CSS3: Start (aula 1)

Mais de Gustavo Zimmermann

CSS3: Start (aula 1)