Posts Populares
03
abr
2018

O básico do CSS #EuProgramo


Falando sobre: BEDATutoriaisWeb Design

Quem estava com saudades dos posts desse estilo no blog? Ensino para vocês sobre programação, design e dicas para blogueiros. E eu amo! Vocês podem ver alguns aqui. Esses posts estarão presentes por aqui, com maior frequência no blog, na série Eu posso. No caso de programação: #EuProgramo.

O Eu Posso vai ajudar e mostrar para vocês que vocês podem fazer coisas que, à primeira vista, parecem impossíveis. No #EuProgramo, vou ensinar códigos simples, como funciona cada um e oferecer tutoriais também. Se você tiver sugestões, não deixe de comentar aqui!

Falei demais, eu sei. Então vamos para o básico do CSS. Vamos aprender o que é o CSS, seus principais códigos, como ele funciona e entender porque ele é tão maravilhoso.


O que é CSS?

CSS significa Cascading Style Sheets ou em português, folha de estilos em cascata. É utilizado para estilizar o HTML. Digamos que o HTML faz a estrutura e o CSS deixa bonito.

Ele pode ser inserido tanto internamente, quanto externamente. Eu prefiro que seja externamente, fica mais fácil para fazer alterações e o código não fica gigantesco.

Internamente:

<html>

<head>

<style>

p { color:#000000;}

</style>

</head>

</html>

Externamente:

<html>

<head>

<link rel=”stylesheet” href=”style.css”>

</head>

</html>

Se você é usuário Blogger, o Blogger utiliza CSS interno, embora tenha uma área no Editor de Modelos para os códigos CSS, que está vinculado ao template completo, então é como se fosse externo já que você não precisa se preocupar sobre onde colocá-lo. Você também deve colocar sem as tags <style>, como se estivesse em um arquivo externo.

WordPress pode se utilizar ambos, mas quando é utilizado externamente, pode ser facilmente encontrado nos arquivos com o final .css.

Para adicionar um estilo externo para seu arquivo HTML, você tem que adicionar a tag “link rel” no começo do seu código para que ele entenda que se trata de um estilo, não um arquivo comum. O “href” representa o link de onde o arquivo se encontra no seu tema.


Os códigos básicos de CSS

  • Background

Usado com cor de fundo, imagem ou transparência. Também temos a possibilidade de usar degradê e até mais de um fundo. Use sua criatividade!

Para cor, usamos o # (jogo da velha/hashtag) e possui 3 ou 6 caracteres, podendo ser números e/ou letras. É possível utilizar uma tabela de cores, como essa.

Para deixar transparente basta utilizar: “background: transparent;” (sem as aspas).

E para usar uma imagem, você tem que utilizar: “background: url(‘url_da_imagem’) (sem as aspas). E após o “)”, você pode utilizar “no-repeat” – para nenhuma repetição, “repeat-x” – para repetição horizontal, “repeat-y” – para repetição vertical e “repeat” para repetição completa.

  • Altura e Largura

Width: define a largura do elemento.

Height: define a altura do elemento.

Pode ser um valor em px (pixel), porcentagem, em. Além de ter suas variações com max-width e max-height, que são utilizados para definir uma largura ou altura máxima.

  • Margin

Representa as 4 margens do elemento, acrescenta um espaçamento fora do conteúdo. Pode ser utilizada como “margin-top” (topo), “margin-right” (direita), “margin-bottom” (abaixo), “margin-left” (esquerda) ou da forma encurtada: margin: 1px 2px 3px 4px, onde cada valor em pixel representa uma posição, nessa mesma ordem.

  • Padding

É parecido com o margin, mas dessa vez adiciona um espaço nas 4 margens do elemento. Acrescenta um espaçamento dentro dos limites do conteúdo.

Pode ser utilizada como “padding-top” (topo), “padding-right” (direita), “padding-bottom” (abaixo), “padding-left” (esquerda) ou da forma encurtada: padding: 1px 2px 3px 4px, onde cada valor em pixel representa uma posição, nessa mesma ordem.

  • Fontes
  1. font-size: define o tamanho da fonte;
  2. font-family: tipo da fonte;
  3. font-style: adiciona estilo à fonte. Podendo ser negrito (bold) ou itálico (italic).
  4. font-weight: peso da fonte de claro a negrito, que também pode ser adicionado por esse código. A numeração muda a espessura em negrito da sua fonte, quanto maior, mais negrito.

Claro, não dá para explicar todos os códigos em CSS de uma única vez. Para quem não conhece, é muita informação para ser processada. Mas como eu disse, pretendo vir com mais posts relacionados.

Mas diz aí! O que mais vocês querem aprender aqui no blog? Deixem nos comentários que eu prometo trazer esses conteúdos para vocês. Esse foi o #3 BEDA, beijos.

Deixe o seu comentário!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *


1 comentário