PROGRAMAÇÃO EM AMBIENTE WEB I
|
|
|
- Ruth Macedo Laranjeira
- 6 Há anos
- Visualizações:
Transcrição
1 PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em documentos Web. O princípio da HTML não está na formatação dos elementos, portanto cabe ao CSS cuidar do aspecto visual do documento. 1
2 UM POUCO DE HISTÓRIA Até 1993: Estilização era mínima, feita pelos próprios navegadores (Mosaic); 1994: Primeira proposta de adoção de CSS; 1996: CSS passa a ser recomendado pela W3c. VANTAGENS Facilidade na manutenção, pois mudanças são centralizadas; Funcionalidades não suportadas pelo HTML; Não é mais necessária utilizar tags para formatação de páginas; Maior eficiência no gerenciamento de layout. 2
3 REGRAS CSS Uma regra CSS consiste em uma declaração que segue uma sintaxe definindo como será aplicado um estilo a um ou mais elementos HTML. Quando temos um conjunto de regras CSS, dizemos que existe uma folha de estilos. REGRAS CSS Uma regra é composta por: Seletor; Propriedade; Valor. seletor { propriedade: valor; 3
4 SELETOR Um seletor é o elemento HTML identificado por uma tag, classe ou id, que indica para o qual a regra será válida. seletor { propriedade: valor; PROPRIEDADE A propriedade é o atributo do elemento HTML ao qual será aplicada a regra, por exemplo: font, color, background... seletor { propriedade: valor; 4
5 VALOR Consiste na característica específica a ser assumida pela propriedade. Font pode ser Arial, cor azul, cor de fundo verde... seletor { propriedade: valor; REGRA CSS ESTILO INTERNO <head> <style type= text/css > p{ font-size: 12px; color: #993366; </style> </head> <body> <p> Teste </p> </body> 5
6 REGRA CSS ESTILO INTERNO <head> <style type= text/css > body{ color: #0000cc; h1, h2, h3, h4, h5, h6 { font-family: Comic Sans MS ; </style> </head> CLASSES Em um site com CSS é comum a existência de uma classe, e nesta a definição de regras CSS..nome_da_classe{ propriedade: valor; 6
7 CLASSES O objetivo de classes é aplicar regras comuns a seletores (tags) diferentes. No CSS sintaxe consiste na combinação do sinal de ponto (.) seguido do nome da classe..nome_da_classe{ propriedade: valor; REGRA CSS CLASSES <head> <style type= text/css >.formatacao1{ font-family: Comic Sans MS ;.formatacao2{ font-size: 20px; font-family: Arial; </style> </head> 7
8 REGRA CSS CLASSES <head> <style type= text/css >.cor-um{ background-color: gray;.cor-dois{ background-color: lightblue; </style> </head> PÁGINA HTML COM CLASSES <body> <tabel border= 1 > <tr> <th> Disciplina </th> <th> Professores </th> </tr> <tr class= cor-um > <td> Redes </td> <td> Prof. Débora </td> </tr> <tr class= cor-dois > <td> Eletricidade </td> <td> Prof. Jean </td> </tr> </table> </body> 8
9 ID Outro seletor bastante usado é o por ID. Este seletor só pode ser utilizado uma vez dentro de um código HTML. #nome_do_id{ propriedade: valor; REGRA CSS ID <head> <style type= text/css > #tecnologia{ color: #545454; </style> </head> <body> <p id= tecnologia > Parágrafo formatado </p> </body> 9
10 VINCULANDO FOLHAS CSS As folhas de estilo são vinculadas no documento HTML em três diferentes formas: Estilo inline; Estilo interno; Estilo externo. ESTILO EXTERNO Uma folha é dita externa quando as regras CSS estão declaradas em um documento separado. Uma folha de estilo possui a extensão.css. Uma folha de estilo externa é ideal, pois podem ser reaproveitado em várias páginas. 10
11 ESTILO EXTERNO Para incluir uma página externa a um documento é usado a tag <link> entre as tags <head> em uma página HTML. <head> <link href= estilo.css rel= stylesheet type= text/css /> </head> ESTILO INTERNO Uma folha é dita interna quando as regras CSS estão declaradas no próprio documento HTML. <head> <style type= text/css > p{ color: #993366; </style> </head> 11
12 ESTILO INTERNO ESTILO INLINE Uma folha inline é aquela que tem as regras CSS declaradas dentro da alguma tag HTML. <body> <p style= color: #0066cc; font-size: 20px; > Programação em Ambiente Web I </p> </body> 12
13 PRIORIDADES DAS REGRAS Como as definições de estilos podem ser feitas de três formas diferentes, em determinado momento podem haver conflitos, e neste caso a precedência é: Escrita diretamente na tag (inline) Escrita no cabeçalho da página (interno) Escrita em um arquivo separado (externo) PROPRIEDADES REGRAS CSS 13
14 FONT font-style font-variant font-weight font-size font-family Efeitos de formatação (normal, itálico...) Aumenta o tamanho da fonte Intensidade da fonte (normal, negrito...) Tamanho da fonte Altera o tipo da face PROPRIEDADE FONT <head> <style type= text/css > div { font-style: italic; font-variant: small-caps; font-family: Arial; font-size: 11px; div{ font: italic small-caps 11px Arial; </style> </head> 14
15 TEXT text-decoration text-align text-indent text-transform Altera a formatação do texto. Podem ser usado os seguintes valores: underline (sublinhado), overline (sobrelinha) ou line-through (tachado) Define o alinhamento do texto, os possíveis valores são: center, left, right ou justify. Define o tamanho do recuo da primeira linha. Os valores podem ser passados em pontos ou pixels. Altera as letras, com os valores: capitalize (letras iniciais em maiúsculas), uppercase (todas letras em maiúsculas) e lowercase (todas em minúsculas). OUTRAS PROPRIEDADES letter-spacing line-heigth color background Define o espaçamento entre os caracteres. Os valores devem ser passados em pixels. Espaçamento entre as linhas. Os valores devem ser passados em pontos ou pixels. Define a cor do texto. Define a cor de fundo. Os valores podem ser passados através do nome da cor (inglês) ou do código RGB. 15
16 BACKGROUND color backgroundimage: url ( ) backgroundattachment backgroundrepeat backgorundposition Altera a cor do texto Insere uma imagem para ser utilizada como plano de fundo Define se a imagem ficará fixa (fixed) ou se acompanhará a barra de rolagem (scroll) Define como a imagem será repetida na tela, com os valores: no-repeat, repear, repeat-x e repeat-y. Posição inicial da imagem na área de apresentação, com os valores: left, top, bottom e center. PROPRIEDADE BACKGROUND <head> <style type= text/css > div { background-color: #ffc; background-image: url(fundo.gif); background-repeat: no-repeat; background-position: 20px 10px; div{ background: #ffc url(fundo.gif) no-repeat 20px 10px; </style> </head> 16
17 COMENTÁRIOS Comentários em CSS são descritos através dos códigos /* no inicio e */ ao final. p:first-line{ text-align: center; /* Texto centralizado */ color: black; font-family: Arial; BOX MODEL Uma regra CSS considera e tratam todos os elementos HTML como se fossem caixas. Nessas caixas algumas propriedades podem ser alteradas: Largura e altura; Bordas; Margens e espaçamentos. 17
18 BOX 18
19 MARGIN margin-top margin-right margin-left margin-bottom Define o tamanho da margem superior Define o tamanho da margem direita Define o tamanho da margem esquerda Define o tamanho da margem inferior Os valores podem ser utilizados de forma relativa ou absoluto. PROPRIEDADE MARGIN <head> <style type= text/css >.box{ margin-top: 20px; margin-right: 30mm; margin-bottom: 5pt; margin-left: 20px; </style> </head> 19
20 ABREVIANDO MARGIN <head> <style type= text/css >.box{ margin-top: 20px; margin-right: 5px; margin-bottom: 10 px; margin-left: 25px;.box{ margin: 20px 5px 10px 25px; </style> </head> PADDING padding-top padding-right padding-left padding-bottom Define o tamanho do espaçamento superior Define o tamanho do espaçamento à direita Define o tamanho do espaçamento à esquerda Define o tamanho do espaçamento inferior. Os valores podem ser utilizados de forma relativa ou absoluto. 20
21 PROPRIEDADE PADDING <head> <style type= text/css >.box{ padding-top: 20px; padding-right: 30mm; padding-bottom: 5pt; padding-left: 20px; </style> </head> ABREVIANDO PADDING <head> <style type= text/css >.box{ padding-top: 12px; padding-right: 2px; padding-bottom: 6px; padding-left: 1px;.box{ paddin: 12px 2px 6px 1px; </style> </head> 21
22 BORDER border-width border-style border-color Define a espessura da borda, com os valores: thin (borda fina), médium (borda média), thick (Borda grossa) e length (medida absoluta). Define o estilo da borda, com os valores: dotted, dashed, solid, double, groove, ridge, inset e ouset. Define a cor da borda PROPRIEDADE BORDER <head> <style type= text/css > p { border-syle: solid; border-bottom-style: dashed; border-color: #ff00bb; border-top-color: #00ff33; border-bottom-width: 10px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; </style> </head> 22
23 ABREVIANDO BORDER <head> <style type= text/css > div { border-width: 1px; border-style: solid; border-color: #f00; div { border: 1px solid #f00; </style> </head> ABREVIANDO BORDER <head> <style type= text/css > div { border-top-width: 2px; border-right-width: 1px; border-left-width: 3px; border-bottom-width: 5px; div { border-width: 2px 1px 3px 5px; </style> </head> 23
24 ABREVIANDO BORDER <head> <style type= text/css > div { border-top-color: #f00; border-right-color: #ccc; border-left-color: #0ff; border-bottom-color: #999; div { border-color: #f00 #ccc #0ff #999; </style> </head> ABREVIANDO BORDER <head> <style type= text/css > div { border-top-style: solid; border-right-style: ridge; border-left-style: double; border-bottom-style:dotted; div { border-style: solid ridge double dotted; </style> </head> 24
25 EFEITOS COM BORDAS EFEITOS COM BORDAS 25
26 EFEITOS COM BORDAS EFEITOS COM BORDAS 26
27 EFEITOS COM BORDAS BORDAS ARREDONDADAS <head> <style type= text/css > #bordas { width: 400px; height: 150px; background-color: #09f; border-radius: 10px; </style> </head> 27
28 EXERCÍCIOS 01 Crie uma regra CSS para formatação de parágrafo com as seguintes configurações: Cor da fonte: branca Tipo da face: Arial Cor de fundo: verde Borda superior com 2 px na cor azul e dashed Borda esquerda com 2 px, na cor amarela e dotted Borda inferior com 2 px, na cor vermelha e double Sem borda direita EXERCÍCIOS 02 Utilizando tabelas e regras CSS, crie um menu para uma página HTML, como o menu apresentado ao lado. 28
29 EXERCÍCIOS 03 Utilizando tabelas e regras CSS, crie a tabela abaixo: EXERCÍCIOS 04- Crie a seguinte página HTML: 29
30 CORES PSEUDOELEMENTO FIRST-LETTER Aplica a formatação do recurso de capitalizar um parágrafo, sua sintaxe é: p:first-letter{ font-size: 300%; 30
31 PSEUDOELEMENTO FIRST-LINE Apenas a primeira linha de um parágrafo ficar com letras maiúsculas, sua sintaxe é: p:first-line{ font-variant: small-caps; color: #0000ff; ESTILIZANDO LINKS São personalizados para que links visitados fiquem de cor vermelho e não visitado de cor azul. a:link{ color: blue; a:visited{ color: red; 31
32 ESTILIZANDO LINKS São personalizados para que links ativos fiquem com a cor de fundo azul e quando o cursor apenas fica sob o link, para que fique de cor laranja. a:active{ background-color: blue; a:hover{ color: orange; LAYOUT HTML + CSS 32
33 AGRUPANDO ELEMENTOS A tag <div> permite que sejam agrupados elementos a parte de ID CSS. Vejamos: <div id= formatação > <ul> <li> Franklin Roosevelt </li> <li> Lydon Johnson </li> <li> Bill Clinton </li> </ul> </div> IMAGENS FLUTUADAS EM BOX Quando uma imagem é inserida, uma box é feita automaticamente, assim usando o atributo float controlamos o posicionamento. 33
34 IMAGENS FLUTUADAS EM BOX <div id= picture > <img src= bill.jpeg /> </div> CSS: #picture{ float: left; width: 100px; DIVIDINDO TEXTOS COLUNAS #coluna1{ float: left; width: 33%; #coluna2{ float: center; width: 33%; #coluna3{ float: right; width: 33%; 34
35 PROPRIEDADE DISPLAY Esta propriedade afeta a maneira como tal elemento será posicionado. block inline inline-block Fará com que o elemento posicionado logo abaixo e terá a largura definida pelo atributo width. Os outros elementos serão posicionados um lado ao lado do outro, na ordem que forem criados no documento HTML. Fará com que outros elementos ao seu redor sejam posicionados um do lado do outro. Esse valor faz com que existam elementos inline e block. PROPRIEDADE POSITION Esta propriedade determina qual é o modo do posicionamento de um elemento em uma página. static relative absolute fixed Permanece sempre em seu local original, não aceitando valores. É possível passar coordenadas para o posicionamento de elementos, fazendo com os que os mesmos se encaixem. O elemento toma como referência algum elemento pai na estrutura obedecendo o valor das coordenadas. O elemento permanece fixo quanto o posicionamento vertical (left ou right) e horizontal (top ou bottom). 35
36 PROPRIEDADE POSITION img{ position: absolute; top: 100px; left: 100px; PROPRIEDADE POSITION pos1 { position: relative; top: 100px; left: 0px; pos2{ position: relative; top: 100px; left: 0px; 36
37 POSICIONANDO ELEMENTOS O princípio de posicionamento no CSS é baseado no sistema de coordenadas. h1{ position:absolute; top: 100px; left: 200px; UTILIZANDO Z-INDEX O CSS permite trabalhar com layers para montagem de uma página Web. Sendo assim: Elementos com número de índice maior se sobrepõem em relação aqueles com números menores. 37
38 UTILIZANDO Z-INDEX #ten{ position: absolute; left: 100px; top: 100px; z-index: 1; #jack{ position: absolute; left: 115px; top: 115px; z-index:2; OUTRO EXEMPLO Z-INDEX 38
39 OUTRO EXEMPLO Z-INDEX VALIDADOR CSS Para saber sobre eventuais erros em folhas CSS, a W3c criou uma página que retorna um relatório sobre a análise de uma página. Link da ferramenta 39
40 EXERCÍCIOS 01 Com base neste do topo adaptado do site Globo.com, você deverá criar um código HTML para que este seja apresentado no navegador de forma semelhante a imagem a seguir. EXERCÍCIOS 02 O site da Globo utiliza um efeito hover para adicionar uma borda a uma imagem e sublinhar o texto relativo a um link que irá direcionar a uma outra página. Construa uma regra CSS para o efeito. 40
41 EXERCÍCIOS 03 Utilizando os recursos HTML e CSS, crie a página HTML apresentada abaixo. EXERCÍCIOS 04 Utilizando os recursos HTML e CSS, crie a página mostrada ao lado. 41
42 EXERCÍCIOS 42
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
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,
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
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
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
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
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,
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
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
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
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
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
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;
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
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
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.
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
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
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
#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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
<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:
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
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
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,
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
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:
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
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
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 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.
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
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
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
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
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
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 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
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,
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
17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior
Introdução ao CSS Programação para a Internet Prof. Vilson Heck Junior Estilos de Páginas CSS Cascading Style Sheets: Estilos de Página em Cascata (trad. livre); É uma linguagem de estilos Define a apresentação
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
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
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
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
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,
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
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 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
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
Aula 5 Cabeçalhos, Imagens e Links
Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos
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
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
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
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
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
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: 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
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
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
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
1) Criar o código HTML para construir a página representada pela imagem abaixo.
1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,
Prof. Erwin Alexander Uhlmann 1/7/2010. Agora vamos elaborar um menu de navegação em cascata.
AULA 4 Menu em cascata Agora vamos elaborar um menu de navegação em cascata Primeiro precisamos elaborar uma lista de possíveis links em html link11 link12
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
INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS TRABALHANDO COM DIVS. Professor Carlos Muniz
INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS TRABALHANDO COM DIVS Introdução Divs são usadas para agrupar um ou mais elementos nível de bloco. Vamos ver um exemplo tomando duas listas de presidentes dos
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
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
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",
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
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
[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
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
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
DIV 1 DIV 2 DIV 3 DIV 4 DIV 5
Posicionamento CSS Esquema normal ou fluxo normal é o esquema padrão de posicionamento dos boxe. Segundo as regras desse esquema, elementos de nível de bloco são colocados em sequencia vertical, dentro
Introdução a HTTP, HTML e CSS
MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução A WEB -worldwideweb é um sistema global de
Instituto Federal de Minas Gerais Campus Ponte Nova CSS 3. Professor: Saulo Henrique Cabral Silva
Instituto Federal de Minas Gerais Campus Ponte Nova CSS 3 Professor: Saulo Henrique Cabral Silva Estilizando Quando escrevemos um código HTML marcamos os conteúdos com tags adequadas aquela informação.