De modo geral, uma folha de estilo é uma coleção de regras de formatação que controlam a aparência do conteúdo da web. Você pode usar CSS em suas páginas de três maneiras diferentes:
Inline: estilos únicos escritos em código.
Incorporado: uma folha de estilo que pode controlar todos os elementos de uma página. Externo: uma folha de estilo que pode controlar elementos em muitas páginas.
Na verdade, muitos sites usam uma combinação desses três métodos, conforme necessário.
Uma coisa importante a considerar ao trabalhar com CSS é o fato de que navegadores diferentes e versões diferentes do mesmo navegador analisam CSS de maneiras diferentes. Além das diferenças nos navegadores da Web, você também precisa perceber que existem muitos outros navegadores, como navegadores auditivos, navegadores baseados em TV e dispositivos portáteis, como Palm Pilot e TTY (teletipo, máquina de escrever remota).
Quais são as melhores práticas?
A maioria das tecnologias tem seus próprios padrões acordados. CSS não é exceção. Embora nem todo CSS existente na web seja padronizado, é útil usar CSS de acordo com os padrões existentes. Em geral, os desenvolvedores devem separar o conteúdo dos relatórios tanto quanto possível. Os benefícios disso são:
1: Aumentar a vida útil do site.
Folhas de estilo fora do padrão podem ser convenientes no momento, mas depois que a nova versão do navegador for lançada, é provável que ocorram problemas de compatibilidade. Nesse momento, modificar o site página por página será uma tarefa muito demorada e também tornará o uso de CSS sem sentido.
2: Torne seu site acessível a todos os usuários e navegadores.
Alguns governos locais legislaram que os websites devem ser acessíveis a pessoas com deficiência. Dispositivos de navegação projetados para conscientização sobre deficiência, como navegadores auditivos, têm requisitos normativos CSS extremamente rígidos.
3: Facilite as atualizações e manutenção do site.
Usado corretamente, o CSS permite que os ajustes feitos em uma página sejam aplicados rapidamente a todas as páginas.
A primeira escolha que você deve fazer é qual folha de estilo usar. Aqui está uma análise das diferentes folhas de estilo quando se trata de práticas recomendadas:
CSS inline, simplesmente, você deve tentar evitar usá-lo. Entre outras desvantagens, usar CSS inline significa que você não aproveita a vantagem real do CSS, que é não separar o conteúdo da formatação. O DW usa CSS Inline principalmente para posicionar elementos da página (esses elementos são chamados de "camadas" na interface do usuário do DW) ou para usar um determinado efeito DHTML, que requer o uso de Javascript de estilo Inline para alterar as propriedades de um objeto.
CSS incorporado: também não é o ideal porque afeta apenas a página atual. Durante o processo de atualização, se uma página for perdida, o estilo do site ficará inconsistente. Além disso, quando os usuários navegarem em seu site, as informações da folha de estilo deverão ser baixadas para cada página;
CSS externo: esta é sua primeira escolha. CSS externo permite que todas as páginas conectadas a ele mantenham uma aparência e estilo consistentes, alterem-no uma vez e atualizem facilmente todas as páginas relacionadas, tornando sua página menor e navegando mais rapidamente; Outras práticas recomendadas são discutidas abaixo ao analisar recursos CSS específicos.
Criar uma folha de estilo CSS em DW
Ao criar uma folha de estilo CSS em DW (Texto 》Estilo CSS 》Nova folha de estilo), na caixa de diálogo pop-up, você tem duas opções: Novo arquivo de folha de estilo e Somente usado para a página atual (Somente este documento). Selecione "Novo arquivo de folha de estilo" e você inicia o processo de criação de CSS externo. Esta opção requer que você nomeie a folha de estilo e selecione um local para salvá-la antes do processo de criação real; a outra opção, Somente este documento, gravará o código relevante diretamente na página;
Você também pode selecionar uma folha de estilos existente para editar ou adicionar novas definições na caixa de diálogo Novo estilo.
Deve ser conectado ao CSS externo ou importado?
Depois de criar a folha de estilo externa, você precisa anexá-la a cada página (ou modelo). Para fazer isso, clique no botão "Anexar folha de estilo" no painel CSS. A caixa de diálogo Vincular folha de estilo externa aparecerá, onde você pode navegar até a folha de estilo de destino. Depois de encontrar o nome, você pode optar por vincular ou importar. esta folha de estilo externa.
A conexão é o método mais comumente usado. Selecione "link" para conectar a folha de estilo à página. Ele adicionará a seguinte marcação à sua página:
A opção de conexão é suportada por todos os navegadores que suportam CSS. Se quiser que alguns navegadores mais antigos (como o Netscape 4.x) "vejam" esta folha de estilo, você precisa usar o método a seguir.
Se você selecionar a opção “Importar”, as tags utilizadas são:
NetSscape4 irá ignorar completamente o CSS importado e interpretar a página de acordo com o CSS conectado. Desta forma, podemos utilizar os novos recursos em CSS sem nos preocupar com problemas de compatibilidade do navegador.
Inspetor de propriedades CSS
Você pode alternar facilmente para o modo CSS no inspetor de propriedades do DW. Por padrão, o Property Inspector exibe tags de fonte no modo HTML bruto. Clique no pequeno “A” próximo ao menu suspenso Fontes e você verá as folhas de estilo CSS atualmente disponíveis em vez de uma lista de tags de fontes. Ao mesmo tempo, você pode voltar facilmente ao modo HTML.
Folhas de estilo CSS prontas
Um dos recursos CSS interessantes do DW é que ele inclui folhas de estilo CSS prontas. Novos usuários de CSS podem experimentá-lo primeiro. Selecione Arquivo > Novo, selecione folhas de estilo CSS na caixa de diálogo pop-up do novo documento e uma lista de todos os CSS disponíveis aparecerá na caixa à direita. Para praticar o que chamamos de melhores práticas, escolha uma marcada como “Acessível”.
Salve o documento na pasta do site e anexe o CSS ao documento usando o método descrito acima.
Folhas de estilo Design Time (folhas de estilo Design Time)
Este recurso do DW permite aplicar folhas de estilo às páginas enquanto trabalha no modo design, proporcionando uma compreensão mais intuitiva da aparência do site. As folhas de estilo de tempo de design não aparecerão no site. Este recurso é muito útil do ponto de vista das nossas melhores práticas. Se você usar os métodos de importação e junção (conforme descrito acima), anexar uma folha de estilo em tempo de design permitirá desenvolver o site usando qualquer um deles. Você pode facilmente mudar para outra folha de estilos quando quiser ver como a página ficará em outra folha de estilos.
As folhas de estilo em tempo de design também são úteis para desenvolvedores que desejam aplicar CSS no lado do servidor (como ASP, PHP ou ColdFusion) ou no lado do cliente por meio de Javascript. As folhas de estilo do lado do servidor também são outra maneira de lidar com o suporte deficiente de CSS em navegadores clientes. Mas nas versões anteriores do DW, esse método não permitia visualizar o efeito real do CSS durante a fase de design. As folhas de estilo em tempo de design permitem visualizar os efeitos da folha de estilo em tempo real, para que você possa trabalhar com uma interface visual em DW. Outro benefício é que, ao fazer upload de arquivos do site, você não precisa mais percorrer todo o site em busca de folhas de estilo redundantes.
Validação
Quer você crie sua própria folha de estilo ou edite uma já existente, a validação garante que você não faça uso indevido de tags fora do padrão ou código incorreto. O próprio DW não inclui um validador CSS, você pode usar o serviço de validação fornecido pelo site W3C.
No DW você pode validar tags HTML ou DHTML (Arquivo > Verificar página > Validar marcação (para HTML) ou Arquivo > Verificar página > Validar como XML para XHTML). DW fornece muitas ferramentas auxiliares no desenvolvimento de sites baseados em CSS. Com a ajuda do MW MX, aliado a um bom conhecimento de CSS, você pode desenvolver um site que resistirá ao teste do tempo.