Introdução às Folhas de Estilo
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.
Sintaxe Geral <style type= text/css > /* comentário */ seletor { propriedade: valor; propriedade: valor valor valor...;... } seletor, seletor { propriedade: valor;... } </style>
Sintaxe Geral
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}
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: http://www.w3schools.com/css/css_reference.asp
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
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).
Estilos em Cascata Default do navegador Arquivos externos: <link rel= stylesheet... CSS definidos na seção <head> Estilos in-line
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 >
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 > <!-- h1 { font-family: arial; color: blue; } h2 { font-family: arial; color: green; } --> </style> </head>...
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>
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>
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.
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>
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>
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">
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>
Herança de Estilos Um documento HTML define uma hierarquia de elementos
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>
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>
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>
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>
Exemplos (Continuação)
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}
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>
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.
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>
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.
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
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
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
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
Estilos e XML <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="estilo.css"?> <curriculo xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" 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>111.111.111-11</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>
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}
Estilos e XML