O vídeo está pronto para ser reproduzido automaticamente (o Google Chrome precisa ser silenciado para resolver o problema de reprodução automática)

Mostrar controles de reprodução ao usuário

Definir largura do insersor

Definir altura do jogador

Se deve continuar a reproduzir o vídeo após a reprodução, em loop

Especifica se o vídeo deve ser pré-carregado (se a reprodução automática estiver disponível, esse atributo será ignorado)

automático (pré-carregar vídeo)

nenhum (o vídeo não deve ser carregado)

endereço de URL do vídeo

Carregar imagem da tela de espera

Jogue silenciosamente

Se este atributo estiver presente, o áudio será reproduzido assim que estiver pronto.

Se presente, exibe um controle, como um botão de reprodução, para o usuário.

Se presente, a reprodução é retomada sempre que o áudio termina.

O URL do áudio a ser reproduzido.

Especifica o alinhamento da tabela em relação aos elementos circundantes.

Especifica se a célula da tabela possui borda. O padrão é "", o que significa que não há borda.

Especifica o espaço entre a borda da célula e seu conteúdo, o padrão é 1 pixel

Especifica o espaço entre as células, o padrão é 2 pixels.

Especifica a largura da tabela.

Ação

método

nome

estilo de lista: nenhum;

tipo

Outras propriedades

tamanho

múltiplo

selecionado

um: link

a:visitado

a: pairar

a: ativo

:focus seletor de pseudoclasse é usado para selecionar o elemento do formulário em foco

entrada: foco { cor de fundo: amarelo; }

Insira conteúdo na frente dentro do elemento

Insira conteúdo após o elemento

antes e depois de criar um elemento, mas é um elemento embutido

Este elemento recém-criado não pode ser encontrado na árvore do documento, então o chamamos de pseudoelemento

Sintaxe: elemento:antes

antes e depois devem ter atributos de conteúdo

before cria elementos antes do conteúdo do elemento pai e after insere elementos após o conteúdo do elemento pai.

Os seletores de pseudoelementos são iguais aos seletores de rótulos, com peso de 1

Selecione elementos E com atributo att

Seleciona elementos E com atributo att cujo valor é igual a val

Corresponde elementos E com um atributo att cujo valor começa com val

Corresponde elementos E com um atributo att cujo valor termina em val

Corresponde aos elementos E com um atributo att e val em seu valor

Corresponde ao primeiro elemento filho E no elemento pai

Corresponde ao último elemento E no elemento pai

Corresponde ao enésimo elemento filho E no elemento pai

n pode ser um número, palavra-chave, fórmula (2n) ou (2n 1), etc.

n pode ser a palavra-chave: número par par, número ímpar ímpar

O enésimo filho classifica e seleciona todos os filhos no elemento pai (o número de sequência é fixo). Primeiro encontre o enésimo filho e depois veja se ele corresponde a E.

especifica o primeiro do tipo E

Especifica o último do tipo E

especifica o enésimo item do tipo E

enésimo tipo classifica e seleciona elementos filhos especificados dentro do elemento pai. Primeiro combine E e, em seguida, encontre o enésimo filho com base em E

cor de fundo: o valor da cor padrão é transparente (transparente)

imagem de fundo: nenhum l url (ur1)

repetição em segundo plano: repetir

posição de fundo: x y;

anexo de fundo: rolagem fixa

Uma borda superior pode ser definida para o elemento pai

O preenchimento superior pode ser definido para elementos pais

Você pode adicionar overflow:hidden ao elemento pai.

Obrigatório. A posição da sombra horizontal. Valores negativos são permitidos.

Obrigatório. A posição da sombra vertical. Valores negativos são permitidos.

Opcional. distância difusa

Opcional. O tamanho da sombra.

Opcional. A cor da sombra. Veja os valores de cores CSS

Opcional. Alterar sombra externa (início) para sombra interna

Obrigatório. A posição da sombra horizontal. Valores negativos são permitidos.

Obrigatório. A posição da sombra vertical. Valores negativos são permitidos.

Opcional. distância difusa

Opcional. A cor da sombra. Veja os valores de cores CSS

Os elementos não flutuam (padrão)

Elemento flutua para a esquerda

Elemento flutua para a direita

Caso 1

Caso 2

Caso 3

Caso 4

display/position/float/lear /visibility/overflow (recomenda-se escrever display primeiro, afinal, está relacionado ao modo)

largura/altura/margem/preenchimento/borda/fundo

cor / fonte / decoração de texto / alinhamento de texto / alinhamento vertical / espaço em branco / quebra de palavra

conteúdo /cursor / raio da borda / sombra da caixa / sombra do texto/ fundo:gradiente linear...

O posicionamento estático é o método de posicionamento padrão de elementos e não tem significado de posicionamento.

O posicionamento estático coloca a posição de acordo com as características de fluxo padrão, não possui deslocamento de borda

Posicionamento relativo significa que quando um elemento se move, ele é relativo à sua posição original (tipo narcisista)

Características do posicionamento relativo: (deve lembrar)

Posicionamento absoluto significa que quando um elemento se move, ele é relativo ao seu elemento ancestral (tipo pin dad)

Características do posicionamento absoluto: (deve lembrar)

O posicionamento fixo é onde um elemento é fixado na área visível do navegador. Principais cenários de uso: A posição do elemento não mudará quando a página do navegador for rolada.

Características do posicionamento fixo: (deve lembrar)

Dicas para posicionamento fixo: Fixo no lado direito do centro da página

O posicionamento fixo pode ser pensado como um híbrido de posicionamento relativo e posicionamento fixo. pegajoso pegajoso

Recursos de posicionamento fixo:

Ao usar o layout de posicionamento, as caixas podem se sobrepor. Neste momento, você pode usar o índice z para controlar a ordem das caixas (eixo Z)

1. O valor pode ser um número inteiro positivo, um número inteiro negativo ou 0. O padrão é automático. Quanto maior o valor, mais próxima a caixa está.

2. Caso os valores dos atributos sejam iguais, siga a ordem de escrita, com o último vindo primeiro.

3. Nenhuma unidade pode ser adicionada após o número.

4. Somente caixas posicionadas possuem atributos de índice z.

Uma caixa com posicionamento absoluto não pode ser centralizada horizontalmente através de margin:0auto, mas pode ser centralizada horizontal e verticalmente através dos seguintes métodos de cálculo.

1. Adicione posicionamento absoluto ou fixo aos elementos embutidos e você pode definir diretamente a altura e a largura.

2. Adicione posicionamento absoluto ou fixo aos elementos de nível de bloco. Se nenhuma largura ou altura for fornecida, o tamanho padrão será o tamanho do conteúdo.

Elementos flutuantes e elementos absolutamente posicionados (posicionados fixamente) não desencadearão o problema de mesclagem de margens.

1. Os elementos flutuantes são diferentes. Eles apenas suprimirão a caixa de fluxo padrão abaixo dele, mas não suprimirão o texto (imagem) na caixa de fluxo padrão abaixo.

2. O posicionamento absoluto (posicionamento fixo) suprimirá todo o conteúdo do fluxo padrão abaixo

3. A razão pela qual a flutuação não suprime o texto é porque o objetivo da flutuação é originalmente criar um efeito de quebra automática de texto. O texto envolverá o elemento flutuante

exibir: nenhum; ocultar objeto

display:block ; Além de converter em elementos de nível de bloco, também significa exibir elementos.

Depois que display oculta o elemento, ele não ocupa mais sua posição original.

visibilidade: o elemento visível;

visibilidade: elemento oculto oculto;

Depois que a visibilidade oculta o elemento, ele continua ocupando sua posição original.

visível

escondido

rolagem

auto

Padrão de novato

mão minúscula

mover

texto

proibir

1. Adicione vertical-align:middlel topl bottom, etc. (promovido para uso)

2. Converta a imagem em um elemento de nível de bloco display: block;

/*1. Primeiro força o texto a ser exibido em uma linha*/ (quebra de linha automática normal padrão) white-space: nowrap;

/*2. A parte excedente está oculta*/overflow: hidden;

/*3. Substitua o excesso de texto por reticências*/text-overflow: ellipsis;

/*.Ocultar a parte excedente*/overflow: hidden;

/*.Substitua o excesso de texto por reticências*/text-overflow: ellipsis;

/*Exibição do modelo da caixa de expansão elástica*/display: -webkit-box;

/*Limite o número de linhas de texto exibidas em um elemento de bloco */webkit-line-clamp: 2;

/*Definir ou recuperar a organização dos elementos filhos do objeto flex box */webkit-box-orient: vertical;

1 Mova a margem de cada caixa para a esquerda -1px apenas para pressionar a borda da caixa

2. Quando o mouse passar por uma determinada caixa, basta aumentar o nível da caixa atual (se não houver posicionamento, adicionar posicionamento relativo (manter a posição), se houver posicionamento, adicionar índice z)

Reprodução automática

controles

largura

altura

laço

pré-carregamento

fonte

poster

silenciado

Reprodução automática

controles

laço

fonte

Restringir a entrada do usuário ao tipo de e-mail

Limitar a entrada do usuário ao tipo de URL

Restringir a entrada do usuário ao tipo de data

Restringir a entrada do usuário ao tipo hora

Restringir a entrada do usuário ao tipo mês

Limitar a entrada do usuário ao tipo de semana

Restringir a entrada do usuário ao tipo numérico

número de telefone

Barra de pesquisa

Gere um formulário de seleção de cores

O formulário possui este atributo para indicar que seu conteúdo não pode ficar vazio e é obrigatório.

As informações de prompt do formulário não serão exibidas se houver um valor padrão.

Atributo de foco automático, a página focará automaticamente no formulário especificado após o carregamento.

Quando o usuário começar a digitar em um campo, o navegador deverá exibir opções de preenchimento do campo com base nos valores digitados anteriormente.

Ele está ativado por padrão, como autocomplete = "on" e autocomplete = "off" precisa ser colocado no formulário, e o atributo name é adicionado ao mesmo tempo e enviado com sucesso.

Você pode selecionar vários arquivos para envio

Selecione elementos E com atributo att

Seleciona elementos E com atributo att cujo valor é igual a val

Corresponde elementos E com um atributo att cujo valor começa com val

Corresponde elementos E com um atributo att cujo valor termina em val

Corresponde aos elementos E com um atributo att e val em seu valor

Corresponde ao primeiro elemento filho E no elemento pai

Corresponde ao último elemento E no elemento pai

Corresponde ao enésimo elemento filho E no elemento pai

n pode ser um número, palavra-chave, fórmula (2n) ou (2n 1), etc.

n pode ser a palavra-chave: número par par, número ímpar ímpar

O enésimo filho classifica e seleciona todos os filhos no elemento pai (o número de sequência é fixo). Primeiro encontre o enésimo filho e depois veja se ele corresponde a E.

especifica o primeiro do tipo E

Especifica o último do tipo E

especifica o enésimo item do tipo E

enésimo tipo classifica e seleciona elementos filhos especificados dentro do elemento pai. Primeiro combine E e, em seguida, encontre o enésimo filho com base em E

Insira conteúdo na frente dentro do elemento

Insira conteúdo após o elemento

antes e depois de criar um elemento, mas é um elemento embutido

Este elemento recém-criado não pode ser encontrado na árvore do documento, então o chamamos de pseudoelemento

Sintaxe: elemento:antes

antes e depois devem ter atributos de conteúdo

before cria elementos antes do conteúdo do elemento pai e after insere elementos após o conteúdo do elemento pai.

Os seletores de pseudoelementos são iguais aos seletores de rótulos, com peso de 1

A propriedade CSS filter aplica efeitos gráficos como desfoque ou mudança de cor aos elementos

filter: function(); por exemplo: filter: blur(5px); quanto maior o valor, mais desfocado ele fica.

calc0 Esta função CSS permite realizar alguns cálculos ao declarar valores de propriedades CSS.

largura: calc(100% -80px);

Você pode usar -*/ dentro dos colchetes para realizar cálculos

As transições são um dos recursos revolucionários do CSS3, permitindo-nos adicionar efeitos aos elementos à medida que eles fazem a transição de um estilo para outro sem usar animações em Flash ou JavaScript. Animação de transição: É uma transição gradual de um estado para outro, o que pode fazer com que nossa página tenha uma aparência melhor e mais dinâmica. Embora não seja compatível com navegadores de versões anteriores (versões abaixo de e9), não afetará o layout da página. Agora costumamos usá-lo junto com :hover

transição: a propriedade a ser transicionada leva tempo e a curva de movimento começa quando

transform: translate(x,y); ou escreva-os separadamente

Definir movimento na transformação 2D, movendo elementos ao longo do eixo Y

A maior vantagem da tradução: não afetará a posição de outros elementos

A unidade percentual na tradução é relativa ao seu próprio elemento traduzir: (50%,50%)

Não tem efeito em tags in-line

transformar: girar (grau)

girar contém graus e a unidade é graus. Por exemplo, rdate(45deg.

) Quando o ângulo é positivo, é no sentido horário; quando é negativo, é anti-horário.

O ponto central de rotação padrão é o ponto central do elemento

origem da transformação: xy;

Observe que os seguintes parâmetros x e y são separados por espaços.

O ponto central padrão da conversão xy é o ponto central do elemento (50% 50%)

Você também pode definir pixels ou posicionar substantivos para x y (canto superior inferior esquerdo centro direito)

transformar:escala(x,y);

Observe que x e y são separados por vírgulas

transform:scale(1,1): A largura e a altura são duplicadas, em comparação com nenhuma ampliação.

transform:scale(2,2): largura e altura são ampliadas em 2 vezes

transform:scale(2): Escreva apenas um parâmetro, o segundo parâmetro é igual ao primeiro parâmetro, equivalente a scale(2,2)

transformar:escala(0,5,0,5): reduzir

A maior vantagem do dimensionamento sacle: você pode definir o dimensionamento do ponto central da transformação. O dimensionamento padrão é baseado no ponto central e não afeta outras caixas.

1. Use várias transformações ao mesmo tempo, o formato é: transform:translate0rotate(scale0.etc.

2. Sua ordem afeta o efeito da conversão. (Girar primeiro mudará a direção do eixo de coordenadas)

3. Quando tivermos deslocamento e outros atributos ao mesmo tempo, lembre-se de colocar o deslocamento primeiro

Uso básico de animação

Defina animações com quadros-chave (semelhante à definição de seletores de classe)

Propriedades comuns de animação

Propriedades abreviadas de animação

5.4 Detalhes da curva de velocidade

transform:translate3d(x,y,z): onde x, y e Z referem-se respectivamente à distância na direção do eixo a ser movido.

Produza efeitos estereoscópicos visuais próximos, grandes e muito pequenos em um plano 2D, mas o efeito é apenas bidimensional.

Se você deseja produzir um efeito 3D em uma página web, você precisa de perspectiva (entendida como um objeto 3D projetado em um plano 2D)

Simule a posição visual humana, que pode ser usada para organizar um olho para ver

A perspectiva também é chamada de distância de visão: a distância de visão é a distância do olho humano à tela

Quanto mais próximo do ponto visual, maior será a imagem no plano do computador, e quanto mais distante, menor será a imagem.

A unidade de perspectiva são pixels

Perspectiva escrita na caixa pai do elemento observado

A rotação 3D significa que o elemento pode ser girado ao longo do eixo x, eixo y, eixo z ou um eixo personalizado em um plano tridimensional.

transform:rotateX(45deg): Gira 45 graus ao longo da direção positiva do eixo x

transform:rotateY(45deg): Gira 45deg ao longo da direção positiva do eixo y

transform:rotateZ(45deg): Gira 45deg ao longo da direção positiva do eixo Z

transform:rotate3d(x,y,z,deg): Gira graus para o ângulo ao longo do eixo personalizado (basta entender)

Controla se o elemento filho ativa o ambiente tridimensional. .

Estilo de transformação: o subelemento plano não ativa o espaço 3D por padrão

estilo de transformação: elementos filhos preserve-3d permitem espaço tridimensional;

O código é gravado no pai, mas afeta a caixa filho

Este atributo é muito importante e será usado posteriormente.