Como criar folhas de estilo interno e externo no Dreamweaver - dummies

Quando você cria novos estilos no Dreamweaver, você precisa decidir se deseja salvar o estilo em uma folha de estilo interna ou externa. Em uma folha de estilo interno , a regra de estilo é salva na parte superior do documento HTML onde deseja aplicar o estilo. Em uma folha de estilo , novos estilos são salvos em um documento separado que pode ser anexado a qualquer arquivo em seu site.

As folhas de estilo externo oferecem as maiores vantagens porque usar um conjunto de estilos em muitas páginas é mais eficiente do que criar estilos para cada página em seu site. Dito isto, às vezes as folhas de estilo interno são uma boa escolha, como quando você está criando um estilo que se aplicará apenas a elementos em uma página.

Como criar uma folha de estilo interna no Dreamweaver

As folhas de estilo interno são salvas no mesmo arquivo HTML onde elas são aplicadas. Assim, você não cria um arquivo quando você cria uma folha de estilo interna, como faz quando você cria uma folha externa.

Em vez disso, quando você cria uma folha de estilo interna, basta adicionar tags nas tags na parte superior do arquivo HTML que você abriu no Dreamweaver. Então, quando você cria estilos, você salva as novas definições de regras de estilo nas tags em seu arquivo.

Criar um novo estilo interno no Dreamweaver requer apenas duas etapas. Primeiro clique no ícone de mais (+) no painel Fontes na parte superior do painel do CSS Designer. Em seguida, selecione Definir em Página na lista suspensa. Você está feito. O Dreamweaver insere as tags no código em seu arquivo e lista a folha de estilo interna no painel Fontes com a etiqueta.

Como criar uma folha de estilo externa no Dreamweaver

Na parte superior do painel CSS Designer, você encontra o painel Fontes. Este painel exibe o nome ou os nomes das folhas de estilos disponíveis para a página aberta. Este mesmo painel é usado para criar ou vincular a folhas de estilo à medida que você cria ou aplica estilos.

Para criar uma folha de estilo externa, primeiro crie e salve um novo arquivo HTML ou abra um arquivo existente no Dreamweaver e siga estas instruções:

1. Clique no ícone de mais (+) no painel Fontes no topo de o painel CSS Designer.

   Uma lista suspensa abre com três opções: crie um novo arquivo CSS, anexe o arquivo CSS existente e defina na página.

   

2. Escolha a opção Criar um novo arquivo CSS na lista suspensa.

   A caixa de diálogo Criar um novo arquivo CSS é aberta.

3. Digite um nome para o seu novo arquivo de folha de estilo.

   Você pode nomear folhas de estilo qualquer coisa que quiser, desde que não inclua espaços ou caracteres especiais que não sejam o hífen (-) ou o sublinhado (_).

   

4. Selecione a opção Link.

   O link é considerado a melhor prática na maioria dos casos e é selecionado por padrão no Dreamweaver.

   Em sua maior parte, a opção de importação é usada somente quando desejaria aplicar várias folhas de estilo externas à página, mas apenas deseja vincular a uma folha de estilo. Nesse caso, você poderia usar a opção Importação para associar várias folhas de estilo com uma.

5. Clique na seta ao lado de Uso condicional para ver configurações adicionais.

   As configurações de Uso condicional são usadas para configurar consultas de mídia para folhas de estilo.

6. Clique em OK.

   A folha de estilos é salva e vinculada à página HTML que você abriu no Dreamweaver. Nota: Se você estiver trabalhando em uma nova página HTML, verifique se você salvou a página; Caso contrário, você não poderá criar e vincular um novo arquivo CSS.

Depois de criar uma folha de estilo externa, você pode vincular essa mesma folha de estilo com tantas páginas quanto quiser, seguindo as etapas do exercício que segue imediatamente. Você também pode adicionar tantas regras de estilo como quiser em qualquer folha de estilo externa, que é abordada em vários exercícios que se seguem na criação de classe, tag e outros tipos de estilos.