Planejando, organizando e mantendo folhas de estilos

21 de agosto de 2008

Quanto maior, mais complexo e graficamente rico seus sites se tornarem, mais difícil será gerenciar sua CSS. Aqui veremos como dividir suas folhas de estilos para uma melhor gerencia.
Aqui estou presumindo que você trabalhe com CSS (folhas de estilos) externamente.
Felizmente, a CSS permite manter nossos estilos em uma ou mais folhas de estilos externas. Existe duas maneiras de anexar folhas de estilos externas a uma página Web. Você pode criar um link para elas ou importa-las.

<link href=”/css/básico.css” rel=”stylesheet” type=”text/css” /> link referência.

<style type=”text/css”> -- importação
<!—-
@import url (“/css/avancado.css”);
-->
</style>

Navegadores antigos não entendem a importação. Isso pode ser benéfico, pois você pode ocultar um layout mais graficamente ricoGanhe Dinheiro!
Afilie-se ao Riqueza!
com estilos complicados, que talvez eles não entendam.
A organização das folhas de estilos ajuda a você ter controle do que está fazendo e também de uma equipe de produção.
Eu trabalho sempre com 3 ou 4 folhas de estilos. Uma para tipografia do site, uma para formulários e tabelas, uma para cores do site e uma para o layout.
Para criar uma importação de uma folha de estilo, o primeiro comando tem que ser a importação, senão corre o risco de não funcionar. Também evite colocar suas folhas de estilos em pastas muito profundas.
Evite fazer importação de folhas de estilo em uma folha que está sendo importada. esse tipo de encadeamento ou aninhamento de múltiplos níveis não é bem suportado. Então evite aninhações com mais de 2 níveis. Exemplo eficaz.

No documento xhtml crie o link de referencia para a folha de estilo básica:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título</title>
<link href=”/css/basico.css” rel=”stylesheet” type=”text/css” /> link referência.

Dentro da folha de estilo basico.css você faz as importações:

@import url (“/css/layout.css”);
@import url (“/css/tipografia.css”);
@import url (“/css/cores.css”);

Lembre-se que qualquer comando que der em basico.css irá subscrever suas importações, então fique atento para seus comandos para não alterar, sem querer, algo que seja realmente importante.
Trabalhando assim facilita sua vida caso algo na página, não apareça como você quer. Você saberá onde está o erro facilmente e poderá corrigi-lo apenas na folha de estilos específica.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

0 comentários:

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa