Pinceladas da Web

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.

Com as CSS é possível fazer alterações radicais no visual do nosso site. Você pode simplesmente fazer alterações em todo o seu site, ou apenas estar “estilizando” uma tag. Hoje vamos aprender a como efetuar alterações no título de nossa página. Para isso vamos usar a tag <h1>. Nosso código (x)HTML fica da seguinte forma:

<h1>Título da Página</h1>

Agora vamos mexer no nosso CSS, vamos definir o tipo de fonte:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
</style>

Só que o nosso título não tem cor alguma, vamos agora definir uma cor para a fonte e também para o background:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
</style>

Vamos agora definir uma margem para o título para que o texto que venha a seguir não fique colado no mesmo:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
</style>

Para uma melhor performance, vamos definir também o padding:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
padding:15px;
</style>

Pronto, viu como é fácil, veja aqui um exemplo.

Antigamente muitas pessoas faziam isso com tabelas, se criava uma célula, onde se colocava a imagem, e na célula ao lado, era colocado o texto, e tinha-se a ilusão de que o texto estava fluindo ao lado da imagem. Fazer isso com CSS é muito simples, usaremos a propriedade float. O nosso HTML fica da seguinte forma:

<img src="logo.jpg" alt="Pinceladas da Web" />
<p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   Vestibulum at purus sed erat lobortis suscipit. Cras
   facilisis viverra wisi. Class aptent taciti sociosqu...
</p>

Se você quiser que a imagem fique alinhada a esquerda e o texto flua a sua direita, é só definir a propriedade float como left, isso quer dizer que a imagem irá flutuar a esquerda, seu CSS deverá ficar da seguinte forma:

img {
    float:left;
    margin:0 20px 10px 0;
  }

Aqui é importante definir valores para margin para que o nosso texto não fique colado na imagem. Veja aqui um exemplo.

Mas caso você queira que sua imagem fique a direita do texto, é só definir o float como rigth, isso quer dizer que a imagem irá flutuar a direita do seu texto, o CSS fica da seguinte forma:

img {
    float:rigth;
    margin:0 0 10px 20px;
  }

Veja aqui um exemplo.