Please enable JavaScript.

Coggle requires JavaScript to display documents.

Conceitos básicos de CSS (3 - Margin e Padding (Como definir as margins?,…

- - - - Nome da cor. (Em Inglês)
        
        Existem um número limitados de cores que você atribuir dessa maneira. Você pode ter a lista completa de cores no site:
        https://www.w3.org/TR/css-color-3/
      - Hexadecimal
        
        Hexadecimal são valores matemáticos, mas no css é bem diferente, sendo atribuído da seguinte forma.
        1º conjunto de caracteres é Red: FF, o 2º conjunto é Green:FF e o 3º é Blue: FF. Somando tudo #FFFFFF formando a cor branco.
        
        O Hexadecimal trabalha com definições de cores, como o próprio nome já diz o Hexadecimal vem de 16, então o 16 vai variar de 0 a 9 com o alfabeto de A a F, tanto nas linhas quanto nas colunas.
        
        Exemplo: se no vermelho eu quero FF, na Linha F e na Coluna F, o número que se encontra é o número 255. Então no padrão RGB significa 255.
        No verde o padrão AB o número que se encontra na Linha B e Coluna A é 186, então no RGB coloca-se 186.
        No Azul o padrão CC, encontra-se o valor 204, então no RGB é 204.
        Então em Hexadecimal seria #FFABCC que seria o mesmo que rgb(255,186,204)
        
        Hexadecimal shorthand (abreviada)
        
        Quando cada conjunto tem os dois caracteres iguais, podemo usar no modo abreviado, então podemos fazer eles em 3 caracteres.
        Exemplo:
        #FFCC00 -> #FC0
      - RGB
        
        RGB significa Red(Vermelho) - Green(Verde) - Blue(Azul). E através dessa cores você pode criar qualquer cor do universo.
        
        Existem duas maneiras de colocar valores, que são da maneira numérica ou percentual.
        Exemplo:
        rgb(255, 128, 0) > rgb(100%,50%,0%
      - HSL Color
        
        Hue
        
        Define a cor de acordo a posição ou graus do globo de cores. As cores são efetivamente divididas em 3 áreas:
        0 graus = puro vermelho
        120 graus = puro verde
        240 graus = puro azul
        
        Saturation
        
        Define a intensidade da cor. Zero é sem intensidade e cresce gradativamente a 100%.
        
        Lightness
        
        Define a intensidade do brilho de uma cor. 50% é a cor verdadeira. Maior do que isso ele fica perto do branco, menor do que isso ele fica próximo do preto.
      - RGBa HSLa - Controle do Alpha
        
        É um quarto elemento, onde define o grau de opacidade, que é o Alpha.
        Exemplo:
        RGBa(255,128,0,0.5)
        HSLa(120,50,0,0.5)
- - - - O Padding define a distancia interna da caixa.
      - A margin da distancia em relação ao outros elementos ao redor.
    - - Absolute
      - Relative
      - Fixed
      - Static
    - - Left
      - Right
      - None
      - Inherit
        
        Que está herdando uma característica de um elemento pai.
- - - - Margin-top:30px; Ele vai dar um espaço acima do elemento.
      - Margin-right:30px; Ele dar um espaço a direita do elemento.
      - Margin-bottom:30px; Ele vai dar um espaço abaixo do elemento.
      - Margin-left:30px; Ele vai dar um espaço a esquerda do elemento.
    - - Isso Significa que:
        1º é Top;
        2º é Right;
        3º é Bottom;
        4º é Left;
        Vai seguindo o sentido horário.
        
        Margin: 30px 30px 30px 30px;
    - - Dessa maneira, você coloca um valor e esse valor vai para todos os lados.
    - - O primeiro valor é atribuído para top e bottom.
      - E o segundo para right e left.
    - - O primeiro é pra Top
      - O segundo é para Right e Left
      - E o terceiro é para Bottom
  - - - Padding-right:30px;
      - Padding-top:30px;
      - Padding-bottom:30px;
      - Padding-left:30px;
      - Padding: 30px, 30px, 30px, 30px;
- - - - Border Style
        
        Solid - Onde tem um linha
        
        Dashed - Tracejada
        
        Dotted - que é uma linha pontilhada.
        
        Double, groove, ridge, inset, outset.
      - Border-Width
        
        Podemos definir numeralmente.
        
        Thin, Medium, Trick
      - Border-color
        
        Podemos definir a cor, escrevendo o nome da cor.
        
        Definindo via Hexadecimal.
    - - Border-Style
        
        Border-top-style: solid;
        
        Border-right-style: solid;
        
        Border-bottom-style: solid;
        
        Border-left-style: solid;
      - Border-width
        
        Border-top-widht
        
        Border-right-widht
        
        Border-bottom-widht
        
        Border-left-widht
      - Border-color
        
        Border-top-color
        
        Border-right-color
        
        Border-bottom-color
        
        Border-left-color
    - - border: solid 2px green;
      - Solid é o tipo de borda.
      - 2px a largura da borda
      - green é a cor da borda
    - - Border-image: url(http://www.w3.org/border.png)30 30 round;
- - - - Exemplo:
        
        Background-color: #F00
        
        Background-color: rgb(255,128,0);
        
        Background-color: Red;
    - - Exemplo
        
        Background-image: url('image.png');
    - - Exemplo:
        
        Não repetir: Background-repeat: no-repeat
    - - Quando usamos o Background-attachment: fixed, quando o usuário for rolado a página, aquele background fica fixo, e vai acompanhando.
    - - Exemplo:
        
        Background-position: top ele vai para o centro.
        
        Background-position: right fica acima da página, não é muito recomendado, o mais recomendado é fazer uma combinação.
        
        Na combinação você pode colocar Background-position: Right top
        
        Combinações possíveis:
        
        Left top;
        Left center;
        Left bottom.
        
        Center top;
        Center center;
        Center Bottom;
        
        Right top;
        Right center;
        Right bottom.
- - - - Elementos de caixa, tais como Divs, Section
        
        Existem vária maneiras de aplicar:
        
        box-shadow: 10px 10px 5px #999;
        
        O primeiro valor coloca uma sombra na lateral. Se o valor for positivo o valor vai para o lado direito, se for negativo, vai para o lado esquerdo.
        
        O segundo valor coloca uma sombra abaixo ou acima. se o valor for positivo a sombra é pra baixo, se for pra negativo a sombra fica pra cima.
        
        O terceiro valor é o bluh (intensidade da sombra. Quanto maior o valor mais escuro a sombra será.
        
        O quarto valor é relativo a cor.
        
        Se você quer sombra em todos os lados, é só colocar 0 nos dois primeiro valores.
        
        Um 4 valor é spread, que é a distância expandida da sombra.
        
        Outro é o Inset, que faz com que a sombra fique dentro do elemento. Com ele tudo é invertido, se caso a sombra do lado externo fosse do lado direito, com o inset vai para o lado esquerdo.
    - - Elementos de texto.
        
        Os valores são os mesmo do box-shedow.
        
        Efeitos:
        
        Efeitos do tipo relevo, que coloca a sombra pra dentro.
        
        Efeito neom
- - - - Linear é o tipo de gradiente. É aquele que você coloca qual a direção fim.
      - To Right é o ponto inicial.
      - Blue, é a cor inicial.
      - Red é a cor final.
    - - Linear é o tipo de gradiente. É aquele que você coloca qual a direção fim.
      - Esse é a segundo forma que é com graus, nesse caso 90deg .0deg é o valor a cima, 90deg a direita, 180deg a baixo e 270deg a esquerda.
      - Blue e Red seguem as especificações anteriores.
- - - - Radial é o tipo de gradiente.
      - Blue é o nome da cor.
      - E os valores nas cores (70% e 30%) servem para dar destaque a uma cor.