[CSS] #1 - Aplicando o CSS

Postado Maio 3, 2011 14 anos

Este é um post popular.

CSS Básico (AULA 1)

O mundo da automatização.

Para este tutorial você precisa entender pelo menos um pouco de HTML, se não, me desculpe, você não irá entender.

Aula: 1 de X

Créditos: Renato Ribeiro (eu eu eu)

Dificuldade: :staropt: :staropt: :staropt: :staropt:

Citar

Entendendo

Função: Css nada mais é do que padronizar seu site/blog.

Significado: CSS na realidade deveria ser escrito C.S.S. pois é uma sigla que significa cascading style sheet porém é mais fácil escrever css do que c.s.s. então não vamos discutir , e sua tradução para o português é folha de estilo em cascata.

Colocando CSS no seu site

A Renato, mas eu nem sei como coloca esse tal css em meu site... me ajuda?

R Você pode colocar dentro do proprio site, dentro da tag <head>:


<head>
<style type="text/css">
</style>
</head>
[/code]




Ou pode criar um arquivo ".CSS" e colocar no site HTML:

[code]
<link href="CAMINHO DO ARQUIVO/style.css" rel="stylesheet" type="text/css"/>
Exemplos:
Dentro da pasta CSS: <link href="css/style.css" rel="stylesheet" type="text/css"/>
Junto ao arquivo html: <link href="style.css" rel="stylesheet" type="text/css"/>

Aprendendo usar o CSS:

A Mas agora me explica como é esse css e como eu uso ele R Vou ensiná-lo usando exemplos, pois acho ser um método mais fácil pra min que estou explicando e mais fácil pra você aprender. Aqui eu irei configurar a tag body "<body> </body>", que é onde fica o corpo do seu site.


<head>
<style type="text/css">
body {background: #000000; color: #FFFFFF;}
</style>
</head>
[/code]




Código organizado:

[code]
<head>
<style type="text/css">
body {
background: #000000; 
color: #FFFFFF;
}
</style>
</head>

R Vimos que para configurar qualquer tag só é necessário digitar o nome dela e configurar dentro de chaves "{" e "}". No exemplo eu configurei o background, coloquei preto, e configurei a cor do texto, que eu coloquei branco. R Aqui vai outro exemplo, vou configurar a tag <img>:


img {
opacity: 0.5;
}
[/code]




[color=#FF0000][b]R[/b][/color] Com esse CSS, todas as imagens do seu site ficarão com opacidade de 50%...



[color=#0000FF][b]A[/b][/color] Mas Renato, eu não quero que todas as imagens fiquem com opacidade, só quero aquelas que estão dentro das divs "<div>"

[color=#FF0000][b]R[/b][/color] Então utilize este código ao invés do anterior:



[code]
div img {
opacity: 0.5;
}

R Assim todas as Imagens das DIVs ficarão com opacidade, já as que estiverem fora ficarão normais. Ah não ser se você manter o código anterior no CSS ¬¬. A Mas Renato, eu quero deixar com opacidade somente as imagens de uma CERTA div, e não de todas as divs. R Ai já complica, agora teremos que usar classes para nomear a tal div que você quer. Para usar classes devemos especificar no CSS e passar para o html...

Criando classes.

R Para configurar uma classe é diferente de tag, teremos que colocar um ponto "." antes da classe para poder configura-la, se não seu browser não vai saber que é uma classe :} R Vou criar uma classe chamada renato e aplica-lá a uma div:


.renato {
width: 400px;
height: 400px;
background: #888888;
color: #000000;
}
.renato img {
opacity: 0.5;
}
[/code]




[color=#FF0000][b]R[/b][/color] Agora aplicando em uma div



[code]
<div class="renato"><img src="http://1.bp.blogspot.com/-7DkUBiJmQKo/Tb8rEPeTxBI/AAAAAAAAAAM/oU2WiT2Zoko/s320/teste.png"></div>

R Como pode ver eu criei uma div e dei a classe "Renato" à ela, agora ela vai atender a todas as configurações do css referidas a ".renato", então agora somente a div que você escolher vai ter opacidade (:

Bom galera é isso ai, vamos recordar o que eu ensinei nesta aula: