20 dicas úteis de CSS para iniciantes

Antigamente, dependíamos muito de desenvolvedores e programadores para ajudar a atualizar o site, mesmo quando é apenas um menor. Graças ao CSS e sua flexibilidade, os estilos podem ser extraídos independentemente dos códigos. Agora, com alguma compreensão básica de CSS, até mesmo um novato pode facilmente mudar o estilo de um site.

Se você está interessado em pegar CSS para criar seu próprio site, ou apenas para ajustar o visual do seu blog e se sentir um pouco - é sempre bom começar com os fundamentos para ganhar uma base mais forte. Vamos dar uma olhada em alguns Dicas CSS nós pensamos que poderia ser útil para principiantes. Lista completa depois do salto.

1. Usar reset.css

   Quando se trata de renderizar estilos CSS, navegadores como o Firefox e o Internet Explorer têm diferentes maneiras de manipulá-los. reset.css redefine todos os estilos fundamentais, para que você comece com uma nova folha de estilo em branco real.

   Aqui estão alguns usados ​​comumente reset.css frameworks - Yahoo Redefinir CSS, Redefinição de CSS de Eric Meyer, Trípoli

2. Use CSS abreviado

   O CSS abreviado oferece uma maneira mais curta de escrever seus códigos CSS e, o mais importante de tudo: torna o código mais claro e mais fácil de entender.

   Em vez de criar CSS assim

   .cabeçalho background-color: #fff; background-image: url (image.gif); repetição de fundo: sem repetição; posição de fundo: canto superior esquerdo; 

   Pode ser curto para o seguinte:

   .cabeçalho background: #fff url (image.gif) no-repeat canto superior esquerdo

   Mais - Introdução ao CSS Shorthand, Propriedades de taquigrafia CSS úteis

3. Compreensão Classe e identidade

   Esses dois seletores costumam confundir iniciantes. Em CSS, classe é representado por um ponto "." enquanto identidade é um hash '# ". Em poucas palavras identidade é usado em um estilo que é único e não se repete, classe do outro lado, pode ser reutilizado.

   Mais - Classe vs. ID | Quando usar a classe, ID | Aplicando Classe e ID juntos

4. Desligar

5. uma lista de links, é muito útil quando eles são usados ​​corretamente
   ou
   , particularmente para estilizar um menu de navegação.

   • Esqueço , experimentar

     Uma das maiores vantagens do CSS é o uso de

     para alcançar flexibilidade total em termos de estilo.

     são ao contrário

     , onde o conteúdo está 'bloqueado' dentro de um

     Célula É seguro dizer que a maioria layouts são realizáveis ​​com o uso de e estilo próprio, bem, talvez, exceto conteúdo tabular maciço. Mais - Tabelas estão mortas, Tabelas vs. CSS, CSS vs tabelas Ferramentas de Depuração CSS É sempre bom ter uma visualização instantânea do layout enquanto aprimora o CSS, o que ajuda a entender e depurar melhor os estilos CSS. Aqui estão algumas ferramentas de depuração CSS gratuitas que você pode instalar no seu navegador: Web Developer da FireFox, DOM Inspector, barra de ferramentas para desenvolvedores do Internet Explorer e Firebug. Evite seletores supérfluos Às vezes, sua declaração CSS pode ser mais simples, ou seja, se você estiver codificando o seguinte: ul li … ol li … table tr td … Eles podem ser reduzidos para apenas li … td … Explicação: só existirá dentro ou e e só vai estar dentro então realmente não é necessário reinseri-los. Sabendo !importante Qualquer estilo marcado com !importante será levado em uso independentemente se houver uma regra de sobrescrita abaixo dele. .página background-color: blue! important; background-color: red; No exemplo acima, cor de fundo: azul será adaptado porque está marcado com !importante, mesmo quando há um cor de fundo: vermelho; abaixo dela. !importante é usado em situações em que você quer forçar um estilo sem sobrescrevê-lo, no entanto, ele pode não funcionar no Internet Explorer. Substituir texto por imagem Geralmente, isso é prática para substituir título de um título baseado em texto a uma imagem. Veja como você faz isso. h1 texto-recuo: -9999px; plano de fundo: url ("title.jpg") no-repeat; largura: 100px; altura: 50 px; Explicação: recuo de texto: -9999px; joga seu título de texto fora da tela, substituído por uma imagem declarada por fundo: … com um fixo largura e altura. Entenda o Posicionamento CSS O artigo a seguir fornece uma compreensão clara do uso do posicionamento do CSS - position: … Mais - Aprenda o Posicionamento de CSS em Dez Passos CSS @importar vs Existem 2 maneiras de chamar um arquivo CSS externo - respectivamente usando @importar e . Se você não tiver certeza de qual método usar, aqui estão alguns artigos para ajudá-lo a decidir. Mais - Diferença entre @import e link Criando Formulários em CSS Os formulários da Web podem ser facilmente criados e personalizados com CSS. Estes artigos a seguir mostram como: Mais - Formulário sem mesa, Form Garden, Styling ainda mais controles de formulário Inspire-se Se você está procurando por um site baseado em CSS bem desenhado para se inspirar, ou simplesmente navegando para encontrar uma boa interface do usuário, aqui estão alguns sites de demonstração em CSS que recomendamos: Remix CSS Beleza CSS CSS Elite Mania CSS Vazamento de CSS Mantenha os códigos CSS limpos Se seus códigos CSS estiverem confusos, você acabará codificando em confusão e tendo dificuldade em referenciar o código anterior. Para começar, você pode criar recuo adequado, comentá-los corretamente. Mais - 12 princípios para manter seu código limpo, Formatar códigos CSS on-line Tipografia de Medição: px vs em Problema ao escolher quando usar a unidade de medida px ou em? Estes artigos a seguir podem lhe dar uma melhor compreensão sobre as unidades de tipografia. Tabela de compatibilidade de navegadores CSS Nós todos sabemos que cada navegador tem diferentes maneiras de renderizar estilos CSS. É bom ter uma referência, um gráfico ou uma lista que mostre toda a compatibilidade CSS para cada navegador. Tabela de suporte CSS: # 1, # 2, # 3, # 4. Design Multicolumns em CSS Tendo problemas para alinhar corretamente as colunas esquerda, central e direita? Aqui estão alguns artigos que podem ajudar: Em busca do Santo Graal Colunas Falso Principais razões pelas quais suas colunas CSS estão confusas Caixas Litte (exemplos) Layouts Multi-Coluna Subir Fora da Caixa Colunas Absolutas Receba um editor de CSS grátis Editores dedicados são sempre melhores que um bloco de notas. Aqui estão alguns que recomendamos: Mais - CSS simples, Bloco de anotações ++, Um editor CSS de estilo Entendendo os Tipos de Mídia Existem alguns tipos de mídia quando você declara CSS com . impressão, projeção e tela são alguns dos tipos comumente usados. Compreender e usá-los de maneira adequada permite uma melhor acessibilidade do usuário. O seguinte artigo explica como lidar com tipos de mídia CSS. Mais - CSS e tipos de mídia, Tipos de mídia W3, Tipos de Mídia CSS, Tipos de Mídia CSS2 20 aplicativos úteis para iPhone para desenvolvedores e designers 20 úteis ferramentas SVG para gráficos melhores 20 Fontes Ultra Light e Elegantes para Web Designers Artigo seguinte 20 complementos úteis para a barra lateral do Firefox Artigo anterior 20 aplicativos úteis para tirar o máximo proveito do Instagram