Curso de Desenvolvimento Web - Módulo 02 - CSS

S

Desenvolvimento WebCom HTML, CSS e JavaScript

Prof. Rodrigo Santa [email protected]

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: [email protected]

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 WebMÓDULO 02

S Pauta:

Ø Introdução ao CSS

Ø O CSS3

Ø Seletores CSS

Ø Classes

Ø Regras, atributos, valores

Ø Exemplos

Ø Links interessantes

S

Introdução ao CSS

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.

Organização

16

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

18

21/11/15

(colam o HTML com o CSS!)

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 tagespecí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 tagHTML 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">. 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"></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 Sheetsb. Colorful Style Sheetsc. Cascading Style Sheetsd. 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. Stylesb. Stylec. Fontd. 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=blackd. {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 commentd. // 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".

S

CSS3Novidades

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-leftradius: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: 5px10px10px10px/ 10px10px5px5px;border-radius: 5px10px/ 10px;borderradius:10px;

Cantos Arredondados

W3CSpecification MozillaImplementation

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-weightfont-weight: [100…900];

S font-stretchfont-stretch: [ultra-

condensed|expanded|etc];

Google Fonts

Ferramentas de CorColor 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.htmS http://www.febooti.com/products/iezoom/online-help/online-color-

chart-picker.htmlS 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 [email protected]/rodrigobsm

Contato

Internet

Curso de Desenvolvimento Web - Módulo 02 - CSS