Aqui é o menu com módulos de estudo/exercícios, coisas a lembrar, tips entre outras coisas
Estudos:
Desafios:
- emoji
- Formatações
- Abreviações
- Citações completas
- Texto marcado
- Texto grande
- Texto pequeno
- Texto deletado
- Texto inserido
- Texto sobrescrito
- Texto subescrito
- span
- Atributos dos links
- target
- "_self"
- "_blank"
- "_parent"
- "_top"
- "_new"
- rel
- "nofollow"
- 'stylesheet"
- "next e prev"
- "sponsored"
- "icon"
- "noopener noreferrer"
- Imagens dinamicas (tags)
- <picture>
- <source>
- Audios tags
- <source>
- audio atributos
- preload
- autoplay
- controls
- loop
- Videos tags
- <source>
- video atributos
- poster
- controls
- Modelo de caixas
- Propriedades(css)
- height
- width
- border
- padding
- outline
- margin
- box-level (tags ex: div, h1)
- inline-level (tags ex: span, a)
- Grouping Tags
- header
- nav
- main
- footer
- section
- article
- aside
- Tabelas
- cabeçalho de tabela ou de maior importancia
- linha de tabela
- dado de tabela
- alinhamentos
- corpo da tabelas
- colgroup
- thead
- tbody
- tfoot
- caption
- expansões de valores tabelados
- colspan
- rowspan
- scope
- col
- row
- colgroup
- rowgroup
- iframe
- scrolling
- srcdoc
- sandbox
- Formulário
- autocomplete
- action
- method
- label
- <fieldset>
- <legend>
- <select>
- <datalist>
- option
- optgroup
- output
- <input:text>
- <input:submit>
- <input:passward>
- <input:reset>
- <input:number>
- <input:mounth>
- <input:date>
- <input:time>
- <input:email>
- <input:tel>
- <input:radio>
- <input:checkbox>
- <input:color>
- <input:range>
- <input:file>
- type
- name
- id
- value
- required
- minlength
- maxlength
- size
- placeholder
- autocomplete
- min
- max
- step
- value
target pode utilizar:
rel pode utilizar:
download necessita o link de diretório para o arquivo que quer
disponibilizar para download.
Seguido do atributo type
É possivel transformar um box-level em um inline-level e vice-versa, utilizando a Propriedade: display
Por padrão a tag tabela vem border-collapse: separate;
para aproximar as bordas
tempos que usar a propriedade e valor border-collapse: collapse;
Tags:
pode ser:
Caso a tabela esteja esteja causando uma barra de rolagem, é possivel coloca-la dentro de uma div com a propriedade(CSS) de overflow-x, para que a barra de rolagem fique apenas na tabela e a div se ajuste ao tamanho do dispositivo
É possivel abrir link dos próprio site dentro de iframes, basta utilizar o atributo name na tag <iframe> e o name utilizado serve de target na tag <a>
Utilizando a propriedade background-size: cover
na pagina do iframe é
possivel tornar o conteudo ou imagem ajustável ao tamanho do iframe
Atributos:
Tags
OBS:Porém para datalist ser utilizável necessita ter o <input:text> com o atributo 'list=' com o nome da id da datalist
tags para select e datalist
input:
OBS:É possivel utilizar o atributo pattern na tag '<input:tel>' para determinar o que necessita ser escrito
OBS:Para criar alternancia nas escolhas é necessário ambos os inputs terem o mesmo 'name', porem 'id' diferentes para o label ser utilizável
é possivel utilizar os atributos de numeros, como step, min, max e value pra determinar o valor inicial
input atributos
atributos normalmente utilizadas em input de valores
Propriedade: Define como estilizar um elemento HTML
Valor: Escolhe uma aparência para a propriedade
Declaração: Especifica quais propriedades do elemento serão estilizadas
Regra: É composta por um seletor e um bloco de declarações.
- Media
- all
- screen
- and ()
- border
- transition-durantion
- box-sizing
- display
- none
- inline-block(bloco)
- block
- flex
- background
- size
- position
- repeat
- image(url)
- image(linear-gradient)
- background-attachment
- scroll
- fixed
- Detalhes sobre fontes
- font-weight
- font-style
- text-decoration
- text-shadow
- text-indent
- text-align: justify
- shorthand de fontes
- Fontes externas
- font-family
- src
- format
- Seletores personalizados
- id
- class
- div
- Pseudo-classes
- hover
- visited
- active
- nth-child
- Pseudo-elemento
- before
- after
- Filho
- Váriaveis em css
- :root{}
- --
- *{}
- Responsividade para sites
- Largura ideal
Media query = media type = media feature
Ao usar o atributo 'media' na tag <link:css> é possivel utilizar tanto media type quanto media feature no mesmo atributo
Tipos
Podendo ser:
Pode ter:
Shorthand: color > imagem > position > repeat > attachment
Podendo ser:
A diferença entre id e class: é recomendado utilizar id somente em um unico elemento, e caso precise ser mais de um elemento utilize class.
Utiliza a propriedade :
Podendo ser:
Utiliza a propriedade ::
Podendo ser:
O ideal é utilizar a tag *{} e configurar o margin e padding para 0px para a partir dai começar a configurar os espaçamentos.
tag.tag$*- tag 1>tag 2>tag 3>
Ctrl+Shift+p
Ctrl + space
- Centralização vertical (video, imagem ou div)
- Parallax effect
- Cabeçalho fixo em tabelas
- fast senquencia numérica
Esse código é utilizado para multiplicar Tags.
É possivel multicamadas de tags com uma linha de código
Para demarcar e utilizando emmet(envolver com abreviação) podemos adicionar um uma tag ou código a algo que já foi posto.
É possivel selecionar o diretório com este comando e para selecionar pastas
anteriores é possivel usar o ../
É necessária duas divs, uma dentro da outra, a div externa com a propriedade e valor de position:
relative;
e a div interna tendo a propriedade e valor position: absolute; top:;left:;
e transform: translate(top%, left%);
a propriedade transform será utilizada para mudar a
posição da imagem ou video relativo ao ponto de ancoragem
Basta utilizar o background-attachment:fixed
e dependendo o
background-size: cover
para
ajustar a imagem ao tamanho da dela
table com position: relative
e thead com position: stinky; top:0;
.
Assim como podemos utilizar o *(numero)
para multiplicar é possivel
adicionar $ as tags para uma sequencia numérica