CSS começando agora com css e Problema com css3

[MugenShion]

body{
  color: white;
  background-color: #6A5ACD;
  width: 600px;
  margin: auto;
}

Olá, estou estudando um pouco sobre css e gostaria de saber o que estou fazendo aqui, eu sei que estou definindo que toda letra do corpo da página será de cor branca e o fundo da página em rgb e a largura máxima da minha página sera de 600 pixels, mas o que significaria 600 pixels para margin no automático ? porque ela começa do meio ? podem me dar dicas tb como sites, ou vídeos-aulas ensinando + sobre css. obrigado

adicionado 1 minuto depois

ah esqueci de mencionar no tópico também, padding seria para boxs do site certo ? e margin seria para textos ? no caso de alocação de local.

[DiF]

@MugenShion

  Em 19/04/2019 às 20:36, MugenShion disse:

o que significaria 600 pixels para margin no automático ? porque ela começa do meio ?

Expandir  

Na verdade não começa do meio.

Está um pouco mais para esquerda. Para ficar no meio coloca 100px na largura.

Exemplo online: https://jsfiddle.net/dife/vb4uyLna/3/

 

O margin ali age nos elementos contidos no body. Deixando em automático, ele calcula de forma automática, em outras palavras ele deixa a margem para todos os lados de forma automática.  

Então, como definiu que a largura é de 600px, ele põe uma margem automática baseada na largura dela.

 

Veja por outra forma, se usar 100% de largura, os elementos ficarão no limite do lado esquerdo.

Com 90%, irão se deslocar um pouco para a direita.

 

  Em 19/04/2019 às 20:36, MugenShion disse:

dicas tb como sites, ou vídeos-aulas ensinando + sobre css

Expandir  

O w3schools é ótimo lugar para aprender. Busque também o site do autor de livros, o Maurício Samy Silva. Ele tem ótimos materiais de css e exemplos que contém nos livros dele.

Quanto a video aulas, eu costumo ver no youtube.

 

 

 

[washalbano]

http://pt-br.learnlayout.com/

[MugenShion]

Ok, obrigado os 2 pelas informações, mas quando definimos a largura do width é o tamanho que nosso layout. então com margin como eu deixo 95% de largura para minha página ? no centro claro, obrigado.

[DiF]

@MugenShion Isso depende...    

Eu prefiro deixar o body sem mexer na margem ou tamanho, mas sim coloco um elemento DIV com uma largura de 960px e depois para centralizar, uso o margin 0 auto.

[MugenShion]

mas ela centraliza em todas resoluções ?

[DiF]

@MugenShion Você usa a responsividade. Ademais, se quiser podes usar o calc() também. é uma função para cálculos matemáticos no css

 

https://css-tricks.com/a-couple-of-use-cases-for-calc/

 

O mais comum é usar media queries para cada resolução baseado pelos dispositivos.

Desktop/laptops, tablets, mobile

Podes usar este guia:  https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488

 

  Em 20/04/2019 às 19:32, MugenShion disse:

mas ela centraliza em todas resoluções ?

Expandir  

Respondendo, isso centraliza o objeto na tela independente da resolução. Meio é meio.

Claro que quanto menor for, o ideal é fazer o resto acompanhar.... então aí entra o média query.

[MugenShion]

se eu colocar para leitura do meu site em 960 pixels de largura como máximo e depois disso ele desce o conteúdo para baixo certo ? e porque quando coloco margin: 0 auto; ele vai para o meio só quando eu defino a largura da página? o meio do meio eu entendi no caso uma div no centro teria que ser metade da largura da metade dela para centralizar o conteudo dentro de uma div

 

desculpa, mas não to conseguindo entender a lógica do margem nos pixels, porque tipo quando eu defino:

 

body{
	width: 50%;
	margin: auto;
}

estou dizendo que todo conteúdo no corpo da minha página ocupará 50% da largura da janela do pc certo ? ou seja começa pelo meio e auto é para centralizar o conteúdo no width né ? e qual a diferença do 0 auto para o auto, eu sei que 0 é para definir o tamanho das 4 margens, no caso top-right-bottom-left mas porque tem 2 tipos para mesma função ?

[DiF]

  Em 21/04/2019 às 04:35, MugenShion disse:

qual a diferença do 0 auto para o auto, eu sei que 0 é para definir o tamanho das 4 margens, no caso top-right-bottom-left mas porque tem 2 tipos para mesma função ?

Expandir  

 

Antes de pensar na diferença do margin 0 auto, você tem que entender a margem. 
o atributo margin, funciona no sentido horário começando pelo topo. Ou seja, temos 4 medidas para definir.

margin: 0 2px 3px 4px

Significa que o top: 0 right 2px bottom: 3px e left 3px

Omitindo as outras 3 medidas, significa que você deixará a margem automática para todos os lados do elemento.

Então, ao declarar margin 0 auto, você está definindo margens esquerda e direita do elemenento  automáticas e as margens superiores e inferiores em zero.

Quando você usa apenas margin: auto, estará definindo que todas as margens do elemento sejam automáticas (top, right, bottom, left)

 

Ademais,  não se coloca uma largura no body. Na verdade, nem tem sentido.  No elemento body, costuma-se colocar regras na qual você quer que funcione no site todo, por exemplo, cor de um texto, fonte... e etc.

 

Como mencionei anteriormente, o ideal, é usar um elemento DIV para ser o encapsulador.

exemplo:

 

<body>
  <div id="wrapper">
      
  </div>
</body>

#wrapper{
   width: 960px;
   margin: 0 auto;
}

Isso vai gerar um elemento com o ID #wrapper onde ele terá 960px e ficará centralizado na tela do usuário. Isso vai acompanhar a resolução do sistema do usuário.