Este é um post popular. Renato 659 Postado Maio 3, 2011 Este é um post popular. Share Postado Maio 3, 2011 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: 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" Guilherme., Augusto, Froostiin e 3 outros reagiu a isso 6 Citar rena.to Link para o post Compartilhar em outros sites
Guilherme. 189 Postado Maio 3, 2011 Share Postado Maio 3, 2011 Muito bom, vamo colocar esse povo pra fazer site (: Augusto reagiu a isso 1 Citar Link para o post Compartilhar em outros sites
EdsonJunior 966 Postado Maio 3, 2011 Share Postado Maio 3, 2011 Renatinho, podia criar uns tuto de como fazer skins pra IPB! QHWIUEHQUIWHUIEUQ CSS é a base delas néah!? @off; Agora saquei porque colocaram as estrelinhas ( :staropt: ) nos emoctions... QWEIHQWUIHEIUQW Citar Link para o post Compartilhar em outros sites
Administrador Erimyth 95 Postado Maio 4, 2011 Administrador Share Postado Maio 4, 2011 Edson, É css é a base dela, mas acho que já estaríamos desvirtuando o conteúdo do fórum. Quer aprender a mexer com IPB? Procure site relacionados à IPB! Renato, Tópico maravilhoso cara, reputado! (: Citar TibiaKing Team- KingTópicos www.tibiaking.com Link para o post Compartilhar em outros sites
IgninoSit 0 Postado Agosto 10, 2011 Share Postado Agosto 10, 2011 (editado) Removido. Editado Agosto 10, 2011 por Augusto Spam (veja o histórico de edições) Citar Link para o post Compartilhar em outros sites
Maserots 1 Postado Agosto 20, 2011 Share Postado Agosto 20, 2011 Bem legal Citar Link para o post Compartilhar em outros sites
Augusto 660 Postado Agosto 20, 2011 Share Postado Agosto 20, 2011 @Maserots Primeiramente seja bem vindo ao fórum... Mais por favor, leia as regras...olhe o seu post. Mensagens inúteis: Não poste mensagens sem conteúdo, que não contribuem em nada ou que não estejam relacionadas ao assunto do tópico. Mensagens assim são chamadas de Floods. Postar coisas como "haha", "lol", "me add no msn aí", entre outras, é o que considera-se completamente inútil. Postar várias mensagens iguais, mesmo que em tópicos diferentes, também pode ser considerado Flood. Maserots reagiu a isso 1 Citar # Regras Gerais - TibiaKing.com # Contato: [email protected]Não respondo dúvidas via MP. Link para o post Compartilhar em outros sites
Maserots 1 Postado Agosto 20, 2011 Share Postado Agosto 20, 2011 @Maserots Primeiramente seja bem vindo ao fórum... Mais por favor, leia as regras...olhe o seu post. Tudo bem Augusto, me desculpe... Não farei mesma coisa nos proximos posts. Obrigado =) Citar Link para o post Compartilhar em outros sites
.thumb.png.cc1493ff26746d371269fe30f324d73f.png)
.png.020ba42dce1a4aa16afd44c8368fd85d.png)
Posts Recomendados
Participe da conversa
Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.