CSS 

CSS  O que é CSS    CSS é a abreviação de Cascading Style Sheets (folhas de estilo em cascata). É uma linguagem de  estilos com diversos comandos, que tem como principal objetivo formatar o layout de uma  página HTML. Através do CSS, podemos formatar textos, bordas, posicionamentos, margens,  espaçamentos entre outras coisas.  Infelizmente, algumas pessoas ainda possuem o péssimo hábito de usar o HTML para formatar  o layout das páginas, o que é um erro. Apesar de parecer mais “fácil” e rápido formatar o  layout desta forma, veremos a facilidade de utilizar o CSS na hora de fazer uma ou mais  atualizações no site.  Imagine um site com 50 páginas, todas elas formatadas diretamente no HTML. O menu lateral  tem 200 pixels de largura, mas agora vai passar a ter 250 pixels. Se o site estiver com o layout  formatado com o HTML, você precisará formatar todas as páginas individualmente.  Entretanto, se o layout estiver formatado com folhas de estilo, a única alteração será de 1  número (de 200 para 250). Acredito que esse seja um grande incentivo para criarmos nossas  páginas formatadas desta forma. 

 

1  

 CSS 

2  

 CSS 

O conceito de Tableless    Tableless é a forma de desenvolvimento de páginas web sem a utilização de tabelas  para se definir o layout, e sim aliando o HTML ou XHTML com o CSS.    Construir um site com esse conceito não é abolir totalmente o uso de tabelas. Elas  existem e devem sim ser utilizadas, mas apenas quando for necessária a exibição de  dados tabulares, como uma tabela de preços, tabela de notas, etc.    É muito comum vermos pessoas que criavam seus layouts em tabelas, usarem apenas  DIVs para exibição. Essa é a chamada “divmania”, onde o novato no ambiente CSS  deseja formatar todo o layout usando DIVs.    Apesar de o nome Tableless ser mais conhecido, o correto seria Web Standards.  Tableless significa “menos tabelas”, mas como vimos, tabelas podem e devem ser  usadas. O termo Web Standards ou Padrões Web são mais corretos, pois definem a  forma correta de se construir uma página, que é usar cada tag para sua real função e  deixar o código semanticamente correto. Ex: Definir um título com 

, um subtítulo  com 

, parágrafos com 

, etc.  Podemos perceber que ao desenvolver um site nos padrões:  • • • • •

O código ficará mais claro e limpo, facilitando futuras alterações;  O arquivo HTML ficará com um tamanho menor;  Melhor indexação por motores de busca;  Economia na banda e rapidez no carregamento da página;  Facilidade ao alterar o layout do site, e disponibilizar versões diferentes para a  mesma página (versão para impressão, dispositivos móveis, etc). 

     

3  

 CSS 

Métodos de inclusão do CSS na página  Existem 3 métodos de se carregar a formatação CSS para dentro de uma página: inline,  interno e externo.  ‐ Método inline  Insere uma formatação diretamente em uma tag. Esse tipo de marcação deve ser  evitada, pois se perde a vantagem de usar folhas de estilo, já que a formatação está  inserida direto no HTML. Ex:   Bla bla bla 

   Neste exemplo, estamos configurando o parágrafo com a cor de fonte vermelha.   

‐ Método interno  Neste método, criamos uma folha de estilos inserida diretamente na página. Ela é  declarada na tag  do HTML, e define a formatação apenas para essa página. Ex:  <style type="text/css">        Neste caso, configuramos a cor de fundo da página como amarelo e definimos um  espaço de 15 pixels em cada parágrafo (margem esquerda).   

‐ Método externo  É o método mais indicado, já que desta forma, conseguimos controlar toda a  formatação de um site através de um único arquivo CSS. O arquivo CSS pode ser  chamado de duas formas na página (todas elas definidas na tag  do HTML).  <style type="text/css">        Ou      4  

 CSS 

Configurando seletores CSS  A sintaxe do CSS é composta por 3 elementos:  Seletor  { propriedade: valor; }  O seletor é uma tag HTML, id ou classe que será formatada. A propriedade é o valor ou  os valores a serem alterados e/ou definidos. O valor contém a formatação  propriamente dita.    Cada seletor pode possuir várias propriedades dentro dele. Para isso, iremos separá‐ las por um ponto e vírgula, e essas propriedades deverão estar entre chaves. Ex:  p { text‐align:center; color:#ff0000; font‐size:1.2em; }    Se o valor de uma propriedade for composto por mais de uma palavra, devemos  colocar entre aspas.  p   { font‐family:“Trebuchet MS”, Arial, Verdana; }    Podemos ainda configurar um grupo de seletores juntos, separador por vírgula.  h1, h2, h3   { font‐family:“Trebuchet MS”, Arial, Verdana;  color:#333333;  }     Às vezes, é interessante inserir comentários dentro do arquivo CSS. Esses comentários  não são interpretados na hora que o CSS é carregado, e servem como “lembretes”.   Isso é bom para deixar o código mais claro, e facilitar alterações no arquivo por você  ou por outras pessoas. Definimos um comentário desta forma:  /* Configuração de parágrafos */    Tudo o que estiver entre a marcação /* e a marcação */ será ignorado e não  interpretado como código CSS. 

5  

 CSS 

Definindo uma classe e um id  Até esse ponto, aprendemos a configurar uma tag. Todas as vezes que ela aparecer no  documento HTML, ela irá adotar essa configuração. Mas e se quisermos alterar outras  configurações dentro de um parágrafo? Vejamos esse exemplo:  Esse parágrafo tem um texto vermelho.    Se definirmos a configuração do seletor p para um texto em negrito e na cor preta, não  iremos ver a palavra vermelho na cor vermelha. Para isso, iremos definir uma classe e  aplicar na palavra vermelho 

Esse parágrafo tem um texto <span class=”destaque”>vermelho.

    Uma classe é definida no CSS com um ponto na frente do nome.  .destaque { color:#ff0000; }     Agora toda vez que precisarmos colocar um texto em vermelho, é só aplicar a classe  nas áreas desejadas.  Podemos também definir um id, que será identificado pelo id de uma tag. A declaração  é feita com o símbolo “#” na frente do nome.  Um detalhe importante é lembrar que esse tipo de declaração é única e não poderá  ser repetida no HTML (ao contrário da classe, que pode ser usada quantas vezes forem  necessárias)  #menu { width:180px; background‐color:#343346; }     Uso correto: 

Uso incorreto: 

Bla bla bla

 

Bla bla bla

 

Bla bla bla

 

Bla bla bla

 

Bla bla bla

   

Bla bla bla

 

6  

 CSS 

Propriedades CSS      Propriedades background  Define a configuração do background (fundo) de um elemento HTML. Existem vários  tipos de configuração de backgrounds:   

Propriedade  Significado e valores aceitos background‐color  Cor do fundo do elemento. Pode ser em hexadecimal, rgb ou  com o nome da cor em inglês. 

Ex: p { background‐color: #00ff00; }   background‐image  Coloca uma imagem de fundo. 

url(caminho/imagem.gif)    Ex: body { background‐image: url(stars.gif); }  background‐repeat  Define a maneira de como a imagem de fundo é posicionada 

• no‐repeat: não repete   • repeat: repete vertical e horizontal.  • repeat‐y : repete vertical.  • repeat‐x : repete horizontal.    Ex: body { background‐image: url(stars.gif);  background‐repeat: repeat‐x; }     background‐attachment  Se a imagem de fundo "rola" ou não com a tela 

• fixed: imagem fixa na tela.  • scroll: imagem "rola" com a tela.    Ex: body { background‐image: url(stars.gif); background‐ attachment: fixed; }        7  

 CSS 

background‐position  Como e onde a imagem de fundo é posicionada 

• xpos ypos  • x% y%  • top left  • top center  • top right  • center left  • center center  • center right  • bottom left  • bottom center  • bottom right    Ex: body {   background‐image: url(stars.gif);  background‐repeat: no‐repeat;  background‐attachment:fixed;  background‐position: 0% 0%; }  background  Maneira abreviada para todas as propriedades         

8  

 CSS 

Propriedades text  A propriedade text permite controlar a aparência do texto. Permite mudar a cor,  aumentar ou diminuir os espaços entre os caracteres, mudar o alinhamento, indentar  a primeira linha, entre outras configurações.     

Propriedade  Significado e valores aceitos color   Altera a cor do texto.  Pode ser em hexadecimal, rgb ou com o  nome da cor em inglês. 

Ex: p { color:#ffff00; }   line‐height  Ajusta a altura das linhas do texto. Esse valor define a 

distância entre as linhas.  Ex: p { line‐height: 14px; }  letter‐spacing  Aumenta ou diminui o espaço entre os caracteres.     Ex: p { letter‐spacing: 12px; } 

text‐align  Ajusta o alinhamento do texto.   • left: esquerda.  • right: direita.  • center: centralizado.  • justify: justificado.    Ex: p { text‐align: center; }   text‐decoration  Ajusta a decoração do texto.      

• none: nenhuma.  • underline: sublinhado.  • overline: linha sobre o texto.  • line‐through: linha sobre o texto.  • blink: texto piscando (não funciona no IE e no Opera).    Ex: p { text‐decoration: underline; }   text‐transform  Controla as letras de um elemento   • none: nenhuma.  9

 

 CSS 

• capitalize: cada palavra do texto começa com letra  maiúscula.  • uppercase: todo o texto em letras maiúsculas.  • lowercase: todo o texto em letras minúsculas.    Ex: p { text‐transform: uppercase; }  word‐spacing  Aumenta ou diminui o espaço entre as palavras.    Ex: p { word‐spacing: 10px; }    Links úteis  http://jigsaw.w3.org/css‐validator/  http://www.westciv.com/style_master/academy/css_tutorial/index.html  

10