Cascading Style Sheet
Índice da página:
Neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como Cascading Style Sheets
.Todo o documento escrito utiliza certos elementos de design para formatar seções de texto a fim de manter a mesma aparência,
seguir um padrão. Por exemplo, um elemento de design Heading 1 é geralmente uma fonte grande
que identifica todas as principais divisões de tópicos de um capítulo, artigo ou página da web. Um elemento de design
Heading 2 identifica todos os títulos dos subtópicos. A HTML inclui uma tag para práticamente todos os elementos de design
normalmente utilizados, incluindo tags de título (<h1>,<h2>...), lista (a tag
<ol> para lista ordenada, a tag <ul> para lista não ordenada) e assim por diante.
No passado , a tag <h1> em quase todos os web sites parecia a mesma (o texto preto era considerávelmente maior que o corpo do texto normal). Se você quisesse fazer os seus próprios títulos diferenciados, tinha de formatar cada tag de título individualmente, utilizando tags <font> ou similares. Se mais tarde mudasse de ideias sobre a aparência desses títulos, tinha de voltar e mudar cada título individualmente. Ou seja: um processo lento e trabalhoso.
As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, você pode fazer uma declaração global, como quero que todos os meus títulos <h1>; sejam verdes. Você precisa dizer isso sómente uma vez e cada título <h1> em seu documento será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <h1> para a cor azul. Em vez disso, basta alterar o estilo.
É possível definir um estilo personalizado para cada elemento de design em seu documento, incluindo títulos, listas, tabelas e imagens, para citar só alguns. E, além de definir uma cor, você pode definir a fonte, o tamanho, o alinhamento, a espessura do rebordo, e assim por diante.
No passado , a tag <h1> em quase todos os web sites parecia a mesma (o texto preto era considerávelmente maior que o corpo do texto normal). Se você quisesse fazer os seus próprios títulos diferenciados, tinha de formatar cada tag de título individualmente, utilizando tags <font> ou similares. Se mais tarde mudasse de ideias sobre a aparência desses títulos, tinha de voltar e mudar cada título individualmente. Ou seja: um processo lento e trabalhoso.
As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, você pode fazer uma declaração global, como quero que todos os meus títulos <h1>; sejam verdes. Você precisa dizer isso sómente uma vez e cada título <h1> em seu documento será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <h1> para a cor azul. Em vez disso, basta alterar o estilo.
É possível definir um estilo personalizado para cada elemento de design em seu documento, incluindo títulos, listas, tabelas e imagens, para citar só alguns. E, além de definir uma cor, você pode definir a fonte, o tamanho, o alinhamento, a espessura do rebordo, e assim por diante.
Cada estilo que você cria é definido como uma regra css.
Cada regra deve utilizar a seguinte sintaxe:
elemento {atributo1: valor; atributo2: valor ...}
Cada regra deve utilizar a seguinte sintaxe:
elemento {atributo1: valor; atributo2: valor ...}
•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 é chamada 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. (Veja tabela de Atributos no fim do Tutorial).
Pode atribuir múltiplas declarações desde que estejam separadas com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.
•Valor a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20px (20 pixels) para font-size.
•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. (Veja tabela de Atributos no fim do Tutorial).
Pode atribuir múltiplas declarações desde que estejam separadas com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.
•Valor a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20px (20 pixels) para font-size.
Pode também criar o seu próprio estilo, em vez de citar um tipo de tag, cria um nome precedido de (ponto), como:
.teste
No exemplo que se segue criámos dois estilos para a tag <h1> em que variamos a cor, o tamanho e o tipo de letra.
Exemplo:
No exemplo que se segue criámos dois estilos para a tag <h1> em que variamos a cor, o tamanho e o tipo de letra.
Exemplo:
<html>
<head>
<title>Exemplo Criar css</title>
<style type="text/css">
.bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px;
background:#184A4A; border:thin solid #875535; cursor:hand}
h1.1{font-family:Verdana,Arial;color:#ffff99;font-size:16px;}
h1.2{font-family:Arial,Verdana; color:#ff9900;font-size:14px;}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#333333" text="#FFFF99">
<h1 class="tx1">Este é o Cabeçalho Class=t1</h1>
<h1 class="tx2">Este é o Cabeçalho Class=t2</h1>
<center>
<input type="button" value="Fechar Janela" class="bot" onclick="window.close()">
</center>
</body>
</html>
 Ver |
 Índice |
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 documentos. A maneira como as regras interagem entre si está relacionada à parte "em cascata". Os três lugares
são:
1) Em um documento separado fora de todos os documentos HTML.
2) No cabeçalho de um documento HTML, entre as tag <head></head>
3) Dentro de uma tag de HTML.
2) No cabeçalho de um documento HTML, entre as tag <head></head>
3) Dentro de uma tag de HTML.
Cada um destes métodos tem um nome e afecta as páginas HTML em seu site de um modo diferente.
•Externo Coloca as regras de css em um arquivo separado, e então sua página HTML pode fazer um link
para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em diversas páginas.
•Incorporado Específica as regras de css no cabeçalho do documento. As regras incorporadas afectam sómente essa página.
•Inline Específica as regras de css dentro da tag de HTML. Essas regras afectam sómente essa tag.
•Incorporado Específica as regras de css no cabeçalho do documento. As regras incorporadas afectam sómente essa página.
•Inline Específica as regras de css dentro da tag de HTML. Essas regras afectam sómente essa tag.
Estilos externos:
Para definir um conjunto de regras de estilo em que pode fácilmente aplicar num documenhto, é preciso colocar as regras em um arquivo de texto. Pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css.
Sempre que quiser utilizar esses estilos numa nova página, basta colocar uma tag <link> no cabeçalho que referencie esse arquivo .css.
<link rel="stylesheet" href="http://www.joatex.com/meu_estilo.css" type="text/css">
Estilos incorporados:
Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exactamente como fizemos no exemplo dos estilos externos, mas em vez de colocar as tags e as regras num arquivo separado, coloca estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:
Para definir um conjunto de regras de estilo em que pode fácilmente aplicar num documenhto, é preciso colocar as regras em um arquivo de texto. Pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css.
Sempre que quiser utilizar esses estilos numa nova página, basta colocar uma tag <link> no cabeçalho que referencie esse arquivo .css.
<link rel="stylesheet" href="http://www.joatex.com/meu_estilo.css" type="text/css">
Estilos incorporados:
Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exactamente como fizemos no exemplo dos estilos externos, mas em vez de colocar as tags e as regras num arquivo separado, coloca estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:
<html>
<head>
<title>Exemplo Estilos Incorporados</title>
<style type="text/css">
p {background-color: #FFFFFF; font-family:arial; font-size:14px}
</style>
</head>
<body></body>
</html>
<head>
<title>Exemplo Estilos Incorporados</title>
<style type="text/css">
p {background-color: #FFFFFF; font-family:arial; font-size:14px}
</style>
</head>
<body></body>
</html>
Estilos inline:
Os estilos inline são os que têm menos efeitos. Eles afectam sómente a tag actual, não outras tags na página e tão pouco outros documentos. A sintaxe para definir um estilo inline é a seguinte:
<tag style="regras css">
Exemplo:<a style="color: green; text-decoration: none" href="http:/../...com">Joatex</a>
Note que em vez das tags <style>...</style>, apenas utiliza um atributo style dentro da tag para definir o estilo. E, em vez de colocar as regras de css entre colchetes, coloca entre aspas, separando-as com ponto-e-vírgula como de costume.
Os estilos inline são os que têm menos efeitos. Eles afectam sómente a tag actual, não outras tags na página e tão pouco outros documentos. A sintaxe para definir um estilo inline é a seguinte:
<tag style="regras css">
Exemplo:<a style="color: green; text-decoration: none" href="http:/../...com">Joatex</a>
Note que em vez das tags <style>...</style>, apenas utiliza um atributo style dentro da tag para definir o estilo. E, em vez de colocar as regras de css entre colchetes, coloca entre aspas, separando-as com ponto-e-vírgula como de costume.
