A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.

Apresentações semelhantes


Apresentação em tema: "FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."— Transcrição da apresentação:

1 FTIN - Módulo de WebDesign Prof. Iran Pontes

2 IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

3 Introdução ao CSS Cascading Style Sheet Cascading Style Sheet – Folhas de Estilo Descrição de regras de estilo que indicam ao browser como apresentar os diversos elementos de um documento HTML Descrição de regras de estilo que indicam ao browser como apresentar os diversos elementos de um documento HTML Vêm substituir os atributos de formatação dos elementos HTML. Vêm substituir os atributos de formatação dos elementos HTML. – Ex: Forma de separar a apresentação do documento da sua estrutura. Forma de separar a apresentação do documento da sua estrutura. A maioria das propriedades das style sheets (folhas de estilo) podem ser utilizadas em qualquer Elemento HTML. A maioria das propriedades das style sheets (folhas de estilo) podem ser utilizadas em qualquer Elemento HTML.

4 Noções Fundamentais Todo o mecanismo de CSS – Cascading Style Sheets é baseado em Regras e Style Sheets. Todo o mecanismo de CSS – Cascading Style Sheets é baseado em Regras e Style Sheets. – Regra – Definição dos aspectos de estilo de um ou mais elementos. – Style Sheet - Conjunto de uma ou mais regras a aplicar a um documento HTML. Exº: Style Sheet com uma única regra h1 { color: red;}

5 Definição de Regras de Estilo Seletor Seletor É a ligação entre o documento HTML e o estilo a ser definido. Identifica o(s) elemento(s) a que a regra se aplica (normalmente o nome de um elemento HTML, ex: body, p, h1, etc.). Bloco de Declarações Bloco de Declarações – Um bloco de declarações é delimitado por { } e é constituído por declarações, separadas por ;. – Declaração – Define a propriedade de estilo a aplicar aos elementos identificados pelo selector. Uma declaração é constituída por duas partes, separadas por : : Propriedade – nome do efeito/característica a aplicar. Valor – Valor a aplicar à propriedade.

6 Tipos de Seletores Composta: É possível agrupar regras com declarações iguais, para diferentes selectores numa única regra. Composta: É possível agrupar regras com declarações iguais, para diferentes selectores numa única regra. h1 { font-weight: bold;} h2 { font-weight: bold;} h3 { font-weight: bold;} Equivalente a h1,h2,h3 { font-weight: bold;} Simples: Uma ou mais regras associadas aplicadas a uma única tag. h1 { color: red;} h1 { text-align: center;} Escrevendo várias regras para o mesmo seletor h1 { color: red; text-align: center;} Agrupando várias declarações para o mesmo seletor, separadas por ;

7 Tipos de Seletores Contextual: Define uma tag que receberá as informações sobre estilo, mas somente quando estiverem subordinadas a outra tag definida. Contextual: Define uma tag que receberá as informações sobre estilo, mas somente quando estiverem subordinadas a outra tag definida. p a { text-align: center;} div p a { text-align: center;}

8 Associando o Style Sheet ao HTML Existem três maneiras de vincular uma Style Sheet a uma página HTML: Existem três maneiras de vincular uma Style Sheet a uma página HTML: – Lincadas ou Importadas (Style Sheet externa). – Incorporadas (Style Sheet interno). – Inline.

9 Style Sheet externa (lincada) Uma Style Sheet externa, pode ser associada a uma página HTML através do elemento. Uma Style Sheet externa, pode ser associada a uma página HTML através do elemento. A utilização de Style Sheets externas é recomendada quando o mesmo estilo é aplicado a uma grande quantidade de páginas (ex: um site). A utilização de Style Sheets externas é recomendada quando o mesmo estilo é aplicado a uma grande quantidade de páginas (ex: um site). Utilizando esta técnica, a alteração do aspecto de um site inteiro, consegue-se modificando apenas um único arquivo. Utilizando esta técnica, a alteração do aspecto de um site inteiro, consegue-se modificando apenas um único arquivo. body {background-color: white; color:black} a:link {color: red;} a:visited {color: blue;} a:active {color: green;} a:hover {color: fuchsia;} h1 {text-transform: uppercase;} style.css

10 Style Sheet externa (Importada) Nessa abordagem o conteúdo do Style Sheet presente no arquivo com terminação.css é importado para o código html. Como se estivesse definido dentro da tag Nessa abordagem o conteúdo do Style Sheet presente no arquivo com terminação.css é importado para o código html. Como se estivesse definido dentro da url("estilo.css"); > body {background-color: white; color:black;} a:link {color: red;} a:visited {color: blue;} a:active {color: green;} a:hover {color: fuchsia;} h1 {text-transform: uppercase;} style.css

11 Associando o Style Sheet ao HTML Existem três maneiras de vincular uma Style Sheet a uma página HTML: Existem três maneiras de vincular uma Style Sheet a uma página HTML: – Lincadas ou Importadas (Style Sheet externa). – Incorporadas (Style Sheet Interno). – Inline.

12 Bach's home page Bach's home page Johann Sebastian Bach was a prolific composer. Among his works are: the Goldberg Variations the Brandenburg Concertos the Christmas Oratorio Historical perspective Bach composed in what has been referred to as the Baroque period. Definição local – Elemento Definição local – Elemento Apenas interfere nos elementos da página onde foram definidos. Apenas interfere nos elementos da página onde foram definidos. Usa-se o comentário css para evitar que browsers antigos interpretem o css de forma errada Usa-se o comentário css para evitar que browsers antigos interpretem o css de forma errada

13 Associando o Style Sheet ao HTML Existem três maneiras de vincular uma Style Sheet a uma página HTML: Existem três maneiras de vincular uma Style Sheet a uma página HTML: – Lincadas ou Importadas (Style Sheet externa). – Incorporadas (Style Sheet interno). – Inline.

14 Regras inline Podem ser definidas regras inline através do atributo style, aplicável a qualquer elemento válido no de uma página HTML, excetuando os elementos, e. Podem ser definidas regras inline através do atributo style, aplicável a qualquer elemento válido no de uma página HTML, excetuando os elementos, e. Estas regras apenas são válidas para o elemento onde foram definidas. Estas regras apenas são válidas para o elemento onde foram definidas. este parágrafo tem cor red juntamente com fonte do tipo new century schoolbook, se disponível. * A definição de regras inline é o método mais inflexível de todos. Este método perde a maioria das vantagens das regras de estilo, misturando a apresentação com a estrutura.

15 Multiplas Folhas de Estilo Se alguma propriedade para um elemento html for definida de forma repetida em folhas de estilo diferentes, entrará em ação o efeito cascata e prevalecerão os efeitos da folha de estilo mais específica. Se alguma propriedade para um elemento html for definida de forma repetida em folhas de estilo diferentes, entrará em ação o efeito cascata e prevalecerão os efeitos da folha de estilo mais específica. Ordem de Prioridade: inline > incorporada > importada Ordem de Prioridade: inline > incorporada > importadaestilo.css h2 { color: #FFCC00; text-align: center; font:italic 9pt Verdana, Sans-serif; } h2 { color: "#FFCC00"; text-align: "center"; font: "italic 20pt Verdana, Sans-serif"; } Que dia Lindo como há um conflito no tamanho das letras para, prevalecerá a folha interna e a letra de terá o tamanho igual a 20 pt.

16 Estrutura em árvore e herança A estrutura em árvore de um documento HTML, possibilita um dos mecanismos mais importantes das Style Sheets: Herança. A estrutura em árvore de um documento HTML, possibilita um dos mecanismos mais importantes das Style Sheets: Herança. – Os elementos HTML herdam (quase) todas as propriedades de estilo dos seus pais. Bach's home page Bach's home page Johann Sebastian Bach was a prolific composer. Among his works are: the Goldberg Variations the Brandenburg Concertos the Christmas Oratorio html head title body h1p ul strongli

17 Herança de propriedades de estilo Atribuir a mesma cor ao texto de todos os elementos h1 { color: red; } p { color: red; } li { color: red; } strong { color: red;} body { color: red;} Redefinir atributos herdados body { color: red;} h1 { color: blue;} Um elemento pode redefinir propriedades herdadas: Um elemento pode redefinir propriedades herdadas: – Se existirem regras contraditórias, prevalecem as regras mais específicas. Mantém as propriedades não redefinidas. Mantém as propriedades não redefinidas.

18 Propriedades não herdadas Embora o mecanismo de herança seja válido para quase todas a propriedades de estilo, existem algumas exceções. Estas exceções devem-se normalmente a: Embora o mecanismo de herança seja válido para quase todas a propriedades de estilo, existem algumas exceções. Estas exceções devem-se normalmente a: – Eficiência – Aspecto visual Exº: Exº: – O atributo background não é herdado, ficando todos os filhos com um background transparente, a não ser que o definam. – Motivos: É mais eficiente mostrar apenas uma imagem de fundo, sendo o efeito idêntico ao que ocorreria se a propriedade fosse herdada. Como as imagens de fundo são posicionadas relativamente ao elemento a que pertencem, certas imagens poderiam não apresentar o padrão de fundo esperado, após ser replicada várias vezes em cada elemento. body { background: url(textre.gif); }

19 Seletores class e id As CSS suportam diferentes tipos de seletores As CSS suportam diferentes tipos de seletores – Seletores de tipo – Seletores de classe – Seletores de id Quaisquer um destes tipos de seletores podem ser combinados entre si, permitindo criar seletores bastante complexos, mas também bastante versáteis. Quaisquer um destes tipos de seletores podem ser combinados entre si, permitindo criar seletores bastante complexos, mas também bastante versáteis.

20 Seletores de tipo Forma mais simples de definir um seletor: Forma mais simples de definir um seletor: – Consiste no nome de um elemento html, logo todas as propriedades associadas ao seletor, são aplicadas a todos os elementos com esse nome existentes no documento. – Qualquer elemento html, pode ser um seletor. h1 { color: red;} table { border: 2px;} P { text-indent: 3em;} h1, h2, h3 { color: red;} h1 { color: red;} h2 { color: red;} h3 { color: red;}

21 Seletores classe Você pode definir regras diferentes para o mesmo elemento html, banta definir tipos de classes diferentes para o elemento. Você pode definir regras diferentes para o mesmo elemento html, banta definir tipos de classes diferentes para o elemento. elementoHTML.minhaclasse { propriedade: valor; } O atributo class permite aplicar propriedades de acordo com o seletor usado e o nome da classe. Exemplo de Style Sheet com definição de duas classes diferentes para o elemento p. p.corum { color:#000000; } p.cordois { color:#0000FF; } este parágrafo terá cor preta. este parágrafo terá cor azul.

22 Seletores classe Pode-se definir uma classe sem especificar o elemento, dessa forma a classe pode ser associada no documento html a qualquer tipo de elemento. Pode-se definir uma classe sem especificar o elemento, dessa forma a classe pode ser associada no documento html a qualquer tipo de elemento. Exemplo: Definição de classe omitindo-se o elemento.cortres{ color:#000000; } Exemplo: Associando classe a tipos de elementos html diferentes. Este cabeçalho é azul. Este parágrafo é azul.

23 Elemento com o atributo class Hamlet, excerpt from act II p.grilo { color: yellow; } p.padre { color: black; } p.bispo { color: blue; } Eu retiro o que disse, João Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim Um cachorro? Enterrado em latim? Enterrado latindo, Senhor Bispo, Au, au, au, não sa-be?

24 Seletores id idclass id O seletor id difere do seletor class, por ser ÚNICO. Um seletor id só pode ser aplicado a UM e somente UM elemento HTML dentro do documento. id id Você pode "inventar" um nome e com ele criar uma id a qual definirá as regras CSS. Uma id só pode ser aplicada a UM elemento HTML. A sintaxe para o seletor ID é mostrada abaixo. Um nome qualquer que você "inventa" precedido de # (jogo-da-velha"): #principal{propriedade: valor; } Exemplo CSS arquivo.css

25 Elemento com o atributo id Hamlet, excerpt from act II p.grilo { color: yellow; } p.padre { color: black; } p.bispo { color: blue; } #titulo {text-align:center; color: blue;font-size:18pt; border-width:3px;border-style:solid;} Bate Papo Eu retiro o que disse, João Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim Um cachorro? Enterrado em latim? Enterrado latindo, Senhor Bispo, Au, au, au, não sa-be?

26 Inserindo comentários no CSS Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. O comentário introduzido no código, será ignorado pelo browser. Um comentário nas CSS começa com o "/*", e termina com " */". Veja o exemplo abaixo: /* este é um comentário*/ p { font-size: 14px; /* este é outro comentário*/ color: #000000; font-family: Arial, Serif; }

27 pseudo-classes e pseudo-elementos pseudo-classes : Permitem que as folhas de estilo diferenciem os diversos estados de uma elemento, sendo úteis para aplicar definições de estilo a um elemento apenas em determinadas situações. (exemplo) pseudo-classes : Permitem que as folhas de estilo diferenciem os diversos estados de uma elemento, sendo úteis para aplicar definições de estilo a um elemento apenas em determinadas situações. (exemplo)exemplo a:link {color: red;} a:visited {color: black; text-decoration: none;} a:hover {color: blue; text-decoration: underline;} a:active {color:yellow;} Link com vários estados Dicas para os efeitos funcionarem corretamente : a:hover deve vir após a:link no CSS; a:active deve vir após a:hover no CSS;

28 pseudo-classes - Exemplo a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} Mouse over the links to see them change layout. This link changes color This link changes font-size This link changes background- color This link changes font- family This link changes text- decoration Veja Como Ficou

29 pseudo-classes e pseudo-elementos pseudo-elementos : Utilizadas para especificar partes lógicas de uma elemento, sem que essas partes estejam na hierarquia de um documento. pseudo-elementos : Utilizadas para especificar partes lógicas de uma elemento, sem que essas partes estejam na hierarquia de um documento. – Primeira letra p:first-letter {propriedade:valor;} – Primeira linha p:first-line {propriedade:valor;}

30 Declarações – Propriedades display; list-style; list-style-image; list-style-type Classificação bottom; clip; height; left; overflow; position; right; top; visibility; width; z-index Posicionamento direction; letter-spacing; line-height; max-height; max-width; min-height; min-width; text-align; text-decoration; text-indent; text-shadow; text- transform; vertical-align; white-space; word- spacing Texto font; font-family; font-size; font-style; font- variant; font-weightFontes cursor Outras propriedades border; border-bottom; border-bottom-color; border- bottom-style; border-bottom-width; border-collapse; border-color; border-left; border-left-color; border-left- style; border-left-width; border-right; border-right-color; border-right-style; border-right-width; border-style; border- top; border-top-color; border-top-style; border-top-width; border-width; clear; float; margin; margin-bottom; margin- left; margin-right; margin-top; padding; padding-bottom; padding-left; padding-right; padding-top; table-layout Disposição (Layout) background; background-attachment; background-color; background-image; background-position; background- repeat; color Fundo e Cores

31 Declarações – Valores Existem determinados tipos de valores que são válidos para diversas propriedades e cujas gamas de valores podem ser englobadas em vários tipos Existem determinados tipos de valores que são válidos para diversas propriedades e cujas gamas de valores podem ser englobadas em vários tipos Percentagens background; background-image; cursor; list-style-image; URI background; background-color; border; border-color; border- bottom; border-bottom-color; border-color; border-left; border-left-color; border-right; border-right-color; border-top; border-top-color; color; text-shadow Cores background-position; border; border-bottom; border-bottom- width; border-left; border-left-width; border-right; border- right-width; border-top; border-top-width; border-spacing ; bottom; font-size; height; left; letter-spacing (apenas dimensão); line-height; max-height; max-width; min-height; min-width; right; text-indent; text-shadow; top; vertical-align; width; Propriedades que assumem este tipo de valor Dimensões Tipo de Valor

32 Valores - Dimensões Referem-se a medidas horizontais e verticais Referem-se a medidas horizontais e verticais Existem dois tipos de dimensões Existem dois tipos de dimensões – Relativas – Absolutas em – dimensão da fonte corrente ex – altura da letra x da fonte corrente px – pixels (relativa a resolução da tela) Relativas h1 { margin: 0.5in; } /* inches */ h2 { line-height: 3cm; } /* centimeters */ h3 { word-spacing: 4mm; } /* millimeters */ h4 { font-size: 12pt; } /* points */ h4 { font-size: 1pc; } /* picas */ in – inches (polegadas – 2,54 cm) cm – centímetros mm – milímetros pt – points (1/72 inch) pc – picas (12 pints)Formato AbsolutasUninades h1 { margin: 0.5em; } /* em */ h1 { margin: 1ex;} /* ex */ p { font-size: 12px; } /* px */Exemplo Formato

33 Valores - Percentagens Valores relativos a outro valor, ex: uma dimensão. Valores relativos a outro valor, ex: uma dimensão. Cada propriedade que pode assumir valores percentuais, também define a que valor a percentagem se refere. Cada propriedade que pode assumir valores percentuais, também define a que valor a percentagem se refere. Os valores de referência podem ser: Os valores de referência podem ser: – outra propriedade do próprio elemento – uma propriedade de um elemento pai – um valor do contexto de formatação (ex: largura do bloco que contém o elemento) % % Formato /* Tabela com uma largura de 60% da largura do elemento que a contém */ table { width: 60%; } /* Parágrafo com uma dimensão de fonte 20% maior que a fonte do contexto onde o parágrafo se encontra */ p { font-size: 120%; }

34 Cada cor tem como valor uma palavra chave ou uma especificação RGB. Cada cor tem como valor uma palavra chave ou uma especificação RGB. Palavras chave definidas: Palavras chave definidas: – aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. RGB RGB – #rrggbb (ex., color: #00cc00) – rr, gg e bb são valores em hexadécimal – #rgb (ex., color: #0c0) - r, g e b são valores em hexadécimal – rgb(x,x,x) - x é um inteiro entre 0 and 255 inclusive (ex., color: rgb(0,204,0)) – rgb(y%,y%,y%) - y é um número real entre 0.0 and inclusive (ex., color: rgb(0%,80%,0%) /* Definição de cores com palavras chave */ body {color: black; background: white;} h1 { color: maroon;} h2 { color: olive;} Valores - Cores /* Definição de cores em valores RGB*/ p { color: #f00; } /* #rgb */ p { color: #ff0000; } /* #rrggbb */ p { color: rgb(255,0,0); } /* inteiro entre */ p { color: rgb(100%, 0%, 0%); } /* real entre 0.0% % */

35 Style Sheets – Fontes As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML Propriedades básicas das fontes Propriedades básicas das fontes – color: Cor da fonte – font-family:Tipo de fonte – font-size: Tamanho de fonte – font-style: Estilo de fonte – font-variant: fontes maiúsculas de menor altura – font-weight: Quanto mais escura a fonte é (negrito) – font: maneira abreviada para todas as propriedades

36 Style Sheets – Valores Válidos color: color: – código hexadecimal: #FFFFFF – código rgb: rgb(255,235,0) – nome da cor: red, blue, green...etc

37 Exemplos – Cor Cabeçalho com letras vermelhas Cabeçalho com letras verdes Parágrafo com letras azuis

38 Style Sheets – Valores Válidos font-family: font-family: – Usado para definir uma lista de tipos de fontes possíveis; – O browser assume o primeiro nome que ele encontra na lista; – Separar cada nome por virgula(,) e sempre prever um nome genérico. – Caso o nome da fonte seja composto, usar aspas duplas no nome( ). Mas caso a regra de estilo esteja definida pelo atributo style, então deve-se usar aspas simples (' '). – Nomes de fontes: define-se pelo nome da fonte ex:"verdana", "helvetica", "arial", etc. – Fontes Genéricas: define-se pelo nome genérico p. ex:"serif", "sans-serif", "cursive", etc.

39 Exemplos – Tipo Família por nome: arial, helvetica, serif; Família genérica: sans-serif; Separa-se os tipos de fontes possíveis com virgula (,); Se o nome for composto, por ex. Comic Sans SM. Usar aspas duplas: Comic Sans SM

40 Style Sheets – Valores Válidos Font-size: Indica qual o tamanho que a fonte deve possuir. Font-size: Indica qual o tamanho que a fonte deve possuir. – Por um tamanho padrão: smaller < xx-small < x-small < small < medium < large < x-large < xx-large < larger – Pelo Comprimento: uma medida reconhecida pelas CSS (px, pt, em, cm,...) – Percentual (%): Funcionando como um percentual da fonte adquirida pelo elemento

41 Style Sheets – Valores Válidos Font-style: Font-style: normal: fonte normal na vertical italic: fonte inclinada oblique:fonte obliqua

42 Style Sheets – Valores Válidos font-variant: font-variant: – normal: fonte normal – small-caps: transforma em maiúsculas de menor altura font-weight: font-weight: – Padronizados: normal, bold, bolder, lighter – Por Valor: 100, 200, 300, 400, 500, 600, 700, 800, 900

43 Exemplos – Estilo + Tamanho Esse exemplo combina mais de um tipo de propriedade: font- style, font-size Este é o estilo italic Este é o estilo normal Este é o estilo oblique de 14px Este é o texto menor

44 Exemplo: font-varian e font-weight Cabeçalho gordo Este cabeçalho com letras normais Este parágrafo com letras em "small-caps"

45 Exemplos – Sintetizando tudo na tag font Maneira abreviada de você escrever uma regra para as propriedades das fontes Maneira abreviada de você escrever uma regra para as propriedades das fontes – A sintaxe geral é esta: font: [style] [variant] [weight] [size] [/line- height] [family] | caption | icon | menu | message-box | small- caption | status-bar | inherit – Os valores style, variant, weight e size, podem ser declarados em qualquer ordem. Parágrafo em declaração única

46 Fontes usadas pelo S.O. do visitante Essas propriedades devem ser declaradas isoladas para a propriedade font Essas propriedades devem ser declaradas isoladas para a propriedade font – caption: fontes usadas em botões; – icon: fontes usadas em ícones; – menu: fontes usadas em menus; – message-box: fontes ussadas em caixas de mensagens; – small-caption: fontes usadas em pequenos controles; – status-bar: fontes usadas na barra de status; – inherit: Herda a fonte declarada pelo elemento pai. Parágrafo com fonte status- bar Parágrafo com fonte small- caption

47 Cascading Style Sheets (CSS) - Propriedades dos Textos Webdesign

48 Style Sheets – Texto As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML. As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML. Propriedades básicas das fontes Propriedades básicas das fontes – letter-spacing: espaçamento entre letras; – word-spacing: espaçamento entre palavras; – text-align: alinhamento do texto; – text-decoration: decoração do texto; – text-indent: recuo do texto; – text-transform: forma das letras; – Direction: direção do texto; – white-space: como o browser trata os espaços em branco;

49 Style Sheets – Espaço entre letras letter-spacing Valores Válidos: –normal: é o espaçamento default –lenght: uma medida reconhecida pelas CSS (px, pt, em, cm,...) São válidos valores negativos Este é o cabeçalho Este é o parágrafo

50 Style Sheets – Espaço entre palavras word-spacing Valores Válidos: – normal: é o espaçamento default – lenght: uma medida reconhecida pelas CSS (px, pt, em, cm,...) São válidos valores negativos Este é o cabeçalho Este é o parágrafo

51 Style Sheets – Alinhamento de texto text-align Valores Válidos: – left: alinha o texto a esquerda – right: alinha o texto a direita – center: alinha o texto no centro – justify: força o texto a ocupar toda a extensão da linha da esquerda a direita Este é o cabeçalho 1 Este é o cabeçalho 2 Este é o cabeçalho 3 Este é o parágrafo cujo texto...

52 Style Sheets – Decoração do Texto text-decoration Valores Válidos: – none: nenhuma decoração – underline: coloca sublinhado no texto – overline: coloca um sobrelinhado no texto – line-through: coloca uma linha em cima do texto – blink: faz o texto piscar Texto com sublinhado Texto com linha em cima Texto com sobrelinhado Este é um link sem sublinhado

53 Style Sheets – Identação do Texto text-indent Valores Válidos: – lenght: uma medida reconhecida pelas CSS (px, pt, em, cm,...) – % : porcentagem da largura do elemento pai Texto com recuo de 80 pixel Texto com recuo de 3.0em

54 Style Sheets – Forma das Letras text-transform Valores Válidos: – none: texto normal – capitalize: todas as primeiras letras do texto em maiúsculas – uppercase: todas as letras do texto em maiúsculas – lowercase: todas as letras do texto em minúsculas Texto com letras como digitadas Texto com primeira letra das palavras, maiúsculas Texto com todas letras, maiúsculas Texto com letras minúsculas

55 Style Sheets – Direção do Texto direction Valores Válidos: – ltr: texto escrito da esquerda para a direita – rtl: texto escrito da direita para a esquerda Texto da esquerda para a direita Texto da direita para esquerda

56 Style Sheets – Espaço em Branco white-space Valores Válidos: – normal: os espaços em branco serão ignorados pelo browser – pre: os espaços em branco serão preservados pelo browser – nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag espaços em branco serão ignorados do Jeito que você c l o c a aparece Esse tipo de texto so pula linha realmente quando achar uma tag br

57 Style Sheets – Margens A propriedade para margens, define um valor para espessura das margens dos elementos HTML. A propriedade para margens, define um valor para espessura das margens dos elementos HTML. Propriedades básicas as margens: Propriedades básicas as margens: – margin-top: define a margem superior; – margin-right: define a margem direita; – margin-bottom: define a margem inferior; – margin-left: define a margem esquerda; – margin:maneira abreviada para todas as margens

58 Style Sheets – Valores válidos Para qualquer tipo de margem os valores válidos são os seguintes: –auto: valor default da margem –length: uma medida reconhecida pelas CSS (px, pt, em, cm,...) –%: porcentagem da largura do elemento pai

59 Style Sheets – Margem do topo Uma margem superior de 2cm margin-top: Espaçamento do elemento html para a margem superior

60 Style Sheets – Margem Direita Uma margem direita de 300px nesta frase mais longa dentro do parágrafo margin-right : Espaçamento do elemento html para a margem direita

61 Style Sheets – Margem inferior Uma margem inferior de 4.0em margin-bottom : Espaçamento do elemento html para a borda inferior

62 Style Sheets – Margem para esquerda Uma margem esquerda de 10% margin-left: Espaçamento do elemento html para a margem da esquerda.

63 Style Sheets – Sitetizando tudo em uma única declaração. margin: permitem que você controle o espaçamento em volta dos elementos HTML. São válidos valores negativos para margem, com o objetivo de sobrepor elementos. Há quatro modos de se declarar abreviadamente as margens: margin: valor1: as 4 margens terão valor1; margin: valor1 valor2: margem superior e inferior terão valor1 -margem direita e esquerda terão valor2 margin: valor1 valor2 valor3: margem superior terá valor1 - margem direita e esquerda terão valor2 - margem inferior terá valor3 margin: valor1 valor2 valor3 valor4....margens superior, direita, inferior e esquerda nesta ordem.

64 Style Sheets – Sitetizando tudo em uma única declaração. Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 25px

65 Style Sheets – bordas As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML: As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML: – top – right – left – bottom

66 Propriedades : Propriedades : – border-width: espessura da borda – border-style: estilo da borda – border-color: cor da borda INDICANDO QUAL DAS BORDAS SOFRERÁ O EFEITO – border-top-width, border-top-style, border-top-color – border-right-width, border-right-style, border-right-color – border-bottom-width, border-bottom-style, border-bottom-color – Border-left-width,border-left-style, border-left-color FORMA ABREVIADA DE DE CLARAR TODAS AS PROPRIEDADES – border-top: todas as propriedades da borda superior – border-right: todas as propriedades da borda direita – border-bottom: todas as propriedades da borda inferior – border-left: todas as propriedades da borda esquerda – border: todas as quatro bordas Style Sheets – bordas

67 Valores válidos Valores válidos – color código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc – style none: nenhuma bordadouble: dupla hidden: equivalente a nonegroove: entalhada dotted: borda pontilhadaridge: borda em ressalto dashed: borda tracejadainset: borda em baixo relevo solid: borda contínuaoutset: borda em alto relevo – width thin: borda finathick: borda grossa medium: borda médialength: uma medida reconhecida pelas CSS (px, pt, em, cm...) Style Sheets – bordas

68 Mesclando as três propriedades Mesclando as três propriedades – border-width – border-style – border-color Borda média, contínua e azul Borda 6px, tracejada e vermelha

69 Style Sheets – bordas border-style: dotted, dashed, solid, double, groove, ridge, inset, outset. border-style: dotted, dashed, solid, double, groove, ridge, inset, outset.

70 Style Sheets – bordas Exemplo de espessura da borda Exemplo de espessura da borda p { border-style: solid; border-bottom-width: 10px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; } Borda com espessura inferior de 10px obs: A propriedade border-bottom-width não é reconhecida pelo Internet Explorer se usada isoladamente. Use border-style para ser reconhecida pelo Internet Explorer

71 Style Sheets – bordas Exemplo de declaração única. Propriedade Exemplo de declaração única. Propriedade Bordas em declaração única

72 Style Sheets – background As propriedades definem as características do fundo dos elementos HTML: As propriedades definem as características do fundo dos elementos HTML: – background-color: cor do fundo; – background-image: Define uma imagem como fundo; – background-repeat: Maneira como a imagem de fundo será posicionada; – background-attachment: Define se a imagem de fundo rola ou não com a tela; – background-position: Define como a imagem de fundo é posicionada; – background: Maneira abreviada para todas as propriedaes.

73 Aplica cores a elementos HTML. Pode-se aplicar backgrounds diferentes em diferentes tipos de elementos html. Aplica cores a elementos HTML. Pode-se aplicar backgrounds diferentes em diferentes tipos de elementos html. Valores: Valores: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc transparente: transparent Style Sheets – background-color body {background-color: #0000FF;} h2 {background-color: #FF0000;} p {background-color: #00FF00;} Estude CSS Com CSS você controla melhor seu layout

74 Style Sheets – background-image Possibilita aplicar imagens como fundo de diferentes tipos de elementos html. Possibilita aplicar imagens como fundo de diferentes tipos de elementos html. body { background-image: url("fundo01.jpg");} div#superior {background-image: url("fundo02.jpg");} div#inferior{background-image: url("fundo03.jpg");} p {padding: 30px 30px 30px 30px; color: white} Estude CSS Contedudo pertencente a divisão superior Contedudo pertencente a divisão inferior

75 Indica como a imagem especificada como background será repetida para completar os espaços. Indica como a imagem especificada como background será repetida para completar os espaços. Valores Possíveis Valores Possíveis – repeat: Indica que a imagem tanto se repete verticalmente quanto horizontalmente, sendo o comportamento padrão, caso não se especifique nada para background-repeat; – repeat-x: Imagem só se repete horizontalmente; – repeat-y: Imagem só se repete verticalmente; – no-repeat: Imagem não se repete. Apenas aparece no seu tamanho orignal. Style Sheets – background-repeat

76 Usando: repeat-y, repeat-x, repeat. Usando: repeat-y, repeat-x, repeat. body {background-image: url("fundo01.jpg"); background-repeat: repeat-y;} div#superior { background-image: url("fundo02.jpg");} div#inferior { background-image: url("fundo03.jpg"); background-repeat: repeat-x;} p {padding: 10px 10px 10px 10px; color: white} div#inferior p {color: #00ff00} Estude CSS Contedudo pertencente a divisão superior, mais contedudo pertencente a divisão superior, mais contedudo pertencente a divisão superior. Contedudo pertencente a divisão inferior, mais conteúdo pertencente a divisão inferior,... Style Sheets – background-repeat

77 Exemplo do uso do valor no-repeat. Exemplo do uso do valor no-repeat. body { background-image: url("fundo01.jpg"); background-repeat: no-repeat;} div#superior { background-image: url("fundo02.jpg"); background-repeat: no-repeat;} div#inferior{ background-image: url("fundo03.jpg"); background-repeat: no-repeat;} p {padding: 10px 10px 10px 10px; } div#inferior p {color: #00ff00} Estude CSS Contedudo pertencente a divisão superior, mais contedudo pertencente a divisão superior, mais contedudo pertencente a divisão superior. Contedudo pertencente a divisão inferior, mais conteúdo pertencente a divisão inferior,.... Style Sheets – background-repeat

78 Indica a posição que a imagem de background deve aparecer no fundo. Indica a posição que a imagem de background deve aparecer no fundo. – Valores: Style Sheets – background-position x-pos y-pos x-% y-% top left top center top right center left center center center right bottom left bottom center bottom right

79 Style Sheets – background-position body { background-image: url("fundo01.jpg"); background-repeat: no-repeat; background-position: 200px 70px} div#superior { background-image: url("fundo02.jpg"); background-repeat: no-repeat; background-position: center center; } div#inferior{ background-image: url("fundo03.jpg"); background-repeat: no-repeat; background-position: bottom right;} p {padding: 10px 10px 10px 10px; } div#inferior p {color: #00ff00} Estude CSS Contedudo pertencente a divisão superior, mais contedudo pertencente a divisão superior, mais contedudo pertencente a divisão superior. Contedudo pertencente a divisão inferior, mais conteúdo pertencente a divisão inferior, mais conteúdo pertencente a divisão inferior.

80 Valores possíveis para background-attachment: Valores possíveis para background-attachment: – fixed: Imagem fixa na tela; – scroll: Imagem rola com a tela. Style Sheets – background-attachment

81 ATIVIDADE 1)Reproduza o código em CSS (imagem no próximo slide) para termos o mesmo resultado da imagem. (Utilize o mesmo HTML do exercício da atividade 4)

82 ATIVIDADE

83 ATIVIDADE Prazo para postagem: 05/10/2013 até às 23h55 Evite enviar a postagem de sua atividade no último dia. Imprevistos podem ocorrer; Sua organização e pontualidade também estão sendo avaliadas; Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF).

84 DÚVIDAS... Acesse o Fórum de dúvidas e discussões Diariamente. Chat na Terça-Feira 01/10/ h00 as 20h30

85 FERRAMENTAS DE APOIO Apostilas e vídeos do AVASIS; Fórum durante o módulo com resposta em até 06 horas úteis; do professor:

86 POR HOJE É SÓ! PRÓXIMA AULA: – Implementação HTML/CSS SIGA-ME: – Facebook.com/iranpontes – Twitter.com/iranpontes –

87 POR HOJE É SÓ! "Qual de vocês, se quiser construir uma torre, primeiro não se assenta e calcula o preço, para ver se tem dinheiro suficiente para completá-la? Pois, se lançar o alicerce e não for capaz de terminá- la, todos os que a virem rirão dele, dizendo: Este homem começou a construir e não foi capaz de terminar. Lucas 14:28-30


Carregar ppt "FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."

Apresentações semelhantes


Anúncios Google