SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler offline
Professor: Mauro Jansen
Programação Web 1
CSS:
Cascade Style Sheets
Prof. Mauro Jansen
Linguagem de Programação
Linguagem C – parte 1 2
Estrutura e elementos
básicos do CSS
Prof. Mauro Jansen
CSS: dando estilo e aparência
à página web
 CSS (Cascade Style Sheets): folhas de
estilo compostas por camadas
 Recurso usado para defnir a
apresentação (aparência) de páginas
web
 O CSS complementa e trabalha em
conjunto como o HTML
 Possibilita criar aparência e efeitos
visuais diferenciados
Linguagem de Programação
Linguagem C – parte 1 3
Prof. Mauro Jansen
HTML e CSS
Prof. Mauro Jansen
HTML e CSS
 O HTML é responsável pela estrutura do
site
 O CSS é responsável pela apresentação
visual do site:
 Cores
 Tipos de fontes
 Cores de fundo
 Bordas
 Etc.
Prof. Mauro Jansen
Vantagens do uso de CSS
 Controle e facilidade de manutenção visual
do site através de um arquivo externo
 Aumento do desempenho e velocidade de
páginas
 Possibilidade de elaborar layouts para
atender diferentes tipos de dispositivos
Prof. Mauro Jansen
Elementos do CSS
 O CSS tem como estrutura básica
defnições que envolvem os três
elementos básicos abaixo:
 Seletor
 Propriedade
 Valor da propriedade
Prof. Mauro Jansen
Formato (sintaxe) de uma
defnição CSS
seletor {propriedade:valor;}
Identifica o
elemento ou grupo
de elementos html
que desejamos
estilizar. Ex: h1,
h2, p
É a característica que
desejamos modificar ou
configurar no(s)
elementos(s) definidos
pelo seletor. Ex: color,
font, etc.
Valor a ser atribuído
para a propriedade
(característica) indicada
 Dentro das chaves { } podemos ter mais de uma propriedade e
valores separados por ponto e vírgula (;)
 Ex: Define que todo elemento <h1> terá cor verde e fonte de tamanho 40 pixels:
h1 {color:green; font-size: 40px;}
Prof. Mauro Jansen
Onde fcam as defnições CSS
 As defnições CSS podem ser colocadas:
 Na seção head do arquivo html, dentro da
tag <style>
 Em um arquivo CSS (.css) separado

Criamos um arquivo com a terminação .css
separado e referenciamos ele dentro do html com a
tag <link>, na seção <head>

O arquivo .css contém apenas defnições CSS (não
precisa têm tags html)

Vantagens: permite alterar a aparência do site,
alterando apenas o arquivo .css, além de permitir a
portabilidade dos estilos para outros sites
Prof. Mauro Jansen
Defnição CSS no mesmo
arquivo html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aplicando CSS e Sintaxe</title>
<style type="text/css">
h1 {color:green; font-size: 40px;}
</style>
</head>
<body>
<h1>Olá Mundo</h1>
</body>
</html>
Arquivo aplicandocss.html:
Prof. Mauro Jansen
Defnição CSS em arquivo
separado
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aplicando CSS e Sintaxe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Olá Mundo</h1>
</body>
</html>
Arquivo aplicandocss.html:
Arquivo style.css (guardar numa subpasta css):
h1 {color:green; font-size: 40px}
Prof. Mauro Jansen
/* Comentários em css */
 Dentro do arquivo .css. qualquer coisa
entre os delimitadores /* e */ será ignorada
pelo navegador web
 Portanto essa solução pode e deve ser
usada para documentar o seu arquivo .css
 Exemplo:
/* arquivo CSS padrão para estudos */
h1 {color: blue; font-size: 50px;}
p {color: green; font-size: 12px;}
Prof. Mauro Jansen
Seletores
Prof. Mauro Jansen
Seletores
 Seletor é a defnição do elemento ou grupo de
elementos html que desejamos estilizar
 Existem várias formas (estruturas) para defnir o
seletor do estilo e cada uma segue uma sintaxe. Ex:
 Universal (*): todos elementos html
 Contextual: somente os elementos e que estão contidos
em um outro elemento f
 Etc.
 Boa parte da inteligência do CSS está em saber utilizar
os seletores de uma maneira efcaz, escalável e
inteligente.
Prof. Mauro Jansen
Seletor elemento ou seletor
tag
 Defne propriedades apenas para o
elemento html identifcado
 Formato: e {propriedade:valor; ...}
 Exemplo:
/* todo título h1 cor azul e fonte tam.50 */
h1 {color: blue; font-size: 50px;}
/* todo parágrafo cor verde e fonte tam.12 */
p {color: green; font-size: 12px;}
Prof. Mauro Jansen
Seletor universal
 Defne que TODOS (*=todos) os elementos terão
as propriedades defnidas, caso não existam
propriedades específcas defnidas
 Formato: * {propriedade: valor; … }
 Serve para “resetar” ou defnir a estilização
padrão do site
 Exemplo:
/* este seletor universal define margem 0,
distanciamento 0, e cor preta */
* {margin:0; padding:0; color:black;}
Prof. Mauro Jansen
Seletor id (identidade)
 Seleciona somente um elemento cujo
identifcador (parâmetro id da tag html) é
igual ao informado após o símbolo #
 Formato:
 #id {propriedade: valor; …}
 Onde id é o id do elemento
 Exemplo:
/* todo elemento com id=”nome” na cor azul e fonte tam.50 */
#nome {color: blue; font-size: 50px;}
Prof. Mauro Jansen
Seletor agrupamento
 É útil quando queremos aplicar o as mesmas
características a mais de um elemento html
 Formato:
 e,f {propriedade: valor; ...}
 Exemplo:
/* define que h1, h2 e p terão este seletor universal
define margem 0, distanciamento 0, e cor preta */
H1,h2,p {margin:0; padding:0; color:black;}
Prof. Mauro Jansen
Seletor atributo
 Seleciona apenas elementos que tenham o
atributo especifcado entre colchetes [ ]
 Padrões possíveis:
 e [atrib]: contém o atributo atrib
 e [atrib=”valor”]: contém o atributo atrib com o
valor especifcado
 e [atrib|=”valor”]: contém o atributo atrib com o
valor idêntico ou iniciando com o valor especifcado
Prof. Mauro Jansen
Seletor atributo com valor: exemplo
Arquivo seletores.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Seletores</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Texto h1</h1>
<p>Parágrafo</p> <br>
Nome: <input type="text" name="nome"> <br>
Email: <input type="email" name="email"> <br>
<input type="submit" name="enviar" value="Enviar">
</body>
</html>
Prof. Mauro Jansen
Seletor atributo com valor: exemplo
Arquivo cssstyle.css (guardar numa subpasta css):
/* seletor universal */
* {margin:0; padding 0; color:red;}
/* seletor tag ou seletor elemento */
h1 {color: blue; font-size: 50px;}
p {color: green; font-size: 12px;}
/* seletor atributo:
- Todo input de texto ou e-mail com largura 200, cor cinza, altura 35
- Todo submit com largura 50, cor de fundo verde, altura 35, sem
borda, cor de frente branca
*/
input[type="text"] {width: 200px; background-color: #ccc; height:
35px; border: none;}
input[type="email"] {width: 200px; background-color: #ccc; height:
35px; border: none;}
input[type="submit"] {width: 50px; background-color: green; height:
35px; border: none; color: white;}
Prof. Mauro Jansen
Seletor classe (.)
 Seleciona elementos html com um atributo class
específco, permitindo criar nomes de estilos
próprios com o valor do atributo class
 Usamos um ponto (.) seguido do nome desejado
 Formatos:
 .nomeDaClasse {propriedade:valor; …}

Este formato permite que a classe seja usada por
qualquer elemento html
 e.nomeDaClasse {propriedade:valor; …}

Neste formato a classe só poderá ser usada por
elementos html especifcados (e)
Prof. Mauro Jansen
Seletor classe (.): exemplo
/* seletor classe */
/* classe para definir qualquer elemento c/ cor azul e centralizado */
.azulcentro {color:blue; text-align:center;}
/* classe para definir paragrafo com fonte grande */
p.grande {font-size=50px;}
<p class=”azulcentro”>Este parágrafo ficará azul e centralizado. Este
parágrafo ficará azul e centralizado. Este parágrafo ficará azul e
centralizado.</p>
<p class=”grande”>Este parágrafo ficará com fonte grande.</p>
Arquivo classes.html (somente conteúdo do body):
Arquivo cssclasses.css (guardar numa subpasta css):
Prof. Mauro Jansen
Seletores
Padrão Significado Exemplo CSS
* Seletor universal: todo elementos * { color: #00000; }
e Seletor de tipo de elemento ou de tag:
somente o elemento <e>
p { font-family: sans-serif; }
e,f Seletor agrupamento: aplica as características
aos elementos <e> e <f>
e f Seletor contextual: qualquer elemento <f> que
estiver contido num elemento <e>
h1 em { color: blue; }
e + f Seletor adjacente: seleciona um elemento <f>
que estiver imediatamente depois de um
elemento <e>
e [atr] Seletor atributo: somente elementos <e> que
têm o atributo indicado
e [atr=”valor”] Seletor atributo: somente elementos <e> que
têm o atributo e valor indicados
Prof. Mauro Jansen
Propriedades
Prof. Mauro Jansen
Dimensões (width, height, max, min)
 width: largura fxa, em px ou %. Se não for
defnida, segue o tamanho da janela do navegador
 height: altura fxa, em px ou %. Se não for
defnida, segue o tamanho do conteúdo
 max: defne o valor máximo para uma dimensão
(largura ou altura), em px
 min: defne o valor mínimo para uma dimensão
(largura ou altura), em px
Prof. Mauro Jansen
Dimensões (width, height, max, min)
 Crie uma arquivo .css que defna, para a tag
<div>, as propriedades cor de fundo verde,
cor de frente amarela e espaçamento 20px;
 Crie um arquivo html com um parágrafo de
tamanho médio e associe esse html ao css
criado no item anterior
 Abra o arquivo html e veja o resultado
 No arquivo .css, altere a propriedade width
para 500px, atualize, mude o tamanho da
janela do navegador e veja o impacto na div
Prof. Mauro Jansen
Referências
 Mozilla Developer Network. Aprendendo HTML.
Disponível em < https://developer.mozilla.org/pt-
BR/docs/Aprender/HTML >
 W3C. Disponível em <
http://www.w3c.br/divulgacao/guiasreferencia/css2
/ >
 http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.
pdf
 https://www.chiefofdesign.com.br/css/
Linguagem de Programação
Linguagem C – parte 1 28

Mais conteúdo relacionado

Mais procurados

Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworksandreluizlc
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Redes 7 ferramentas para montagem de redes
Redes 7 ferramentas para montagem de redesRedes 7 ferramentas para montagem de redes
Redes 7 ferramentas para montagem de redesMauro Pereira
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Lógica de Programação - Unimep/Pronatec - Aula08
Lógica de Programação - Unimep/Pronatec - Aula08Lógica de Programação - Unimep/Pronatec - Aula08
Lógica de Programação - Unimep/Pronatec - Aula08André Phillip Bertoletti
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosTiago Antônio da Silva
 
SLIDE SOBRE O LIBREOFFICE
SLIDE SOBRE O LIBREOFFICESLIDE SOBRE O LIBREOFFICE
SLIDE SOBRE O LIBREOFFICELiana Évily
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)Gustavo Zimmermann
 

Mais procurados (20)

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Python - Introdução
Python - IntroduçãoPython - Introdução
Python - Introdução
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Redes 7 ferramentas para montagem de redes
Redes 7 ferramentas para montagem de redesRedes 7 ferramentas para montagem de redes
Redes 7 ferramentas para montagem de redes
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Scratch cap-1
Scratch cap-1Scratch cap-1
Scratch cap-1
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Lógica de Programação - Unimep/Pronatec - Aula08
Lógica de Programação - Unimep/Pronatec - Aula08Lógica de Programação - Unimep/Pronatec - Aula08
Lógica de Programação - Unimep/Pronatec - Aula08
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Processadores
ProcessadoresProcessadores
Processadores
 
SLIDE SOBRE O LIBREOFFICE
SLIDE SOBRE O LIBREOFFICESLIDE SOBRE O LIBREOFFICE
SLIDE SOBRE O LIBREOFFICE
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
 

Semelhante a Programação Web - CSS

Semelhante a Programação Web - CSS (20)

CSS
CSSCSS
CSS
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Post 4
Post   4Post   4
Post 4
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Seletores css
Seletores cssSeletores css
Seletores css
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
Css Curso completo
Css Curso completoCss Curso completo
Css Curso completo
 
Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )
 
Aw aula 04
Aw aula 04Aw aula 04
Aw aula 04
 
Tutorial Css Parte 1
Tutorial Css  Parte 1Tutorial Css  Parte 1
Tutorial Css Parte 1
 
CSS
CSSCSS
CSS
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
PW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdfPW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdf
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
Uma breve introdução a css e bootstrap
Uma breve introdução a css e bootstrapUma breve introdução a css e bootstrap
Uma breve introdução a css e bootstrap
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 

Mais de Mauro Pereira

Exercicio introducao a arquitetura de computadores
Exercicio    introducao a arquitetura de computadoresExercicio    introducao a arquitetura de computadores
Exercicio introducao a arquitetura de computadoresMauro Pereira
 
Introdução à Arquitetura de Computadores
Introdução à Arquitetura de ComputadoresIntrodução à Arquitetura de Computadores
Introdução à Arquitetura de ComputadoresMauro Pereira
 
Sistemas de Numeracao
Sistemas de NumeracaoSistemas de Numeracao
Sistemas de NumeracaoMauro Pereira
 
Lógica binária, potas lógicas e circuitos lógicos
Lógica binária, potas lógicas e circuitos lógicosLógica binária, potas lógicas e circuitos lógicos
Lógica binária, potas lógicas e circuitos lógicosMauro Pereira
 
Trabalho para nota da etapa 2 2017.1
Trabalho para nota da etapa 2 2017.1Trabalho para nota da etapa 2 2017.1
Trabalho para nota da etapa 2 2017.1Mauro Pereira
 
Redes 6 equipamentos ativos da rede
Redes 6 equipamentos ativos da redeRedes 6 equipamentos ativos da rede
Redes 6 equipamentos ativos da redeMauro Pereira
 
Redes 4 endereçamento
Redes 4 endereçamentoRedes 4 endereçamento
Redes 4 endereçamentoMauro Pereira
 
Redes 2 padronização e arquitetura de redes
Redes 2 padronização e arquitetura de redesRedes 2 padronização e arquitetura de redes
Redes 2 padronização e arquitetura de redesMauro Pereira
 
Redes 1 introducao historico conceitos
Redes 1 introducao historico conceitosRedes 1 introducao historico conceitos
Redes 1 introducao historico conceitosMauro Pereira
 
6 softwares de manutenção
6 softwares de manutenção6 softwares de manutenção
6 softwares de manutençãoMauro Pereira
 
4.1 softwares e configurações importantes
4.1 softwares e configurações importantes4.1 softwares e configurações importantes
4.1 softwares e configurações importantesMauro Pereira
 
Redes padroes e cabeamento
Redes padroes e cabeamentoRedes padroes e cabeamento
Redes padroes e cabeamentoMauro Pereira
 
Trabalho para nota da etapa 2 2015.2
Trabalho para nota da etapa 2 2015.2Trabalho para nota da etapa 2 2015.2
Trabalho para nota da etapa 2 2015.2Mauro Pereira
 
Exercicio 1 - conceitos camadas e protocolos
Exercicio 1 - conceitos camadas e protocolosExercicio 1 - conceitos camadas e protocolos
Exercicio 1 - conceitos camadas e protocolosMauro Pereira
 
Guia prático para criar algoritmos
Guia prático para criar algoritmosGuia prático para criar algoritmos
Guia prático para criar algoritmosMauro Pereira
 
Exercicio 2 endereços, dispositivos, internet-intranet-extranet, padroes, c...
Exercicio 2   endereços, dispositivos, internet-intranet-extranet, padroes, c...Exercicio 2   endereços, dispositivos, internet-intranet-extranet, padroes, c...
Exercicio 2 endereços, dispositivos, internet-intranet-extranet, padroes, c...Mauro Pereira
 
Microprocessadores ii arquitetura
Microprocessadores ii arquiteturaMicroprocessadores ii arquitetura
Microprocessadores ii arquiteturaMauro Pereira
 
Microprocessadores ii revisão de linguagem de programação (parte2)
Microprocessadores ii revisão de linguagem de programação (parte2)Microprocessadores ii revisão de linguagem de programação (parte2)
Microprocessadores ii revisão de linguagem de programação (parte2)Mauro Pereira
 

Mais de Mauro Pereira (20)

Exercicio introducao a arquitetura de computadores
Exercicio    introducao a arquitetura de computadoresExercicio    introducao a arquitetura de computadores
Exercicio introducao a arquitetura de computadores
 
Introdução à Arquitetura de Computadores
Introdução à Arquitetura de ComputadoresIntrodução à Arquitetura de Computadores
Introdução à Arquitetura de Computadores
 
Sistemas de Numeracao
Sistemas de NumeracaoSistemas de Numeracao
Sistemas de Numeracao
 
Lógica binária, potas lógicas e circuitos lógicos
Lógica binária, potas lógicas e circuitos lógicosLógica binária, potas lógicas e circuitos lógicos
Lógica binária, potas lógicas e circuitos lógicos
 
Trabalho para nota da etapa 2 2017.1
Trabalho para nota da etapa 2 2017.1Trabalho para nota da etapa 2 2017.1
Trabalho para nota da etapa 2 2017.1
 
Redes 6 equipamentos ativos da rede
Redes 6 equipamentos ativos da redeRedes 6 equipamentos ativos da rede
Redes 6 equipamentos ativos da rede
 
Redes 4 endereçamento
Redes 4 endereçamentoRedes 4 endereçamento
Redes 4 endereçamento
 
Redes 5 cabeamento
Redes 5 cabeamentoRedes 5 cabeamento
Redes 5 cabeamento
 
Redes 3 protocolos
Redes 3 protocolosRedes 3 protocolos
Redes 3 protocolos
 
Redes 2 padronização e arquitetura de redes
Redes 2 padronização e arquitetura de redesRedes 2 padronização e arquitetura de redes
Redes 2 padronização e arquitetura de redes
 
Redes 1 introducao historico conceitos
Redes 1 introducao historico conceitosRedes 1 introducao historico conceitos
Redes 1 introducao historico conceitos
 
6 softwares de manutenção
6 softwares de manutenção6 softwares de manutenção
6 softwares de manutenção
 
4.1 softwares e configurações importantes
4.1 softwares e configurações importantes4.1 softwares e configurações importantes
4.1 softwares e configurações importantes
 
Redes padroes e cabeamento
Redes padroes e cabeamentoRedes padroes e cabeamento
Redes padroes e cabeamento
 
Trabalho para nota da etapa 2 2015.2
Trabalho para nota da etapa 2 2015.2Trabalho para nota da etapa 2 2015.2
Trabalho para nota da etapa 2 2015.2
 
Exercicio 1 - conceitos camadas e protocolos
Exercicio 1 - conceitos camadas e protocolosExercicio 1 - conceitos camadas e protocolos
Exercicio 1 - conceitos camadas e protocolos
 
Guia prático para criar algoritmos
Guia prático para criar algoritmosGuia prático para criar algoritmos
Guia prático para criar algoritmos
 
Exercicio 2 endereços, dispositivos, internet-intranet-extranet, padroes, c...
Exercicio 2   endereços, dispositivos, internet-intranet-extranet, padroes, c...Exercicio 2   endereços, dispositivos, internet-intranet-extranet, padroes, c...
Exercicio 2 endereços, dispositivos, internet-intranet-extranet, padroes, c...
 
Microprocessadores ii arquitetura
Microprocessadores ii arquiteturaMicroprocessadores ii arquitetura
Microprocessadores ii arquitetura
 
Microprocessadores ii revisão de linguagem de programação (parte2)
Microprocessadores ii revisão de linguagem de programação (parte2)Microprocessadores ii revisão de linguagem de programação (parte2)
Microprocessadores ii revisão de linguagem de programação (parte2)
 

Programação Web - CSS

  • 1. Professor: Mauro Jansen Programação Web 1 CSS: Cascade Style Sheets
  • 2. Prof. Mauro Jansen Linguagem de Programação Linguagem C – parte 1 2 Estrutura e elementos básicos do CSS
  • 3. Prof. Mauro Jansen CSS: dando estilo e aparência à página web  CSS (Cascade Style Sheets): folhas de estilo compostas por camadas  Recurso usado para defnir a apresentação (aparência) de páginas web  O CSS complementa e trabalha em conjunto como o HTML  Possibilita criar aparência e efeitos visuais diferenciados Linguagem de Programação Linguagem C – parte 1 3
  • 5. Prof. Mauro Jansen HTML e CSS  O HTML é responsável pela estrutura do site  O CSS é responsável pela apresentação visual do site:  Cores  Tipos de fontes  Cores de fundo  Bordas  Etc.
  • 6. Prof. Mauro Jansen Vantagens do uso de CSS  Controle e facilidade de manutenção visual do site através de um arquivo externo  Aumento do desempenho e velocidade de páginas  Possibilidade de elaborar layouts para atender diferentes tipos de dispositivos
  • 7. Prof. Mauro Jansen Elementos do CSS  O CSS tem como estrutura básica defnições que envolvem os três elementos básicos abaixo:  Seletor  Propriedade  Valor da propriedade
  • 8. Prof. Mauro Jansen Formato (sintaxe) de uma defnição CSS seletor {propriedade:valor;} Identifica o elemento ou grupo de elementos html que desejamos estilizar. Ex: h1, h2, p É a característica que desejamos modificar ou configurar no(s) elementos(s) definidos pelo seletor. Ex: color, font, etc. Valor a ser atribuído para a propriedade (característica) indicada  Dentro das chaves { } podemos ter mais de uma propriedade e valores separados por ponto e vírgula (;)  Ex: Define que todo elemento <h1> terá cor verde e fonte de tamanho 40 pixels: h1 {color:green; font-size: 40px;}
  • 9. Prof. Mauro Jansen Onde fcam as defnições CSS  As defnições CSS podem ser colocadas:  Na seção head do arquivo html, dentro da tag <style>  Em um arquivo CSS (.css) separado  Criamos um arquivo com a terminação .css separado e referenciamos ele dentro do html com a tag <link>, na seção <head>  O arquivo .css contém apenas defnições CSS (não precisa têm tags html)  Vantagens: permite alterar a aparência do site, alterando apenas o arquivo .css, além de permitir a portabilidade dos estilos para outros sites
  • 10. Prof. Mauro Jansen Defnição CSS no mesmo arquivo html <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Aplicando CSS e Sintaxe</title> <style type="text/css"> h1 {color:green; font-size: 40px;} </style> </head> <body> <h1>Olá Mundo</h1> </body> </html> Arquivo aplicandocss.html:
  • 11. Prof. Mauro Jansen Defnição CSS em arquivo separado <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Aplicando CSS e Sintaxe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Olá Mundo</h1> </body> </html> Arquivo aplicandocss.html: Arquivo style.css (guardar numa subpasta css): h1 {color:green; font-size: 40px}
  • 12. Prof. Mauro Jansen /* Comentários em css */  Dentro do arquivo .css. qualquer coisa entre os delimitadores /* e */ será ignorada pelo navegador web  Portanto essa solução pode e deve ser usada para documentar o seu arquivo .css  Exemplo: /* arquivo CSS padrão para estudos */ h1 {color: blue; font-size: 50px;} p {color: green; font-size: 12px;}
  • 14. Prof. Mauro Jansen Seletores  Seletor é a defnição do elemento ou grupo de elementos html que desejamos estilizar  Existem várias formas (estruturas) para defnir o seletor do estilo e cada uma segue uma sintaxe. Ex:  Universal (*): todos elementos html  Contextual: somente os elementos e que estão contidos em um outro elemento f  Etc.  Boa parte da inteligência do CSS está em saber utilizar os seletores de uma maneira efcaz, escalável e inteligente.
  • 15. Prof. Mauro Jansen Seletor elemento ou seletor tag  Defne propriedades apenas para o elemento html identifcado  Formato: e {propriedade:valor; ...}  Exemplo: /* todo título h1 cor azul e fonte tam.50 */ h1 {color: blue; font-size: 50px;} /* todo parágrafo cor verde e fonte tam.12 */ p {color: green; font-size: 12px;}
  • 16. Prof. Mauro Jansen Seletor universal  Defne que TODOS (*=todos) os elementos terão as propriedades defnidas, caso não existam propriedades específcas defnidas  Formato: * {propriedade: valor; … }  Serve para “resetar” ou defnir a estilização padrão do site  Exemplo: /* este seletor universal define margem 0, distanciamento 0, e cor preta */ * {margin:0; padding:0; color:black;}
  • 17. Prof. Mauro Jansen Seletor id (identidade)  Seleciona somente um elemento cujo identifcador (parâmetro id da tag html) é igual ao informado após o símbolo #  Formato:  #id {propriedade: valor; …}  Onde id é o id do elemento  Exemplo: /* todo elemento com id=”nome” na cor azul e fonte tam.50 */ #nome {color: blue; font-size: 50px;}
  • 18. Prof. Mauro Jansen Seletor agrupamento  É útil quando queremos aplicar o as mesmas características a mais de um elemento html  Formato:  e,f {propriedade: valor; ...}  Exemplo: /* define que h1, h2 e p terão este seletor universal define margem 0, distanciamento 0, e cor preta */ H1,h2,p {margin:0; padding:0; color:black;}
  • 19. Prof. Mauro Jansen Seletor atributo  Seleciona apenas elementos que tenham o atributo especifcado entre colchetes [ ]  Padrões possíveis:  e [atrib]: contém o atributo atrib  e [atrib=”valor”]: contém o atributo atrib com o valor especifcado  e [atrib|=”valor”]: contém o atributo atrib com o valor idêntico ou iniciando com o valor especifcado
  • 20. Prof. Mauro Jansen Seletor atributo com valor: exemplo Arquivo seletores.html: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Seletores</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Texto h1</h1> <p>Parágrafo</p> <br> Nome: <input type="text" name="nome"> <br> Email: <input type="email" name="email"> <br> <input type="submit" name="enviar" value="Enviar"> </body> </html>
  • 21. Prof. Mauro Jansen Seletor atributo com valor: exemplo Arquivo cssstyle.css (guardar numa subpasta css): /* seletor universal */ * {margin:0; padding 0; color:red;} /* seletor tag ou seletor elemento */ h1 {color: blue; font-size: 50px;} p {color: green; font-size: 12px;} /* seletor atributo: - Todo input de texto ou e-mail com largura 200, cor cinza, altura 35 - Todo submit com largura 50, cor de fundo verde, altura 35, sem borda, cor de frente branca */ input[type="text"] {width: 200px; background-color: #ccc; height: 35px; border: none;} input[type="email"] {width: 200px; background-color: #ccc; height: 35px; border: none;} input[type="submit"] {width: 50px; background-color: green; height: 35px; border: none; color: white;}
  • 22. Prof. Mauro Jansen Seletor classe (.)  Seleciona elementos html com um atributo class específco, permitindo criar nomes de estilos próprios com o valor do atributo class  Usamos um ponto (.) seguido do nome desejado  Formatos:  .nomeDaClasse {propriedade:valor; …}  Este formato permite que a classe seja usada por qualquer elemento html  e.nomeDaClasse {propriedade:valor; …}  Neste formato a classe só poderá ser usada por elementos html especifcados (e)
  • 23. Prof. Mauro Jansen Seletor classe (.): exemplo /* seletor classe */ /* classe para definir qualquer elemento c/ cor azul e centralizado */ .azulcentro {color:blue; text-align:center;} /* classe para definir paragrafo com fonte grande */ p.grande {font-size=50px;} <p class=”azulcentro”>Este parágrafo ficará azul e centralizado. Este parágrafo ficará azul e centralizado. Este parágrafo ficará azul e centralizado.</p> <p class=”grande”>Este parágrafo ficará com fonte grande.</p> Arquivo classes.html (somente conteúdo do body): Arquivo cssclasses.css (guardar numa subpasta css):
  • 24. Prof. Mauro Jansen Seletores Padrão Significado Exemplo CSS * Seletor universal: todo elementos * { color: #00000; } e Seletor de tipo de elemento ou de tag: somente o elemento <e> p { font-family: sans-serif; } e,f Seletor agrupamento: aplica as características aos elementos <e> e <f> e f Seletor contextual: qualquer elemento <f> que estiver contido num elemento <e> h1 em { color: blue; } e + f Seletor adjacente: seleciona um elemento <f> que estiver imediatamente depois de um elemento <e> e [atr] Seletor atributo: somente elementos <e> que têm o atributo indicado e [atr=”valor”] Seletor atributo: somente elementos <e> que têm o atributo e valor indicados
  • 26. Prof. Mauro Jansen Dimensões (width, height, max, min)  width: largura fxa, em px ou %. Se não for defnida, segue o tamanho da janela do navegador  height: altura fxa, em px ou %. Se não for defnida, segue o tamanho do conteúdo  max: defne o valor máximo para uma dimensão (largura ou altura), em px  min: defne o valor mínimo para uma dimensão (largura ou altura), em px
  • 27. Prof. Mauro Jansen Dimensões (width, height, max, min)  Crie uma arquivo .css que defna, para a tag <div>, as propriedades cor de fundo verde, cor de frente amarela e espaçamento 20px;  Crie um arquivo html com um parágrafo de tamanho médio e associe esse html ao css criado no item anterior  Abra o arquivo html e veja o resultado  No arquivo .css, altere a propriedade width para 500px, atualize, mude o tamanho da janela do navegador e veja o impacto na div
  • 28. Prof. Mauro Jansen Referências  Mozilla Developer Network. Aprendendo HTML. Disponível em < https://developer.mozilla.org/pt- BR/docs/Aprender/HTML >  W3C. Disponível em < http://www.w3c.br/divulgacao/guiasreferencia/css2 / >  http://www.w3c.br/pub/Cursos/CursoCSS3/css-web. pdf  https://www.chiefofdesign.com.br/css/ Linguagem de Programação Linguagem C – parte 1 28