11 regras CSS que todo desenvolvedor web deve saber

Com a experiência que adquirimos na área de webdesign (front-end), geralmente aprendemos e memorizamos vários tipos de códigos, hacks e snippets. Com as CSS, em particular, há uma série de regras e declarações que podem realmente ser úteis para transformar o seu website e aumentar consideravelmente as possibilidades de formatação, se comparadas às técnicas antigas.

@media

A regra @media não só nos permite definir estilos para nossa página da web quando impressa na tela. Hoje em dia esta regra atingiu um patamar mais avançado com as “media queries“, que são associadas à criação de sites “adaptativos” ou “responsivos”, ou seja, que se ajustam ao tamanho da tela do dispositivo no qual estiverem sendo acessados.

Você pode criar uma media query usando propriedades comomin-width para ajustar seu layout de acordo com o tamanho do “viewport” do dispositivo do usuário.

1 2 3

@media screen and (max-width: 960px) {      // seus estilos vão aqui .... }

background-size

Aí está uma propriedade CSS3 muito útil que ganhou total suporte nos navegadores modernos. Antes, para fazer com que uma imagem, definida como background, fosse ajustada 100% (full size), de acordo com o tamanho do elemento que faz parte, era necessário algumas linhas de código, hacks e até javascripts. Agora nós precisamos de apenas uma linha de código, ou melhor, apenas uma propriedade: background-size

1 2 3 4

body {     background: url(image.jpg) no-repeat;     background-size: 100%; }

O código acima faz com que a imagem de fundo do elementobody fique 100% ajustado em relação ao seu tamanho.

@font-face

1 2 3 4

@font-face {     font-family: Blackout;     src: url("assests/blackout.ttf") format("truetype"); }

Mais uma propriedade CSS3 que tem ajudado bastante de uns tempos pra cá. Antigamente, nós tínhamos uma série de limitações relacionadas às fontes que podíamos usar em nossos sites. Mas agora, com a @font-face, um leque enorme de possibilidades se abriu. Usando essa propriedade podemos utilizar fontes diferentes em nossos sites, deixando de lado as limitações antigas.

Existe uma série de fontes gratuitas disponíveis para uso com@font-face. Dê uma checada nos sites Font Squirrel, ou Google Fonts. Existe também o TypeKit que não é gratuito.

margin: 0 auto;

1 2 3

#container {     margin: 0 auto; }

É surpreendente que até então não exista nenhuma propriedade especifica para centralizar elementos. Mas enquanto isso não acontece, nós podemos utilizar o recurso de margem automática. Ao adicionarmos margin: 0 auto;em um elemento de bloco, este será centralizado.

overflow:hidden

1 2 3

.container {     overflow: hidden; }

Existe uma série de soluções e hacks para ajudar a resolver o problema com os elementos flutuantes. Este problema ocorre quando temos, dentro de um elemento de bloco (um DIV por exemplo), um outro elemento com float. Esse elemento que “flutua” não força automaticamente a altura do elemento container, ou seja, a altura do elemento container não acompanha a altura do elemento com float. Isto ocorre porque o elemento que está flutuando deixa de considerar o elemento container como pai.

Um jeito hiper simples de “limpar” os elementos flutuantes é simplesmente declarar overflow: hidden; no elemento container. Isto é muito interessante, porque não precisamos mais adicionar “lixo”  no nosso código html, como o tão famoso<br style="clear:both" />.

.clearfix

1 2 3 4 5 6 7 8

.clearfix:after {     content: ".";     display: block;     clear: both;     visibility: hidden;     line-height: 0;     height: 0; }

Para situações em que o overflow: hidden; não funcionar, a melhor alternativa é a técnica “clearfix”. Mais informações sobre a técnica aqui.

color: rgba();

1 2 3

.button {     color: rgba(0,0,0,0.5); }

Imagens PNG são utilizadas para criar vários efeitos de transparência em webdesign, mas graças a outro avanço, agora podemos criar transparências com a ajuda do modo de cor RGBa. Usando RGBa, ao invés de valores hexadecimais, conseguimos selecionar  qualquer cor usando seus canaisRed, Green e Blue, assim como também definir o nível de opacidade (alpha).

input[type="text"]

1 2 3 4 5 6 7

input[type="text"] {      width: 200px; } input[type="checkbox"]{      margin-right: 1em; }

O seletor input[type="text"], bem como outros seletores avançados no geral, irão elevar suas habilidades com CSS do nível intermediário para o avançado. Seletores de atributos, em particular, são extremamente úteis para estilizar elementos sem que precisemos criar classes adicionais.

Você poderá manipular não só campos do tipo texto, mas também radio, checkbox, submit, password, file, etc.

transform: rotate(30deg);

1 2 3

.title {     transform: rotate(30deg); }

Aqui está mais uma novidade das CSS3 que nos traz a possibilidade de transformar os elementos. A propriedadetransform pode modificar a forma de um elemento, rotacioná-lo, incliná-lo ou mudar sua posição.

Um artigo bem bacana foi publicado no site Tablelessexplicando melhor cada tipo de transformação.

a { outline: none; }

1 2 3 4 5

a {outline: none;} a:hover, a:active, a:focus {     // estilos para qualquer link do seu site... }

Talvez você já tenha reparado que algumas vezes ao clicarmos em um elemento de ligação (link), uma estranha borda pontilhada aparece ao redor do elemento.

Se você quiser remover isso, pode usar a propriedadeoutline:none , mas lembre-se que esse efeito é importante para acessibilidade, então, não se esqueça de adicionar :focus em seus elementos de ligação.

Se você estiver tendo problemas com essa borda pontilhada em elementos flash, use o seguinte código:

1 2 3

object, embed {   outline: 0; }

A propriedade outline também será útil para elementosinput, para remover a borda que o navegador insere ao redor do elemento.

1 2 3

input[type="text"], input[type="submit"]{    outline: 0; }

:first-child e :last-child

Estas pseudo-classes nos permitem modificar apenas oprimeiro ou o último filho do elemento pai. Na maioria das vezes são bem úteis para remover bordas de itens de uma lista.

1 2 3 4 5 6 7

ul li:first-child {    border-top:0; //remove a borda superior do primeiro filho do elemento pai <ul> } ul li:last-child {    border-bottom: 0; //remove a borda inferior do último filho do elemento pai <ul> }

Por hoje é só. Assim que eu souber de mais dicas sobre CSS eu publico aqui no site pra vocês.

Se vocês curtiram o artigo, compartilhem! E qualquer dúvida ou sugestão, basta enviar um comentário. Até a próxima!  :-)