IgninoSit
Membro
-
Registro em
-
Última visita
Histórico de Curtidas
-
IgninoSit deu reputação a Renato em [CSS] #1 - Aplicando o CSSCSS 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:
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:
Colocar o CSS no seu HTML
Criando seu CSS
Aplicando CSS à Tags
Criando e Aplicando CSS à classes
Quem gostou levanta a mão e pede BIS!
"BIIIIIIIIS"