(PLB) Aula - CSS

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 <h1>, um subtítulo
com <h2>, parágrafos com <p>, 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:
<p style="color:#ff0000"> Bla bla bla </p>
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 <head> do HTML, e define a formatação apenas para essa página. Ex:
<style type="text/css">
<!‐‐
body { background:#000000; }
p { margin‐left: 15px; }
‐‐>
</style>

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 <head> do HTML).
<style type="text/css">
<!‐‐
@import url("estilos.css");
‐‐>
</style>

Ou

<link href=" estilos.css" rel="stylesheet" type="text/css" media="screen" />
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
<p>Esse parágrafo tem um texto <span class=”destaque”>vermelho</span>.</p>
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:
<p class=”destaque”>Bla bla bla</p> <p id=”destaque”>Bla bla bla</p>
<p class=”marcador”>Bla bla bla</p> <p id=”marcador”>Bla bla bla</p>
<p class=”destaque”>Bla bla bla</p> <p id=”destaque”>Bla bla bla</p>

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

(PLB) Aula - CSS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

(PLB) Aula - CSS

Hochgeladen von

Copyright:

Verfügbare Formate

CSS

Das könnte Ihnen auch gefallen