As definições de CSS(cascading style sheet) permitem-nos separar a estrutura da forma de um documento (X)HTML. O (X)HTML é usado para definir a estrutura através das tags mas toda a formatação (fontes cores, imagens de fundo, molduras, links, formatação do texto, etc ) é realizada pelas definições de CSS.
Um ficheiro de CSS mão é mais do que um conjunto de várias definições (embebidas na head do documento ou num ficheiro externo). Estas definições podem ser:
- regras (rules);
- @rules (que compreendem regras gerais de definição de impressão, de screen, de page, de print,etc.) ou;
- @import (que permitem a importação de um documento CSS existente num outro local, sem ser necessário copiá-lo. Por exemplo, esta página podia ser formatada por um ficheiro CSS existente no site esafmultimedia.com. Assim escreveríamos na head:
@ import url(http://esafmultimedia.com/CSS/geral.css)
A sintaxe de uma definição CSS consiste em 3 partes:
selector {propriedade: valor} // selector {property: value}
O selector referencia o elemento HTML que queremos formatar. A propriedade é um atributo do selector que queremos formatar e o valor está intimamente relacionado com a formatação do elemento.
Cada selector pode ter múltiplas propriedades; e cada propriedade tem valores independentes.
body {
background: #eeeeee;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
Neste exemplo (de definição tipo rule) o body é o selector; a definição é o conjunto das instruções escritas entre as chavetas, background, é uma propriedade de body; #eeeeee é o valor do background nesta definição.
A propriedade e o valor estão separados por dois pontos e rodeados por chavetas.
Quando um valor é constituído por mais que uma palavra, deve estar entre aspas.
Também, podemos especificar mais do que uma propriedade na mesma declaração.
p{text-align: center; color: black; font-family: arial}
Para isto, devemos separar cada propriedade e o respectivo valor com um ponto e virgula (;).
Os comentários CSS são uma forma prática de organizarmos código. Servem, como o próprio nome indica , para inserir texto em forma de comentário que ajuda o autor a relembrar a organização e a forma das definições ou para organizar o documento CSS em partes lógicas. São, também, extremamente úteis para partilhar código, permitindo que outra pessoa compreenda o porquê daquela organização ou definição.
/*isto é um comentário CSS*/
//atenção, este não é um comentário CSS!! Este comentário, comum a muitas //linguagens origina um erro de CSS.
<!-- este é um comentário HTML. É usado para embeber as definições CSS na head do documento-->
Os comentários HTML usados para embeber a CSS na head são usados por precaução, dado que os browsers mais antigos, ignorando a tag style mostrariam as definições CSS na página.
<style type ="text/css">
<!--
.imagem {
background-color: #FFFFF6;
margin: 5px;
padding: 5px;
height: 140px;
width: 140px;
border-bottom-width: thin;
border-bottom-style: outset;
border-bottom-color: #333333;
border-right-width: thin;
border-right-style: outset;
border-right-color: #333333;
border-top-style: none;
border-left-style: none;
}
-->
</style>
Quando criamos as regras de CSS podemos compactar o código.
Por exemplo esta definição:
.imagem {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #333333;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
}
pode ser escrita assim:
.imagem{
margin: 20px;
border: thin solid #333333;
}
Isto permite-nos poupar tempo e permitir um render mais rápido do documento.