AeroPlanos

Aero

Aero

S.O.S. Style

CSS - Cascading Style Sheet

Escrever com "Style"

Cascading Style Sheet (CSS) é um mecanismo criado especificamente para Web designers e utilizadores.
As "folhas de estilo" contém as instruções que controlam a apresentação de documentos no monitor, impressora ou outros dispositivos.

Para se escrever com "style" é necessário especificar que tipo de estilo vamos utilizar!

<style type="text/css">
...
</style>

CSS, (Cascading Style Sheet) é um texto onde se define o estilo de escrita em HTML.

Exemplo:

body {
  color: #006;
  background-color: #fff;
  }

Esta "folha de estilo" (style sheet), que define as cores do texto e do fundo para toda a página, pode ser incluida em <head>, do seguinte modo:

<style type="text/css">
body {
  color: #006;
  background-color: #fff;
  }
</style>

Se se pretender definir um "estilo" para mais do que uma página, pode-se criar um ficheiro de texto simples independente, por exemplo MyStyle.css e fazer com que o ficheiro HTML a referencie, incluindo em <head> a respectiva instrução:

<link type="text/css" rel="stylesheet" href="MyStyle.css">

É por vezes útil introduzir um estilo no momento em que se está a escrever a página. É um Inline Style.

<p style="color: green; margin-left: 15%;">
<b>Este parágrafo tem a cor verde!</b></p>

Este parágrafo tem a cor verde!

Pode-se definir mais do que um estilo para os elementos que forem utilizados no documento.
O capítulo seguinte mostra como criar parágrafos de diferentes estilos!

5
6

Controlar Parágrafos:

<p>Esta é forma de introduzir parárafos.</p>

Usualmente, nos livros, um parágrafo é identificado por uma mudança de linha seguida de um espaço. O texto encontra-se também ajustado às margens.

Em HTML, sempre que se introduz um parágrafo, introduz-se também uma linha em branco de separação, como exemplificado neste mesmo texto.

Podemos também definir, para a nossa página, as características dos parágrafos como as utilizadas nos livros.

  p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 2em;
    text-align: justify;
    }

No entanto, podemos pretender que esse estilo seja atribuido apenas aos parágrafos que desejamos e não a todo o texto.

Definindo essas características para um determinado estilo de parágrafo poderá resolver o problema. Apelidemos esse estilo de livro.

  p.livro {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 2em;
    text-align: justify;
    }

Depois de criado o estilo "livro" introduz-se da seguinte forma:

<p class="livro">Texto...</p>

Exemplo

Este parágrafo está escrito em estilo "livro"! Para aplicar este estilo introduz-se a informação de estilo no comando de início de parágrafo, <p class="livro"> terminando normalmente com </p>.

Sempre que se utilizar a instrução <p class="livro"> os parágrafos não terão nenhuma linha em branco de separação, iniciar-se-ão com um espaço e o texto será ajustado às margens.

A caixa onde o exemplo se inseriu foi criada de forma semelhante:

div.exemplo {
  background-color: #ffc;
  color: black;
  padding: 3em;
  margin-left: 25%;
  margin-right: 25%;
  }

Colocou-se neste documento especificando a sua "class".

<div class="exemplo">
<p align="center"><b>Exemplo</b></p>
<p class="livro">Inseriu-se o texto...</p>
<p class="livro">Criou-se o segundo parágrafo.</p>
</div>

Outro exemplo:

<style type="text/css">
  p.frame {
    padding: 0.2em;
    border: solid;
    border-width: thick;
    border-left-color: gray;
    border-bottom-color: black;
    border-right-color: gray;
    border-top-color: silver;
    background: white;
    color: maroon;
  }
</style>

Vamos ver o resultado deste "frame"! O parágrafo tem a cor maroon, fundo branco e... um style com uma class="frame"! Foi introduzido assim:
<p class="frame" align="justify">... </p>


5
6

Cores:

Uma página deve ser atraente. A Vénus de Milu, da antiguidade, era pintada! Para que o efeito da cor resulte é necessário... "que o conteúdo seja bom"... mas também conhecimento da matéria!
As cores podem ser introduzidas pelos seus nomes. Foi assim que se fez nos exemplos anteriores. Contudo, por este processo ficamos limitados ao conjunto das dezasseis cores do sistema básico VGA dos PCs.

Quadro de Cores VGA
Cor  Nome Valor Hex. Valor Dec.
 
black = "#000000" (0, 0, 0)
 
silver = "#C0C0C0" (192,192,192)
 
gray = "#808080" (128,128,128)
 
white = "#FFFFFF" (255,255,255)
 
maroon = "#800000" (128, 0, 0)
 
red = "#FF0000" (255, 0, 0)
 
purple = "#800080" (128, 0, 128)
 
fuchsia = "#FF00FF" (255, 0, 255)
 
green = "#008000" (0, 128, 0)
 
lime = "#00FF00" (0, 255, 0)
 
olive = "#808000" (128, 128, 0)
 
yellow = "#FFFF00" (255, 255, 0)
navy = "#000080" (0, 0, 128)
 
blue = "#0000FF" (0, 0, 255)
 
teal = "#008080" (0, 128, 128)
 
aqua = "#00FFFF" (0, 255, 255)

Para introduzir outras cores é necessário utilizar o seu número de código "RGB" (Red Green Blue).
— Pelo valor decimal, números de 0 a 255
— Pelo valor hexadecimal (seis dígitos) 00 a FF

Assim, escrever:

body {color: yellow; background: blue;}

É o mesmo que:

body {color: "#FFFF00"; background: "#0000FF";}

Nota:

Para determinar a correspondência entre os valores decimais e hexadecimais, com o auxílio de JavaScript, pode-se construir uma Calculadora.

Para definir a cor dos links desta página utilizei as seguintes linhas de comando:

a:link {
  background-color:transparent; color:#00f;
  text-decoration:none;
  }
a:visited {
  background-color:transparent; color:#666;
  text-decoration:none;
  }
a:hover {
  background-color:transparent; color:#003;
  text-decoration:underline; font-weight:bold;
  }
a:active {
  background-color:transparent; color:#0f0;
  text-decoration:none;
  }

Juntamente com as cores, defini também que quando o rato estiver sobre um link, "a:hover", o link passa a sublinhado, "text-decoration: underline"...

5
6

Tabelas:

Para se criar uma "tabela" ou quadro, utiliza-se o "tag" <table>. A tabela finaliza-se com </table>. Os seus componentes são:

<tr> table row
<th> table heading cell
<td> table data cell

Como passar em falso uma linha ou uma coluna, basta ver o código da tabela que se segue:

Quadro de Custos
CS-XAODespesas
20012002Total
Gas.€500.00€600.00€1100.00
Man.€100.00€200.00€ 300.00
Total€600.00€800.00 €1400.00
<table cellspacing="2" cellpadding="10" width="80%" border="1">
<caption align="left"><b>Quadro de Custos</b></caption>
<tr><th rowspan="2">CS-XAO<th colspan="3">Despesas
<tr><th>2001<th>2002<th>Total
<tr align="center"><td>Gas.<td>€500.00<td>€600.00<td>€1100.00
<tr align="center"><td>Man.<td>€100.00<td>€200.00<td>€ 300.00
<tr align="center" bgcolor="silver"><td>Total<td>€600.00<td>€800.00
    <td bgcolor="aqua">€1400.00
</table>

Este código não utiliza a linguagem CSS. A razão de ter incluido o título "tabelas" neste capítulo, tem a ver com as definições gerais das tabelas desta página. No inícico da página, em "<style>", encontram-se as seguintes definições:

table {
  font-family: sans-serif;
  background: #FFF8DC; /*rgb(255,248,220);*/
  color: black;
  border-width: 2px;
  border-color: white;
  }
th {
  font-family:sans-serif;
  background:#E8D8C8; /*rgb(232,216,200);*/
  color: black;
  }
td {font-family: monospace; }
/*Comentário... (em CSS)*/
/*O código entre estes caracteres
não produz nenhum efeito!*/

Mais uma vez, é mais facil introduzir aqui qualquer alteração, do que em cada uma das tabelas da página.
Note-se ainda que as definições podem ser alteradas hierarquicamente. A última linha passou a ter a cor "silver" e a última célula a cor "aqua".

Nota:

As tabelas não devem ser utilizadas para se fazer o "layout" de páginas. Com essa finalidade existe "CSS".
"Cascading Style Sheet" é também fundamental para imprimir páginas da Web.