Limpando código - Como fazer um site #6
Fala galera, beleza?
E aí, vocês tiveram coragem de ler o post de ontem?haha =P
Sinceramente só de lembrar eu fico com sono...rs
Mas relaxem o post de hoje tem tudo pra ser beeeeemmm mais curto...rs
Primeiro eu quero falar sobre o efeito de costura, se vocês não repararam ontem eu acabei aplicando ele nos links, mas acho que não expliquei ele no código css, pra não falar que não expliquei vou explicar agora...rsrs
Antes de falar sobre a borda que dá efeito de costura, achei interessante falar sobre a diferença entre margem, borda e espaçamento(não sei se a definição correta é esta)...
Veja a imagem que acabei de postar... O elemento é representado pela cor azul... Ele pode ter uma margem interna, para que seu conteúdo não toque nas laterias, essa margem interna do elemento(espaçamento) é o padding... Veja abaixo como ele funciona...
Sem padding:
Exemplo
Com padding de 5px:
Exemplo
Quando você aplica a margem interna o background(tanto faz se é cor ou imagem) vai aparecer durante essa margem interna...
Depois da margem interna vem a borda... É nela que você pode fazer o efeito de costura pelo código:
border-top: 1px dashed #FFF;
No caso do código anterior a borda será aplicada apenas no topo do elemento, terá espessura de 1px e cor branca... Dashed é o código que faz a borda ficar com efeito de costura, caso queira uma borda reta o código seria solid...
Logo depois da borda vem a margem externa...
A principal diferença entra a borda e a margem externa é que se o elemento for clicável, clicar na borda fará o elemento funcionar, já clicar na margem não... A margem externa realmente serve para distanciar um elemento do outro...
Bom, como eu falei que não queria fazer um post grande demais, não vou me aprofundar mais nisso...rsrs
Vamos a limpeza do código que nós fizemos...
Se você leu meu post de ontem, deve ter visto que falei que os sites linkam os estilos css e os scripts, né? Limpar o código do seu site nada mais é do que fazer isso... Mas além de limpar, se você fizer do jeito certo, seu site pode ganhar velocidade de carregamento... O que fazer pra isso acontecer?
Primeiro você vai fazer todas as páginas do seu site, não precisa limpar as páginas enquanto estiver fazendo, deixe pra limpar no final...
Daí depois que você tiver terminado, vai ir em cada página e vai ver os trechos de código CSS que são repetidos em várias páginas, afinal estilizações de menu e rodapé por exemplo, sempre vão ser as mesmas...
Pegue esses trechos e separe em vários arquivos CSS, por exemplo, um arquivo CSS com o nome de base.css conteria todos os códigos que sempre são usados nas páginas... Um arquivo com o nome de galeria.css seria usado em páginas que exibem fotos...
Pra gravar um arquivo com extensão .css você faz o mesmo processo que fez com o .html, cria um novo arquivo de bloco de notas, muda o nome e coloca a nova extensão(.css), depois disso você abre ele pelo bloco de notas e insere o código... Lembrando que quando o arquivo é com extensão .css você não precisa colocar as tags <style> ...
Fazendo isso na hora de linkar os estilos você não precisará linkar o estilo galeria.css se a página não tiver fotos a sere exibidas...
A mesma coisa você deve fazer com os códigos javascript, veja os códigos que são utilizados sempre, e os que servem especificamente pra uma coisa...
A extensão para salvar aquivos externos de javascript é .js , então você faz o mesmo processo que fez com o .css, mas coloca a extensão .js ... Assim como no CSS, não é necessário colocar a tag <script> se você estiver escrevendo o código no arquivo com extensão .js...
É interessante também colocar esses arquivos separados em pastas, os arquivos CSS em uma pasta chama CSS e os javascript em uma pasta chamada JS...
Depois disso é só fazer a linkagem... De preferência coloque essa linkagem dentro das tags <head> ...
Pra linkar um arquivo css use o código(substitua a parte em negrito pelo link do arquivo a ser carregado):
<link rel="stylesheet" href="css/colorpicker.css" type="text/css">
Pra linkar um arquivo javascript use o código(substitua a parte em negrito pelo link do arquivo a ser carregado):
<script src="js/exemplo.js"></script>
Mas é claro que a funcionalidade do código é o principal, então se colocar dentro da tag head for atrapalhar seu código, coloque fora, o importante é funcionar...rs
Bom gente, por hoje é isso, espero que vocês tenham gostado do tutorial simples de hoje, acho que vou dar um tempo de falar de html agora...rsrs
Se vocês quiserem que eu continue com os posts, deixem comentários falando de assuntos pra eu comentar... ^^
Valeu!
E aí, vocês tiveram coragem de ler o post de ontem?haha =P
Sinceramente só de lembrar eu fico com sono...rs
Mas relaxem o post de hoje tem tudo pra ser beeeeemmm mais curto...rs
Primeiro eu quero falar sobre o efeito de costura, se vocês não repararam ontem eu acabei aplicando ele nos links, mas acho que não expliquei ele no código css, pra não falar que não expliquei vou explicar agora...rsrs
Veja a imagem que acabei de postar... O elemento é representado pela cor azul... Ele pode ter uma margem interna, para que seu conteúdo não toque nas laterias, essa margem interna do elemento(espaçamento) é o padding... Veja abaixo como ele funciona...
Sem padding:
Exemplo
Com padding de 5px:
Exemplo
Quando você aplica a margem interna o background(tanto faz se é cor ou imagem) vai aparecer durante essa margem interna...
Depois da margem interna vem a borda... É nela que você pode fazer o efeito de costura pelo código:
border-top: 1px dashed #FFF;
Logo depois da borda vem a margem externa...
A principal diferença entra a borda e a margem externa é que se o elemento for clicável, clicar na borda fará o elemento funcionar, já clicar na margem não... A margem externa realmente serve para distanciar um elemento do outro...
Bom, como eu falei que não queria fazer um post grande demais, não vou me aprofundar mais nisso...rsrs
Vamos a limpeza do código que nós fizemos...
Se você leu meu post de ontem, deve ter visto que falei que os sites linkam os estilos css e os scripts, né? Limpar o código do seu site nada mais é do que fazer isso... Mas além de limpar, se você fizer do jeito certo, seu site pode ganhar velocidade de carregamento... O que fazer pra isso acontecer?
Primeiro você vai fazer todas as páginas do seu site, não precisa limpar as páginas enquanto estiver fazendo, deixe pra limpar no final...
Daí depois que você tiver terminado, vai ir em cada página e vai ver os trechos de código CSS que são repetidos em várias páginas, afinal estilizações de menu e rodapé por exemplo, sempre vão ser as mesmas...
Pegue esses trechos e separe em vários arquivos CSS, por exemplo, um arquivo CSS com o nome de base.css conteria todos os códigos que sempre são usados nas páginas... Um arquivo com o nome de galeria.css seria usado em páginas que exibem fotos...
Pra gravar um arquivo com extensão .css você faz o mesmo processo que fez com o .html, cria um novo arquivo de bloco de notas, muda o nome e coloca a nova extensão(.css), depois disso você abre ele pelo bloco de notas e insere o código... Lembrando que quando o arquivo é com extensão .css você não precisa colocar as tags <style> ...
Fazendo isso na hora de linkar os estilos você não precisará linkar o estilo galeria.css se a página não tiver fotos a sere exibidas...
A mesma coisa você deve fazer com os códigos javascript, veja os códigos que são utilizados sempre, e os que servem especificamente pra uma coisa...
A extensão para salvar aquivos externos de javascript é .js , então você faz o mesmo processo que fez com o .css, mas coloca a extensão .js ... Assim como no CSS, não é necessário colocar a tag <script> se você estiver escrevendo o código no arquivo com extensão .js...
É interessante também colocar esses arquivos separados em pastas, os arquivos CSS em uma pasta chama CSS e os javascript em uma pasta chamada JS...
Depois disso é só fazer a linkagem... De preferência coloque essa linkagem dentro das tags <head> ...
Pra linkar um arquivo css use o código(substitua a parte em negrito pelo link do arquivo a ser carregado):
<link rel="stylesheet" href="css/colorpicker.css" type="text/css">
Pra linkar um arquivo javascript use o código(substitua a parte em negrito pelo link do arquivo a ser carregado):
<script src="js/exemplo.js"></script>
Mas é claro que a funcionalidade do código é o principal, então se colocar dentro da tag head for atrapalhar seu código, coloque fora, o importante é funcionar...rs
Bom gente, por hoje é isso, espero que vocês tenham gostado do tutorial simples de hoje, acho que vou dar um tempo de falar de html agora...rsrs
Se vocês quiserem que eu continue com os posts, deixem comentários falando de assuntos pra eu comentar... ^^
Valeu!
Comentários
Postar um comentário