Blog SmartSeller

[ad_1]
Trabalho com CSS há um tempo e com tabelas há mais tempo. Tendo trabalhado tanto tempo tentando descobrir os truques e soluções alternativas para tabelas, usei principalmente tabelas para estrutura e CSS para estilo. Isto não é algo ruim. Mas só está usando parte do poder do CSS.

Além disso, tive um projeto recentemente que exigia um design livre de mesa. Se você se encontrar nesta situação, não entre em pânico. Se você pode entender o propósito do CSS e aprender ou conhecer os fundamentos da sintaxe do CSS, pode ser um processo bastante simples.

O principal a se ter em mente é que você está tentando terminar com um site que contém páginas que contêm apenas dados. Você também terá uma ou mais folhas de estilo que contêm toda a estrutura e design do site.

Como já existem livros, sites e cursos que cobrem todos os detalhes do CSS, não irei entrar na sintaxe ou nos detalhes do CSS. Nunca achei nenhum aspecto do CSS complicado o suficiente para precisar de instruções externas ou mesmo de um livro, mas perdi tempo examinando os detalhes sem ver o quadro geral. Este artigo cobrirá apenas os principais aspectos do CSS e quais áreas do CSS devem ser compreendidas antes de você entrar em detalhes.

Para praticar, peguei um site que era feito principalmente em tabelas e converti o site para todo o CSS. O layout básico do site é um cabeçalho, barra lateral, área de conteúdo principal, seção de publicidade e um rodapé. Este é um layout bastante comum, mas essas diretrizes funcionarão para quase qualquer layout ou novo design.

Primeiro, você deve realmente separar todos os dados de qualquer estrutura e formatação. Isso parece óbvio se você souber alguma coisa sobre o motivo do CSS. Eu apenas aponto isso, porque é muito fácil adicionar alguma formatação com os dados se você for novo no processo. Isso não seria o fim do mundo, mas estaria faltando o objetivo do exercício. Lembre-se de que o objetivo é mudar a maneira como você constrói páginas atualmente e começar a usar CSS sempre que possível. O motivo: para que grandes mudanças na aparência do site possam ser feitas sem ter que fazer mudanças em todas as páginas.

Em segundo lugar, sempre tente pensar se há alguma possibilidade de você reutilizar o código.

NOTA: Isso pode não fazer muito sentido se você não tiver nenhum conhecimento ou tiver um conhecimento limitado de CSS, mas anote-o e mantenha-o em mente ao começar a usar CSS.

Se for um código que você irá reutilizar, certifique-se de torná-lo uma classe. Além disso, tente colocá-lo em sua folha de estilo principal. Conforme você se torna mais avançado com CSS, provavelmente terá várias folhas de estilo. Ter elementos de todo o site em sua folha de estilo principal tornará mais fácil editá-los no futuro. Além disso, como todas as páginas chamarão o arquivo de folha de estilo principal, a classe estará sempre disponível quando você fizer uma chamada para ela.

Agora, irei abordar os principais problemas, problemas etc. que encontrei ao remover todas as tabelas e outras formatações das páginas da web.

O principal problema com CSS é a compatibilidade entre navegadores. A maioria dos designers e usuários sabe que os navegadores exibem as páginas de maneira diferente. A menos que você codifique especificamente o site para exibir o mesmo, ou o mais próximo possível, em todos os navegadores, é quase garantido que o site não exibirá o mesmo.

Existem algumas linhas de código que devem ser adicionadas a cada página.

• Primeiro declare um tipo de documento. Se você não está familiarizado com um DTD (decleração de tipo de documento), ele se parece com isto . Os três tipos principais de DTDs são soltos, tranistionais e estritos. Eu recomendo altamente rigoroso. Pesquise para ver o que funciona melhor para você, mas estrito é a maneira mais segura de garantir a compatibilidade entre navegadores. É necessário declarar que um DTD ou CSS simplesmente não funcionará da mesma forma nos navegadores mais populares.

• Você também vai querer adicionar esta linha:. Isso ajuda a corrigir o erro de compatibilidade do IE e ajudará com alguns problemas de dimensionamento. Não é obrigatório. No entanto, não tive problemas com a meta tag do IE. Portanto, eu recomendaria adicioná-lo por enquanto.

Em seguida, recomendo estudar o modelo de caixa de CSS. Se você está acostumado a usar espaçadores .gifs, tabelas e muitas outras soluções alternativas, pode ser um hábito difícil de abandonar. Mas, depois de ter uma boa compreensão do modelo de caixa, você não precisará mais dessas soluções alternativas para formatação e layout. Além disso, se você começar a usar CSS sem entender o modelo de caixa, provavelmente perderá muito tempo tentando consertar coisas que nunca quebraria.

Sempre odiei a expressão “Pense fora da caixa”. Posso realmente dizer que com CSS não basta pensar dentro da caixa. Aprenda a trabalhar dentro da caixa.

O que nos leva ao nosso próximo fundamento. Em CSS, assim como em HTML, você pode usar muitos tipos de unidades de medida. Normalmente trabalhar com pixels é bom, mas a unidade EM parece ser a mais confiável. Se você não usa um DTD estrito para suas páginas, definitivamente tente usar EM em vez de PX. As porcentagens estão bem na maioria dos casos, mas tenho visto alguns pequenos problemas com o uso de porcentagens. Ao fazer sua própria pesquisa sobre isso, você encontrará mais informações. A principal coisa a lembrar é que 16px = 1em, e nem todos os tipos de unidade funcionarão em todos os navegadores. Como os pixels são mais familiares para os desenvolvedores da web e EM é compatível com todos os principais navegadores, essas são as duas unidades principais que devem ser usadas.

A herança também é muito importante. Basicamente, cores, fontes e muito mais podem ser alterados por CSS. As alterações são aplicadas por meio de uma folha de estilo externa, uma folha de estilo na página ou até mesmo um estilo aplicado diretamente no HTML. Como o último estilo aplicado será usado, certifique-se de entender como funciona a herança. Além disso, todas as configurações padrão do navegador serão substituídas por um estilo externo, interno ou embutido.

Um bom exemplo é a tag HTML H1. Eu gosto de redefinir o tamanho e a cor padrão da tag do título. Embora a fonte padrão geralmente seja times e a cor padrão seja preto, o tamanho da fonte geralmente muda ligeiramente de navegador para navegador.

Por exemplo, se eu quiser que a maioria das H1s seja uma fonte Arial 20px e vermelha, eu aplicaria isso na minha folha de estilo principal, provavelmente externa. Mas digamos que eu tenha uma página em que desejo que a tag H1 tenha um tamanho diferente. Posso substituir o tamanho da folha de estilo externa com algum estilo embutido. Portanto, para este exemplo, eu realmente quero que meu título se destaque e altero o tamanho para 30 px. Mas a cor do título ainda é vermelha e a fonte ainda é Arial.

Por quê? Mesmo assim, eu redefini o tamanho com uma tag de estilo embutido, a cor e a família da fonte nunca foram redefinidas. Assim, até que eu substitua a cor, ou qualquer outro parâmetro definido por outra folha de estilo, os H1s herdarão, neste caso, a fonte Arial e o sombreamento vermelho da folha de estilo externa.

Nota: Se você importar várias folhas de estilo, ele usará o último estilo aplicado à página. Quando você usa folhas de estilo externas, a página é processada como se o código estivesse na página. Portanto, se você tiver problemas, certifique-se de não importar várias folhas de estilo que estejam em conflito umas com as outras. Uma prática recomendada é certificar-se de usar nomes exclusivos para todas as classes e IDs, mesmo se eles estiverem em folhas de estilo separadas.

Por último, as configurações padrão, como margens, preenchimento, cores, etc. podem variar ligeiramente de navegador para navegador e entre diferentes versões do mesmo navegador. Além disso, conforme novos navegadores são lançados e atualizados, seria bom saber que suas páginas não quebrarão. Portanto, no início da minha folha de estilo principal, gosto de declarar algumas configurações globais.

Geralmente, você deseja substituir o preenchimento padrão, as margens e as bordas, no mínimo. O preenchimento, a margem e a borda são as principais coisas que variam de navegador para navegador. Mais uma vez, depende de suas necessidades. Mas, por causa da herança, isso substituirá as configurações padrão do navegador em todas as suas tags e elementos automaticamente. Pessoalmente, gosto de definir tudo como zero com uma cor padrão de branco. Nunca tive problemas com compatibilidade entre navegadores usando essas configurações.

Como eu disse, há muita informação sobre CSS disponível online e em outras fontes. Este é apenas um guia sobre as principais áreas nas quais você deve se concentrar primeiro, ao se tornar o próximo desenvolvedor especialista em CSS.

[ad_2]
site em wordpress

Criação de Sites WordPress

SmartSeller Solutions: Criação de Sites WordPress

Gostou? Leia mais em nosso blog: Blog SmartSeller