21 março 2018

23 códigos CSS que toda blogueira precisa conhecer

códigos CSS

É fundamental pra qualquer blogueira saber o básico de HTML e CSS, porque no decorrer da sua vida na blogosfera vai ser preciso efetuar algumas ações, como por exemplo adicionar um banner na lateral, e caso você não saiba, terá dores de cabeça.

Confesso que  quando comecei a estudar sobre este assunto, muitas vezes eu pensei em desistir, mas fui analisando que eu só aprenderia fazendo, ou seja, personalizando um layout.

CSS (Cascading Stylesheets) são códigos que dão estilo ao blog, site ou loja. Depois de construir uma casa é preciso pinta-la e adicionar móveis e decorações para que a casa fique harmoniosa, o mesmo acontece com o blog, depois de criar o alicerce com HTML personalizamos com CSS.


Veja agora os 23 códigos CSS que toda blogueira precisa conhecer


  1. background: Cor de fundo, imagem ou transparência. Para deixar transparente use o comando transparent. O código de cor sempre começa com # (jogo da velha) e possui 3 ou 6 componentes que pode ser número ou letra. Para adicionar imagem, basta usar o código background: URL('url-da-imagem-aqui') no-repeat; 
  2. border: Traça uma linha nas 4 margens, que pode ser lisa ou tracejada. Neste site você vai conhecer todas as funções desse comando. O código usado é border: 1px solid #111; Troque o número, o comando solid por outro e a cor.
  3. border-radius: Deixa um elemento arredondado. O código usado é border-radius: 10px; 
  4. color: Adiciona cor na fonte.
  5. float: Faz com que o elemento flutue para a direita (right), esquerda (left), pra cima (top), ou pra baixo: (bottom). 
  6. font-family: Tipo de fonte.
  7. font-size: Aumenta o tamanho da fonte.
  8. font-style: Adiciona estilo a fonte. Negrito (bold), itálico (italic).
  9. font-weight: Peso da fonte de claro a negrito. A numeração muda a espessura em negrito da fonte. Quanto maior, mais negrito.
  10. height: Altura do elemento.
  11. left: Posição do elemento em relação a margem esquerda da página.
  12. letter-spacing: Adiciona distância entre as letras.
  13. line-height: Faz com que o elemento fique na mesma altura. 
  14. margin: Tamanho das 4 margens do elemento. Pode ser usado das seguintes formas, margin: 10px 12px 4px 5px; (que comanda em sequencia o lado do topo, direito, abaixo e esquerdo) ou margin-top: 1px; margin-bottom: 1px; margin-right: 1px; margin-left: 1px; 
  15. padding: Adiciona espaço nas 4 margens do elemento. Pode ser usado das seguintes formas, padding: 10px 12px 4px 5px; (que comanda em sequencia o lado do topo, direito, abaixo e esquerdo) ou padding-top: 1px; padding-bottom: 1px; padding:  1px; padding-left: 1px; 
  16. text-align: Alinhamento do texto, que pode ser centralizado (center), esquerdo (left), direito (right) ou justificado (justify).
  17. text-decoration: Deixa a fonte sublinhado (underlaine), sobrelinhado (overline),  riscado (line-through) ou sem nenhum comando (none).
  18. text-transform: Transforma a fonte em maiúsculas (uppercase), minúsculas (lowercase), inicial maiúscula (capitalize), ou sem nenhum comando (none).
  19. top: Posição do elemento em relação a parte superior da página.
  20. visibility: Deixa o elemento visível (visible) ou invisível (hidden).
  21. width: Largura do elemento.
  22. position: Posiciona o elemento na página. Os comando são fixed, relative, absolute ou static. Essas coordenadas são comandadas pelas propriedades top, left, right ou bottom. Por exemplo, quando você posicionar um elemento fixo no topo, é preciso usar os comandos fixed e top com 0px para que o item fique fixado no topo.
  23. z-index: Posiciona o elemento mais próximo ou afastado da página. O código é z-index: 99;

Gostou do artigo? Deixe sua opinião nos comentários caso você queira aprender um pouco mais sobre CSS. Compartilhe este post com seus amigos, siga o manual em "faça parte" que fica na lateral do blog, curta nossa página no facebook  siga nosso perfil no pinterest que está lotado de inspirações e dicas para blogueiras empreendedoras e criativas!


8 comentários:

  1. Você é demaiss ! To me matando pra aprender esses códigos.

    ResponderExcluir
  2. Muito bacana Lorena! Eu entendo bem pouco só o necessário para fazer alguns ajustes e bem básicos, já tive interesse em aprender mais sobre html mas hoje só o básico me ajuda é muita coisa haha mas quem sabe mais pra frente até faça um curso :) Gostei muito do post, vai me ajudar a entender melhor.

    Apenas eu, Day

    ResponderExcluir
    Respostas
    1. O CSS é um pouquinho mais fácil de entender, mas confesso que foi bem difícil no começo rsrs espero de coração que esse post te ajude de alguma forma <3

      Excluir
  3. Graças aos suas dicas fui arrumando o Boas de Papo do jeitinho da gente. Esses códigos são bem difíceis de entender, é preciso ter muita paciência!!
    Beijos

    Boas de Papo

    ResponderExcluir
    Respostas
    1. Boas de papo, fico feliz em saber que as minhas dicas estão sendo uteis pra você <3 É meio chatinho no começo, mas depois o amor pela codificação vai surgindo rsrsrs boa sorte! Bjos :*

      Excluir
  4. Olá!
    Que espaço maravilhoso! Eu entendo bem pouco desses códigos, mas consigo fuçar em alguns deles. kkkkk Tem muitas dicas legais aqui! Adorei.
    Bjos

    www.momentosdeleitura.com

    ResponderExcluir
    Respostas
    1. Olá Pollyana,
      Seja muito bem vinda ao manual <3 Fique a vontade para navegar <3
      Mil bjos :*

      Excluir