Postado em: 14 de julho de 2006 por Pedro Rogério
As Divs(divisões), são elementos em níveis de bloco do (x)HTML usados para definir seções de um arquivo (x)HTML. Uma divisão pode conter todas as peças que compõem sua página, incluíndo divisões adicionais, imagens, texto.
Por exemplo, você define uma divisão dentro de um arquivo (x)HTML colocando o seguinte código dentro das tags <body></body>:
<div>
Aqui vai o conteúdo do site
</div>
E na hora de aplicar algum estilo você deve prosseguir da seguinte forma, o HTML fica assim:
<div id="container">
Aqui vai o conteúdo do site
</div>
E aqui um exemplo do CSS:
#container{
width:760px;
margin:0 auto;
padding:15px;
border:1px solid #666;
background:#FFF;
}
Tudo dentro dessa divisão será denominado pelo estilo da divisão “container”.
Tradução do artigo original de: CSS Basics.
Postado em: 14 de julho de 2006 por Pedro Rogério
Os seletores de ID são semelhantes as classes, mas há uma diferença, eles só podem seu usados uma única vez em uma página (x)HTML. Seu uso geralmente é denominado para elementos de disposição da página, que geralmente são usados uma única vez, e os seletores de classe ficam a cargo de estilizar o resto de nossa página.
Vamos pegar como exemplo uma div que contém o nosso site:
<div id="container">
Aqui vai o conteúdo do site
</div>
Como pode ver acima, eu resolvi usar ID para o meu “container” por que eu vou usálo uma única vez em minha página, e é ele quem irá conter todo o meu site. Agora o nosso CSS fica da seguinte forma:
#container {
width:760px;
margin:0 auto;
padding:15px;
border: 1px solid #666;
background:#FFF;
}
Como pode reparar os seletores de ID começam com um sinal de #, ao invés de ( . )
Tradução do artigo original de: CSS Basics.
Postado em: 14 de julho de 2006 por Pedro Rogério
Muitas pessoas, quando estão iniciando em desenvolvimento para a Web, encontram algumas dificuldades para problemas simples, e um deles é como remover a margem de nossa página, ou seja, queremos que nosso documento fique sem aquelas margens indesejadas em nossos documentos. Para vocês entenderem melhor, veja uma screenshot do problema abaixo:
Como você pode notar existe uma área em branco entre a área do documento e a janela do browser, mas nós não queremos que nosso documento fique assim. A solução é a seguinte, em nosso CSS, devemos definir para o body que a margem seja 0:
<style type="text/css">
body {
margin:0;
}
</style>
Agora veja como ficaria o documento:
Viram como é fácil, isso diz ao browser que não deve haver nenhum espaço entre elementos estruturais e a janela do browser.
Postado em: 13 de julho de 2006 por Pedro Rogério
Em um mundo perfeito, nossas folhas de estilo funcionariam perfeitamente, mas como vivemos em um outro mundo, essa realidade está longe devido a navegadores inperfeitos, comportamentos desconhecidos e muitas vezes problemas que não acabamos achando a solução. Vou deixar aqui alguns passos para eliminar-mos os erros em nossas folhas de estilo:
Validação
A causa mais óbvia para um erro em nossa página é um erro em nosso código, para verificar-mos erros em nosso código, podere-mos usar o validador do W3C para checar o HTML ou o CSS. Uma outra maneira simples é usando a extensão Web Developer para o Firefox, ou a extensão HTML Validator, que lhe permite validar o código sem estar conectado.
Continuar lendo »
Postado em: 11 de julho de 2006 por Pedro Rogério
Muitas vezes quando clicamos em algum link, costuma ficar em volta do mesmo uma linha pontilhada, como você pode ver na imagem acima, pelos testes que fiz, isso só acontece no Firefox, pelo menos no IE 6 e no Opera 9, tudo fica normal, mas existe uma maneira muito fácil de fazer com que isso não aconteça, nas tags a do seu CSS, basta você aplicar o seguinte código:
a { outline:0; }
Mais simples impossível!!!
Postado em: 10 de julho de 2006 por Pedro Rogério
Os seletores de classe permitem que você determine diversos estilos dentro de um mesmo elemento (x)HTML. Ele é similar aos estilos inline. As classes podem seu usadas diversas vezes dentro de um arquivo (x)HTML, diferentemente do ID, que só pode ser usado uma vez, mas isso veremos em um próximo artigo. Para um melhor entendimento vamos a um exemplo, eu gerei uma definição para um parágrafo:
p {
font-size:1.6em;
color:#F00;
}
Tudo bem, mas eu quero que uma parte do meu parágrafo fique em verde e negrito, aí é que iremos usar uma classe, então, vamos criar a mesma:
.boldgreen {
color: #008080;
font-weight: bold;
}
Para uma melhor compreensão, veja um exemplo em funcionamento. Como você pode reparar, os seletores de classe começam com (.), e quanto ao nome das mesmas, elas ficam ao seu critério.
Tradução do artigo original de: CSS Basics.
Postado em: 4 de julho de 2006 por Pedro Rogério
Dando uma garimpada aqui nos meus favoritos, acabei achando 2 links interessantes sobre CSS e desenvolvimento para a Web. Um deles é o CSS Help Pile, onde você pode encontrar links para vários sites sobre desenvolvimento de layouts, bugs em browsers, guias para iniciantes, e o outro, é o The Web Developer’s Handbook, onde você pode encontrar além de vários links sobre CSS, links sobre: banco de imagens, SEO Tools, Tipografia, Color Tools, Acessibilidade, Usabilidade e outros assuntos. Vale a pena dar uma conferida.
Postado em: 3 de julho de 2006 por Pedro Rogério
As facilidades que os ambientes CMS nos proporcionam são inúmeras, uma delas é a troca de layout, seja você desenvolvendo o seu próprio ou pegando um já pronto. Como eu já estava meio cansado do meu layout antigo, resolvi baixar um layout já pronto, que com certeza é 10 vezes mais elegante que o anterior. Ainda faltam alguns acertos, mas com o tempo eu faço isso. O que acharam?
Postado em: 3 de julho de 2006 por Pedro Rogério
Continuando o guia sobre CSS, hoje iremos ver a Sintaxe CSS, ela é um pouco diferente da sintaxe (x)HTML, mas é bem fácil, ela consiste em 3 partes:
seletor { propriedade:valor }
Onde: O seletor é o elemento (x)HTML que você deseja denominar, a propriedade é o valor real da propriedade, e o valor é o estilo que se aplica a essa prorpiedade. Cada seletor pode ter propriedades múltiplas, e cada propriedade dentro desse seletor pode ter valores independentes. A propriedade e o valor são separados por dois pontos e ficam contidos dentro de 2 colchetes. As propriedades múltiplas são separadas por ponto e vírgula. Os valores múltiplos dentro de uma propriedade são separados por vírgula, e se um valor individual contiver mais de uma palavra, você deve colocá-lo dentro de uma citação. Abaixo você pode ver um exemplo:
body {
background:#cccccc;
font-family:"Trebuchet MS", Verdana, Arial, serif;
}
Como podem ver acima, eu separei o valor da propriedade font-family por vírgula, e coloquei a fonte Trebuchet MS dentro de uma citação. O resultado no navegador seria que o corpo da página teria a cor cinza e as fontes seriam as que eu defini alí, pelo menos as que a grande maioria dos usuários tem instaladas no computador.
Continuar lendo »
Postado em: 1 de julho de 2006 por Pedro Rogério
Se você quiser mostrar em seus links os idiomas dos mesmos, existe um método muito simples, que usa a propriedade :after do CSS, seus links teriam a seguinte aparência: Aqui o link [pt-br].
O método consiste da seguinte forma:
<a href="url-do-link" hreflang="idioma">Texto do link</a>
O idioma será o da página em questão, por exemplo:
<a href="http://www.pinceladasdaweb.com.br" hreflang="pt-br">Pinceladas da Web</a>
O seu CSS fica da seguinte forma:
a[hreflang]:after {
content: " ["attr(hreflang)"]";
}
O que ocorre é que essa regra seleciona todo os links que tem o atributo hreflang e mostra para você o idioma dos mesmos. Veja aqui um exemplo dessa propriedade em ação. Ela não funciona no IE.
