PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
|
|
|
- Iago Deluca Lencastre
- 7 Há anos
- Visualizações:
Transcrição
1 PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano
2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos formatados por CSS Apresentar os seletores fundamentais: class e id TRABALHO A ONLINE!
3 Material de Estudo Material Notas de Aula Apresentação Material Didático - Acesso ao Material (Aula 4) (Aula 4) Google + CSS +tutorial Web Sites
4 HISTÓRICO
5 De onde surgiu o CSS? Evolução do HTML Linguagem tornou-se complexa Cada navegador implementava de um jeito Mesmos efeitos com nomes diferentes CSS: 1994 Cascade Style Sheets Hakon Wium Lie Adoção pelo W3C: 1996 CSS Level 1
6 Definição de CSS CSS é o padrão moderno de configurar a apresentação na Web O CSS deve controlar todos os aspectos de design Aplicabilidade HTML XHTML XML...
7 FUNÇÕES E BENEFÍCIOS
8 Funções do CSS O CSS controla a apresentação dos documentos HTML Cores Fontes Imagens de fundo Linhas Margens Alturas Larguras Posicionamentos...
9 Benefícios do CSS Os benefícios do CSS incluem Layout de vários documentos A partir de uma única folha de estilos Vários layouts para um mesmo documento Maior precisão no controle do layout Diferentes layouts para diferentes mídias Tela, celular, impressora etc. Técnicas avançadas de desenvolvimento Equipes distintas para conteúdo e visual
10 LIGANDO O CSS AO XHTML
11 Como Vincular o CSS ao HTML? Há três tipos de vinculação CSS Inline Para modificações totalmente localizadas Incorporada Para modificações específicas de uma página Externa Uso geral As formas inline e incorporada devem ser exceções e não usaremos neste curso
12 Estilos Inline Estilos Inline são definidos dentro das tags A maioria dos benefícios são perdidos Mistura conteúdo e apresentação Sempre que a página for carregada, CSS é relido Sintaxe Parâmetro style... <body> <p style= color: #000000; margin: 5px; > Parágrafo na cor preta com margem de 5 pontos. </p> </body>...
13 Estilos Incorporados Estilos Incorporados são definidos no documento Boa parte dos benefícios são perdidos Mistura conteúdo e apresentação (menos que inline) Sempre que a página for carregada, CSS é relido Sintaxe Tag <style> Dentro da seção <head>...</head>
14 Estilos Incorporados - Exemplo... <head>... <style type= text/css ><! body { background: #000000; url(imagens/minhaimagem.gif); } h3 { color: #0000FF; } p { margin-left: 20px; } --></style>... </head>... Tudo que estiver aqui dentro será considerado definição de estilo
15 Estilos Externos Arquivo.CSS com os estilos Separa conteúdo e apresentação Uso de um mesmo CSS para várias páginas Carregamento de novas páginas reaproveita CSS já carregado Sintaxe Uso da tag <link /> Dentro da seção <head>...</head>
16 Estilos Exernos - Exemplo... <head>... <link rel= stylesheet type= text/css... </head>... href= folha_de_estilo.css />
17 SINTAXE BÁSICA DO CSS
18 O que tem no arquivo.css? O mesmo que se usa na tag <style>...</style> Formato básico: seletor { propriedade: valor; } Exemplo: p { margin: 0px; } Texto do parágrafo
19 Seletores.CSS? O que é um seletor? Tag p h1 div Classe id.centrado.nomedaclasse #txtnome #umid
20 Propriedades.CSS? O que é uma propriedade? É o atributo que se deseja mudar no HTML Exemplos: font-size color background-color text-decoration margin / outline / border / padding Diferença?
21 Exemplos de atributos do CSS Exemplos color cor da fonte font-family tipo da letra font-size tamanho da letra font-style estilo de letra font-variant mudanças maiúsculas/minúsculas font-weight peso da fonte (mais escura)... Documentação (online!)
22 Elemento Configurável pelo CSS Todo elemento tem sua área delimitada: MARGIN OUTLINE BORDER PADDING WIDTH HEIGHT nmonmo nmonmnomnon mon omn omn onm onm onm onm onm nomn omomo mno mnom mn omno mnomon omn mono.
23 Elemento Configurável pelo CSS Todo elemento tem sua área delimitada: MARGIN OUTLINE BORDER PADDING WIDTH HEIGHT nmonmo nmonmnomnon mon omn omn onm onm onm onm onm nomn omomo mno mnom mn omno mnomon omn mono. background
24 Elemento Configurável pelo CSS Alguns podem ser editados separadamente
25 Valores.CSS? Dependem do atributo Cores: rgb(r,g,b) (em decimal, de 0 a 255) rgba(r,g,b,a) (em decimal, de 0 a 255) #rrggbb (em hexadecimal de 00 a FF) black, white... (nome das cores, em inglês) Tamanhos 10px 10em 10% Fontes arial, calibri sans-serif serif monospaced (em pixels) (relativo à fonte 1em = 100% da letra) (relativo ao tamanho horizontal da tela ou região) (nome da fonte, separado por espaço) (fonte sem serifa padrão) (fonte com serifa padrão) (fonte monoespaçada padrão) URL url( (url relativa ou absoluta, não use aspas)
26 Exemplos de Valores Exemplos font-size xx-small x-small small medium large x-large xx-large smaller larger Comprimento (número seguido de unidade px, em, cm...) Porcentagem (número de 0 a 100 seguido de %)
27 Exemplos de Valores Exemplos font-style normal Italic oblique font-variant normal small-caps (outra fonte) (normal inclinado)
28 Exemplos de Valores Exemplos font-weight normal bold bolder lighter (tela: mesmo efeito de bold) (tela: mesmo efeito de normal) (tela: mesmo efeito de normal) (tela: mesmo efeito de normal) (tela: mesmo efeito de bold) (tela: mesmo efeito de bold)
29 EXEMPLOS: SELETOR POR CLASSE
30 Classes CSS Se marcarmos as tags com classes: <h1 class= minha_classe >Título</h1> <p class= minha_classe >Olá</p> Podemos definir estilos para todos elementos da classe:.minha_classe { color: #0000FF; } Tanto h1 quanto p ficarão azuis
31 Classes CSS associadas à Tag Se marcarmos as tags com classes: <h1 class= minha_classe >Título</h1> <p class= minha_classe >Olá</p> <p>olá</p> Podemos definir estilos para os elementos de uma tag que indicarem uma classe: p.minha_classe { color: #0000FF; } Apenas o p com a classe ficará azul
32 Herança com CSS Se marcarmos as tags com classes: <p class= minha_classe >Olá</p> <p>olá</p> Podemos definir estilos de herança: p { margin: 0px; } p.minha_classe { color: #0000FF; } O margin: 0px se aplicará a todos os parágrafos A cor azul se aplicará apenas àqueles com a classe definida
33 Cascata de CSS Se marcarmos as tags com classes: <p class= minha_classe >Olá</p> <p>olá</p> Podemos definir estilos de herança: p { color: #FF0000; } p.minha_classe { color: #0000FF; } A cor vermelha se aplicará a todos os parágrafos Mas a cor azul sobrepõe esta naqueles de classe minha_classe
34 EXEMPLOS: SELETOR POR ID
35 Id com CSS Idêntico às classes : <h1 id= parte1 >Título</h1> <p id= p1 >Olá</p> <p id= p2 >Olá 2</p> Podemos definir estilos para as tags pelo id: #p1 { color: #0000FF; } Se aplica apenas à tag marcada com id = p1
36 Id com CSS Idêntico às classes : <h1 id= parte1 >Título</h1> <p id= p1 >Olá</p> <p id= p2 >Olá 2</p> Podemos definir estilos para as tags pelo id: #p1 { color: #0000FF; } Nunca use duas tags com o mesmo ID! O ID deve ser único para um elemento! O ID é como se fosse uma chave primária do elemento Se aplica apenas à tag marcada com id = p1
37 Construa com o Professor
38 Acompanhe o Professor
39 SELETORES COMPOSTOS E COMENTÁRIOS
40 Seletores Compostos Formato básico: seletor1, seletor2,..., seletorn { propriedade: valor; } Exemplo: h1, h2, h3, h4, h5, h6, p { color: #0000FF; }
41 Comentários em CSS Como fazer comentários em CSS? Do mesmo jeito que em C /* Definições do CSS */ p { /* modifica tag p */ color: #0000FF; /* Muda cor da fonte para azul */ }
42 ATRIBUTO DE TRANSPARÊNCIA
43 Transparência Transparência de um Elemento Tudo que estiver dentro! Propriedade padrão do CSS: opacity: x; x varia de 0.0 a 1.0 FireFox a partir do 1.0 Internet Explorer a partir do 9 Notas de aula: para navegadores antigos
44 Transparência Ex.: opacity: 1.0
45 Transparência Ex.: opacity: 0.5
46 Transparência Queremos algo mais nessa linha! Apenas o fundo é transparente
47 Transparência Isso é possível usando o efeito de transparência de cor Quando queremos usar um bloco cuja cor de fundo seja translúcida, ao invés de definir a cor com isso... #bloco { background-color: rgb(50,50,50); }
48 Transparência Definiremos assim: #bloco { background-color: rgba(50,50,50,0.5); } RGBA permite definir a opacidade da cor Varia de 0.0 a 1.0 Imagens transparentes? PNG, preparadas com PhotoShop ou Gimp
49 DIVISÕES DE DOCUMENTO E CSS
50 DIV e CSS Marcando regiões como divs distintos, podemos configurá-los separadamente Com alguns ajustes de posicionamento, podemos modificar bastante o layout do site, sem nem mesmo mexer no XHTML Assim, sempre usaremos a tag div para delimitar as informações que sempre serão apresentadas conjuntamente
51 Exemplo de Mudança de Layout
52 Exemplo de Mudança de Layout
53 DIV e CSS Diferentes layouts: aula que vem... Mas como definir atributos diferentes para um parágrafo, por exemplo, dentro de divs diferentes?
54 TAGS INTERNAS
55 Tags Internas Vez ou outra queremos que, por exemplo, apenas os parágrafos dentro da div #d1 apareçam em vermelho... Como fazer? <div id= d1 > <h2>título</h2> <p>parágrafo 1</p> <div id= d2 > <p>parágrafo 2</p> </div> <p>parágrafo 3</p> </div> <p>parágrafo 4</p>
56 Tags Internas <div id= d1 > <h2>título</h2> <p>parágrafo 1</p> <div id= d2 > <p>parágrafo 2</p> </div> <p>parágrafo 3</p> </div> <p>parágrafo 4</p> Simples! #d1 p { color: red; }
57 Tags Internas Sempre que indicarmos dois seletores separados por espaço: seletor1 seletor2 { propriedade: valor; } A propriedade se aplicará apenas quando o seletor2 aparecer dentro do seletor1
58 Tags Internas O principal uso disso é definir propriedades visuais diferentes para as mesmas tags que apareçam em divs diferentes... Mas nada impede de definir uma propriedade específica para duas tags aninhadas em strong { text-variant: small-caps; } Isso vai transformar em small-caps apenas os textos que estiverem marcados com <em><strong>texto em small-caps</strong></em>
59 Tags Internas Mas e se eu quiser selecionar apenas os descendentes diretos? <div id= d1 > <h2>título</h2> <p>parágrafo 1</p> <div id= d2 > <p>parágrafo 2</p> </div> <p>parágrafo 3</p> </div> <p>parágrafo 4</p>
60 Tags Internas <div id= d1 > <h2>título</h2> <p>parágrafo 1</p> <div id= d2 > <p>parágrafo 2</p> </div> <p>parágrafo 3</p> </div> <p>parágrafo 4</p> Simples! #d1 > p { color: red; }
61 Tags Internas Mas... e se quisermos selecionar apenas os parágrafos adjacentes aos h2? <div id= d1 > <h2>título</h2> <p>parágrafo 1</p> <div id= d2 > <p>parágrafo 2</p> </div> <p>parágrafo 3</p> </div> <p>parágrafo 4</p>
62 Tags Internas <div id= d1 > <h2>título</h2> <p>parágrafo 1</p> <div id= d2 > <p>parágrafo 2</p> </div> <p>parágrafo 3</p> </div> <p>parágrafo 4</p> Simples também! h2 + p { color: red; }
63 Tags Internas Resumo: seletor1 seletor2 { propriedade: valor; } Todo seletor2 descendente de seletor1 seletor1 > seletor2 { propriedade: valor; } Todo seletor2 filho de seletor1 seletor1 + seletor2 { propriedade: valor; } Todo seletor2 imediatamente seguinte a seletor1
64 ATIVIDADE
65 Construa com o Professor
66 Modifique o Layout
67 CONCLUSÕES
68 Resumo CSS é a linguagem de definição visual associada ao XHTML O CSS traz uma grande flexibilidade O CSS possibilita economia de banda TAREFA Trabalho A... Já está online!
69 Próxima Aula CSS Como realizar posicionamento com CSS? Não é para usar tabela?
70 PERGUNTAS?
71 BOM DESCANSO A TODOS!
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
CSS -Cascading Style Sheets - Introdução
CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução
Internet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,
Web Design Aula 15: Propriedades CSS
Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links
De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, especificidade do seletor e proximidade do elemento estilizado.
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos
Desenvolvimento Web. Professor: Bruno E. G. Gomes
Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
css Cascading Style Sheets CSS CASCADING STYLE SHEETS
css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação
PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues
PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe:
Compêndio códigos. {css}
Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado
Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano
Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata
Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }
CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS
CSS Web Design - CSS Conteúdo - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS 01 Assunto: CSS O que é CSS? CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para
Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno Gomes 2011 INTRODUÇÃO O
Desenvolvimento Web CSS Conceitos básicos parte II
Desenvolvimento Web CSS Conceitos básicos parte II Prof.: Bruno E. G. Gomes 2014 Folhas de Estilo Externa Estilos são definidos em um arquivo separado e incorporados à página através da tag link Podem
Posicionamento, dimensões e outros elementos de HTML5 e CSS3
R o q u e F e r n a n d o G l a u c i o D a n i e l Te c h n o E d i t i o n E d i t o r a L t d a Posicionamento, dimensões e outros elementos de HTML5 e CSS3 Posicionamento, dimensões e outros elementos
CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br
Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades
#Trabalhando com Texto
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web
Tecnologias para Web Design
Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente
CSS CASCADING STYLE SHEET
CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS
Web Design Aula 13: Introdução a CSS
Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas
CSS Cascading Style Sheets Folhas de Estilo em Cascata
CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1
Introdução às Folhas de Estilo
Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de
INTRODUÇÃO AO CSS. HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
INTRODUÇÃO AO CSS O que é CSS? Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS. CSS é a abreviatura para Cascading
TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD
TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das
7. Cascading Style Sheets (CSS)
7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma
Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
Estilo em Aplicações Hipermídia na Web
SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação
Tarlis Portela Web Design CSS
Tarlis Portela Web Design CSS Web Design CONCEITOS 01 01 Histórico Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação; A medida que o HTML foi se popularizando e evoluindo,
CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata
CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES
INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS INTRODUÇÃO E MANIPULANDO FONTES Introdução CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
APOSTILA DE PROGRAMAÇÃO WEB
Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY Prof. Dr. Daniel Caetano 2013-1 Objetivos Introduzir o framework jquery Capacitar para a construção de documentos jquery simples Compreender os mecanismos
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe
FOLHAS DE ESTILO EM CASCATA
FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de regras de estilo que definem como os elementos e os tags em uma página HTML devem ser exibidos
Web Design Aula 15: Conhecendo CSS
Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo
08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS
TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML
06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano
Programação Web 1 Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Objetivo: Apresentar os parâmetros básicos que podem ser modificados com a tecnologia CSS. Bibliografia: W3, 2009;
Revisando os conteúdos. Introdução ao CSS
Aula 04 Revisando os conteúdos Tag : fornece informações sobre o documento, palavras-chaves, autor da página, última atualização, etc. Essas informações não são mostradas na página, apenas processadas
Folha Prática Nº5 CSS. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática. Tecnologias Internet - 2011/2012
Folha Prática Nº CSS / Filipe Quinaz . Folhas de Estilo 0 Internas, delimitadas pela marca style h, h font-family: sans-serif; color: #CC;
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL Prof. Dr. Daniel Caetano 2011-2 Visão Geral 1 2 3 4 DHTML Document Object Model Manipulando o DOM Manipulando o CSS pelo DOM Material de Estudo
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
<!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF-8"> <title> Exemplo de uso correto da semântica HTML </title> </ head >
Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.
Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo
A diferença entre um site que implementa CSS e outro que não o usa é gigantesca e notável.
Aula 02 - Introdução ao css ( folhas de estilo ) CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o português, significa Folha de Estilo em Cascatas. O CSS é fácil de aprender
HTML & CSS. uma introdução
HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência
HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto
HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML
COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS
COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar
CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13
CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML
Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar
1) Em um documento separado fora de todos os documentos HTML;
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Introdução Área de Conteúdo Enchimento Bordas Margens Caixas Propriedades
Informática Parte 21 Prof. Márcio Hunecke
Escriturário Informática Parte 21 Prof. Márcio Hunecke Informática CSS 3 É no CSS (Cascading Style Sheets) que se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um
Cascading Style Sheets
Cascading Style Sheets Telemédia Grupo de Comunicações por Computador Sumário O que são CSSs? Sintaxe das CSSs Associar CSSs a documentos HTML Estrutura hierárquica dos documentos HTML e herança de propriedades
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Folhas de estilos em cascata Objetivo Formatar páginas escritas em HTML baseada nos padrões "Cascading Style Sheets",
Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:
Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas
INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT
v1.2 06/04/2017 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 4 CSS E CONSTRUÇÃO DE LAYOUTS (PARTE 1) Eder Franco @ FPF Tech The road so far... HTML Linguagem de marcação. Estrutura
Regras de estilos; Folhas de estilos; Seletores; Validação.
Disciplina: Autoria Web AULA 10 Regras de estilos; Folhas de estilos; Seletores; Validação. Corpo docente: MsC. Alexandro Vladno Edmilson Campos MsC. Fábio Procópio Esp. Felipe Dantas MsC. João Maria MsC.
Disciplina: Desenvolvimento Web Professor: Paulo César Fernandes de Oliveira, BSc, PhD
1. O que é CSS? a) É a linguagem que se usa para se definir quais serão os elementos de uma página HTML. b) É uma linguagem que se usa para se modificar o estilo de apresentação dos elementos de uma página
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver
Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec
Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este
CSS. Cascading Style Sheets Style Sheets
CSS Cascading Style Sheets Style Sheets Agenda Histórico Definição Limitações do CSS-1 CSS2 - Características Por que usar CSS? Vantagens Sintaxe Básica Como inserir uma folha de Estilo Indentificando
<HTML> Vinícius Roggério da Rocha
Vinícius Roggério da Rocha www.monolitonimbus.com.br O que é HTML? HTML = HyperText Markup Language ou Linguagem de Marcação de Hipertexto Linguagem: maneira de se comunicar (entre máquinas, pessoas