Html5

Disponível somente no TrabalhosFeitos
  • Páginas : 24 (5834 palavras )
  • Download(s) : 0
  • Publicado : 18 de março de 2013
Ler documento completo
Amostra do texto
SMASHING CSS

1

FERRAMENTAS

COMO QUALQUER outra coisa, o processo de construção de páginas Web (ou até mesmo de aplicativos) fica muito mais fácil com o uso de ferramentas. No caso da CSS, existem as ferramentas que nos ajudam a escrever CSS ao mesmo tempo em que existe o uso da CSS que nos ajuda na construção de ferramentas.

Há, até mesmo, ferramentas que fazem os navegadoressuportarem mais folhas de estilo do que sua base de código nativa conseguiria. Você é um construtor, um artesão, um criador – este capítulo vai detalhar alguns itens que darão novo brilho à sua caixa de ferramentas.

CAPÍTULO

1

PARTE I: FUNDAMENTOS

FIREBUG
O Firebug (veja a Figura 1-1) é uma das duas ferramentas essenciais na caixa de ferramentas de qualquer criador Web. (Para ver a outra,avance até a seção “Web Developer Toolbar”.) É uma extensão totalmente gratuita do navegador, também gratuito, Firefox. Mesmo se estiver usando outro navegador, continue lendo: você também pode conhecer as ações do Firebug!

Figura 1-1: A home page do Firebug.

Para obter sua cópia, acesse getfirebug.com no Firefox. Clique no botão Install (ele ficava no canto superior direito quando este textofoi escrito) e inicie a instalação. Reinicie o Firefox e prepare-se para se surpreender. Não é possível abordar tudo o que o Firebug é capaz de fazer apenas nessa dica; na verdade, um capítulo inteiro não seria suficiente. Eis alguns destaques. A guia HTML (veja a Figura 1-2) exibe a estrutura do documento à esquerda (com setas alternadas para a expansão ou retração da subárvore do documento).Observe que, quando colocamos o cursor sobre o nome de um elemento na guia HTML, esse elemento é realçado na própria página. Isso inclui a exibição da área de conteúdo e do espaçamento e margens do elemento por meio de regiões indicadas com cores, o que é simplesmente fantástico. Quando este texto foi escrito, a área de conteúdo era azul-claro, o espaçamento era roxo e a margem era amarelo-claro, masas cores não são tão importantes quanto o fato de podermos vê-las na página.

6

CAPÍTULO 1: FERRAMENTAS

Figura 1-2: Visualização de elemento do layout com o Firebug.

No lado direito da guia HTML,você poderá ver a CSS que está sendo aplicada ao elemento examinado clicando na guia Style (veja a Figura 1-13). Será exibido não só o que você, o autor, definiu, mas também o que o próprionavegador está aplicando a partir de seus estilos internos. Se você encontrar estilos provenientes de html.css ou quirk.css, por exemplo, saiba que esses são estilos internos. (Eles são chamados de “estilos AU”, termo derivado de estilos do agente do usuário. Você pode definir se eles serão ou não exibidos em um menu popup na guia Style.) É preciso ressaltar que, às vezes, o Firebug exibepropriedades que não especificamos, como –moz-background-clip. Não precisa dar muita importância a elas, exceto se tiver certeza de que as declarou explicitamente. Além disso, se você usar uma propriedade shorthand, ela será expandida nas propriedades individuais. Ou seja, algo assim:
font: 1em "Andale Mono", "Courier New", Courier, monospace;

...será representado no Firebug desta forma:
font-family:"Andale Mono","Courier New",Courier, monospace; font-size: 1em; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;

7

PARTE I: FUNDAMENTOS

Figura 1-3: O Firebug exibido em uma janela separada com a guia Style ativa.

Embora essa representação não seja necessariamente ruim – ela de fato nos avisa que, muitasvezes, o uso de uma propriedade shorthand diz muito mais do que dizemos na prática –, inicialmente pode ser confusa. (Para saber mais sobre propriedades shorthand, consulte o Capítulo 2.) Também é preciso destacar que as regras exibidas na guia Style são listadas em ordem inversa de especificidade; isto é, a primeira é a regra mais específica aplicada ao elemento examinado, a segunda é a próxima...
tracking img