Curso de Desenvolvimento Web - Módulo 02 - CSS

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 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 (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 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:
Aplicando CSS a página-Geral 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:
Aplicando CSS a página-Global S <HEAD> < link rel=stylesheet href="exemplo1.css" type="text/css"> </HEAD>
Aplicando CSS a página-Global 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).
Aplicando CSS a página-Global 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.
Regras aplicadas em parágrafos 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 }
Regras aplicadas em parágrafos 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".
S CSS3 Novidades
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];
Google Fonts
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

Check these out next

Curso de Desenvolvimento Web - Módulo 02 - CSS

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

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

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

Último(20)

Curso de Desenvolvimento Web - Módulo 02 - CSS