Os próximos passos no caminho para se tornar um mestre jedi css

CSS é absolutamente uma das tecnologias mais importantes em torno da Internet de hoje, e enquanto a maioria das pessoas admitem saber um pouco de HTML, que são geralmente desinformado sobre CSS.

Última vez I introduziu-lhe os passos para iniciantes absolutos necessários para aprender como estilo de sites com CSS. Hoje eu gostaria de continuar a analisar alguns pontos básicos, dê uma olhada em como FireBug poderoso é, mostrar-lhe como fazer efeitos CSS capotamento, e apontá-lo na direção certa para onde ir.5 etapas de bebê a aprender CSS & Tornando-se um CSS Sorcerer Kick-Ass5 etapas de bebê a aprender CSS & Tornando-se um CSS Sorcerer Kick-AssCSS é a mais importante páginas mudança vimos na última década, e ele abriu o caminho para a separação de estilo e conteúdo. Na forma moderna, XHTML define a estrutura semântica ...consulte Mais informação

O modelo de caixa

Um dos conceitos-chave por trás CSS é o modelo de caixa que envolve todos os elementos HTML na página. A última vez que introduziu-lhe um utilitário fantástico chamado Firebug eo equivalente built-in Chrome. Se você tem já instalado e teve a chance de jogar com ele, você deve ter notado que paira sobre qualquer elemento na vista HTML no canto inferior esquerdo destaca uma caixa em torno do elemento na visualização da página no topo. Esse destaque é o modelo de caixa.

Um dos primeiros erros qualquer aluno CSS vai fazer é confundir e uso MARGEM e PREENCHIMENTO alternadamente. Confira o seguinte diagrama de Escolas w3, e notar que eles são muito diferentes propriedades.

É também interessante notar que a propriedade border ocupa espaço real e, portanto, afeta o posicionamento. MARGEM determina o espaço ao redor da borda de um elemento. PREENCHIMENTO determina o espaço dentro da fronteira. Apenas estofamento tem propriedades fundo aplicadas a ele.

Video: O mestre jedi: Mace_Windu

Mais FireBug Magia

Não só Firebug permite que você visualize a hierarquia precisa em que propriedades foram escolhidos a partir de seletores conflitantes, ele também permite que você tanto editar e incapacitar regras de estilo CSS, viver na página. Cada regra CSS no lado direito terá uma caixa de seleção ao lado dele. Você pode desmarcar esta simplesmente desligar essa regra.

Mais útil, porém, é a capacidade de editar essas regras. Clique duas vezes para ajustar a valores ou propriedade de nome, ou você pode até mesmo adicionar novas regras clicando duas vezes sobre o espaço em branco. É uma ferramenta incrivelmente poderosa para depurar pequenas alterações no CSS sem ter que salvar e atualizar cada vez, mas ter em mente as alterações não são salvas - tão somente ajustar um pouco de cada vez antes de transferi-los para o arquivo CSS principal.

Outra característica útil destas ferramentas de desenvolvimento está mostrando o arquivo CSS exata eo número da linha as regras originam. Acho isso especialmente útil para sites WordPress quando plugins frequentemente irá importar o seu próprio estilo, ou quando um tema é composto por mais de uma folha de estilo.

: pairar efeitos de sobreposição

Uma das primeiras coisas que qualquer um quer fazer com o seu site é adicionar sobreposições chamativos. No passado, capotamentos efeitos (elementos ou links que mudam quando você passa o mouse sobre eles) foram obtidos usando javascript básico. Com CSS você pode aplicar :flutuar efeitos para qualquer elemento, não apenas links - mas desde que os usuários esperam algo a ser clicado quando ele muda sob o mouse, é melhor se você usá-lo apenas na interface do site para links ou quando javascript também está envolvido para invocar algum tipo de ação.

Para aplicar efeitos de foco para algo, use o mesmo seletor como o elemento principal, mas simplesmente adicionar :flutuar para o final do mesmo.

a {color: preto-} a: hover {color: vermelhos}

Pairar é um de uma variedade de pseudo-selectores disponíveis para você em CSS. Embora CSS versão 3 introduziu muitos mais, você pode ler sobre os mais amplamente apoiadas nas Escolas w3.

Alguns dos meus favoritos são:

:primeira carta

Isto é usado para criar efeitos de “dropcap” na apenas a primeira letra em um parágrafo.

:primeiro filho

Este alvos somente a primeira ocorrência de algo, útil se você estiver criando | (barras) entre os links usando apenas CSS, mas precisa evitar a duplicação de um no início ou no final da lista de links.

O que é que a propriedade? cheat sheets & Editores preditivos

Claro, você não pode esperar para saber todas as propriedades que você pode jogar com no CSS - é por isso que manter algumas folhas de fraude na minha parede para quando eu estou um desenho em branco. O melhor que eu encontrei são de pxleyes.com.

Outra forma útil de garantir que você use os nomes de propriedade corretos é usar um editor de CSS ou editor de texto que reconhece código CSS e prediz o nome da propriedade enquanto você digita. Minha ferramenta pessoal de escolha é CSS Edit (US $ 40) no Mac - por favor, deixe-nos saber nos comentários se você usar quaisquer alternativas livres que você recomenda.

Video: ESPECIAL STAR WARS: Assisti a todos os filmes e veja no que deu!

Leitura adicional

Esta foi apenas uma breve introdução à CSS, mas espero que lhe deu uma boa base. Você também pode querer ir verificar o meu CSS3 artigo frescos Tricks também, e aqui estão alguns dos meus favoritos pessoais para o desenvolvimento de habilidades CSS:5 Cool Effects CSS3 você estará vendo mais de5 Cool Effects CSS3 você estará vendo mais deCSS3 (combinado com o poder do HTML5) está sendo rapidamente apoiado por todos os principais navegadores (leia - qualquer coisa, exceto o Internet Explorer), então eu pensei que agora seria um bom momento para ver alguns dos ...consulte Mais informação

• Tizag têm uma longa tutorial que lhe dá uma boa compreensão de todas as propriedades básicas, e leva muito hands-on abordagem à aprendizagem. Eles têm sido em torno de um longo período de tempo e é o site que eu inicialmente aprendeu MySQL e PHP também. recurso fantástico.
• CSS-Tricks é feita por um indivíduo muito talentoso e do próprio local é um testemunho do poder fantástico de CSS. Alguns dos tutoriais são muito alto nível, mas é um local grande motivação para mim.
• W3-Escolas pode ser sua referência final para propriedades CSS, onde você vai para procurar alguma coisa em vez de aprender em um estilo tutorial.
• Smashing Magazine é um outro local inspirador para mim, e eles publicam regularmente tutoriais em profundidade sobre não apenas CSS, mas todo o comprimento e largura do processo de design.

CSS é surpreendentemente divertido em comparação com HTML ou outra programação, então eu espero que você encontre uma centelha dentro de você - a web certamente poderia usar mais alguns bons designers. Comentários, sugestões e links mais bem-vindos, ou fazer perguntas específicas CSS no suporte técnico seção do site.