Il video è pronto per essere riprodotto automaticamente (Google Chrome deve aggiungere l'audio per risolvere il problema della riproduzione automatica)

Mostra i controlli di riproduzione all'utente

Imposta la larghezza dell'inseritore

Imposta l'altezza del giocatore

Se continuare a riprodurre il video dopo la riproduzione, in loop

Specifica se precaricare il video (se è disponibile la riproduzione automatica, questo attributo viene ignorato)

automatico (precarica video)

nessuno (il video non deve essere caricato)

indirizzo URL del video

Carica l'immagine della schermata di attesa

Gioca in silenzio

Se questo attributo è presente, l'audio viene riprodotto non appena è pronto.

Se presente, mostra all'utente un controllo, ad esempio un pulsante di riproduzione.

Se presente, la riproduzione riprende ogni volta che termina l'audio.

L'URL dell'audio da riprodurre.

Specifica l'allineamento della tabella rispetto agli elementi circostanti.

Specifica se la cella della tabella ha un bordo. Il valore predefinito è "", il che significa che non c'è bordo.

Specifica lo spazio tra il bordo della cella e il suo contenuto, il valore predefinito è 1 pixel

Specifica lo spazio tra le celle, il valore predefinito è 2 pixel.

Specifica la larghezza della tabella.

azione

metodo

nome

stile elenco: nessuno;

tipo

Altre proprietà

misurare

multiplo

selezionato

un collegamento

a:visitato

a: passa il mouse

a:attivo

:focus Il selettore pseudo-classe viene utilizzato per selezionare l'elemento del modulo focalizzato

input: concentrati { colore di sfondo:giallo; }

Inserisci il contenuto in primo piano all'interno dell'elemento

Inserisci il contenuto dopo l'elemento

prima e dopo creano un elemento, ma è un elemento in linea

Questo elemento appena creato non può essere trovato nell'albero del documento, quindi lo chiamiamo pseudo elemento

Sintassi: elemento:prima

prima e dopo devono avere attributi di contenuto

before crea elementi prima del contenuto dell'elemento genitore e after inserisce elementi dopo il contenuto dell'elemento genitore.

I selettori di pseudo-elementi sono uguali ai selettori di etichette, con un peso pari a 1

Seleziona gli elementi E con l'attributo att

Seleziona gli elementi E con attributo att il cui valore è uguale a val

Corrisponde agli elementi E con un attributo att il cui valore inizia con val

Corrisponde agli elementi E con un attributo att il cui valore termina con val

Corrisponde agli elementi E con un attributo att e val nel loro valore

Corrisponde al primo elemento figlio E nell'elemento genitore

Corrisponde all'ultimo elemento E nell'elemento genitore

Corrisponde all'ennesimo elemento figlio E nell'elemento genitore

n può essere un numero, una parola chiave, una formula (2n) o (2n 1), ecc.

n può essere la parola chiave: numero pari pari, numero dispari dispari

nth-child ordina e seleziona tutti i figli nell'elemento genitore (il numero di sequenza è fisso). Prima trova l'n-esimo figlio, quindi verifica se corrisponde a E.

specifica il primo del tipo E

Specifica l'ultimo del tipo E

specifica l'ennesimo elemento di tipo E

nth-of-type ordina e seleziona gli elementi figlio specificati all'interno dell'elemento genitore. Prima abbina E, quindi trova l'ennesimo figlio basato su E

background-color: il valore del colore; l'impostazione predefinita è trasparente (trasparente)

immagine di sfondo: nessuna l url (ur1)

ripetizione in background: ripetizione

posizione dello sfondo: x y;

background-attachment: scorrimento corretto

È possibile definire un bordo superiore per l'elemento genitore

Il riempimento superiore può essere definito per gli elementi principali

Puoi aggiungere overflow:hidden all'elemento genitore.

Necessario. La posizione dell'ombra orizzontale. Sono ammessi valori negativi.

Necessario. La posizione dell'ombra verticale. Sono ammessi valori negativi.

Opzionale. distanza sfocata

Opzionale. La dimensione dell'ombra.

Opzionale. Il colore dell'ombra. Vedi i valori dei colori CSS

Opzionale. Cambia l'ombra esterna (inizio) in ombra interna

Necessario. La posizione dell'ombra orizzontale. Sono ammessi valori negativi.

Necessario. La posizione dell'ombra verticale. Sono ammessi valori negativi.

Opzionale. distanza sfocata

Opzionale. Il colore dell'ombra. Vedi i valori dei colori CSS

Gli elementi non sono mobili (impostazione predefinita)

L'elemento fluttua a sinistra

L'elemento fluttua a destra

Caso 1

Caso 2

Caso 3

Caso 4

display/position/float/lear /visibility/overflow (si consiglia di scrivere prima display, dopotutto è correlato alla modalità)

larghezza/altezza/margine/imbottitura/bordo/sfondo

colore/carattere/decorazione-testo/allineamento-testo/allineamento-verticale/spazio-bianco/interruzione-parola

contenuto /cursore / raggio-bordo / ombra-riquadro / ombra-testo/ sfondo:gradiente-lineare...

Il posizionamento statico è il metodo di posizionamento predefinito degli elementi e non ha alcun significato di posizionamento.

Il posizionamento statico posiziona la posizione in base alle caratteristiche di flusso standard, senza spostamento del bordo

Posizionamento relativo significa che quando un elemento si muove, è relativo alla sua posizione originale (tipo narcisistico)

Caratteristiche del posizionamento relativo: (da ricordare)

Il posizionamento assoluto significa che quando un elemento si muove, è relativo al suo elemento antenato (tipo pin dad)

Caratteristiche del posizionamento assoluto: (da ricordare)

Il posizionamento fisso è il punto in cui un elemento è fisso nell'area visualizzabile del browser. Principali scenari di utilizzo: La posizione dell'elemento non cambierà quando si scorre la pagina del browser.

Caratteristiche del posizionamento fisso: (da ricordare)

Suggerimenti per il posizionamento fisso: fisso sul lato destro del centro della pagina

Il posizionamento adesivo può essere pensato come un ibrido tra posizionamento relativo e posizionamento fisso. Appiccicoso appiccicoso

Caratteristiche del posizionamento adesivo:

Quando si utilizza il layout di posizionamento, le caselle potrebbero sovrapporsi. A questo punto, puoi utilizzare z-index per controllare l'ordine delle caselle (asse Z)

1. Il valore può essere un numero intero positivo, un numero intero negativo o 0. L'impostazione predefinita è auto Maggiore è il valore, più vicina è la casella.

2. Se i valori degli attributi sono uguali, seguire l'ordine di scrittura, con l'ultimo che viene per primo.

3. Non è possibile aggiungere alcuna unità dopo il numero.

4. Solo le caselle posizionate hanno attributi z-index.

Una casella con posizionamento assoluto non può essere centrata orizzontalmente tramite margin:0auto, ma può essere centrata orizzontalmente e verticalmente tramite i seguenti metodi di calcolo.

1. Aggiungi il posizionamento assoluto o fisso agli elementi in linea e puoi impostare direttamente l'altezza e la larghezza.

2. Aggiungi un posizionamento assoluto o fisso agli elementi a livello di blocco Se non viene fornita alcuna larghezza o altezza, la dimensione predefinita è la dimensione del contenuto.

Gli elementi mobili e gli elementi posizionati in modo assoluto (posizionati in modo fisso) non attiveranno il problema della fusione dei margini.

1. Gli elementi mobili sono diversi. Sopprimeranno solo la casella di flusso standard sottostante, ma non sopprimeranno il testo (immagine) nella casella di flusso standard sottostante.

2. Il posizionamento assoluto (posizionamento fisso) sopprimerà tutto il contenuto del flusso standard sottostante

3. Il motivo per cui il movimento non sopprime il testo è perché lo scopo del movimento è originariamente quello di creare un effetto di disposizione del testo. Il testo si avvolgerà attorno all'elemento flottato

display:none ;nascondi oggetto

display:block ; Oltre a convertire in elementi a livello di blocco, significa anche visualizzare elementi.

Dopo che la visualizzazione nasconde l'elemento, questo non occupa più la sua posizione originale.

visibilità: visibile; l'elemento è visibile

visibilità:nascosto;elemento nascosto

Dopo che la visibilità nasconde l'elemento, continua ad occupare la sua posizione originale.

visibile

nascosto

scorrere

auto

Impostazione predefinita del principiante

piccola mano

mossa

testo

vietare

1. Aggiungi vertical-align:middlel topl bottom, ecc. all'immagine. (promosso per l'uso)

2. Convertire l'immagine in una visualizzazione di elementi a livello di blocco: block;

/*1. Per prima cosa forza la visualizzazione del testo su una riga*/ (normale ritorno a capo automatico predefinito) white-space: nowrap;

/*2 La parte in eccesso è nascosta*/overflow: hidden;

/*3 Sostituisci il testo in eccesso con i puntini di sospensione*/text-overflow: ellipsis;

/*.Nascondi la parte in eccesso*/overflow: hidden;

/*.Sostituisci il testo in eccesso con i puntini di sospensione*/text-overflow: ellipsis;

/*Visualizzazione modello scatola di espansione elastica*/display: -webkit-box;

/*Limita il numero di righe di testo visualizzate in un elemento di blocco */webkit-line-clamp: 2;

/*Imposta o recupera la disposizione degli elementi figli dell'oggetto flex box */webkit-box-orient: vertical;

1 Sposta il margine di ciascuna casella a sinistra -1px solo per premere il bordo della casella

2. Quando il mouse passa attraverso un determinato riquadro, aumenta semplicemente il livello del riquadro corrente (se non c'è posizionamento, aggiungi posizionamento relativo (mantieni la posizione), se c'è posizionamento, aggiungi z-index)

riproduzione automatica

controlli

larghezza

altezza

ciclo continuo

precarico

src

manifesto

disattivato

riproduzione automatica

controlli

ciclo continuo

src

Limita l'input dell'utente al tipo di email

Limita l'input dell'utente al tipo di URL

Limita l'input dell'utente al tipo di data

Limita l'input dell'utente affinché sia ​​di tipo time

Limita l'input dell'utente al tipo mensile

Limita l'input dell'utente al tipo settimana

Limita l'input dell'utente a essere di tipo numerico

numero di telefono

barra di ricerca

Genera un modulo di selezione del colore

Il modulo ha questo attributo per indicare che il suo contenuto non può essere vuoto ed è obbligatorio.

Le informazioni sulla richiesta del modulo non verranno visualizzate se è presente un valore predefinito.

Attributo di messa a fuoco automatica, la pagina si concentrerà automaticamente sul modulo specificato dopo il caricamento.

Quando l'utente inizia a digitare in un campo, il browser dovrebbe visualizzare le opzioni per compilare il campo in base ai valori digitati in precedenza.

È attivato per impostazione predefinita, ad esempio autocomplete="on" e autocomplete="off" devono essere inseriti nel modulo e l'attributo name viene aggiunto contemporaneamente e viene inviato correttamente.

È possibile selezionare più file da inviare

Seleziona gli elementi E con l'attributo att

Seleziona gli elementi E con attributo att il cui valore è uguale a val

Corrisponde agli elementi E con un attributo att il cui valore inizia con val

Corrisponde agli elementi E con un attributo att il cui valore termina con val

Corrisponde agli elementi E con un attributo att e val nel loro valore

Corrisponde al primo elemento figlio E nell'elemento genitore

Corrisponde all'ultimo elemento E nell'elemento genitore

Corrisponde all'ennesimo elemento figlio E nell'elemento genitore

n può essere un numero, una parola chiave, una formula (2n) o (2n 1), ecc.

n può essere la parola chiave: numero pari pari, numero dispari dispari

nth-child ordina e seleziona tutti i figli nell'elemento genitore (il numero di sequenza è fisso). Prima trova l'n-esimo figlio, quindi verifica se corrisponde a E.

specifica il primo del tipo E

Specifica l'ultimo del tipo E

specifica l'ennesimo elemento di tipo E

nth-of-type ordina e seleziona gli elementi figlio specificati all'interno dell'elemento genitore. Prima abbina E, quindi trova l'ennesimo figlio basato su E

Inserisci il contenuto in primo piano all'interno dell'elemento

Inserisci il contenuto dopo l'elemento

prima e dopo creano un elemento, ma è un elemento in linea

Questo elemento appena creato non può essere trovato nell'albero del documento, quindi lo chiamiamo pseudo elemento

Sintassi: elemento:prima

prima e dopo devono avere attributi di contenuto

before crea elementi prima del contenuto dell'elemento genitore e after inserisce elementi dopo il contenuto dell'elemento genitore.

I selettori di pseudo-elementi sono uguali ai selettori di etichette, con un peso pari a 1

La proprietà CSS filter applica effetti grafici come sfocatura o spostamento del colore agli elementi

filter: function(); ad esempio: filter: blur(5px); maggiore è il valore, più sfocato è.

calc0 Questa funzione CSS consente di eseguire alcuni calcoli quando si dichiarano i valori delle proprietà CSS.

larghezza: calc(100% -80px);

È possibile utilizzare -*/ all'interno delle parentesi per eseguire calcoli

Le transizioni sono una delle funzionalità rivoluzionarie dei CSS3, poiché ci consentono di aggiungere effetti agli elementi mentre passano da uno stile all'altro senza utilizzare animazioni Flash o JavaScript. Animazione di transizione: è una transizione graduale da uno stato all'altro, che può rendere la nostra pagina migliore e più dinamica. Sebbene non sia supportata dai browser di versione inferiore (versioni inferiori a e9), non influirà sul layout della pagina. Ora lo usiamo spesso insieme a :hover

transizione: la proprietà da modificare richiede tempo e la curva di movimento inizia quando

trasforma: traduci(x,y); o scrivili separatamente

Definisci il movimento nella trasformazione 2D, spostando gli elementi lungo l'asse Y

Il più grande vantaggio di Translate: non influenzerà la posizione degli altri elementi

L'unità percentuale in Translate è relativa al proprio elemento Translate: (50%,50%)

Non ha alcun effetto sui tag in linea

trasformazione: rotazione (gradi)

ruotare contiene gradi e l'unità è deg. Ad esempio, rdate(45deg

) Quando l'angolo è positivo, è in senso orario; quando è negativo, è in senso antiorario.

Il punto centrale di rotazione predefinito è il punto centrale dell'elemento

origine della trasformazione: x y;

Si noti che i seguenti parametri xey sono separati da spazi.

Il punto centrale predefinito della conversione xy è il punto centrale dell'elemento (50% 50%)

Puoi anche impostare pixel o posizionare i nomi per x y (in alto in basso a sinistra a destra al centro)

trasformazione:scala(x,y);

Tieni presente che xey sono separati da virgole

trasforma: scala (1,1): la larghezza e l'altezza sono raddoppiate, rispetto a nessun ingrandimento.

trasforma:scala(2,2): sia la larghezza che l'altezza vengono ingrandite di 2 volte

trasforma:scale(2): Scrivi solo un parametro, il secondo parametro è uguale al primo parametro, equivalente a scale(2,2)

trasformazione: scala (0,5,0,5): riduzione

Il più grande vantaggio del ridimensionamento del sacle: è possibile impostare il ridimensionamento del punto centrale della trasformazione. Il ridimensionamento predefinito si basa sul punto centrale e non influisce sugli altri riquadri.

1. Utilizza più trasformazioni contemporaneamente, il formato è: trasforma:translate0rotate(scale0.etc.

2. Il suo ordine incide sull'effetto della conversione. (Ruotando prima si cambierà la direzione dell'asse delle coordinate)

3. Quando abbiamo lo spostamento e altri attributi contemporaneamente, ricorda di mettere prima lo spostamento

Utilizzo base dell'animazione

Definisci animazioni con fotogrammi chiave (simile alla definizione di selettori di classe)

Proprietà di animazione comuni

Proprietà abbreviate dell'animazione

5.4 Dettagli della curva di velocità

transform:translate3d(x,y,z): dove x, y e Z si riferiscono rispettivamente alla distanza nella direzione dell'asse da spostare.

Produci effetti visivi stereoscopici vicini, grandi e lontani piccoli su un piano 2D, ma l'effetto è solo bidimensionale.

Se vuoi produrre un effetto 3D su una pagina web, hai bisogno della prospettiva (intesa come oggetto 3D proiettato su un piano 2D)

Simula la posizione visiva umana, che può essere utilizzata per disporre un occhio per vedere

La prospettiva è anche chiamata distanza di visione: la distanza di visione è la distanza dall'occhio umano allo schermo

Quanto più vicino al punto visivo, tanto più grande sarà l'immagine sul piano del computer, mentre quanto più lontano, tanto più piccola sarà l'immagine.

L'unità di prospettiva è il pixel

Prospettiva scritta sulla casella principale dell'elemento osservato

La rotazione 3D significa che l'elemento può essere ruotato lungo l'asse x, l'asse y, l'asse z o un asse personalizzato in un piano tridimensionale.

trasforma:rotateX(45deg): ruota di 45 gradi lungo la direzione positiva dell'asse x

trasforma: ruota Y (45 gradi): ruota di 45 gradi lungo la direzione positiva dell'asse y

transform:rotateZ(45deg): ruota di 45 gradi lungo la direzione positiva dell'asse Z

trasforma:rotate3d(x,y,z,deg): ruota gradi sull'angolo lungo l'asse personalizzato (basta capirlo)

Controlla se l'elemento figlio attiva l'ambiente tridimensionale. .

Stile trasformazione: il sottoelemento piatto non abilita lo spazio 3D per impostazione predefinita

stile trasformazione: preserva-3d; gli elementi figlio abilitano lo spazio tridimensionale

Il codice viene scritto nel genitore, ma influenza la casella figlia

Questo attributo è molto importante e verrà utilizzato in seguito.