CSS básico para bloggers

Compartilhe:

CSS básico para blog
Na semana passada, nós abordamos alguns princípios importantes da linguagem HTML. Como o prometido, hoje vamos dar sequência ao aprendizado falando de CSS, ou Cascading Style Sheets. Pra quem não sabe, essa é a linguagem de folhas de estilo responsável por definir o layout de um documento em html. A maior vantagem dela é fazer a separação entre o formato e o conteúdo de um documento.

Por exemplo, ao invés de colocar a formatação dentro de cada doc (como seria, se houvesse apenas o código html), o desenvolvedor cria um link para uma página que contém os estilos. Essa página é o CSS, que consiste em uma lista de padrões de formatação para serem aplicado em todo o site. A padronização garante duas vantagens muito importantes pra gente: a maior precisão no controle do layout e a redução de repetições no conteúdo estrutural de uma página. Muito legal, né?


Por que amar o CSS

1 - Você pode experimentar e brincar com a aparência do seu blog. Dá para arrendondar bordas, inserir fontes e fundos, trocar cores e uma série de outras coisas bacanas;
2 - Facilita a vida, pois você não precisa trocar manualmente em cada página os aspectos que você quer mudar no seu blog. Basta ir no CSS e mudar uma vez;
3 - Ajuda no SEO do blog, pois é mais fácil um buscador rastrear os links que estão no seu código;
4 - Menor consumo de banda para usuário e servidor;
5 - Te dá controle sobre diferentes interfaces para diferentes dispositivos (design responsivo).

Algumas propriedades de CSS

Cores

color: Cor de um texto. Geralmente seguido de um hex code*
opacity: Nível de opacidade de um elemento.


*Hex Code é uma hashtag (#) seguida pela combinação de seis dígitos (0-9, A-F). Juntos, letras e números representam diferentes tipos de vermelho, verde e azul claro (RGB). Zero (#000000) representa a ausência de cor, o preto, e  #FFFFFF é a cor branca. Todas as letras e números entre os dois extremos resultam em diversas tonalidades. Para criar uma cor e ter acesso aos seus repectivos hex codes, clique aqui.

Fundo e bordas

background: Fundo de um elemento.
background-attachment: Se a imagem de um fundo é fixa ou acompanha o scroll do mouse.
background-color: Cor do fundo de um elemento.
background-image: Indica uma ou mais imagens para o fundo de um elemento.
background-position: Posição de uma imagem de fundo.
background-repeat: Indica se a imagem de fundo se repetirá.
background-size: Tamanho da imagem de fundo.

border: Propriedades de bordas.
border-color: Cor da borda de um elemento.
border-style: Estilo da borda de um elemento.

Texto

line-break: Indica se há quebra de linhas.
text-align: Alinhamento do texto.
text-justify: Alinhamento justificado do texto.
word-spacing: Aumenta ou diminui o espaça entre as palavras em um texto.
text-shadow: Adiciona sombra a um texto.

Fontes

@font-face: Permite que o site utilize fontes diferentes das fontes "web-safe".
font: Propriedades da fonte de um elemento.
font-family: Indica a família da fonte.
font-size: Tamanho da fonte de um texto.

Existem ainda muitas outras propriedades de CSS, por isso, compilei as mais usadas em uma colinha. Com ela, você vai poder associar o nome da propriedade ao tipo de função e deduzir para que serve cada uma delas. :)


Por hoje é isso! Se você gostou do post, comente e compartilhe para os seus amigos! E não esqueça de me seguir nas redes sociais para acompanhar as novidades do blog!

Quer mais dicas para o seu blog? Confira as quintas passadas!

Comentários

BLOGGER: 6
Loading...
Nome

#Blogs,1,#links da semana,1,#NaWeb,1,2016,1,A astronauta de mármore,1,Adsense,1,agregadores,2,agregadores blog,1,agregadores de links,1,alta qualidade,1,apps,2,aprendendo css basico,1,aviso,1,BEDA,7,blog,11,Blog Day,1,blog tips,4,blogger,6,blogger ou wordpress,1,blogger wordpress comparacao,1,blogging,6,blogosfera,8,Blogs,21,bloqueio criativo,1,botanica,1,cabeçalho,1,cherryla,1,código html,2,colmeia,1,como criar um nome para o blog,1,como divulgar blog,1,como escolher o nicho do blog,1,conteúdo,4,cornish,1,criação,1,criar logo,1,criatividade,3,CSS,1,CSS básico,1,Dan Britton,1,de tudo um pouco,1,design,4,dica,4,dica para blog,1,Dicas,11,dicas para blog,2,dicas para bloqueio criativo,1,dislexia,1,divulgacao,2,downloads,2,escrever para blogs,1,escrever para web,2,eu odeio o seu blog,1,featured,7,foco,1,fonderful,1,fonte dislexia,1,fontes,2,fontes gratis,1,free,6,free font,1,geralinks,1,Google,1,grátis,3,guia básico,1,header,1,HTML,2,html basico,1,HyperText Markup Language,1,ideias criativas,1,imagens de graça,1,iniciante,4,kakao talk,1,karla script,1,kik messenger,1,Komorebi,8,line,1,link,2,link party,3,logo,1,lovetoon,1,marca,2,marketing de conteúdo,1,marshe,1,metas,1,motivação,1,motivação para escrever,1,nicho,1,nome do blog,1,novas diretrizes,1,ocioso,1,palavras,1,pessoal,4,photoscape,1,photoshop,1,pirâmide invertida,1,planejamento,1,pra baixar,3,programação,1,qual o melhor,1,quintas de blog,13,recurso,2,redes sociais,1,Rotaroots,1,royalties free,1,sdv,1,SEO,1,shallom,1,spam,1,stella,1,sumo me,1,tag,1,tema wordpress gratis,1,temas para blog wordpress free,1,temas para postar,1,template,2,template blog high quality,1,template blog wordpress free,1,template blogger com slideshow,1,template blogger gratis,1,template blogger responsivo,1,templates blogger,1,templates blogger gratis,1,templates blogger premium,1,tipografia,3,tool,1,tráfego,1,troco likes,1,tutorial,2,ueba,1,vantagens,1,viber,1,vida-de-blogger,6,wayback,1,web,1,whatsapp,1,wordpress,1,writing prompts,1,
ltr
item
Komorebi: CSS básico para bloggers
CSS básico para bloggers
Guia de CSS para blogueiros iniciantes.
https://2.bp.blogspot.com/-UmBschOzozo/VtMhRxeU4sI/AAAAAAAABdQ/vx89SjUX0Sc/s640/CSS-basico.jpg
https://2.bp.blogspot.com/-UmBschOzozo/VtMhRxeU4sI/AAAAAAAABdQ/vx89SjUX0Sc/s72-c/CSS-basico.jpg
Komorebi
http://www.blogkomorebi.com.br/2016/03/css-basico-para-bloggers.html
http://www.blogkomorebi.com.br/
http://www.blogkomorebi.com.br/
http://www.blogkomorebi.com.br/2016/03/css-basico-para-bloggers.html
true
8738847383331650782
UTF-8
Todas postagens carregadas Nenhuma postagem encontrada VER TUDO LEIA MAIS Responder Cancelar resposta Deletar Por Início Páginas Postagens Veja Tudo LEIA TAMBÉM Tag Arquivo PESQUISAR Todas as postagens Não foram encontrados resultados com a sua entrada Voltar ao início Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez Nesse momento 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago há + de 5 semanas Seguidores Seguir ESTE CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar todo o código Selecionar todo o código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar