6 replies to this topic

[Komodor]

Olá pessoa, boa tarde!
Estou criando esse topico por que não sei exatamente para que serve o CSS (pode parecer uma pergunta idiota para vocês, mas para min não com todo o respeito, sou novo em HTML tenho 12 anos, e ainda fico o dia inteiro lendo TUTO para saber de tudo sobre HTML e começa o meu curso on-line de PHP o mais rapido).
Mas vamos ao que interessa, eu sou fanatico por Web Design, toda a semana compro revistas da DIGERATI com tutos sobre Fireworks, HTML, Dreamwaver... no Fireworks estou muito bem mas o problema é na programação, estava lendo uns tutos de Dreamwaver e vi como aplicar CSS em seu site, achei muti interessante mais o problema é que não sei para que serve, procurei na GOOGLE e por amigos, mas a mesma coisas que me disseram foi que facilitava na atualização do site e no visual, mas o que realmente me interessa é o que é possivel fazer com o CSS, e se vocês poderem me passar sites com CODIGOS de CSS e TUTOS agradeceria muito!
Obrigado mais uma vez pessoal do WM!

['' sem.Ponto]

Como diz a Wikipédia...

Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Digamos que você esteja fazendo o seu site e você queira formatar o texto. Logo, ficará algo assim:

<font size="20px" color="#666666">Texto</font>

Agora imagine caso você tenha vários textos onde haverá a mesma formatação acima... o código ficará gigante!

<font size="20px" color="#666666">Texto 1</font>
<font size="20px" color="#666666">Texto 2</font>
<font size="20px" color="#666666">Texto 3</font>
<font size="20px" color="#666666">Texto 4</font>

Daria muito trabalho formatar texto por texto, sem falar quando você resolvesse editar todos. Essa formatação pode ser feita facilmente com CSS.

Vamos usar CSS, no exemplo que citei...

Na folha de estilo, colocaríamos a formatação. Você pode colocar em um arquivo separado (.css) e chamá-lo na página, ou então colocar o css na própria página. Continuando...

<style>
.exemplo {
size: 20px;
color: #666666;
}
</style>

Agora nos textos, colocaríamos a formatação assim:

<td class="exemplo">Texto 1<td>
<td class="exemplo">Texto 2<td>
<td class="exemplo">Texto 3<td>
<td class="exemplo">Texto 4<td>

Depende com que tags você esteja mexendo. Invés de <td>, pode ser <p>, <tr>, <table>, entre outras.

Acho que você já entendeu o significado...

Edição feita por: '' sem.Ponto, 03/06/2007, 17:01.

[bimonti]

Há ainda a possibilidade de formatar elementos em massa:

<div id="main">
<p>Texto 01</p>
<p>Texto 02</p>
<p>Texto 03</p>
<p>Texto 04</p>
<p>Texto 05</p>
<p>Texto 06</p>
<p>Texto 07</p>
<p>Texto 08</p>
</div

O CSS:

#main p{
  font:bold 11px Arial, Tahoma, Verdana; 
}

Todos os paragrafos (p) dentro do elemento com o ID main (#main) irão seguir o CSS definido. Eu coloquei a limitação de formatar os parágrafos dentro da DIV para esse estilo não afetar outros elementos da página. Funciona assim:

Classes:

.nome { propriedade: valor;}

Classes você chama no proprio elemento:

<p classe="nome"></p>

Elementos específicos:

#nome{ propriedade: valor;}

Você identifica os elementos com ID (mas o ID tem que ser único, se mais de um elemento for usar o estilo use classe).

<p id="nome"></p>

Ou afetar a tag diretamente:

p {propriedade: valor;}

No site http://www.w3schools.com tem um tutorial em inglês excelente. Com o tempo algo assim fica muito simples:

#menu ul li.highlighted a:hover{propriedade: valor;}

['' sem.Ponto]

Com o tempo algo assim fica muito simples:

#menu ul li.highlighted a:hover{propriedade: valor;}

Calma bimonti!
Desse jeito até eu desisto...

[bimonti]

CSS é como uma pizza. Vai comendo pelas bordas ...

Distrinchando o coitado acima:

#menu | ul | li | .highlighted | a | :hover
1 | 2 | 3 | 4 | 5 | 6

• Elemento com ID = menu
• lista dentro do elemento
• Os itens da lista
• itens da lista com a classe = highlighted
• Link dentro destes itens da lista
• Essas propriedades tem efeito ao passar sobre o link

Sacou ? Vai sem pressa e sem medo.

[Bruno Augusto]

Só um errinho de typing do bimonti. Na post de explicação detalhada, tem um e a mais:

<p classe="nome"></p>

[bimonti]

é a falta de costume de testar...