Cascading Style Sheets CSS
|
|
|
- Benedicto Peixoto Canto
- 7 Há anos
- Visualizações:
Transcrição
1 Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo URL: André Restivo SINF 2003/2004 CSS: 1
2 CSS: O que são? CSS, ou Cascading Style Sheets, são uma forma de alterar a apresentação de um documento HTML. HTML = Conteúdo CSS = Apresentação Os estilos CSS são da forma propriedade: valor e podem ser aplicados a quase todas as marcas HTML. André Restivo SINF 2003/2004 CSS: 2
3 CSS: Como usar? Nas próprias marcas HTML: <p style="color: red">texto</p> No próprio documento HTML : <head> <title>css Example</title> <style type="text/css"> p { color: red; } a { color: blue; } </style> André Restivo SINF 2003/2004 CSS: 3
4 CSS: Como usar? Num ficheiro CSS separado (a forma correcta): <html> <head> <title>css Example</title> <link rel="stylesheet" type="text/css" href="web.css" /> </head> André Restivo SINF 2003/2004 CSS: 4
5 Selectores, Propriedades e Valores Um ficheiro CSS é composto por selectores, propriedades e valores. Um selector indica a que porção do HTML devem ser aplicados os estilos. Para cada selector podemos alterar as suas propriedades atribuindo-lhes novos valores. André Restivo SINF 2003/2004 CSS: 5
6 Selectores, Propriedades e Valores O formato de um ficheiro CSS é o seguinte: selector { propriedade: valor; propriedade: valor; propriedade: valor; } selector { propriedade: valor; propriedade: valor; propriedade: valor; } André Restivo SINF 2003/2004 CSS: 6
7 Selectores HTML Os selectores HTML permitem aplicar estilos às marcas HTML. Um selector HTML não é mais que o nome da marca: body { } font-size: 0.8em; color: navy; André Restivo SINF 2003/2004 CSS: 7
8 Tamanhos Em CSS existem várias formas de especificar tamanhos: em (exemplo, font-size: 2em) é um elemento com tamanho aproximadamente igual à altura de um caractér. px (exemplo, font-size: 12px) é a unidade para píxeis. % (exemplo, font-size: 80%) é a unidade para percentagens. pt (exemplo, font-size: 12pt) é a unidade para pontos. Existem ainda outras unidades como cm(centímetros), mm(milímetros), pc(picas) e in(polegadas). Quando um valor é zero não é necessário especificar a unidade. Devemos tentar não usar medidas absolutas como px. Para o tamanho das letras o ideal é usar em ou %. A unidade px pode ser usada por exemplo para definir contornos. André Restivo SINF 2003/2004 CSS: 8
9 Cores Existem 16,777,216 cores disponíveis nas CSS As cores podem ser um nome pré-definido: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Podem ser definidas por valores RGB. Ou por um código hexadecimal. red é o mesmo que rgb(255,0,0), o mesmo que rgb(100%,0%,0%), o mesmo que #ff0000 e o mesmo que #f00. André Restivo SINF 2003/2004 CSS: 9
10 Cores As cores podem ser aplicadas usando as propriedades color e background-color: h1 { color: #ffc; background-color: #009; } André Restivo SINF 2003/2004 CSS: 10
11 Texto Os atributos que permitem mudar a forma como o texto é representado são: font-family, font-size, font-weight, font-style, text-decoration e text-transform. font-family indica a fonte a ser usada. Esta fonte tem de estar no computador da pessoa que está a ver a página por isso não vale a pena usar fontes obscuras. Podemos especificar várias fontes separadas por vírgulas. O browser usa a primeira que o utilizador tenha. Se o nome da fonte tiver mais de uma palavra é necessário usar aspas. O último valor desta propriedade deverá ser uma classe de fonte mais genérica como serif ou sans-serif. font-size indica o tamanho da fonte. André Restivo SINF 2003/2004 CSS: 11
12 Texto font-weight indica se a fonte é bold ou não. Os valores a utilizar são bold e normal. Em teoria também podiam ser: bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900 mas o browsers actuais não percebem estes valores. font-style indica se o texto deve ser escrito em itálico ou não. Os valores a utilizar são italic ou normal. André Restivo SINF 2003/2004 CSS: 12
13 Texto text-decoration indica se o texto deve ser sublinhado ou não. Os valores possíveis são overline, line-trough, underline e none. text-transform muda a capitalização das letras Os valores possíveis são: Capitalize, UPPERCASE, lowercase e none. André Restivo SINF 2003/2004 CSS: 13
14 Texto Exemplo: <strong> nem sempre tem de ser BOLD. strong { font-style: italic; text-transform: uppercase; } André Restivo SINF 2003/2004 CSS: 14
15 Espaçamentos Existem ainda propriedades que permitem mudar o espaçamento entre as várias componentes do texto (letras, palavras, linhas,parágrafos,...) Os atributos letter-spacing e word-spacing permitem mudar o espaçamento entre letras ou entre palavras. Os valores permitidos são um comprimento ou normal. O atributo line-height altera a altura de uma linha sem alterar o tamanho da fonte. Os valores permitidos são um comprimento, uma percentagem ou normal. André Restivo SINF 2003/2004 CSS: 15
16 Alinhar Texto A propriedade text-align permite alinhar o texto dentro de um elemento (atenção que não alinha o elemento em si). Os valores possíveis são: center, left, right e justify. A propriedade text-indent permite indentar a primeira linha de um parágrafo. Os valores desta propriedade podem ser um comprimento ou uma percentagem. André Restivo SINF 2003/2004 CSS: 16
17 Margens Os atributos margin e padding são usados para definir o espaçamento entre elementos. Todos os elementos de uma página seguem o chamado Box Model: Border Margin Elemento Padding André Restivo SINF 2003/2004 CSS: 17
18 Margens Podemo-nos referir a cada margem como um todo ou apenas a uma parte: padding-left, margin-right,... As partes são top, left, right e bottom. Os valores que as margens podem tomar são comprimentos. André Restivo SINF 2003/2004 CSS: 18
19 Contornos Entre as margens margin e padding existe uma margen especial que permite criar contornos nos elementos: border-width. Também nos podemos referir a esta margem da seguinte forma: border-width-right, border-widthtop,... As borders têm propriedades especiais: A propriedade border-color permite definir a cor desta margem. A propriedade border-style permite definir o estilo com valores: solid, dotted, dashed, double, groove, ridge, inset e outset. André Restivo SINF 2003/2004 CSS: 19
20 Outros Selectores O uso de selectores HTML não torna as CSS especialmente atractivas. Podemos mudar o estilo dos parágrafos mas não podemos ter dois parágrafos com estilos diferentes. Para isso vamos usar os atributos id e class do HTML e dois tipos de selectores novos: #id e.class Também nos podemos referir a um selector HTML de uma determinada classe ou com um determinado id: p#id ou p.class André Restivo SINF 2003/2004 CSS: 20
21 Selectores Múltiplos Se queremos dar as mesmas propriedades a um grupo de selectores podemos usar a vírgula para os separar e definir as propriedades para todos eles de uma só vez: h2,.umaclasse, p { color: red; } André Restivo SINF 2003/2004 CSS: 21
22 Selectores encaixados Podemos querer alterar o estilo apenas dos parágrafos que estão dentro de um elemento <div class= conteudo > Para isso podemos usar selectores encaixados:.content p { color: #ff0; } André Restivo SINF 2003/2004 CSS: 22
23 Pseudo Classes As pseudo classes estão ligados a alguns selectores e permitem a referência a um estado desse selector. Neste momento as pseudo classes que os browsers suportam são as da marca <a>: link, visited, active e hover Um selector de uma pseudo classe toma a forma: a:hover André Restivo SINF 2003/2004 CSS: 23
24 Propriedades Condensadas Existem algumas formas de escrever condensar propriedades de vários elementos num elemento só. Para nos referirmos a todas as propriedades de um contorno de uma só vez: border: border-width border-style border-color; André Restivo SINF 2003/2004 CSS: 24
25 Propriedades Condensadas Para nos referirmos a vários border-width, border-color, border-style, margin ou padding de uma só vez: Ou: border-width: top right bottom left; margin: top right bottom left; padding: top right bottom left; margin: top/bottom right/left; André Restivo SINF 2003/2004 CSS: 25
26 Propriedades Condensadas Também nos podemos referir a várias propriedades da formatação de texto de uma só vez: font: font-style font-weight font-size/line-height font-family; André Restivo SINF 2003/2004 CSS: 26
27 Exemplo p { } font: 1em/1.5 "Times New Roman", times, serif; padding: 3em 1em; border: 1px black solid; border-width: 1px 5px 5px 1px; border-color: red green blue yellow; margin: 1em 5em; André Restivo SINF 2003/2004 CSS: 27
28 Imagens de Fundo Podemos colocar imagens de fundo em quase todos os elementos HTML. As propriedades que nos permitem mexer no fundo de um elemento são: background-color: a cor de fundo. background-image: a URL da imagem de fundo. background-repeat: O modo como a imagem se vai repetir. Pode ser repeat, repeat-y, repeat-x ou norepeat. background-position: A posição da imagem. Pode ser: top, center, bottom, left, right ou qq combinação lógica destes valores. André Restivo SINF 2003/2004 CSS: 28
29 Display A propriedade display permite alterar a forma como cada elemento é colocado na página. Por defeito existem elementos HTML que seguem o fluxo da linha. Estes elementos dizem-se inline. Exemplos: <strong>, <img>, <span>,... Os elementos que forçam uma mudança de linha antes e depois de serem colocados na página dizem-se block-line. Exemplos: <p>, <h1>, <div>,... André Restivo SINF 2003/2004 CSS: 29
30 Display A propriedade display pode ter os seguintes valores: inline: O elemento passa a ser um elemento inline. block: O elemento passar a ser um elemento block-line. none: O elemento passa a não ser colocado na página. Útil para, por exemplo, retirar o ménu da versão de impressão de uma página. André Restivo SINF 2003/2004 CSS: 30
31 Display Existem ainda outros valores não tão usuais que a propriedade display pode tomar: Para tabelas: table-row, table-cell, tablecolumn, table-row-group, table-column-group, table-header-group, table-footer-group, tablecaption e inline-table. Outros: list-item, run-in, compact e marker. André Restivo SINF 2003/2004 CSS: 31
32 Posicionamento O atributo position permite indicar uma de quatro formas de posicionar o elemento: static: Valor por defeito do HTML. Posiciona os elementos segundo o fluxo natural da página. absolute: Retira um elemento do fluxo normal da página e permite coloca-lo em qualquer sítio com as propriedades top, right, bottom e left. relative: Parecido com o static mas os elementos podem ser ajustados usando as propriedades top, right, bottom e left. fixed: Comporta-se como o absolute mas posiciona o elemento em relação à janela do browser e não em relação à página. André Restivo SINF 2003/2004 CSS: 32
33 Exemplo <div id="navigation">... </div> <div id="content">... </div> Navigation Content #navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; } André Restivo SINF 2003/2004 CSS: 33
34 Exemplo <div id="navigation">... </div> <div id="navigation2">... </div> <div id="content">... </div> #navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } Navigation Content #content { } margin: 0 10em; Navigation2 André Restivo SINF 2003/2004 CSS: 34
35 Mais Exemplos de Layout Little Boxes: André Restivo SINF 2003/2004 CSS: 35
36 Mais Exemplos de Layout Glish.com Layout Reservoir André Restivo SINF 2003/2004 CSS: 36
37 Floats Ao utilizar a propriedade float podemos obrigar um elemento a ficar à direita ou esquerda da linha, fazendo os restantes elementos da linha rodeá-lo. Os valores possíveis são: left e right. img { } float:left; André Restivo SINF 2003/2004 CSS: 37
38 Clear Se não quisermos que um elemento rodeie os elementos que estão floated podemos usar a propriedade clear. Os valores que pode tomar são: left: não rodear os elementos float à sua esquerda. right: não rodear os elementos float à sua direita. both: não rodear os elementos float à sua esquerda ou direita. André Restivo SINF 2003/2004 CSS: 38
39 Exemplos: Float e Clear #header { } #nav { width: 15em; float:left; } #content { margin-left: 16em; } #footer { clear:left; } 16 em 15 em nav1 float left header content footer André Restivo SINF 2003/2004 CSS: 39
40 Exemplos: Float e Clear #header{ } #nav1{ float: left; width: 15em; } #nav2 { float: left; clear: left; width: 15em; } #content { margin-left: 16em; } #footer { clear:left; } clear left : Para o nav2 não ficar ao lado do nav1. 15 em 16 em clear left: Para o footer não ficar ao lado do nav2 se o content for muito pequeno. nav1 nav2 float left header content footer float left André Restivo SINF 2003/2004 CSS: 40
41 Exemplos: Float e Clear #header{ } #nav1{ float:left; width: 15em; } float left header float right #nav2 { float:right; width: 15em; } 15 em nav1 content nav2 15 em #content { margin-left: 16em; margin-right: 16.5em; margin-top: 4px; } 16 em footer 16 em #footer { clear:left;} André Restivo SINF 2003/2004 CSS: 41
42 url(style.css) <style url(web.css);</style> Substitui: <link rel="stylesheet" type="text/css" href="web.css" /> Vantagem: Esconder regras CSS de browsers que entendem a marca <link>, não entendem e não estão preparados devidamente para CSS. André Restivo SINF 2003/2004 CSS: 42
43 Tipos de Media Podemos dizer que determinadas regras CSS só são para ser aplicadas em alguns tipos de media: all Todos os tipos. aural Para sintetizadores de fala. handheld Para computadores de mão. print Para impressoras. projection Para projectores. screen Para computadores. Para indicar o tipo de media podemos fazer: <style type="text/css media= all >@import url(web.css);</style> <link rel="stylesheet" type="text/css" href="web.css" media= screen/projection /> André Restivo SINF 2003/2004 CSS: 43
44 Pages Algumas regras que só se aplicam a { } size: 15cm 20cm; margin: 3cm; Atenção nestes casos só se usam dimensões reais como cm. André Restivo SINF 2003/2004 CSS: 44
45 Pages (pseudo) Para impressões existem ainda algumas pseudo regras que podemos (primeira página do (páginas que ficam do lado esquerdo da (páginas que ficam do lado direito da impressão) André Restivo SINF 2003/2004 CSS: 45
46 Pseudo Elementos Funcionam um pouco como as Pseudo Classes mas em vez de criarem novas classes que podemos usar criam novos elementos baseados em alguma propriedades: p:first-letter { } p:first-letter { } p:before { } p:after { } Os pseudo elementos before e after, juntamente com a propriedade content, permitem adicionar conteúdo antes ou depois de qualquer marca. André Restivo SINF 2003/2004 CSS: 46
47 Content A propriedade content permite os seguintes valores: open-quote: abrir aspas. close-quote: fechar aspas. no-open-quote: não abrir aspas. no-close-quote: não fechar aspas. Qualquer texto dentro de aspas. Qualquer imagem usando url(urlimagem). André Restivo SINF 2003/2004 CSS: 47
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
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
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
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
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
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
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
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
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,
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
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
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;
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
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. 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
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
[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
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,
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
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
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 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
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
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
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
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
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
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
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
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
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
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",
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
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
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
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
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
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
<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:
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
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
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) 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
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.
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
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
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
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,
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
Criação de estilos CSS
Em primeiro lugar vamos inserir um parágrafo Marco Soares 1 Criação de estilos CSS Para começar, crie um site novo e uma página inicial para testes chamada index.html Vamos começar por criar alguns estilos
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
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
Ao projeto inciado na aula anterior, faça as seguintes alterações:
Atividade 4 Ao projeto inciado na aula anterior, faça as seguintes alterações: 1. Insira uma cor de fundo na página. 2. Google fonts Se nos basearmos apenas nas fontes que o usuário terá instaladas em
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
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
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
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
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
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:
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
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
Aula 7 Html 7. Prof. Paulo Cesar F. De Oliveira, BSc, PhD. 22/04/15 P C F de Oliveira
Aula 7 Html 7 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Elementos Genéricos DIV SPAN 2 DIV Cria divisão ou seção no documento HTML Containers que podem ser formatados Elemento em bloco 3
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.
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
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:
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
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,
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
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,
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
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,
2/23/10. Programa. Bibliografia, etc. Aula 1. Métodos & Tecnologias
Aula 1 39 Programa Métodos & Tecnologias Conceitos de IHC Programação web client side Concepção centrada no utilizador Model-based design Programação web server side Avaliação de interfaces 40 Bibliografia,
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
SEPARAÇÃO EM: Apresentação Estrutura Comportamento
SEPARAÇÃO EM: Apresentação Estrutura Comportamento Arquitectura de Sistemas DEI-ISEP Estrutura/Apresentação/Comportamento Uma boa prática na construção de páginas web: Separação em 3 camadas: Estrutura
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.
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
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
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
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 5 : CSS OBJECTIVO: O objetivo desta ficha é familiarizar-se com as folhas de estilos encadeados (Cascade Style Sheets CSS). RECOMENDAÇÕES: Sempre que necessário, procure informação adicional
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
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 6: CSS OBJECTIVO: Neste laboratório iremos continuar a trabalhar com Cascade Style Sheets na formatação de uma página muito simples, que apenas contém um título e uma lista desordenada que
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
Interfaces Pessoa. Laboratório 1. Máquina. HTML, CSS, JS- Introdução
Interfaces Pessoa Máquina Laboratório 1 HTML, CSS, JS- Introdução 01 HTML + CSS + JavaScript Tecnologia para desenvolvimento web: Páginas web Aplicações web Aplicações mobile HTML Linguagem standard para
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
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
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
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
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
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
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