Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior
|
|
|
- Brenda Carvalho Bernardes
- 6 Há anos
- Visualizações:
Transcrição
1 Introdução ao CSS Programação para a Internet Prof. Vilson Heck Junior
2 Estilos de Páginas CSS Cascading Style Sheets: Estilos de Página em Cascata (trad. livre); É uma linguagem de estilos Define a apresentação de documentos: HTML; XHTML; XML; Outros.
3 Histórico Originalmente, as configurações referente a apresentação de elementos em uma página, podiam ser feitas através de atributos HTML 3.2; Nesta abordagem, as páginas tinham a complexidade de código exponencial! Nove linguagens diferentes apareceram: W3C escolheu definiu apenas duas: CHSS (Cascated HTML Style Sheet); SSP (Stream-based Style Sheet Proposal);
4 Histórico Seus autores uniram esforços e, juntos, iniciaram o padrão CSS: A letra H foi removida do CHSS devido a sua aplicação em outras tecnologias e não apenas ao HTML; 1996: primeira especificação do CSS 1.0: Empregado parcialmente no Internet Explorer 3.0; Empregado plenamente no Internet Explorer 5.0 em 2000;
5 Histórico Enquanto a Microsoft seguia o CSS, a Netscape apresentava uma alternativa chamada: JSSS: JavaScript Style Sheets; CSS 2.0 em 1997; CSS 2.1 em 2007; CSS 3.0 sem Recomendação ainda; CSS 4.0 apenas discussão.
6 Histórico A partir do HTML 4, e principalmente com o HTML 5, os atributos de apresentação passam a não serem mais exigidos ou suportados para dar lugar a configuração de apresentação mais dinâmicas: CSS.
7 Vantagens Separação de Conteúdo e Apresentação; Consistência de Abrangência; Menor Largura de Banda; Reformatação mais Fácil; Acessibilidade.
8 Limitações Básicas Limitações no controle vertical; Ausência de expressões aritméticas.
9 Sintaxe Um regra CSS é dividida em duas partes: Propriedade/valor podem ser escritos em linhas separadas. Chave / Seletor {Declaração; Declaração;...} h1 {color:blue; font-size:12px;} Propriedade Valor
10 Criando um Arquivo Crie um novo arquivo: Nome estilo.css ; Vá até seu arquivo curriculo.html : Insira dentro da seção <head>: <link rel="stylesheet" type="text/css" href="estilo.css"> Você terá um vínculo criado, entre sua página e um estilo.
11 Primeiras Regras No arquivo estilo.css : body { background-color: LightBlue; } iframe { background-color: LightYellow; }
12 Cores Existem várias formas de definir cores; Algumas com nomes (em inglês); Outra com base em RGB: Vermelho, Verde e Azul; A combinação de três cores primárias gera outras cores; Representado por #RRGGBB: RR = Vermelho de 00 à FF (0 255 em Hex); GG = Verde de 00 à FF; BB = Azul de 00 à FF; Ver Paint.NET
13 Cores Existem várias formas de definir cores; Exemplo para Vermelho: color:rgb(255,0,0); color:#ff0000; color:red;
14 Criando as Regras As regras podem ser criadas: Em arquivo CSS (externas); Como conteúdo da tag <style> (internas); Como atributos (inline).
15 Múltiplas Regras Quando tivermos regras definidas em diferentes lugares: As propriedades que não forem repetidas, serão agregadas ao estilo (cascateamento); Se houverem propriedades repetidas, será mantida apenas uma regra, na ordem: 1. Inline; 2. Interna; 3. Externa; 4. Padrão do Browser.
16 Seções HTML Dividindo seções de estilos diferentes no código HTML: <div style="color:#0000ff"> <h3>isto é um heading</h3> <p>isto é um parágrafo</p> </div>
17 Introdução ao CSS BACKGROUND
18 Background Propriedades para background (fundo): background-color background-image background-repeat background-attachment background-position
19 background-color Valor padrão: transparent body { } background-color:#00ff80;
20 Criando um Gradiente Abra o Paint.NET! Escolha uma cor primária; Escolha uma cor secundária; Utilize a ferramenta Gradiente (tecla G); Salve esta imagem na pasta do projeto: fundo.png
21 background-image body { } background-image:url( fundo.png );
22 background-repeat body { } background-image: url( fundo.png ); background-repeat: repeat-x;
23 background-repeat body { } background-image:url( fundo.png ); background-repeat:repeat-y;
24 background-repeat body { } background-image:url( fundo.png ); background-repeat:no-repeat;
25 background-position body { } background-image:url( fundo.png ); background-repeat:no-repeat; background-position:right top;
26 background-attachment body { } background-image:url( fundo.png ); background-repeat:no-repeat; background-position:right top; background-attachment:fixed;
27 Introdução ao CSS HERANÇA ENTRE TAGS
28 Herança entre Tags Vimos que as Tags são inseridas umas dentro das outras: A Tag interior será considerada de nível inferior em relação a outra Tag que a contém; Todas as propriedades CSS que não forem definidas para uma determinada Tag, serão herdadas de suas superioras.
29 Introdução ao CSS TEXTO CSS
30 Propriedades do Texto color direction letter-spacing line-height text-align text-decoration text-indent text-shadow text-transform vertical-align white-space word-spacing Define a cor do texto Especifica a direção de escrita do texto Altera o espaço entre os caracteres no texto Define a altura da linha Específica o alinhamento horizontal do texto Específica a decoração adicionada ao texto Específica a identação da primeira linha em um bloco de texto Específica o efeito de sombra adicionado ao texto Controla a capitalização do texto Define o alinhamento vertical do elemento Especifica como um espaço branco é tratado dentro do elemento Altera o espaço entre as palavras de um texto
31 CSS - color color:red; color:#00ff00; color:rgb(0,0,255);
32 CSS - text-align left right center justify
33 CSS text-decoration none underline overline line-through blink
34 CSS text-transform Capitalize UPPERCASE lowercase
35 CSS vertical-align text-top text-bottom middle sub - Subscrito; super - Sobrescrito ; % - valor qualquer (10pt, -20pt,...) W3c Demo.
36 Introdução a CSS CLASSES E IDENTIFICADORES
37 Classes Específicas É possível criar diferentes classes de estilos para cada chave: h1.minhaclasse{color:#0000ff;} Para usar esta classe CSS, utilizamos o atributo global class na Tag H1 desejada: <h1 class= minhaclasse >Dados Pessoais</h1> Esta classe serve apenas para tags H1.
38 Classes Genéricas É possível criar classes de uso mais abrangente. Estas classes não serão restritas a uma única chave:.centro{text-align:center;} Uso: <h1 class= centro >Dados Pessoais</h1> <p class= centro >Este é um parágrafo..</p>...
39 Identificadores Também é possível criar um estilo que será aplicado a todos os elementos que possuam uma identificação em comum: Atributo global ID do HTML: <h1 id= TituloPrincipal >Currículo</h1> Regra CSS: #TituloPrincipal {color:#ff00ff;text-align:center;}
40 Introdução ao CSS FONTES
41 CSS - Fontes Configurações mais comuns: font-family; font-style; font-weight; font-size; Absolute; Relative;
42 CSS - Fontes Nomes de Famílias: Georgia, Palatino Linotype, Book Antiqua, Times New Roman, Arial, Helvetica, Arial Black, Impact, Lucida Sans Unicode, Tahoma, Verdana, Courier New, Lucida Console, e várias outras... Famílias Genéricas: Serif - Com tracinhos Sans Serif - Sem tracinhos Monospace - Largura das letras iguais
43 Exemplos Serif: CSS - Fontes Times New Roman Georgia Exemplos Sans-Serif: Arial Verdana Exemplos Monospace: Courier New Lucida Console
44 CSS - Fontes Comando: font-family: nome1, nome2,..., genérica; Onde: nome1, nome2,... São nomes de fontes desejados, na ordem de preferência. Caso o browser não disponha da primeira fonte, irá para a segunda e assim por diante; genérica é o nome da família genérica. Caso o Browser não disponha de nenhuma fonte solicitada, irá buscar uma fonte da família genérica solicitada. Ferramenta para escolher fontes do Google: Google Web Fonts!
45 CSS - Fontes Estilo de Fonte: font-style: normal; italic; oblique;
46 CSS - Fontes Peso da Fonte: font-weight: normal; bold; bolder; lighter;
47 CSS - Fontes Tamanhos das Fontes: Absoluto: font-size: Tamanho número: px, cm, etc...
48 CSS - Fontes Tamanhos das Fontes: Relativo: font-size: xx-small, x-small, small, medium, large, x-large, xxlarge,...; % - tamanho percentual em relação ao texto ascendente; Tamanho número: Em (ex: 1em = 16px, 0.5em = 8px) O tamanho padrão para fontes de parágrafos nos browser é 16px.
49 Introdução ao CSS LINKS
50 Links É possível personalizar a cor dos hiperlinks: a:link {color:#ff0000;} Link ainda não visitado; a:visited {color:#00ff00;} Link já visitado; a:hover {color:#ff00ff;} Mouse encima do link; a:active {color:#0000ff;} Link selecionado.
51 Introdução ao CSS LISTAS
52 Lista não Ordenada <ul> list-style-type: o circle disc none Square list-style-type: list-style-image:url( img.png');
53 list-style-type: armenian cjk-ideographic decimal decimal-leading-zero georgian hebrew hiragana hiragana-iroha katakana katakana-iroha lower-alpha lower-greek lower-latin lower-roman none upper-alpha upper-latin upper-roman Lista Ordenada <ol>
54 Introdução ao CSS TABELAS
55 Tabelas Bordas: (table, td, th...) border-width: 1px; border-spacing: 2px; border-style: solid; outset, none, hidden, dotted, dashed, double, ridge, groove, inset; border-color: #FF0000; border-collapse: separate; collapse; Ver W3C sobre bordas individuais!
56 Introdução ao CSS LAYOUTS
57 Layouts O gerenciamento da disposição de conteúdo do HTML através do CSS é feito com o conceito de layouts. Seções são separadas com a tag <div>, ou tags específicas: <section>, <aside>, <footer>, <article>, <nav>... Cada seção irá representar uma caixa ; Cada caixa terá um posicionamento, um estilo e um conteúdo;
58 Exemplo
59 layout.html <!doctype html> <html> </html> <head> </head> <body> </body> <title>teste com Layout</title> <link rel="stylesheet" type="text/css" href="estilo.css"> <div class="caixa1"> </div> <div class="caixa2"> </div> <div class="caixa3"> </div>
60 estilo.css div.caixa1 { background-color: red; } div.caixa2 { background-color: green; } div.caixa3 { background-color: blue; }
61 Altura Box Model Largura
62 Box Model Tamanho da área de conteúdo: Largura: (exemplos) width: 250px; width: 50%; max-width: 500px; Altura: (exemplos) height: 100px; height: 40%; max-height: 300px;
63 estilo.css div.caixa1 { background-color: red; height: 100px; } div.caixa2 { background-color: green; height: 50px; } div.caixa3 { background-color: blue; height: 25px; }
64 border-style
65 border Largura da borda: border-width: 5px; Cor da borda: border-color: red; Bordas individuais: border-top-style: dotted; border-right-style: solid; border-left-style: solid; border-bottom-style: dotted;
66 estilo.css div.caixa1 { background-color: red; height: 100px; border-style: dashed; border-color: blue; border-width: 1px; }
67 estilo.css div.caixa1 { background-color: red; height: 100px; /*border-style: dashed; border-color: blue; border-width: 1px;*/ border: 1px dashed blue; }
68 left Posicionamento Podemos definir onde as caixas são colocadas na janela do navegador: top right bottom
69 position position:static; Posição padrão. Fluxo normal da página. position: fixed; Relativa a janela do navegador. Não move ao rolar a janela. position: relative; Posição relativa às demais Tags inseridas. position: absolute; Relativa ao primeiro elemento pai que tenha uma posição não static. Caso não haja, utiliza o <body>.
70 position left: 20px; Fixa a 20 pixels da borda esquerda. right: 30px; Fixa a 30 pixels da borda direita. top: 50px; Fixa a 50 pixels da borda superior. bottom: 10px; Fixa a 10 pixels da borda superior. Importante: lembre que tamanhos de janelas variam!
71 estilo.css div.caixa1 { background-color: red; border: 1px dashed blue; height: 100px; width: 70%; } div.caixa2 { background-color: green; height: 50px; width: 50%; } div.caixa3 { background-color: blue; height: 25px; width: 90%; }
72 estilo.css div.caixa1 { background-color: red; border: 1px dashed blue; height: 100px; width: 70%; } div.caixa2 { background-color: green; height: 50px; width: 50%; } div.caixa3 { background-color: blue; height: 25px; width: 90%; position: fixed; bottom: 0px; }
73 estilo.css div.caixa1 { background-color: red; border: 1px dashed blue; height: 700px; width: 70%; } div.caixa2 { background-color: green; height: 500px; width: 50%; } div.caixa3 { background-color: rgba(0, 0, 255, 0.5); height: 25px; width: 90%; position: fixed; bottom: 0px; } CSS 3
74 Centralizando Para poder centralizar objetos do HTML, é necessário que estes objetos não possuam margens fixas e não tenha largura igual ao total da janela: margin-left: auto; margin-right: auto; width: 70%; background-color: #FF8800;
75 estilo.css div.caixa1 {... } div.caixa2 {... margin-left: auto; margin-right: auto; } div.caixa3 {... right: 0; left: 0; margin-left: auto; margin-right: auto; } Elementos fixed ou absolute precisam ter as propriedades right e left definidos em 0 para poder centralizar
76 Propriedades Notáveis z-index: Número que define a ordem de exibição dos objetos. Quando objetos são desenhados em uma mesma área, define qual elemento será sobreposto ao outro. cursor: auto, crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, text,...
77 Layouts Além da documentação completa da W3C, este é um ótimo link com demonstrações de como gerenciar o layouts em CSS:
78 estilo.css div.caixa1 { background-color: red; border: 1px dashed blue; width: 70%; height: 700px; margin-left: 220px; /*Menu*/ margin-top: 25px; /*Barra*/ } div.caixa2 { background-color: green; height: 500px; width: 200px; /*Nova largura*/ margin-left: auto; margin-right: auto; position: absolute; top: 0px; /*Encosta encima*/ margin-top: 25px; /*Barra*/ }... /*Mantém estilo caixa3 como estava*/
79 Responsividade Ver artigo: Criando websites para vários tipos de telas. Estudar sobre consulta de mídia (media (max-width: 1000px)
80 Trabalho - entrega Pesquise/Construa modelos de layouts com CSS e HTML e reestruture o seu currículo. Uma cópia deverá ser entregue por ; Dentro da pasta alunox deve ser criado uma subpasta chamada curr para armazenar outra cópia.
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,
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
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
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;
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
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
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
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
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
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
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
CSS. Karen Frigo Busolin
CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a
CSS EXTERNO. <head> <link href="estilo.css" type="text/css" rel="stylesheet" /> </head>
CSS DDW CSS EXTERNO O CSS é um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag no topo do site.
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
Comandos Extras Formatações no CSS
Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro
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. 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
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto
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
HTML, CSS e JavaScript
HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença
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,
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
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
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
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
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
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
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 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
#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
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
IFSC/Florianópolis - prof. Herval Daminelli
Existem cinco pseudoclasses associadas ao estado de um link. São elas: a:link - define o estilo do link no estado inicial; a:visited - define o estilo do link visitado; a:hover - define o estilo do link
[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed.
![[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed.](/thumbs/95/126084976.jpg "[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed.")
Tabela de CSS Propriedades relacionadas com o fundo (background) background background-attachment background-color background-image propriedades de background numa só declaração. Entre cada valor utiliza-se
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.
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
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
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
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",
CSS - Cascading Style Sheets
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação CSS - Cascading Style Sheets Desenvolvimento de Sistemas para WEB Site: http://jeiks.net E-mail: jacsonrcsilva@gmail.com
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
Cascading Style Sheets CSS
Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que
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 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
XML: uma introdução prática X100. Helder da Rocha
XML: uma introdução prática X100 Helder da Rocha (helder@argonavis.com.br) Atualizado em setembro de 2001 1 Apresentação do XML Por que apresentar os dados? Impressão Web Verificação Edição Soluções Cascading
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 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 à 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
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
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
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets CSS É uma linguagem que define o estilo da informação apresentada em uma página Web. Sendo a informação: Imagem, Texto, Vídeo, Áudio, ou qualquer outro elemento criado. Traz
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
Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva
CSS Site do Maujor Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva :: A propriedade text :: Os textos nos elementos HTML As propriedades para
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
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 3 HTML com CSS 2 CSS Cascading Style Sheets É uma
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,
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
Aula 8 Formatando o texto (propriedades)
Aula 8 Formatando o texto (propriedades) Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Estilizar o texto? 2 font-family body { font-family: Arial; } dt { font-family: Courier, monospace; } p { font-family:
Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais:
O que significa a sigla CSS? CSS é a sigla para Cascading Style Sheets que em português foi traduzido para folhas de estilo em cascata e nada mais é que um documento desenvolvido em uma linguagem de programação
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
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
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
Language que em tradução livre resulta em Linguagem Extensível para
6.6 XHTML: XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em tradução livre resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir
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
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,
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Módulo 3 HTML com CSS Prof. Dr. Daniel A. Furtado Introdução e Inserção de Código CSS 2 3 CSS Cascading Style Sheets
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO 1 CSS: ementa Backgrounds Bordas Margens Padding height e width Box model outline 2 / 18 CSS: Backgrounds
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html
13 de dezembro de 2012
ao ao Universidade Federal Fluminense 13 de dezembro de 2012 ao 1 2 3 4 5 6 7 Informações principais ao Quando o HTML surgiu, seu objetivo era especialmente a estruturação de informações na página. Com
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
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
Modelo de formateo visual em CSS
Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar Recordando Atributos das caixas largura borde margen fundo altura recheio Resumo Tipos de posicionamento. Visualização
<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>
1. Digite a seguinte página e salve como imagem_01.html. 2. Digite a seguinte página e salve como imagem_02.html. img.imagem1 {border: solid;} img.imagem2 {border:
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
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
CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de
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
MODELO DE CAIXA (BOX MODEL)
Programação Web MODELO DE CAIXA (BOX MODEL) Conferencia 5 MSc. Yoenis Pantoja Zaldívar MODELO DE CAIXA (BOX MODEL) ( ) comportamento de CSS que provoca que todos os elementos incluidos numa página HTML
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
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:
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 (CSS)
UI MARIA LENIR ARAÚJO MENESES Prof Esp. Leonardo Delgado Aula 02: CASCADING STYLE SHEETS (CSS) Unidade IV Aluno: Data: / / CASCADING STYLE SHEETS (CSS) O CSS é uma linguagem de estilo que foi desenvolvida
Programação para Internet I 6. CSS. Nuno Miguel Gil Fonseca
Programação para Internet I 6. CSS Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt O HTML apenas fornece um controle limitado sobre a formatação das páginas Em HTML deve definir-se principalmente estrutura,
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
HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)
HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v1.1 2008-2017 Rui Menino tags Para formatar e paginar o texto dentro de uma página html, foi definido o
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2013-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
Desenvolvimento de Aplicações para Internet
Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário
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
Introdução ao HTML e às folhas de estilo (CSS)
MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria (jfaria@fe.up.pt) FEUP, DEIG Setembro 2013 MIEEC SIEM --- 1 --- José António Faria Introdução ao protocolo HTTP
Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html
Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento
modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha
modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha (helder@) Modelo de apresentação gráfica Objetos em SVG são desenhados em contextos gráficos individuais Grupos,
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
Teste de avaliação de frequência Parte Prática
Abaixo está uma proposta de solução para os exercícios do teste de avaliação de frequência às aulas práticas. Se tem dúvidas sobre esta resolução, fale com o seu Professor. GRUPO I HTML 1. CrieumHTMLcom3tiposdiferentesdelistasnãonumeradas.
UNIGUAÇU Unidade de Ensino Superior Vale do Iguaçu APOSTILA DE CSS. Prof. Cleverson B. Klettenberg
UNIGUAÇU Unidade de Ensino Superior Vale do Iguaçu APOSTILA DE CSS Prof. Cleverson B. Klettenberg União da Vitória 2014 Sumário 1. INTRODUÇÃO AO CSS...3 1.2. O que é CSS?...3 1.3 Como Criar Estilos...3
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-2 Objetivos Aresentar seudo-elementos e seudo-classes do CSS Aresentar o CSS como ferramenta de layout de ágina
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
CSS Folha de Estilo em Cascatas
O que é CSS? CSS é a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores,