Curso de Desenvolvimento Web - Módulo 02 - CSS

S
Desenvolvimento Web
Com HTML, CSS e JavaScript
Prof. Rodrigo Santa Maria
rodrigo@digitallymade.com.br

Sobre o Prof. Rodrigo Santa Maria
S Bacharel em Ciência da Computação (PUC Minas);
S Especialista com MBA Internacional em Gerenciamento de
Projetos (FGV/Ohio University, USA);
S Professor Universitário (UNIFEOB);
S Micro-empresário da área de TI;
S Acesse: www.digitallymade.com.br
S E-mail: rodrigo@digitallymade.com.br

Sobre o Prof. Rodrigo Santa Maria
S Analista/Desenvolvedor de aplicações desde 2000;
S Ex-IBMer (de 2009 a 2013);
S Diretor-Presidente/Co-fundador do Instituto Internacional
de Ideias;
S Fundador do Google Developers Group São João da Boa
Vista;

Visão Geral
S Ao final deste curso, você será capaz de:
S Criar páginas HTML5;
S Utilizar folhas de estilo CSS3;
S Utilizar JavaScript e o framework jQuery;
S Criar páginas com funcionalidades Ajax;
S Utilizar frameworks como o Bootstrap;

Desenvolvimento Web
MÓDULO 02
S Pauta:
Ø Introdução ao CSS
Ø O CSS3
Ø Seletores CSS
Ø Classes
Ø Regras, atributos, valores
Ø Exemplos
Ø Links interessantes

S CSS Zen Garden: http://www.csszengarden.com
Exemplos de CSS

Resumo da aula
ü Vamos aprender o que é a linguagem CSS e aonde ela se
insere no Desenvolvimento Web;
ü Entender qual é o problema em aplicar utilizar HTML para
formatação;
ü Saber como reconhecer um CSS quando vê-lo!

Motivação para o CSS
q <font face="Verdana" size="2">Teste</font>
q <b>Olá</b>
q Qual é o problema do código acima?
q Imagine que seja necessário alterar a fonte em TODAS as
páginas.
9

"Style sheets" ou "Folhas de
Estilo"
S CSS é um padrão recomendado pelo W3C para todos os
browsers (World Wide Web Consortium é a entidade que
cuida do desenvolvimento e padronização das tecnologias
ligadas à Web).
S "Cascading Style sheets" ou "Folhas de Estilo Encadeadas"
é uma tecnologia (linguagem) criada para definir estilos
(cores, tipologia, posicionamento, etc ...)

Por que usar padrões?
S Manutenção mais fácil
S Tamanho do arquivo menor (economia de banda e
velocidade no carregamento)
S Maior acessibilidade para o usuário
S Compatibilidade com diferentes navegadores

Recomendações para o
desenvolvedor
S Com CSS economiza-se tempo de criação e manutenção
(isola os códigos de formatação aplicado a várias páginas
HTML em um único arquivo ".css");
S Reduz código de descritores HTML da página (tags);
S os navegadores (browsers) carregam mais rápido;

Recomendações para o
desenvolvedor
S Maior eficiência no gerenciamento do layout;
S CSS é simples pois descreve apenas estilos;
S Com recursos mais avançados de CSS pode-se conseguir um
design sofisticado sem utilização de imagens e tabelas.

Ordem de prioridade
S Default do Browser
S CSS externo (arquivo ".css")
S CSS interno (dentro da tag <head>)
S Estilos inline (dentro do elemento HTML)

Herança
S Herança significa que você pode especificar estilos variados
(classes) para cada elemento na página, e cada classe herdará
algumas características de estilo de seu elemento básico ou
de seu elemento pai na estrutura do documento HTML.

Separação
entre camadas
q HTML:
Ø Conteúdo;
Ø Dados e estrutura;
q CSS:
Ø Apresentação;
Ø Formatação, layout, cores, fontes, posicionamento.
q JavaScript:
Ø Comportamentos;
Ø Programação.
17

Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
Declaração de Regra CSS

Modelo de Caixa
S Tamanho do
Elemento
width:
min-width:
max-width:
height:
min-height:
max-height:

Exemplo 1
P {
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 12pt;
color: #00cc00;
}
P.small
{
font-size: 8pt;
text-align: center;
}

Exemplo 2
S a tag <b> herda a característica "font-size" da tag <p> pois
é filha dentro da estrutura do HTML.

Exemplo 2
<p style="font-size:10pt;color:red;">Este parágrafo foi
definido com tamanho de fonte de 10pts e cor de texto
vermelho. No meio deste texto uma palavra foi colocada em
<b style="font-size:120%;color:blue;">negrito</b>
mas foi alterada sua cor para azul e o tamanho de fonte
aumentado em 20%.</p>.

Sintaxe CSS
S A sintaxe CSS compoe-se de três partes: um seletor,
uma propriedade e um valor.
S selector {property: value}
S O seletor é o elemento/tag que definimos (maioria das
vezes trata-se de uma tag HTML), a propriedade é o
atributo que desejamos inserir para este elemento, e
cada propriedade tem um valor atribuído. A
propriedade e o valor são separados por dois pontos ":"
e delimitados por chaves "{}"

Sintaxe CSS
S Ex: body {color: #000000}
S Se o valor tem múltiplas palavras ele deve ser colocado entre
aspas "" : If the value is multiple words, put quotes around
the value:
S Ex: p {font-family: "Comic Sans MS"}

Sintaxe CSS
S Algumas aplicações de CSS exigem um conjunto maior de
declarações, neste caso é aconselhável definir os seletores
um em cada linha. Ex:
S p
{
text-align: center;
color: black;
font-family: arial
}

Atributo class
S Com o atributo "class" podemos definir diferentes estilos
para um mesmo elemento. Por exemplo, se quiséssemos ter
2 tipos de parágrafos "<p>" em nosso documento HTML:
um alinhado à direita e outro centralizado. Fazemos assim:
styles:

Atributo class
S Ex:
S p.right {text-align: right}
p.center {text-align: center}
S aplicando os estilos definidos na página HTML:
S <p class="right">Este parágrafo está alinhado à
direita</p>
S <p class="center">Este outro parágrafo está
centralizado</p>

Atributo ID
S Com o atributo ID podemos definir um estilo único para ser utilizado em
muitos elementos.
S Ex:
S #right {text-align: right}
S aplicando o estilo na página HTML :
S <p id="right">Este parágrafo está alinhado à direita</p>
<h3 id="right">Este header também ficará alinhado à direita</h3>
S Obs: o atributo ID deve ter valor único no documento.

Comentário no CSS
S Podemos inserir comentários entre as definições de
estilos para melhor documentar a finalidade de
cada uma delas. Este procedimento é
extremamente saudável visto que provavelmente
não lembraremos dos significados e aplicação dos
estilos em um futuro próximo.
S O comentário irá ser ignorado pelo Browser. Ele
começa com "/*", e termina com "*/" :

Comentário no CSS
/* este é um comentário */
p
{
text-align: left;
/* outro comentário */
color: blue;
font-family: verdana,arial,sans-serif
}

Aplicando CSS à página
S CSS podem ser utilizados de três maneiras diferentes: local
(modificando uma tag específica de uma página), geral
(modificando determinados atributos para a toda a página)
ou global (quando criamos um modelo que será aplicado a
várias páginas simultaneamente).

Aplicando CSS a página - Local
S Style Sheet pode modificar os atributos de uma única tag
específica, em um determinado ponto de uma página.
S Os comandos em CSS aplicados localmente seguem a
seguinte sintaxe:
S <tag STYLE="propriedade:valor; propriedade, valor;"...>

Aplicando CSS a página - Local
S Pelo código HTML normal, o tamanho máximo de uma
fonte que podemos obter é estipulado pela tag <FONT>.
Utilizando o CSS podemos aumentar o tamanho com que as
letras seriam tradicionalmente mostradas.
S <FONT FACE="verdana,arial"
SIZE="7">TEXTO</FONT>

Aplicando CSS a página
S Introduzindo comandos de CSS na tag podemos
modificar seus atributos para mostrar a frase com
outra cor e em tamanho maior.
S <FONT style="font-size:50pt; color:red; line-
height:30pt; font-
family:verdana,arial;">TEXTO</FONT>,
S Com o CSS não há limites para o tamanho da
fonte. Ele pode ser definido em pontos, pixels e
outras unidades.

Aplicando CSS a página-Geral
S O comando STYLE no cabeçalho do documento, entre a tag
HTML e a tag BODY, cria um modelo padrão de CSS que
será aplicado a toda uma página e todo o conteúdo da
página obedecerá as propriedades/valores definidas neste
intervalo. Por exemplo:

S <HTML>
<TITLE> ... </TITLE>
<HEAD>
<STYLE type="text/css">
<!--
p {font: 12pt "Corrier, Times"; color: black}
h1 {font: 15px "arial,verdana"; color: #00cc00}
-- >
</STYLE>
</HEAD>
<BODY> ..... </BODY> </HTML>

S Obs: O que está dentro da tag STYLE aparece em
comentário . Isso serve para evitar problemas com
browsers que não suportam CSS. Estando entre comentários,
os atributos funcionarão normalmente em browsers com
capacidade para CSS e serão desprezados por browsers mais
antigos.

Aplicando CSS a página-Global
S Podemos criar um único modelo de Style Sheets para ser
aplicado a múltiplas páginas. Para tanto, devemos construir
um modelo separado de Style Sheets e salvá-lo em um
arquivo de terminação ".css". Esse modelo pode ser
aplicado a qualquer página, apenas referindo-se ao arquivo
".css" no seu cabeçalho, como a seguir:

S <HEAD>
< link rel=stylesheet href="exemplo1.css" type="text/css">
</HEAD>

S Outra maneira de aplicar o modelo CSS é importá-lo. A
diferença do exemplo acima e importá-lo é que a segunda
maneira permite acrescentar estilos na própria página que
está editando, sem precisar alterar o modelo global (o
arquivo .css).

S <HTML>
<STYLE TYPE="text/css">
<!--
@import url (exemplo1.css);
B { font-family: arial; color:black; font-size:10px; }
</STYLE>
<HEAD>
<TITLE>Exemplo 1</TITLE>
</HEAD>

S <BODY>
<P>
O texto segue o modelo de CSS exemplo1.css, mas os
<B>negritos serão alterados</B>.
</P>
</BODY>
</HTML>

Aplicando CSS a página
S OBS: No caso de uma mesma página ter mais de um estilo
aplicado, para saber qual predominará deve-se adotar as
regras de "cascata" citadas anteriormente.

Regras aplicadas em fontes
S font-family - utilizado para indicar qual a fonte que uma tag
ou documento HTML irá mostrar. De forma geral:
S P { font-family: Verdana, Arial, Helvetica }
S Neste exemplo, tudo o que estiver entre as tag <P> e </P>
no documento HTML será visualizado na fonte Verdana. A
razão de definir mais de uma fonte deve-se ao fato de que
nem todos os computadores possuem as mesmas fontes
instaladas. No caso, se o computador não possuir a Verdana
instalada, automaticamente passará para a Arial.

S font-size - utilizado para definir o tamanho das fontes.
Existem 3 formas para definição de tamanho:
S em pontos (pt), pixels (px), cm (cm) e outras unidades de
medida;
S através de palavras-chave;
S em percentagem (%)

S Ponto - pode ser usada para definir o tamanho de um
elemento em uma página HTML. Funcionam bem em
todos os browsers e plataformas operacionais.
S Ex: P { font-size: 20pt } para pontos

S Pixel é uma medida familiar aos web designers. Pode dar uma
boa noção do tamanho que a fonte aparecerá na tela, mas
infelizmente a utilização dessa medida tem causado
problemas para na impressão das páginas em papel.
S B { font-size: 20px } para pixels, por exemplo.

S As unidades de medida que podem ser utilizadas são:
S pt: pontos
S px: pixels
S in: inches
S cm: centímetros
S mm: milímetros, e outras.

S Palavras-chave - é outra maneira de determinar
tamanhos de fonte em CSS :
S xx-small
S x-small
S small
S medium
S large
S x-large
S xx-large

S Percentagem - o tamanho das fontes também pode ser
determinado segundo regras de percentagem:
S P { font-size: 12pt }
B { font-size: 150% }
S No exemplo acima, todo o texto que estiver
compreendido entre as tags <P> e </P> no corpo da
página será mostrados em 12 pontos, assim como todas
as palavras em negrito (<b>) entre as duas tags serão
apresentadas em um tamanho 50% maior.

S font-weight é o comando CSS que controla a propriedade
bold (negrito) de uma tag:
S H1 { font-weight: bold }
S No exemplo acima, todas as palavras da página que
estiverem compreendidas entre as tags <H1> e </H1> serão
mostradas em negrito.

S font-style é o comando CSS que controla a propriedade
italic de uma tag.
S H1 { font-style: italic }
S No exemplo acima o browser irá procurar uma versão
itálico da fonte para apresentar o texto compreendido entre
as tags <H1> e</H1>.

S text-transform serve para controlar os atributos maiúsculas
e minúsculas de um texto:
S P { text-transform: uppercase }
S No exemplo, tudo o que estiver compreendido entre as tags
<P> e </P> será mostrado em maiúsculas COMO NESTE
EXEMPLO.

S text-decoration - serve para controlar o sublinhado das
palavras.
S B { text-decoration: underline }
S No exemplo acima todas as palavras em negrito da página
aparecerão também sublinhadas.

S O mais interessante do comando text-decoration é
que utilizando o atributo none podemos eliminar o
sublinhado de um link. Como abaixo:
S <style type="text/css">

</style>

Regras aplicadas em parágrafos
S line-height - é o comando que controla o
espaçamento entre as linhas de um texto. O espaço
é definido pela distância entre a base das linhas de
um texto.
S P { line-height: 14pt }
S Obs: as unidades de medida são as mesmas
explicadas para o comando font-size: pt, px, in,
cm, mm, pc, ex, em.

S text-align é a comando utilizado para o alinhamento de
parágrafos em CSS. Ela só funciona em elementos que
definam parágrafos, como <P>, <H1>, <H2>,
<BLOCKQUOTE> e <UL>. Os valores que podem ser
aplicados são: left, right, center e justify (justificado).
S P { text-align:justify }

S text-indent é o comando que permite configurar o valor da
indentação de um parágrafo. Também só funciona em
elementos que definam parágrafos, como os descritos para o
text-align.
S P { text-indent:40pt }

Teste
S 1. Qual o significado de CSS?
a. Creative Style Sheets
b. Colorful Style Sheets
c. Cascading Style Sheets
d. Computer Style Sheets

Teste
S 1. Qual o significado de CSS?
c. Cascading Style Sheets

Teste
S 2. Qual é a opção correta para
referenciarmos um CSS externo?
a. <link rel="stylesheet" type="text/css"
href="mystyle.css">
b. <style src="mystyle.css">
c. <stylesheet>mystyle.css</stylesheet>

Teste
S 2. Qual é a opção correta para
referenciarmos um CSS externo?
a. <link rel="stylesheet" type="text/css"
href="mystyle.css">

Teste
S 3. Em que parte do documento HTML é
correto referenciar um arquivo CSS externo?
S a. Topo do conteúdo
S b. Na sessão <head>
S c. Na sessão <body>
S d. No final do documento.

Teste
S 3. Em que parte do documento HTML é
correto referenciar um arquivo CSS externo?
b. Na sessão<head>

Teste
S 4. Qual tag HTML é utilizada para definir um
CSS interno?
a. <css>
b. <style>
c. <script>

Teste
S 4. Qual tag HTML é utilizada para definir um
CSS interno?
b. <style>

Teste
S 5. Qual atributo HTML é utilizado para definir
estilos inline?
a. Styles
b. Style
c. Font
d. class

Teste
S 5. Qual atributo HTML é utilizado para definir
estilos inline?
b. Style

Teste
S 6. Qual é a sintaxe correta CSS?
a. {body;color:black}
b. body {color: black}
c. body:color=black
d. {body:color=black(body}

Teste
S 6. Qual é a sintaxe correta CSS?
b. body {color: black}

Teste
S 7. Como inserir comentários no arquivo de
CSS?
a. /* this is a comment */
b. ' this is a comment'
c. // this is a comment
d. // this is a comment //

Teste
S 7. Como inserir comentários no arquivo de
CSS?
a. /* this is a comment */

Tableless - Definição
S Tableless é uma filosofia de desenvolvimento client-
side que prega a abordagem do HTML em seu
significado semântico.
S As tags HTML passam a ser usadas para aquilo cujo
qual foram originalmente designadas

Tableless
S Antigamente, grande parte dos desenvolvedores construíam
seus layouts usando tabelas, que não é a tag semanticamente
correta para construção de layouts.
S Por conta disso começaram a chamar o desenvolvimento
semanticamente coerente de "Tableless".

Novidades do CSS3
1. Criar Cantos arredondados
2. Sombra projetada
3. Criar Gradiente Botões
4. Várias imagens de fundo
5. Layout de várias colunas
6. Transformar
7. Transição

Cantos Arredondados
x = horizontal radius [ <length> | <%> ]
y = vertical radius [ <length> | <%> ]
border-top-left radius: x y; border-top-right-radius: x y;
border-bottom-left-radius: x y; border-bottom-right-radius: 0;
border -*-*-radius: [x] [y]?

Cantos Arredondados
border-radius: [x] {1,4} [ / [y] {1,4} ]?
border-radius:5px 10px 10px 10px / 10px 10px 5px 5px;
border-radius:5px 10px / 10px;
border radius: 10px;

Cantos Arredondados
W3C Specification Mozilla Implementation
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

Cantos Arredondados
S Safari eChrome:
S V3.0: Use o prefixo -webkit-

Sombra Projetada
text-shadow: x y b color
S x = posição horizontal
§ x < 0: esquerda do texto
§ x > 0: direita do texto
S y = posição vertical
§ y < 0: acima do texto
§ y > 0: abaixo do texto
S b = raio de desfoque

Sombra Projetada
box-shadow: x y b color
Exemplos:
-webkit-box-shadow: -3px 3px 3px #999999;
-moz-box-shadow: -3px 3px 3px #999999;
text-shadow: -4px 4px 3px #999999;

Degradê
S rgba(r, g, b, opacity)
S background:-webkit-gradient(linear,0% 0%,0% 100%,
from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
S background:-moz-linear-
gradient(top,rgba(255,255,255,1),
rgba(185,185,185,1));

Layout Multi Colunas
#multi-column {
/* For Mozilla: */
-moz-column-width: 13em;
-moz-column-gap: 1em;
/* For WebKit: */
-webkit-column-width: 13em;
-webkit-column-gap: 1em;
}

Layout Multi Colunas
#multi-column {
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
}

Fontes
S font-face
@font-face {
font-family: Gentium;
src: url(http://site/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }
S font-variant
font-variant: [normal|small-caps]
S font-weight
font-weight: [100…900];
S font-stretch
font-stretch: [ultra-
condensed|expanded|etc];

Ferramentas de Cor
Color Picker / Color Wheel
S Extensão para Firefox:
S http://www.colorzilla.com/firefox/
S https://addons.mozilla.org/en-US/firefox/addon/60
S Online:
S http://www.colorpicker.com/
S http://www.workwithcolor.com/doughnut-color-picker-01.htm
S http://www.febooti.com/products/iezoom/online-help/online-color-
chart-picker.html
S http://www.ficml.org/jemimap/style/color/wheel.html
21/11/15 89

Ferramentas de Cor
S Color Blender:
S http://meyerweb.com/eric/tools/color-
blend/
S Referências sobre cores:
S http://www.morecrayons.com/
21/11/15 90

Links Interessantes CSS3
S https://pattle.github.io/simpsons-in-css/
S http://revistaw.com.br/animacoes-em-css/
S http://tutorialzine.com/2014/07/20-impressive-css3-techniques-
libraries-and-examples/
S http://tutorialzine.com/2013/10/12-awesome-css3-features-you-
can-finally-use/
S http://www.creativebloq.com/css3/animation-with-css3-712437

Muito obrigado!
Prof. Rodrigo Santa Maria
rodrigo@digitallymade.com.br
facebook.com/rodrigobsm
Contato

Curso de Desenvolvimento Web - Módulo 02 - CSS

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Curso de Desenvolvimento Web - Módulo 02 - CSS (20)

Mais de Rodrigo Bueno Santa Maria, BS, MBA (6)

Curso de Desenvolvimento Web - Módulo 02 - CSS