Introdução às Folhas de Estilo

Tamanho: px

Começar a partir da página:

Download "Introdução às Folhas de Estilo"

Aníbal Salvado Lobo
8 Há anos
Visualizações:

1 Introdução às Folhas de Estilo

2 Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de fonte Espaçamento entre letras / palavras Cores Etc Disponível no I. Explorer a partir da versão 3 e no Netscape a partir da versão 4.

Permite maior controle sobre a apresentação das páginas Margens Tamanho /

3 Sintaxe Geral <style type= text/css > /* comentário */ seletor { propriedade: valor; propriedade: valor valor valor...;... } seletor, seletor { propriedade: valor;... } </style>

4 Sintaxe Geral

5 Mais Alguns Exemplos blockquote {font-size:12pt} h1 {color:#00ff00} h2 {color:#00ff00; font-size:18pt; font-family:verdana, san-serif} p {font-size:10pt; font-family: Georgia;serif} strong,b {color:#ff0000}

6 Propriedades dos Estilos São as características que podem ser redefinidas para cada tag através da CSS. Existem cerca de 120 propriedades diferentes. Não vamos descrever todas elas aqui. Procure um guia de referência:

Existem cerca de 120 propriedades diferentes.

7 Principais Propriedades Fonte color, font-family, font-size, font-style, font-weight, text-decoration Cor e imagem de fundo background-position, background-image, backgroundcolor, background-attachment, background-repeat Alinhamento de texto text-align, text-indent, vertical-align Espaçamento word-spacing, letter-spacing, line-height, margin, padding, white-space

backgroundcolor, background-attachment, background-repeat Alinhamento de texto text-align,

8 Criando Estilos 3 maneiras diferentes: 1. Criando uma folha de estilos separada 2. A nível de documento, na seção HEAD 3. A nível da própria TAG HTML, usando o atributo style (estilos in-line).

9 Estilos em Cascata Default do navegador Arquivos externos: <link rel= stylesheet... CSS definidos na seção <head> Estilos in-line

10 1. Aplicando-se Estilos a um Site Folhas de estilo externas. Arquivo com extensão css. Promove a uniformização e consistência nas páginas de um site. Deve ser incluido em todas as páginas do site: <link rel= stylesheet type= text/css href= arquivo.css >

Promove a uniformização e consistência nas páginas de um site.

11 2. Aplicando-se Estilos Específicos de um Documento Incluídos atrávés da tag <style> na seção <head> do documento. Exemplo: <html><head> <style type= text/css >  </style> </head>...

Exemplo: <html><head> <style type= text/css > <!

12 3. Aplicando-se Estilos Específicos de uma Tag Chamados estilos in-line Incluído através do atributo style de qualquer tag. Utilização: <h1 style="font-family: times; color: green;"> Verde e com fonte times</h1> <h1 style="font-family: times; color: red;"> Vermelho e com fonte times</h1> <h2 style="font-size:18pt; color:#ff0000"> Vermelho e com fonte tamanho 18</h2>

Utilização: <h1 style="font-family: times; color: green;"> Verde e com fonte times</h1> <h1

13 Estilos em Cascata - Exemplo <html> <head> <link rel="stylesheet" type="text/css" href="arq.css"> <style type="text/css"> h1 { color:blue; font-family: arial; } </style> </head> <body> <h1 style="color: red;">estilos em cascata</h1> </body> </html>

14 Classes de Estilos Permite criar várias classes (com diferentes estilos) associadas a uma mesma tag. Dependendo da classe a que o elemento pertence, a apresentação é alterada. O nome da classe a que o elemento pertence é especificado através do atributo class.

Dependendo da classe a que o elemento pertence, a apresentação é

15 Classes de Estilos - Exemplos Definindo classes para a tag <h1>: <style> h1 { font-family: arial; font-size: 20pt; } h1.vermelho { color: red; } h1.verde { color: green; } </style> Utilização: <h1 class="vermelho">cabeçalho Vermelho</h1> <h1 class="verde">cabeçalho Verde</h1> <h1>cabeçalho Simples</h1>

verde { color: green; } </style> Utilização: <h1 class="vermelho">cabeçalho

16 Classes de Estilos Genéricas São classes aplicáveis a qualquer tag Basta omitir o nome da tag no seletor. Exemplo: <style>.verde { color: green; } </style> Utilização: <h1 class=verde>este é um cabeçalho verde</h1> <p class=verde>este é um parágrafo verde</p>

verde { color: green; } </style> Utilização: <h1

17 Classes de Estilos Um elemento pode pertencer a mais de uma classe: <style type="text/css">.arial { font-family: arial, sans-serif; }.small { font-size: 80%; }.bold { font-weight: bold; } </style> <p class="small arial bold">

18 Pseudo-classes Classes com nomes pré-definidos. Associadas a estados assumidos por algumas tags. Tag A: link, active, visited e hover (só explorer) Exemplo: <style> A:link { color: blue; } A:active { color: red; font-weight: bold; } A:visited { color: green; } A:hover { color: darkred; } </style>

Tag A: link, active, visited e hover (só explorer) Exemplo: <style> A:link

19 Herança de Estilos Um documento HTML define uma hierarquia de elementos

20 Herança de Estilos Os estilos definidos nas tags superiores dessa hierarquia são herdados pelas tags inferiores Exemplo body {font-size:10pt; color:#00ff00} h2 {text-align:center; font-size:14pt} em {font-style:italic} <body> <h2>minha <em>página</em></h2> <p>esta é a minha página</p> </body>

{font-size:10pt; color:#00ff00} h2 {text-align:center; font-size:14pt} em

21 Textos em itálico dentro de cabeçalhos H1 serão escritos com a cor vermelha. Seletor Contextual Classes de estilos que se aplicam a estilos que sejam aninhados: <style> h1 i { color: red; } </style>

22 Seletor Contextual - Exemplo <head> <style type="text/css"> <! OL LI {list-style:decimal} OL OL LI {list-style:upper-alpha} OL OL OL LI {list-style:lower-alpha} --> </style> </head>

23 Exemplo (Continuação) <body> <ol> <li>reino Animal</li> <ol> <li>invertebrados</li> <li>vertebrados</li> <ol> <li>peixes </li> <li>anfíbios</li> <li>répteis</li> <li>aves</li> <li>mamíferos</li> </ol> </ol> </ol> </body>

24 Exemplos (Continuação)

25 Identificadores O atributo ID permite a associação de um identificador a uma tag HTML: <h1 id="titulo1">usando CSS</h1> <p id="rodape"> NCE</p> É possível definir estilos que se aplicarão a um elemento específico: p#rodape {font-size:10pt; font-style:italic} #titulo1 {color:#990099}

26 Identificadores Os estilos definidos com id têm precedência sobre class. <style> h1.grande{ font-family: arial; font-size: x-large; color: green; } #azul { color: blue; } #amarelo { color: yellow; } </style> <H1 class="grande">grande e verde</h1> <H1 class="grande" id="azul">grande e azul</h1> <H1 class="grande" id="amarelo">grande e amarelo</h1>

27 Tags div e span Permitem atribuir um estilo a uma seção de um documento (aceitam atributos class, id e style). Tag <DIV>... </DIV> Causa uma mudança de linha. Pode conter vários parágrafos. Tag <SPAN>... </SPAN> Não causa mudança de linha. Definir um estilo no meio do parágrafo.

28 Tags div e span - Exemplo <div style= color: red; >Este é um parágrafo vermelho com um texto <span style= color: green; >verde</span> no meio</div>

29 Como usar estilos? Evite criar estilos associados a características físicas da formatação, por exemplo: Vermelho Centralizado ParagrafoRecuado Direita Evite usar estilos in-line. Evite usar tabelas para criar a diagramação ou para criar fundos coloridos ou bordas.

30 Como usar estilos? Procure criar estilos associados a características lógicas da formatação Procure criar estilos que sejam os mais genéricos possíveis Exemplos: Titulo1 Titulo2 Msgerro Rodape Cabecalho Conteudo Navegacao

31 XML Padrão para descrição de dados na Web HTML descreve o formato do documento XML descreve o conteúdo do documento Desenvolvedor define suas próprias tags para criar uma estrutura Um documento XML não tem nenhuma instrução para sua apresentação Folhas de Estilos

32 Vantagens do XML Simplicidade Separar o conteúdo da apresentação Permite a visualização de dados provenientes de fontes heterogêneas Permite que as aplicações apresentem e tratem os dados como lhes for conveniente

33 Estilos e XML Uma representação em XML não tem nenhuma informação sobre sua apresentação Estas características serão definidas por intermédio de informações suplementares, em uma folha de estilo associada ao documento XML

34 Estilos e XML <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/css" href="estilo.css"?> <curriculo xmlns:xsi=" xsi:nonamespaceschemalocation="c:\mauricio\xml\curriculo.xsd"> <abertura>meu Currículo</abertura> <secao>dados Pessoais</secao> <nome>maurício Nunes da Costa Bomfim</nome> <cpf> </cpf> <secao>formação Acadêmica</secao> <titulo>bacharel em informática</titulo> <instituicao>ufrj</instituicao> <conclusao>1983</conclusao> <secao>experiência Profissional</secao> <empresa>nce/ufrj</empresa> <cargo/> </curriculo>

35 Estilos e XML curriculo {display: block; font-family: verdana; font-size: 80%} abertura {color: blue; font-size: 120%; font-weight: bold; display: block; margin: 25px; text-align: center; letter-spacing: 15px} secao {display: block; font-size: 100%; font-weight: bold; margin-top: 10px; text-decoration: underline} nome, titulo {color: green; font-weight: bold; display: block; margin-top: 10px}

36 Estilos e XML

Documentos relacionados

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma