Como Criar Sites | Aprenda grátis como fazer seu site » style sheets http://www.comocriarsites.com Aprenda a criar sites, html e manhas para fazer seu site. Wed, 06 Jan 2010 12:51:19 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Serviço de Validação de CSS http://www.comocriarsites.com/html-css/servico-de-validacao-de-css/ http://www.comocriarsites.com/html-css/servico-de-validacao-de-css/#comments Sat, 07 Mar 2009 07:40:44 +0000 Raoni Novellino http://www.comocriarsites.com/?p=84 Existe um site que tem um serviço de validação do CSS, você pode enviar o arquivo, colocar o caminho do arquivo caso o arquivo esteja na internet ou colar o seu código CSS para ele validar.

O site é: Serviço de Validação de CSS do W3C.

Entre no site e teste, ele mostra alguns relatórios que podem ajudar a melhorar a sua folha de estilos (CSS).

]]> http://www.comocriarsites.com/html-css/servico-de-validacao-de-css/feed/ 0 Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 http://www.comocriarsites.com/html-css/entendendo-css-folhas-de-estilo-cascading-style-sheet-parte-1/ http://www.comocriarsites.com/html-css/entendendo-css-folhas-de-estilo-cascading-style-sheet-parte-1/#comments Sat, 07 Mar 2009 07:19:20 +0000 Raoni Novellino http://www.comocriarsites.com/?p=70 Para entender como uma folha de estilo em cascata (CSS ou Cascading Style Sheet) funciona, você deve estar em sintonia com a sua sintaxe. A sintaxe do CSS não é difícil de entender e aqui vou explicar o básico para você poder ler ou criar uma folha de estilos (CSS).

O Básico

Para definir uma regra CSS você deve colocar-lo de alguma forma no documento. Veremos três formas de colocar um estilo em um documento abaixo:

Colocando o atributo style na tag desejada

Esse método é o mais simples e serve se você vai fazer uma coisa simples, pois colocando desse jeito em algo grande e complexo, fica difícil de dar manutenção ao que for fazer. Um exemplo:

<div style="color: #aaaaaa; background-color: #0000ff;">exemplo de estilo com a atributo style</div>

Isso simplesmente diz que essa tag <div> vai ser exibida com a cor da fonte do texto que estiver dentro dela em cinza (#aaaaaa) e com a cor de fundo em azul (#0000ff).

Utilizando a TAG <style>

Diferente de usar um atributo, você pode usar a tag style e dentro dela definir vários estilos. Exemplo:

<style type="text/css">
div {
	color: #aaaaaa;
	background-color: #0000ff;
}
</style>

<div>exemplo de estilo usando a tag style</div>

Essa tag <style> normalmente é definida no cabeçalho do documento HTML (entre as tags <head> e </head>).

Esse estilo é definido igual ao do exemplo anterior, cor do texto em cinza e cor do fundo em azul, mas nesse caso, eu estou definindo para TODAS as tags <div>. Isso pode ser feito para qualquer tag do documento, definindo assim estilos para todas as tag daquele tipo naquele documento.

Esse modo é mais utilizado que o primeiro em sites grandes, para atualizar o site fica mais fácil, pois só preciso atualizar o CSS no início do arquivo. O problema se meu site tiver muito arquivos, preciso atualizar todos os arquivo, mas para evitar isso, temos a terceira opção para colocar CSS no seu site.

Utilizando CSS em um arquivo separado

Podemos também utilizar o CSS em um arquivo separado, normalmente com a extensão .css. Nesse arquivo não precisamos colocar nenhuma tag, é só começar a definir os estilos. Exemplo:

Arquivo estilo.css:
div {
	color: #aaaaaa;
	background-color: #0000ff;
}

A tag eu tenho que colocar é a <link>, para adicionar no meu documento o arquivo de estilos. Essa tag sempre deve ficar no cabeçalho do arquivo (entre as tags <head> e </head>).

Documento HTML:
<html>
<head>
	<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
	<div>exemplo de estilo usando uma arquivo separado</div>
</body>
</html

A tag <link> serve praticamente para poder usar um arquivo de estilos separado, na teoria essa tag serve para outras coisas também, se você quiser saber mais sobre ela entre em: http://www.w3schools.com/TAGS/tag_link.asp. O atributo rel define a relação do arquivo chamado com o documento, no caso stylesheet, que é o nosso arquivo de folha de estilos. O atributo type indica o tipo MIME do arquivo. Se quiser saber o que é MIME acesse: http://pt.wikipedia.org/wiki/MIME. E por último e mais importante, o atributo href diz onde está o seu arquivo de estilo, isto é, a URL para o arquivo.

Esse método é muito bom, pois podemos chamar um único arquivo de folha de estilo por vários documentos, então dar manutenção fica muito fácil.

Agora que já sabemos como colocar CSS no nosso documento, podemos ver a segunda parte, que mostra como agrupar os estilos por classe e por identificador. Entre no link Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

]]> http://www.comocriarsites.com/html-css/entendendo-css-folhas-de-estilo-cascading-style-sheet-parte-1/feed/ 5 Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2 http://www.comocriarsites.com/html-css/entendendo-css-folhas-de-estilo-cascading-style-sheet-parte-2/ http://www.comocriarsites.com/html-css/entendendo-css-folhas-de-estilo-cascading-style-sheet-parte-2/#comments Sat, 07 Mar 2009 07:17:16 +0000 Raoni Novellino http://www.comocriarsites.com/?p=73 Na primeira parte vimos como podemos colocar um estilo no nosso documento HTML. Nessa parte vamos ver um pouco de sintaxe do CSS e como utilizar. Para ver a primeira parte entre em: Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1.

Atribuindo Estilo a Todas as Tags de um Tipo

Para atribuir um estilo a todas as tags de um tipo, você deve utilizar a sintaxe padrão do CSS. Exemplo:

body {
	background-color: #00ff00;
}
div {
	font-family: tahoma, verdana, arial;
}

No exemplo acima eu estou dizendo que a tag <body> do documento vai ficar com o fundo de cor verde (#00ff00) e todas as tags <div> do documento vão ficar com a fonte tahoma, verdana ou arial.

Eu posso fazer isso para qualquer tipo de tag, mas isso me deixa pouca flexibilidade para certo casos, em que eu queira um <div> com outra fonte, ou outra tag com outra especificação do que foi passado no estilo para ela, para isso podemos definir classes de estilo para as tags.

Definindo classes de estilo (CSS) para tags

Para definir uma classe de estilo para uma tag, deve-se colocar o nome da tag, seguindo de um ponto (.) e seguindo do nome da classe. Esse nome da classe pode ser qualquer nome. Exemplo:

div.item {
	background-color: #00ff00;
	padding-top: 10px;
}
div.lateral {
	background-color: #ff0000;
	padding-left: 5px;
	padding-right: 5px;
	float: right;
}

Quando uma classe de estilo é definida para uma tag HTML, voce deve utilizar o atributo class da tag para dizer que aquela tag deve ser exibida com o estilo referente a aquela classe. Exemplo:

<div class="item">Meu fundo é verde</div>
<div class="lateral">meu fundo é vermelho</div>

Cada uma das tags <div> acima terá um estilo diferente, segundo as classes especificadas mais acima.

Esse método é bom porque nós podemos saber em quais tags podem ficar os estilos definidos e esse método é muito usado quando se faz um código com o conceito tableless (sem tabelas), o que normalmente utiliza muito a tag <div>.

Generalizando as Classes de Estilo (CSS) para Qualquer tag

Mais uma característica do CSS é que eu posso definir uma classe para qualquer tag. Para isso nós colocamos somente o ponto seguido do nome da classe. Exemplo:

.menuItem {
	width: 320px;
	height: 240px;
}
.caixaEsquerda {
	width: 100px;
	float: left;
	padding-top: 20px;
}

Isso faz com que qualquer elemento com o atributo class definido com o nome da classe acima (menuItem ou caixaEsquerda) ficará com o estilo que ele apresenta. Exemplo:

<table class="caixaEsquerda">
	<tr>
		<td>Essa tabela vai ficar na esquerda, com largura 100 pixels e 20 pixels afastada do elemento acima dela</td>
	</tr>
</table>

<div class="menuItem">Esse div tem largura de 320 pixels e altura de 240 pixels</div>

Esse tipo de classe é boa para qualquer tipo de site, pois você define como vão ser as partes do seu site sem antes saber qual a tag que ficará com cada parte. Mas isso faz com que você não tenha muito controle ao o que se aplica onde, diferente do método acima deste.

Colocando Estilo via Identificador Único

Outra forma de colocar estilo é utilizando um identificador único para um único elemento. A sintaxe no CSS é colocar um jogo-da-velha (#) seguido pelo identificador único do elemento. Exemplo:

#miolo {
	float: left;
	width: 400px;
	padding-left: 20px;
	padding-top: 20px;
}

#topo {
	width: 100%;
	height: 80px;
	background-image: url("img/bgimagemtopo.png");
}

Para fazer um elemento receber o estilo definido por um identificador único, devemos atribuir a esse elemento um atributo id. O identificador desse elemento deve ser único, não podendo se repetir em outro elemento. Exemplo:

<div id="topo">Esse é o topo do site, recebe o estilo de topo, com uma imagem de fundo</div>
<div id="miolo">Esse é o miolo do site, recebe o estilo de miolo</div>

Isso faz com que o elemento receba o estilo definido pelo seu identificador. Esse método é útil quando quero definir padrões para sites, tipo o que é topo, laterais (esquerda e direita), menu (pode ser horizontal ou vertical) e rodapé. Pode ser usada em outras coisas também, nunca se limite.

Agora que você já sabe como colocar estilos de todas as formas no seu site, vou mostrar o que é uma pseudoclasse.

Pseudoclasses

Pseudoclasses são classes de estilo que definem certos aspectos de um elemento HTML. A pseudoclasse que eu vou mostrar é a da tag <a>, que faz um link de uma página para outra. Vou mostrar o código e depois explicar o funcionamento. Para ver outras pseudoclasses, entre em: http://www.w3schools.com/CSS/css_pseudo_classes.asp ou  http://www.maujor.com/tutorial/pseetut.php.

a:link { text-decoration: none; color: 0000ff; font-weight: bold; }
a:visited { text-decoration: none; color: 00ffff; font-weight: bold; }
a:hover { text-decoration: underline; color: 00ff00; font-weight: bold; }
a:active { text-decoration: none; color: ff0000; font-weight: bold; }

As pseudosclasses da tag <a> são:

link:

- Estilo que define como o link vai ficar normalmente, quando não foi clicado e quando o mouse não está sobre ele, nesse caso, vai ficar sem sublinhado, com a cor azul e em negrito.

visited:

- Estilo que define como o link vai ficar quando ele já foi clicado ou visitado e quando o mouse não está sobre ele, nesse caso, vai ficar sem sublinhado, na cor azul claro e em negrito.

hover:

- Estilo que define como o link vai ficar quando o mouse estiver sobre ele, que nesse caso, vai ficar sublinhado, na cor verde e em negrito.

active:

- Estilo que define como o link vai ficar quando o link estiver aberto (ativo), nesse caso, vai ficar sem sublinhado, na cor vermelha e em negrito.

As pseudoclasses da tag <a> devem aparece na ordem mostrada no exemplo, se ficarem em outra ordem podem não funcionar. Um link no site sem estilo nenhuma aparece sublinhado, e o estilo text-decoration serve para dizer como deve aparecer esse sublinhado, no nosso caso está com o valor none, quer dizer que vai aparecer sem sublinhado, mas ele pode ser underline, overline, line-through ou blink.

Esses estilos definidos desse jeito afetarão todas as tags <a> do documento, então você pode definir classes e pseudoclasses assim:

a.item:link { text-decoration: none; color: 0000ff; font-weight: bold; }
a.item:visited { text-decoration: none; color: 00ffff; font-weight: bold; }
a.item:hover { text-decoration: underline; color: 00ff00; font-weight: bold; }
a.item:active { text-decoration: none; color: ff0000; font-weight: bold; }

Desse modo só vai afetar as tags <a> que tiverem o atributo class com o valor da classe de estilo, no caso do exemplo, o valor item.

Se gostou, achou algum erro ou tem alguma dúvida, comente.

]]> http://www.comocriarsites.com/html-css/entendendo-css-folhas-de-estilo-cascading-style-sheet-parte-2/feed/ 6