GoConqr has a new look! Let us know what you think.

Sign up free

Flashcards

Ensinamentos CSS

Paulo Henrique Programação Angular Portuguese 118 cards

Cards in this deck (118)

  1. 1O QUE É O CSS ?CSS é uma linguagem de estilização, que incorpora nos elementos da linguagem de marcação HTML, criando assim estilos de layouts entre outros.
  2. 2O QUE PODE FAZER COM CSS?1º Estilizar layouts de sites.
    2º Animações.
    3º Filtros.
    4º Formas Geométricas e Desenhos.
    5º contadores (tópicos)
  3. 3COMO É UMA PROPRIEDADE CSS ?Sua estrutura é propriedade: valor;
    exp. color: red;
  4. 4COMO DECLARAR/APLICAR CSS NO HTML ?Existem 3 maneiras de declarar/aplicar o CSS no html.
    1º CSS Inline => usa-se o atributo style nas tags html que quer estilizar.
    2º CSS Interno => Usa-se a tag dentro da tag <head> do html.
    3º CSS Externo => é Criado um arquivo separado "teste.css" e la coloca todos os codigos css, e para linkar esse arquivo .css no arquivo .html, precisa dentro da tag <Head> usar a tag <link rel="stylesheet" href="indicar caminho artigo .css">
  5. 5O QUE SÃO SELETORES NO CSS ? QUAL SÃO ELES ?São Comandos do CSS que ira chamar o Elemento HTML que vai receber a estilização.
    1º Seletor por tag/tipo => usa-se o nome da própria tag para chamar aquele elemento html.
    2º Seletor por id => usa-se do simbolo de hashtag "#id" para indicar que esta chamando uma tag pelo id dela.
    3º Seletor por Classe => Usa-se do símbolo ponto ".id" para indicar que esta chamando uma tag pela classe dela.
    4º Seletor Universal => Usa-se do símbolo asterisco "*" para indicar que será aplicado em todo arquivo html.
    5º Seletor por atributo => Usa-se colchetes "[atributo]" para indicar que será chamado por atributo.
    Exp. [title] { color: red;} (desta forma todos as tag que tiver o atributo title independente do valor, recebe a característica vermelha em seus texto)
  6. 6QUAIS AS DEMAIS FORMA DE SELECIONAR POR ATRIBUTO ?1º temos como usar [title="valor"] { propiedade: valor;} => dessa forma todos as tag que tiver um title com o valor igual, recebe a propriedade css.
    2º temos como usar [title~="valor"]{prop: valor;} => dessa forma todos as tags que tiver o title = "valor xxx" recebe a propriedade css independente se tem tem outras palavras.
    3º temos como usar [title|="valor"] => o piper | antes do igual pega o valor que tem hifen - em seguida.
    4º temos com usar [title^="pre..."] => O acento circunflexo antes do igual pega o valor do prefixo.
    5º temos como usar [title$="...sufix"] => O Cifrão antes do igual pega o valor do sufixo.
    6º e tem como usar [title*="valor"] => o sinal de asterisco * antes do igual, pega o valor independente de onde esteja.
  7. 7COMO AGRUPAR VARIOS SELETORES ?Usamos , para separa os seletores agrupados.
    Exemplo: h1, p1, {color: red}
    pode usar com diversos tipos de seletores.
    EXP: h1, [title], .class, #id { color: red;}
  8. 8O QUE SAO COMBIANDORES ?Vão especificar qual tipo de relação entre seletores.
    sintaxe : "SELETOR - COMBINADOR - SELETOR"
  9. 9QUAIS OS COMBINADORES ? DE EXEMPLOS."SELETOR - COMBINADOR - SELETOR"
    1 Combinador descendente, utiliza do " "espaço, e as propriedades inseridas serão aplicadas nos elementos filhos, netos, bisnetos.
    2 Combinador Filho , utiliza do ">" maior que, e as propriedades inseridas serão aplicadas somente nos elementos filhos sem passar para netos.
    3 Combinador Irmão, esse possui 2:
    3.1 combinador irmao adjacente - aponta as propriedades css para o irmao ao lado. utilizando sinal "+"
    Exp: p + p {color: red;} só o irmão p ao lado recebe cor vermelha.
    3.2 Combinador irmão em geral, aponta as propriedades css para todos os irmãos , utilizando sinal "~".
    Exp: p ~ p {color: red;} todo os irmão p abaixo recebe cor vermelha.
  10. 10O QUE SÃO PROPRIEDADES DE DIMENSÕES ? CITE AS PRINCIPAISPropriedade de dimensionamentos são as prop que irao manipular as dimensão de um elemento.
    Largura > width: 100px ou inherit;
    ( palavras padrão)
    inherit => recebe valor do pai.
    Altura > height: 100px ou inherit;
    também da para usar as prop, min ou max-width ou -height;
  11. 11O QUE SÃO PROPRIEDADES DE ESPAÇAMENTO ? CITE AS PRINCIPAISSão as Prop que irão definir/manipular o comportamento do espaçamento.
    margin: 10px => (define marging para todos os lados do elemento)
    margin com 3 e 4 valores: margin: v1=topo v2=lados v3=fundo ou 4 valores: margin: v1=top v2=direita v3=fundo v4=esquerda.
    (sempre segue o sentido horario começando do topo.)
    tambem tem como definir margin com:
    margin-top: v1; ou
    margin-right: v1; ou
    margin-bottom: v1; ou
    margin-left: v1;
    além da prop margin tem a prop padding,
    margin define o valor de espaço do elemento pra fora,
    já o padding define valor de espaço entre a borda e o conteudo do elemento.
    o paddin é usado da mesma forma que a margin:
    padding: 10px (aplicado a todos os lados)
    padding: v1 v2 v3;
    padding: v1v2v3 v4;
    padding-top;
    padding-bottom; etc.
  12. 12O QUE FAZ A PROP DE ESPAÇAMENTO box-sizing ?Essa propriedade de espaçamento tem 2 valores:
    box-sizing: content-box => a largura e altura definida aplica-se apenas ao conteudo. (pode ocorrer estouros pois soma a largura do conteudo e da bora e paddin e margin.)
    box-sizing: border-box; => respeita a largura e altura maxima definida (não estoura.)
  13. 13QUAIS SAO AS PRINCIPAIS VALORES DE CORES NO CSS ?HEXADECIMAL => Define sistema de cor em codigo de 6 digitos onde cada 2 digitos e uma cor principal (Red green Blue) - essa cor se define pelo #00-red 00 - green 00 - blue, e sues valores vao de 0 a F dessa forma => color: #FF0000 é vermelho.
    HEXADECIMAL com transparencia = utilizace do mesma sintaxe citada porem acrescentando +2 digitos que serão o nivel de opacidade/transparecia vai ter a cor. exp: #FF00000.5 aqui vai ter transparencia de 50%.
    RGB E RGBA = red green blue, sao definido por valores que vao de 0 a 255. no css é declarada pelo comando: rgb(255, 00, 00); este e o vermelho.
    já o RGBA definese o canal alpha que é a transparencia, declarando como exp: rgba(255, 00, 00, 0.5) aqui e o vermelho com 50% de transparencia.
    HSL E HSLA, H= hue matriz, S = saturation saturação, L= lightness iluminação.
    A = canal alpha - transparencia.
    O H recebe valor de uma roda de matriz das cores. (pesquisar valores).
    O S e o L recebe valores em porcentagem de 0% a 100%
    dessa forma declarada:
    hsl(360, 100%, 100%)
  14. 14O QUE FAZ A PROPRIEDADE object-fit? CITE SEUS VALORES.O object-fit: => define o ajuste e comportamento da imagem no elemento.
    1 - object-fit: fill; => padrão, distorce para caber.
    2 - object-fit: contaim; => mantem a proporção mas redimensiona para não perder qualidade. (pode deixa espaços)
    3 - object-fit: cover; => preenche o container html, nao distorce a imagem mas corta as sobras.
    4 - object-fit: none; ignora a altura e largura e preenche o html.
    5 - object-fit: scale-down; => define automaticamente se vai ser usado o couver ou o none.
  15. 15O QUE FAZ A PROPRIEDADE object-position? CITE SEUS VALORES.Object-position define a posição da midia em relação ao elemento que ela está. seja imagem ou video.
    seus valores:
    palavras chaves top, center, bottom, left ou right.
    ou pode ser definido v1 para eixo x e v2 para eixo y como:
    object-position: 20px e 20px.
    aqui a imagem esta a 20px do eixo X (Horizonte) e 20px do eixo Y (Vertical).
  16. 16O QUE FAZ A PROPIEDADE backgorund-image: ?Define uma imagem para o fundo de um elemento.
    Exp: background-image: url('caminho.png')
    pode ser usado gradientes como:
    Exp: backgorund-image: linear-gradient( cor1, cor2)
    entre outros valores e meios de colocar.
    (pesquisar conforme necessitar no seu desenvolvimento. )
    da para aplicar 2 camada de imagem de fundo. exp: backgorund-image: url("1.jpg") url("2.png");
  17. 17O QUE FAZ A PROPIEDADE backgorund-size: ?Define tamanho/comportamento da imagem ou cor do fundo.
    Valores:
    1 backgorund-size: auto; => define automaticamente.
    2 backgorund-size: couver; => ocupa toda a caixa mesmo sendo grande.
    3 background-size: contaim; => redimensiona o conteudo para caber toda iamgem.
    (se sobrar espaço a imagem se repete)
    4 background-size: valores; (1 valor vai definir a largura 2 valores define largura e altura.) usando unidade de medidas.
  18. 18O QUE FAZ A PRORIEDADE background-repeat: ?Define o comportamento de repetição da imagem caso ela nao caiba.
    Valores:
    1 background-repeat: repeat; => padrao vai repetir.
    2 backgorund-repeat: repeat x ou y => define que a imagem vai somente se repetir ou para x ou para y. (horizontal ou vertical)
    3 background-repeat: space; => vao se repetir com espaço entre eles.
    4 background-repeat: round; => vao se repetir mas sem espaço.
    5 background-repeat: no-repeat; => sem repetição.
  19. 19O QUE FAZ A PRORIEDADE background-position: ?Define a posição da imagem de funo em relação ao elemento;
    Valores:
    1 background-position: top, center, bottom, etc:
    pode usar 2 valores:
    exp: top left - vai fica posicionado em cima a equerda do elemento.
  20. 20O QUE FAZ A PROPRIEDADE background-attachmeat: ?Define o comportamento interno da imagem com a barra de rolagem do elemento.
    Valores:
    1 - background-attachmeat: fixed; => padrão que deixa fixo a imagem. ao rolar a pagina nao desce junto.
    2 - scroll; => fica fixo dentro do elemento mas nao da pagina em si. ao rolar a pagina ele some junto com elemento.
    3 - Local; => rola junto com o conteúdo dentro do elemento.
  21. 21O QUE FAZ A PROPRIEDADE background-origin: ?Define qual ponto de origem da imagem :
    valores:
    1 padding-box; => começa a partir do padding para o conteúdo.
    2 boder-box; => começa a partir da borda para o conteúdo.
    3 content-box => começa a partir do conteúdo.
  22. 22O QUE FAZ A PROPRIEDADE background-clip: ?Define ate aonde a imagem deve se estender (de dentro para fora).
    1 padding-box; => começa a partir do conteúdo para o padding.
    2 boder-box; => começa a partir do conteúdo para o borda.
    3 content-box => começa a partir do conteúdo.
  23. 23SOBRE MESCLAGEM O QUE FAZ A PROPRIEDADE backgorund-blend-mode:?Mesclagem e usa "a propriedade background-blend-mode: " para misturar 2 configuração anterioras; exemplo:
    background-image: url('imagem.jpg')
    backgorund-color: blue;
    background-blend-mode: multiply; (vai misturar as configurações anterioras gerando uma imagem azul)
    o blend-mode tem vários valores. pesquisar e definir qual se ajusta ao projeto na hora do desenvolvimento.
  24. 24COMO EDITAR BORDAS DE ELEMENTOS HTML NO CSS ?Usamos a propriedade css "Border" tem muitas sub propriedades. border-color, border-image etc.
  25. 25O QUE FAZ A border-width ?Define a largura da borda.
  26. 26O QUE FAZ A border-style ?Define qual será o estilo da borda, com valores :
    - solid; (solido
    - dashed; (traços)
    - doted; (pontilhados)
    etc.
    usando mais de um valor consegue definir o estilo para cada aresta. sendo
    v1 - top
    v2 - Right
    v3 - bottom
    v4 - left
    (lembrar da ordem em sentido horário começando do topo.)
  27. 27O QUE FAZ A border-color ?Define uma cor para borda.
    (gradiente nao sao usados aqui e sim no border-image)
  28. 28O QUE FAZ A border-image?Essa propriedade tem varias subs propriedades, mas ela define características de imagem para uma borda. (ou gradiente)
  29. 29O QUE FAZ A border-radius?Define o arredondamento dos cantos da borda.
    pode ser usado + de 1 valor.
  30. 30O QUE FAZ A border-image-source?Essa sub. prop apesar do nome ser image, consegue definir uma imagem para ser colocado na borda como também definir gradiente.
    image => border-image: url('caminho da imagem')
    gradient => border-image: linear gradient (color1, color2)
  31. 31O QUE FAZ A border-image-slice?Define as fatias de uma imagem na borda, essas fatias sao dividias em 9, sendo as 1,2,3,4 as pontas do elementos (começando de cima.) e as 5,6,7,8 as arestas dos elementos começando de cima. e o 9 ? ele é o meio do elemento, sendo considerado uma imagem de fundo.
  32. 32O QUE FAZ A border-image-width?Defini a largura da imagem da borda.
  33. 33O QUE FAZ A border-image-repeat?Faz com que a imagem se repete na borda, com os valores é usado muito com o slice.:
    - repeat; repete ate preencher mas pode haver cortes.
    - strech; estica a imagem ate caber.
    - round; repete a imagem de forma que não seja cortada.
    -space; repete imagem com espaços.
  34. 34O QUE FAZ A border-image-outset?Define qual e a distancia da borda ao elemento.
  35. 35QUAIS OS TIPOS DE FONTES ?Existem os tipos:
    serif - com alongamento no texto
    sans-serif - sem alongamento.
    display - tipografia comemorativa (símbolos)
    handwriting - manuscrita
    monospace - possui mesma largura as letras.
  36. 36COMO DEFINIR FONTES NO CSS ?usar propriedade font-family: de valor pode ser um tipo especifico ou fontes entre apostrofo 'arial' .
  37. 37ONDE PODE SER ENCONTRADO MAIS FONTES PARA BAIXAR, OU IMPORTAR ?É muito usado o site google fonts.
    (fonts.google.com)
  38. 38COMO USAR O @font-face E O QUE ELE DEFINE ?O @font-face define em um bloco de comandos as confiiguração de uma fonte que ele predefine.
    Exmp.
    @font-face {
    font-family: nome da sua pref.;
    font-size: 50px
    }
    p { font-family: nome da sua pref;}
    p vai receber todas as caracteristica da font-family predefinida no @font-face.
  39. 39O QUE FAZ O COMANDO @import () ?O @import () define a fonte que vao ser importada, exemplo do site google font, la tem a opção de copia o @import da font selecionada. e colar no CSS.
    Já se quer importar pelo HTML na parte do precisa importar pelo disponível.
  40. 40O QUE A PROPRIEDADE font-size FAZ ?Define o tamanho da font.
    pode ser inserida unidades de medida como valores ou palavras chaves:
    xx-small (2x pequeno)
    x-small (1x pequeno)
    small (pequeno)
    medium (médio)
    large (largo)
    x-large (1x largo)
    xx-large (2x largo)
  41. 41O QUE A PROPIEDADE font-style FAZ ?Faz com que defina o estilo da font que queira, com valores:
    - normal;
    -italic;
    -oblique;
  42. 42O QUE FAZ A PRORIEDADE font- weight ?Define a espessura da fonte:
    bold;
    lighter;
    normal;
  43. 43O QUE FAZ A PROPIEDADE font-variant ?Define os valores normal ou smallcaps onde deixa as letras em caixa alta porem pequenas.
  44. 44O QUE FAZ A PROPIEDADE line-heigth ?Ela define a altura da linha (o espaço tanto de cima ou de baixo da linha), pode ser preenchido por unidade de medidas, ou porcentagem.
  45. 45O QUE FAZ text-transform?Define o como os caracteres vão ficar, se é maiúsculo minúsculo etc.
  46. 46CITE A PROP QUE ALINHA O TEXTO ! (EXP: A esquerda, A direita, justificado ou centralizado. )É a prop. text-align - da para definir o alinhamento do texto.
  47. 47O QUE FAZ A PROP. text-decoration ?Adiciona ou remove linhas.
    exemplo tag ancora o valor padrão dela e com sublinhado, caso use o text-decoration: none, tira o sublinhado.
    consultar qual melhor se encaixa no desenvolvimento.
  48. 48QUAL PROP. FAZ O RECUO DA PRIMEIRA LINHA ? (EXP: Em um começo de paragrafo. )É a prop. text-ident: usando valores de medidas.
    não recomendado mas é aceito valor negativo. (depende da situação)
  49. 49O QUE FAZ AS PROP. letter-spacing E word-spacing ? E QUAL SUAS DIFERENÇAS ?Essas props, define o espaçamento.
    A "letter-spacing" => define espaçamento entre os caracteres/letras.
    O "word-spacing" => define o espaçamento entre as palavras.
  50. 50O QUE FAZ A PROP. white-space?Define o comportamento do espaço em branco.
    (consultar valores de acordo com o desenvolvimento.)
  51. 51O QUE FAZ A PROP. word-wrap ?Define como as palavras serao quebradas em uma quebra de linha.
    possui 2 valor :
    normal: Este é o valor padrão. As palavras só serão quebradas em pontos de quebra permitidos (como espaços ou hífens)
    break-word: Força a quebra das palavras longas, dividindo-as em pontos que normalmente não seriam permitidos, se necessário, para evitar que o texto ultrapasse os limites do contêiner.
  52. 52O QUE FAZ A PROP. word-break ?Controla onde o texto pode ser quebrado, incluindo dentro de palavras.:
    normal: Quebra de linha ocorre apenas em espaços ou hífens (comportamento padrão).
    break-all: Quebra o texto em qualquer ponto necessário para evitar que ele ultrapasse a largura do contêiner, inclusive no meio das palavras.
    keep-all: Evita quebras dentro de palavras (em idiomas como chinês, japonês ou coreano), forçando as quebras apenas em espaços.
  53. 53O QUE FAZ A PROP. writing-mode ?Define o sentido da escrita,
    horizontal-tb => padrao sentido horizontal da esquerda para direita.
    vertical-rl ou lr => será de sentido vertical de cima para baixo da direita para esquerda (lr) ou esquerda para dirieta.(rl).
  54. 54O QUE FAZ A PROP. text-overflow: ?Define como mostrar ao usuário que um texto esta "oculto" (exp.)
    valores.
    clip => padrão.
    ellipsis; => mostra o "... " automático
    ' texto preferencia ' = definir um texto próprio.
  55. 55COMO COLOCAR SOMBRAS NOS ELEMENTOS ?para adicionar sombras usamos a prop box-shadow: nela da para ter vários valores. consultar o qual melhor se adequa no seu elemento.
  56. 56COMO FAZ PARA DEFINIR SOMBRAS NOS TEXTOS ?Usamos a prop text-shadow: assim vai identifica o texto e criar uma sombra.
  57. 57O QUE FAZ A FUNÇÃO filter: drop-shadow(valores de sombra) ?essa função aplica sombra na imagem em png do elemento, ao invés de aplicar no container, aplica sombra no contorno da imagem.
  58. 58COMO APLICAR OPACIDADE/ TRANSPARENCIA NOS ELEMENTOS ?Usando a prop. opacity: 50%; para deixar transparente, o elemento como um todo fica.
  59. 59O QUE A PROPRIEDADE OVERLOW FAZ ?Essa prop, define como vai transbordar o conteudo ou não.
    visible => fica visivel o conteúdo que transbordou.
    hidden; => esconde o conteúdo transbordado.
    Scrol => cria barra de rolagem no elemento para o conteúdo transbordado.
    auto => cria automaticamente barra de rolagem quando perceber que transbordou.
  60. 60COMO CRIAR UM RESET NO CSS PARA EVITAR FORMATAÇÃO PADRÃO DOS NAVEGADORES ?Existem arquivos de reset no css para baixar, porem um boa pratica de fazer uma formatação reset rapida é usar o seletor * universal :
    * { margin: 0;
    etc.}
  61. 61O QUE SÃO UNIDADES DE MEDIDAS ABSOLUTAS ?São unidades que o valor definido não vai mudar, sao absolutas.
    Algumas delas :
    px = pixel
    cm = centímetros
    mm = milímetros
    Q = Quatro decímetro
    in = polegadas
    pt = pontos
  62. 62O QUE É PIXEL FISICO E PIXEL LOGICO ?O pixel físico - delimita a tela do usuário.
    O Pixel logico - delimita quanto conteúdo cabe na tela.
  63. 63O QUE SÃO UNIDADES DE MEDIDAS RELATIVAS?As unidades de medidas relativas, vão ser aquelas que não terão um valor fixo, irão variar se baseando no valor de uma outra unidade.
  64. 64COMO FUNCIONA A UNIDADE DE MEDIDA PORCENTAGEM % ?A Porcentagem %, e uma unidade que se baseia no elemento pai. pegando uma fração definida.
  65. 65COMO FUNCIONA A UNIDADE DE MEDIDA EM ?em = > é uma unidade que multiplica o valor do elemento pai dele.
    se o pai tem 10px e o filho tem 2em então o filho vai ter (20px)
    o elemento pai é 10px,
    elemento filho é 2rem (20px).
    elemento neto é 2rem (40px)
    (sempre se baseia no elemento pai)
  66. 66COMO FUNCIONA A UNIDADE DE MEDIDA REM ?rem => se baseia em seu elemento primário, (html), multiplica o valor do elemento primário, ou seja elemento fonte (html).
    se o elemento fonte for igual 10px,
    o elemento pai é 2rem (20px),
    elemento filho é 2rem (20px).
    (sempre se baseia na fonte.)
  67. 67QUANDO USAR em E rem ?em => usar quando quer adequar com o elemento pai.
    rem => usar quando quer se baseia no elemento root - matriz.
  68. 68COMO FUNCIONA A UNIDADE viewport ?As unidades Viewport se baseia na tela de vizualização do conteudo, ou seja so o tamanho da tela do conteudo exibido.
    tem o vw => viewport widith -largura
    e o vh => viewport heigth - altura
    também tem como usar o vmin e o vmax.
  69. 69COMO FUNCIONA AS UNIDADES ex E ch ?ambas não são muito usadas mas funciona da seguinte forma:
    ex => Utiliza como referencia o tamanho do caractere X.
    ch => Utiliza como referencia o tamanho do caractere 0.
  70. 70COMO FUNCIONA A função calc() ?Serve para realizar cálculos no css.
    width calc (100% - 30px ).
  71. 71PROPREIDADE display ?A propriedade Display, configura o comportamento de exibição do elemento.
  72. 72O QUE FAZ A PROP. display: block; ?display: block; => define que o elemento é um bloco, é o display padrão das tags (html, div, p). seu comportamento exibe um bloco e preenche toda largura com base no elemento pai.
  73. 73O QUE FAZ A PROP. display: inline?display: inline => se comporta igual ao block porem nao preenche toda largura, colocando mais de um elemento ao lado "na linha".
    esse valor ignora width e heigth, e margins só aceita as laterais.
    tags padrão que vem com ele (span, em, b).
  74. 74O QUE FAZ A PROP. display: inline block?display: inline block =
    > semelhante ao inline porem aceita os widith e heigth e margins.
  75. 75O QUE FAZ A PROP. display: none?display: none; => esconde o elemento, e desocupa o espaço que eles está.
  76. 76DIFERENÇA ENTRE USAR display: none; E A PROP. visibility: hidden; ?display: none; => esconde o elemento e desocupa o espaço que estava.
    visibility: hidden; => esconde o elemento mas não desocupa o espaço que está.
  77. 77O QUE FAZ A PROP. display: flex?display: flex; => muito usada, deixa o comportamento flexível, e permite definir 1 dimensão para alinhar os elementos.
    exp: flex só vai permitir organizar o alinhamento ou na horizontal ou na vertical.
    (será aprofundado o conceito em outro modulo do curso especifico para isso)
  78. 78O QUE FAZ A PROP. display: grid ?display: grid; => se comporta semelhando ao flex porem permite alinhamento dos elementos em 2 dimensão.
    exp: pode ser colocado elementos na horizontal e vertical em conjunto. enquanto o flex só permite 1 de cada vez.
    (verificar demonstrativo no caderno)
  79. 79O QUE FAZ A PROP. Position ?Define a posição dos elementos. de acordo com seus valores.
  80. 80O QUE FAZ A PROP. position: static ?É a propriedade padrão dos elementos, e deixar tudo estático, o elemento via seguir o fluxo da DOM html que foi colocado.
  81. 81O QUE FAZ A PROP. position: relative?position: relative; => vem de deixar a posição do elemento relativo. diferente do static. o relative permite definir sua posição com o top: 10px /left: 10px. (vai ignorar a ordem e deixar onde foi configurado para ser.)
  82. 82O QUE FAZ A PROP. position: absolute?position: absolute; => absoluta, deixa o elemento ignorando o posicionamento da DOM, podendo assim fica em qualquer lugar.
    (os demais elemento entende que o elemento que está com position: absolute; não existe.)
  83. 83COMO DEFINIR LIMITAÇÃO NO position: absolute?Para isso usamos um elemento pai com position: relative, dessa forma o elemento absolute se limita ao bloco do pai.
  84. 84O QUE FAZ A PROP. position: fixed?position: fixed; => define que o elemento vai fica fixo na pagina, se der scrow ele vai descer junto. Usado para fazer botões flutuantes que não pode sair da tela.
  85. 85O QUE FAZ A PROP. position: sticky?position: sticky; => é uma junção automático dos valores 'relative e fixed', o elemento com sticky vai ser relative enquanto tiver na pagina, ao rolar o scrow e ele bater no topo da pagina ele passa a ser o fixed, e descer junto. para isso precisa usar a prop top=0px;.
  86. 86O QUE FAZ A PROP. z-index ?z-index: define o valor da posição da camadas de profundidade dos elementos, ou seja se tiver um elemento em cima do outro, da para definir quem vai ficar na frente de quem, o valor maior do z-index fica na frente.
  87. 87O QUE FAZ A PROP. flex-direction ?Define a direção que sera o eixo principal do display:flex;
    row => linha
    row-reverse => linha de tras pra frente.
    column => coluna.
    Column-reverse => coluna de cima pra baixo.
  88. 88O QUE FAZ A PROP. Flex-Wrap?Define o comportamento da quebra de linha ou coluna. do elemento que esta com display: flex.
    exp:
    wrap => respeita as o espaço máximo do elemento pai.
    wrap-reverse; => vai inverte os valores dos elementos.
  89. 89O QUE FAZ A PROP flex-flow ?Une o flex-direction como primeiro valor e o flex-wrap como segundo valor ficando :
    flex: row wrap;
  90. 90O QUE A PROP justify-content: faz ?Define o alinhamento do eixo principal do elemento flex em relação ao elemento pai.
    start=> começo.
    center=> centro
    end=> Final.
    etc.
  91. 91O QUE FAZ A PROP. align-itens: ?Define o alinhamento do eixo transversal do elemento flex em relação ao elemento pai.
  92. 92O QUE FAZ A PROP. gap ?Define o comportamento dos vazios que fica entre os elementos flex.
    gap: v1 = linha v2 = column
    v1sempre vai ser o eixo principal e v2 sempre o eixo transversal.
  93. 93O QUE FAZ A PROP. order ?Essa prop, define a ordem dos elementos flex. aceita valores negativos.
  94. 94O QUE FAZ A PROP. flex-grow:?Determina o espaço extra do container seja usado por esses itens.
  95. 95O QUE FAZ A PROP. flex-shrink:?Define o quanto um elemento flex vai se encurtar para caber no elemento pai.
  96. 96O QUE FAZ A PROP. flex-basis ?Define qual tamanho inicial dos elementos flex.
    antes que o espaço seja redistribuidos.
  97. 97O QUE FAZ A PROP. align-self:?Define o alinhamento de 1 elemento flex filho.
    usar a prop no próprio filho.
  98. 98O QUE É O display: grid ?Torna o Elemento em uma grade, onde pode manipular os elementos itens de forma bidimensional.
  99. 99COMO ADICIONAR LINHAS E COLUNAS NO GRID ?Para colocar linhas usamos a prop. "grid-template-rows: " e como valor colocamos a quantidade em unidade de medida a quantidade de linhas que queremos um ao lado do outro.
    exp: grid-template-rows: 1fr 1fr 1fr;
    aqui a grade tem 3 linhas.
    Já para adicionar colunas segue o mesmo conceito das linhas porem a prop é "grid-template-columns"
  100. 100COMO FUNCIONA A UNIDADE DE MEDIDA FR ?O Fr é uma unidade de medida relativa usada somente no elemento display:grid; pois ele pega o tamanho da grade e pega uma fração da grade para ocupar o elemento.
  101. 101O QUE É A FUNÇÃO repeat(x,x)? E COMO APLICAR ?O repeat(v1,v2); é uma função para repetir uma pre definiçãode linhas ou colunas, e usado como valor de uma propriedade "grid-template-rows/columns"
    exemplo quando quero criar 3 colunas do mesmo tamanho. em vez de usar grid-template-columns: 1fr 1fr 1fr;
    usamos o repeat com grid-template-columns: repeat(3, 1fr); o valor 1 indica o numero de vezes que vai repetir. já o valor 2 indica o que vai ser repetido.
  102. 102O QUE É GRID IMPLICITO E EXPLICITO ? E SUAS DIFERENÇAS.O grid implícito são as linhas e colunas criadas de forma automáticas quando excede o numero de itens que cabe no container.
    O grid explicito são as linhas e colunas definido pelo desenvolvedor.
  103. 103COMO CONFIGURAR AS LINHAS E COLUNAS CRIADA DE FORMA IMPLICITA ?Usamos o atributo "grid-auto-colmuns ou -rows: 200px;" aqui as colunas ou linhas que serão criadas de forma implícita terão 200px de largura.
  104. 104COMO DEFINIR O FLUXO DE CRIAÇÕES IMPLICITA DE LINHAS OU COLUNAS ?Usamos a propriedade "grid-auto-flow: v1" e como valor definimos o que queremos:
    valores:
    row => serão criadas linhas de forma implícita ao invés de colunas.
    column => serão criada colunas de forma implícita ao invés de linhas.
  105. 105O QUE A PROPRIEDADE grid-column-start ou grid-row-start FAZ?Define no elemento item, o começo que ele ira ficar em relação a coluna ou linha da grade, então se for grid-column-start: 2; ele começara a partir da segunda linha vertical da grade.
  106. 106O QUE A PROPRIEDADE grid-column-end ou grid-row-end FAZ?Define no elemento item, o final que ele ira ficar em relação a coluna ou linha da grade, ou seja até onde ele ira se estender, então se for grid-column-end: 5; ele se estendera até a linha vertical 5 da grade.
    no end, e possivel usar o valor "span x" exp:
    grid-column-end: span 4, interpreta como "oculpe 4 espaço" então vai ser ocupado 4 espaço da colunas.
  107. 107O QUE O grid-area FAZ ?O grid-area, une todos os grid-columns/rows-start/end. sendo grid-area: v1 v2 v3 v4.
    v1 = representa o grid-rows-start: ;
    v2 = representa o grid-columns-start: ;
    v3 = representa o grid-rows-end: ;
    v4 = representa o grid-columns-end: ;
  108. 108O QUE o grid-template-area FAZ ? E QUAL SUA RELAÇÃO COM O grid-area?O grid-template-area: cria regiões com o nome que quiser, e bom para definir as regiões do site, como header, etc.
    na pratica:
    grid-template-area: "header header header"
    "main main main"; suponhamos que o site tem 3 colunas. e cada "aspas" define a linha, então tudo que estiver na linha 1 as 3 colunas serão nomeadas como header. e na segunda linha tem 3 colunas nomeadas como main.
    para aplicar no elemento filho usaremos o grid-area: header; que assim ele ocupara todas colunas que tem header.
  109. 109EM RELAÇÃO A GRID O QUE O "gap" FAZ ?O gap: define o valor do espaço vazio entre os itens.
    tem o "row-gap: 10px" define o espaço das linhas horizontais.
    tem o "column-gap: 10px" define o espaço das linhas vertical.
    e tem o "gap: v1 v2" v1 é o row-gap e o v2 é column-gap.
  110. 110O QUE FAZ NO GRID A PROPRIEDADE justify-content: E align-contetn: ? QUAL SUAS RELAÇÕES COM place-content:?Usamos a propriedade justify-content: para alinhar os elementos do container de forma horizontal. E align-content: para alinha os elementos de forma vertical.
    já o place-content: v1 v2, e uma forma de unir os dois em uma propriedade. v1 = align-content e v2 = justify-content.
  111. 111O QUE FAZ NO GRID A PROPRIEDADE justify-items: E align-items: ? QUAL SUAS RELAÇÕES COM place-items:?Usamos a propriedade justify-items: para alinhar os elementos itens do container e seu conteudo de forma horizontal. E align-items: para alinha os elementos de forma vertical.
    já o place-items: v1 v2, e uma forma de unir os dois em uma propriedade. v1 = align-items e v2 = justify-items.
  112. 112O QUE FAZ NO GRID A PROPRIEDADE justify-self: E align-self: ? QUAL SUAS RELAÇÕES COM place-self:Usamos a propriedade justify-self: para alinhar, o item no qual esta vinculado, de forma horizontal. E align-self: para alinha os elementos de forma vertical.
    já o place-self: v1 v2, e uma forma de unir os dois em uma propriedade. v1 = align-self e v2 = justify-self.
  113. 113O QUE SÃO PSEUDO ELEMENTOS ?São Elementos HTML adicionados a DOM pelo CSS.
  114. 114COMO IDENTIFICAR UM PSEUDO ELEMENTO NO CSS ?para identificar verificar " :: " + palavra chave do pseudo elemento.
    exp: h1::before {----}
  115. 115QUAIS SÃO OS PRINCIPAIS PSEUDO ELEMENTOS APRENDIDOS ?Existe uma lista enorme de pseudo elementos mas os principais são:
    ::before => cria um elemento filho dentro do elemento pai como 1ºfilho do pai.
    ::after => cria um elemento filho dentro do pai como ultimo filho.
    ::selection => estiliza o campo que foi selecionado pelo usuário.
    Outros Revisar conforme necessidade.
  116. 116O QUE SÃO PSEUDO CLASSES ?Representa um estado especial do elemento.
  117. 117COMO IDENTIFICA UMA PSEUDO CLASSE NO CSS ?Identificamos com " : " + palavra chave.
    exp: .p:hover {-----};
  118. 118QUAIS SÃO OS PRINCIPAIS PSEUDO CLASSES ?Existem varias pseudo classes, as principais são:
    :hover => estiliza o estado de quando o usuario coloca o ponteiro do mouse sobre o elemento.
    :active => estiliza o estado de ativo de um elemento, exemplo quando o usuário clica.
    :not => pseudo elemento de negação, usado para negar a estilização para certo seletor. (exp: html:not(header,body){---})
    :has => pseudo elemento de "ter" a estilização sera aplicada em quem "TEM" alguma coisa. (exp: .test:not(:has([title])) {----}) nesse exemplo explica que a estilização sera aplicada nos elementos de classe = test que NÃO TEM o atributo title na tag.
    Demais pseudo classes consultar lista.

Information

Description
Aqui crio flash cards para treinar os conhecimento de CSS aprendido na formação Css da DIO.
Created by
Paulo Henrique
Views
1
Rating

Feedback

What is it about?

What do you think of the new look?

How do you like it?