CSS Básico na sua página!

Parte 1: O Básico do Básico sobre planos de fundo e CSS

Vamos Começar pelo plano de fundo:

O código abaixo é o código que uso para o meu plano de fundo.

body { background-color: rgb(0, 0, 0); background-image: url('https://modarchive.org/style/theme1/bg/bg.png'); background-repeat: repeat-x; background-attachment: fixed; border-color: rgb(255, 175, 50); }

Sem ele:

Aqui temos a sintaxe padrão para essas "características", que seria:

nomeDaParte { característica: valor; característica1: valor1; }

Essa estrutura é utilizada pelo código inteiro!

A primeira característica (e mais utilizada) é a background-color

Nela, pode ser inserido um valor de cor, ou seja

rgb(255≥r≥0,255≥g≥0,255≥b≥0), rgba(255≥r≥0,255≥g≥0,255≥b≥0,100≥a≥0),

#000000 até #ffffff e #00000000 até #ffffffff

Essa característica é a color aplicada no background. Também existe a border-color , que afeta a cor da borda de algo.

A segunda característica é a background-image, que define uma imagem para o fundo. Nela, coloque um link que contenha uma imagem. A estrutura de um link é url('https://siteaqui.com/seilaomitivel/imagemaqui.png')

O .png pode ser substituído qualquer outro tipo de arquivo de imagem e o siteaqui.com pode ser qualquer site, não somente um .com E COLOQUE O https:// !

A terceira seria o background-repeat, que pode receber os valores no-repeat, repeat-x, repeat-y e repeat.

eu sei que existem outros, mas não são tão utilizados (excluíndo o round, que estica a imagem para caber)

O repeat, repete a imagem em ambos eixos, repeat-x, no x, repeat-y, no y e no-repeat, que simplesmente não repete.

A quarta é o background-attachment, que pode receber os valores: fixed e scroll.

fixed faz o fundo não scrollar e scroll faz o oposto.

Uma valor extra é o linear-gradient, que tem a sintaxe

linear-gradient(direção,valor color inicial (como descrito anteriormente), valor color final) A direção pode ser: bottom, top, left e right.

ex: linear-gradient(to bottom right, rgb(255,0,0), rgb(0,255,0))

SEMPRE COLOQUE UM to ESPAÇADO ANTES DAS DIREÇÕES!

Parte 2: Como o CSS do Especulamente funciona

O CSS do Especulamente (na página de perfil) é organizado em:

body (fundo)

→bodyPrincipal (fundo das janelas principais)

→→coolBorderyEditable (bordas do banner e foto de perfil)

→→bioEditavel (biografia)

→→projsRecentesCssavel (o banner do "projetos recentes")

→→autorDeProjeto (o texto da direita dos projetos)

→→coolSubHeadery (bloco com o +CRIAR, AMIGOS e FÓRUNS)

→→coolLinkery (os links +CRIAR, AMIGOS e FÓRUNS)

→bodyFooter(rodapé da página)

Na verdade tem muito mais, leia aqui!

Aplicando Isso: sem o CSS do coolSubHeadery

Com:

.coolSubHeadery { border-color: rgb(255, 175, 50); background-image: url("https://i.imgur.com/ABd0xVM.png"); }

Atenção! Todos os "filhos" do body precisam ter um ponto final antes na hora de fazer o

nomeDaParte { característica: valor; característica1: valor1; }

Obs1: O projsRecentesCssavel utiliza content ao invés de background-image porém, a sintaxe é a mesma!

Parte 3: Base de CSS

Insira as características e valores ensinados anteriormente!

Plano de Fundo:

body { }

Fundo das Janelas:

.bodyPrincipal { padding-left: 4px; padding-right: 4px; }

Header da página:

.coolSubHeadery { }

Plano de fundo da foto de perfil:

.coolBorderyEditable { }

Links do Header:

.coolLinkery a{ }

Banner de "Projetos Recentes":

.projsRecentesCssavel { content: url('https://linkdaimagem.com/imagem.png'); }

Desculpe-me se o blog ficou um pouco mal explicado, tentei fazer um "mini-tutorial" de como montar o CSS