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 linguagem, mas sim um conjunto de regras e tags que ajudam a melhorar o layout das páginas. Com ela é possivel economizar muito trabalho além de oferecer recursos que o html padrão não oferece. Vantagens em usar CSS: 1. Separação Lógica da Estruturação e da Formatação das Informações: os style sheets permitem isolar os códigos de formatação aplicado a várias páginas, de maneira que as mudanças gerais de estilo podem ser feitas editando apenas um único arquivo. 2. Redução do Tamanho e de Tempo de Carregamento das Páginas: Ao colocar as formatações numa única folha de estilo referenciada por cada página, ocorre a redução da quantidade de código das páginas e conseqüentemente isto reduz também a quantidade de dados que têm que ser transmitidos e analisados pelos browsers. OBS.: Para visualizar inovações de layout programadas em Cascading Style Sheet é necessário utilizar o browser Internet Explorer versão 3.0 ou superior, ou o Netscape Navigator a partir da versão 4.0. Os Comandos de CSS podem ser aplicados a toda e qualquer tag, modificando seus atributos. Até mesmo a tag <P> possui um </P> opcional e permite que você defina os atributos de tudo o que ficar compreendido entre as duas. O Style Sheets permitem, por exemplo, configurar todos os comandos <B> em uma página ou em um site inteiro de uma só vez. Como Criar um Estilo Cada estilo criado é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: elemento {atributo1: valor; atributo2: valor;...} Explicação desta sintaxe: Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML, mas sem os sinais de maior e menor. Essa parte da regra é chamadas de seletor. Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.
Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt (20 pontos) para font-size. Atributo: valor - declaração da regra. Você pode atribuir múltiplas declarações se desejar separá-los com ponto-e-vírgula (;). Não coloque um pontoe-vírgula depois da última declaração. Esta regra diz que os parágrafos aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da página: P {font-family: Times; font-size: 12pt; color: blue; margin-left: 0.5in} Observe que na última declaração não se coloca o (;). Adicionando CSS em uma Página Web Os Style Sheets podem ser utilizados de três maneiras diferentes: Inline (modificando uma tag específica de uma página), Incorporado (modificando determinados atributos para a toda a página) ou Externo (quando criamos um modelo que será aplicado a várias páginas simultaneamente). A maneira como as regras interagem entre si está relacionada ao nome "em cascata". Os três locais para definição do estilo são: 1) em um documento separado fora de todos os documentos HTML (Externo) 2) no cabeçalho de um documento HTML (Incorporado) 3) dentro de uma tag de HTML (Inline) Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente: Externo - as regras de CSS são colocadas em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem permite definir regras em um ou mais arquivos que podem ser aplicadas em várias páginas web. Incorporado - as regras de CSS serão especificadas no cabeçalho do documento. As regras incorporadas afetam somente a página atual. Inline - as regras de CSS serão especificadas dentro da tag de HTML. Essas regras afetam somente a tag atual.
Estilos Externos Curso de Extensão em HTML PUCRS Utilizado para definir um conjunto de regras de estilo que poderão ser facilmente aplicadas em várias páginas, sendo necessário colocar as regras em um arquivo de texto e referenciar o arquivo do estilo no início da definição da página que o utilizará. A criação deste arquivo pode ser feita no próprio 1st Page, desde que o mesmo seja salvo com a extensão.css. Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencie esse arquivo.css. Salvar este arquivo como: novoestilo.css. H1 {font-family: 'Comic Sans MS'; font-size: 36pt; color: blue} P {font-family: 'Courier'; margin-left: 0.5in} Agora, para utilizar os estilos definidos no arquivo novoestilo.css é necessário adicionar a seguinte tag ao cabeçalho da página: <LINK REL="STYLESHEET" HREF=" novoestilo.css" TYPE="text/css"> OBS: Este texto deverá ser inserido entre as tags <HEAD>...</HEAD>, não esquecendo de definir a localização correta do arquivo. Estilos incorporados Utilizado para criar um conjunto de estilos que se aplicam a uma única página, sendo possível configurá-los exatamente como no exemplo anterior somente colocando as regras na própria página HTML. O comando <STYLE TYPE>deverá ser colocado no cabeçalho do documento, entre a tag <HEAD> e a </HEAD>. Dessa forma, tudo o que vier no conteúdo da página obedecerá aos comandos CSS estipulados uma única vez. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao código descrito a seguir. <HTML> <HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"><!-- P {background-color: #FFFFFF; font-family:'comic Sans MS'; font-size: 14pt}
--></STYLE> </HEAD> <BODY>... </BODY> </HTML> Observação: Note que o interior da tag <STYLE> aparece em comentário <!-- -->. Isso serve para evitar problemas com browsers que não suportam CSS. Estando entre comentários, os atributos funcionarão normalmente em browsers com capacidade para CSS e serão desprezados por browsers mais antigos. Estilos inline Os estilos inline afetam somente a tag atual - não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte: <tag STYLE="propriedade:valor; propriedade:valor;"...> <A STYLE="color:green;text-decoration:none"; HREF="http://www.iecentral.net"> Estilo Inline </A> Note que em vez das tags <STYLE>...</STYLE>, apenas é utilizado um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, é necessário apenas a colocação entre aspas, separando-as com ponto-e-vírgula como de costume. IMPORTANTE: No caso de uma mesma página ter mais de um estilo aplicado, para saber qual predominará deve-se pensar da seguinte forma: o estilo mais específico prevalece. No caso, de uma página conter uma especificação de estilo geral ou global, possível acrescentar novos atributos locais diferentes. Dessa forma: Especificações locais prevalecem sobre Especificações gerais que prevalecem sobre Especificações globais que, por sua vez, prevalecem sobre Especificações default dos comandos de html Herança de Estilos A herança significa que será possível especificar classes adicionais a cada elemento, e cada classe herdará algumas características de estilo de elementos básicos, a não ser que elas sejam substituídas por valores novos ou essa característica não seja herdada.
P { font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica'; font-weight: bold; font-size: 11pt; color: #000066; position: relative; margin-left: 1cm } P.small { font-family: 'Arial', 'Sans-Serif'; font-weight: normal; font-size: 8pt; text-align: center } Para produzir um parágrafo básico, é necessário simplesmente uma tag <P>, e para produzir o parágrafo pequeno e centralizado, devendo-se acrescentar o atributo CLASS=small quando se desejar utilizar a classe small. <P CLASS="small"> Esta é uma classe de parágrafo </P>