Ao longo desta série, foi mencionado várias vezes os arquivos de estilo. Estes arquivos de estilo permitem a estrita separação entre layout e design. Os elementos HTML são responsáveis exclusivamente pela descrição lógica ou semântica do documento da web, graças ao CSS.
É útil, no início, saber como um arquivo de estilo realmente se parece. Vejam um primeiro exemplo.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>No navegador, o documento é exibido assim:
No corpo do arquivo HTML foram definidos dois elementos:
• Um cabeçalho
• Um parágrafo
Por meio do CSS, esses dois elementos são formatados. Para isso, uma área de arquivo de estilo é definida no cabeçalho por meio de style. Dentro desta área, a formatação dos elementos é realizada.
Aqui está novamente a definição para o cabeçalho h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
A sintaxe mostrada define duas coisas:
• A família de fontes é determinada.
• O tamanho da fonte é definido.
Neste ponto, trata-se inicialmente de forma geral sobre a sintaxe utilizada. Cada instrução CSS consiste fundamentalmente em duas partes - um seletor e a declaração CSS. Através do seletor, é especificado o elemento que deve ser formatado. Como a formatação final será feita é determinada pela declaração CSS. O seletor está sempre à esquerda, a declaração CSS à direita em chaves.
A declaração CSS propriamente dita consiste novamente em duas partes, ou seja, a propriedade e o valor. A propriedade e o valor são separados por dois pontos. Um ponto-e-vírgula segue o valor.
Selektor {
Eigenschaft: Wert;
}Incorporar estilos
Há várias maneiras de incorporar estilos em páginas da web. Primeiramente, você pode atribuir instruções de estilo diretamente a uma tag HTML. Um exemplo:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Neste exemplo, o cabeçalho é exibido em cor azul.
Você também pode adicionar várias instruções de estilo a uma tag HTML.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Basta anotar estas instruções uma após a outra, separadas por ponto-e-vírgula.
Em princípio, esses estilos em linha são úteis apenas quando áreas individuais dentro de uma página precisam ser formatadas de forma diferente. Normalmente, você deve evitar esse tipo de formatação direta, pois o código HTML se tornará menos legível.
Definição central no cabeçalho
Você pode definir um arquivo de estilo central dentro do cabeçalho do arquivo HTML. Nele, todos os estilos que devem ser aplicados a esse arquivo são definidos.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
A vantagem desta opção: ao contrário da variante em linha, os formatos definidos podem ser usados várias vezes no documento. No exemplo anterior, a classe CSS text foi definida. (Informações detalhadas sobre seletores como a classe usada aqui serão abordadas no próximo tutorial). Esta classe pode ser utilizada várias vezes no documento.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Essa definição tem a vantagem adicional, em comparação com a versão em linha, de permitir alterações muito rápidas.
Externalizar instruções de CSS
A maneira mais prática de definir CSS é externalizar os estilos em um arquivo externo. Isso permite que várias páginas HTML acessem o mesmo arquivo CSS. Dessa forma, é possível realizar facilmente uma formatação uniforme de todos os arquivos pertencentes ao projeto web. Alterações futuras que devem afetar todas as páginas podem ser realizadas sem problemas.
<link rel="stylesheet" type="text/css" href="css/styles.css">
No cabeçalho do arquivo HTML, o elemento link é definido. Dentro de link, primeiro você especifica o par atributo-valor rel="stylesheet". Em seguida, vem type="text/css". O atributo href atribui o arquivo CSS relevante. Aqui, assim como ao inserir imagens, certifique-se de fornecer o caminho correto. No exemplo atual, é presumido que o arquivo CSS styles.css está no diretório css, que por sua vez está no mesmo nível que o arquivo HTML real.
O arquivo CSS referenciado é um arquivo de texto normal com a extensão css. No arquivo CSS externo, as instruções CSS correspondentes são definidas.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternativamente à variante de link mostrada, também é possível importar folhas de estilo. Aqui também, as instruções CSS são colocadas em um arquivo externo. A sintaxe utilizada para isso é a seguinte:
<style type="text/css">
@import url("css/styles.css");
</style>
Dentro dos parênteses, você precisa fornecer o caminho para o arquivo CSS a ser importado. Por sinal, o @import é uma sintaxe do CSS. Portanto, a instrução @import também pode ser utilizada dentro de arquivos CSS. Isso torna possível chamar outros estilos a partir de uma folha de estilos, o que permite uma melhor organização das folhas de estilos.
Claro que surge a questão se deve-se utilizar link ou @import. Em princípio, prefiro o link, pois essa variante é mais rápida, ou seja, melhora o desempenho da página.
Folhas de Estilo Específicas de Mídia
É possível definir folhas de estilo para mídias muito diferentes, como impressoras ou tela. Para isso, é utilizado o atributo media. Você pode atribuir uma folha de estilo a várias mídias separadas por vírgulas.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Neste caso, duas folhas de estilo foram chamadas, uma para a tela e outra para o caso da página ser impressa. O arquivo CSS druck.css será carregado quando a função de impressão do navegador for chamada. No total, estão disponíveis os seguintes valores para media:
• all - Aplica-se a todos os meios de saída.
• aural - O arquivo CSS é utilizado para sistemas de saída de fala.
• braille - O arquivo CSS é destinado a impressoras em Braille com feedback tátil, que podem gerar o chamado "Braille".
• embossed - Destina-se a impressoras Braille de página.
• handheld - Destinado a dispositivos portáteis.
• print - O arquivo CSS é para impressão em papel. Os navegadores devem automaticamente recorrer a este arquivo quando a função de impressão é chamada.
• projection - Esta opção é destinada a apresentações projetadas.
• screen - Destinado à exibição em tela.
• tty - O arquivo CSS é destinado a mídias que utilizam uma grade de caracteres fixa. Isso pode ser, por exemplo, telex e terminais.
• tv - Isso é utilizado para dispositivos semelhantes à TV. Supõe-se que os dispositivos tenham baixa resolução e sejam limitados em termos de rolagem.
Além da sintaxe HTML mostrada com o elemento link, também existem variações CSS especiais. Isso utiliza @import ou @media.
<style type="text/css">
@media screen, projection {
/* Formatos para tela */
}
@media print {
/* Formatos para impressão */
}
</style>
Dentro do elemento style, você define uma área para definições de formato usando @media, para um meio de saída específico. Após @media, separado por espaços, deve-se indicar um dos tipos de mídia já mencionados. Vários tipos de mídia devem ser separados por vírgulas.
