Wondershare EdrawMind
Galleria mappe mentale CSSHTML
- 8
CSSHTML
La base comune di html e css, CSS sono fogli di stile a cascata, html è linguaggio di markup ipertestuale.
Modificato alle 2023-08-22 15:01:32
- Consigliato per te
- Profilo
CSSHTML
Concetti CSS
Fogli di stile
Fogli di stile
Sintassi CSS
Commento
/* */
Selettore {proprietà:valore della proprietà;proprietà:valore della proprietà;proprietà:valore della proprietà;...proprietà:valore della proprietà;}
Selettori CSS comuni
di base
Etichetta
nome dell'etichetta{}
ID
Caratteristiche
unicità
#scatola{}
classe
Caratteristiche
uno a molti
molti a uno
.rosso{}
Pseudoclasse
: passa il mouse
:collegamento
:attivo
:visitato
carta jolly
*
complesso
gruppo
Selettore 1, Selettore 2,....{}
Includere
Selettore 1 Selettore 2 ...{}
Specificare
Selettore 1 Selettore 2...{}
Proprietà CSS comuni
testo
dimensione del font
colore
altezza della linea
allineamento del testo
peso del carattere
grassetto
normale
accendino
più audace
stile carattere
normale
corsivo
famiglia di font
variante del carattere
normale
maiuscoletto
indentatura del testo
decorazione del testo
sottolineare
sopralineato
linea passante
nessuno
trasformazione del testo
maiuscolo
minuscolo
capitalizzare
overflow del testo
spaziatura del carattere
spaziatura delle parole
modello a scatola
margine
Supporta il metodo a quattro valori
Supporta la definizione di direzione singola
Supporta valori negativi
Le immagini di sfondo non sono supportate
Unisci verticalmente adiacenti
Overflow della casella principale: nascosto
sottocasella mobile
confine
Caratteristiche
Supporta l'immagine di sfondo
Supporta la direzione singola
Il metodo a quattro valori non è supportato
cuneo di confine
triangolo
bordo: 100px solido trasparente;
colore bordo superiore: rosso;
altezza:0;
larghezza:0;
Attributi
larghezza del bordo
stile del bordo
solido
linea continua
tratteggiato
linea tratteggiata
punteggiato
linea tratteggiata
Doppio
Doppia linea
colore del bordo
imbottitura
Supporta il metodo a quattro valori
Supporta la direzione singola
Supporta l'immagine di sfondo
I valori negativi non sono supportati
La larghezza e l'altezza corrispondenti devono essere ridotte (la scatola strana non ne ha bisogno)
contenuto
larghezza
altezza
galleggiante
galleggiante
Sinistra
Giusto
nessuno
chiaro
Sinistra
Giusto
nessuno
Entrambi
Posizionalo su una scatola su cui non vuoi che venga influenzata dal galleggiamento
posizione
relativamente
parente
Caratteristiche
Nessuna occupazione di spazio off-label
posizione rispetto a se stessi
Può essere utilizzato per piccoli movimenti di posizione
Oggetti di riferimento che possono essere utilizzati per il posizionamento assoluto
assoluto
assoluto
Caratteristiche
Off-label, nessuno spazio occupato
Posizionamento rispetto al blocco contenitore
Non scrivere le coordinate e lasciarle al loro posto
Il figlio è completamente diverso dal padre
fisso
fisso
Caratteristiche
Posizionamento relativo della finestra
Off-label, nessuno spazio occupato
Non scrivere le coordinate e lasciarle al loro posto
viscosità
appiccicoso
Caratteristiche
Deve essere utilizzato in combinazione con le coordinate
Equivalente a una combinazione di posizionamento relativo e posizionamento fisso
Nessuna occupazione di spazio off-label
statico
statico
Caratteristiche
Nessuna occupazione di spazio off-label
Gli attributi delle coordinate non sono supportati
Gli attributi gerarchici non sono supportati
tipo di elemento
Classificazione
livello di blocco
linea esclusiva
Larghezza e altezza configurabili
L'altezza della riga può supportare l'altezza
Dopo il galleggiamento, verrà disposto orizzontalmente
in linea
visualizzare in una riga
Impossibile impostare larghezza e altezza
L'altezza della riga non può supportare l'altezza
È possibile impostare la larghezza e l'altezza dopo aver fluttuato
il rientro del testo non è supportato
Gli attributi relativi al modello scatola non sono supportati e non sono validi nella direzione verticale.
Convertire
Schermo
bloccare
blocco inline
in linea
nessuno
elemento nascosto
voce-elenco
tipo di elenco
cella della tabella
tipo di cellula
applicazione
Navigazione a larghezza variabile centrata orizzontalmente
ul{text-align:center}
li {display:blocco in linea;}
Riga singola centrata, più righe a sinistra
.all {text-align:center;}
.all p {display:inline-block;text-align-left};
lacuna dell'immagine
img{visualizzazione:blocco;
img{allineamento-verticale:alto/medio/basso;}
.all{dimensione carattere:0;}
Centrare l'immagine verticalmente
metodo 1
.all {altezza:400px;altezzalinea:400px;}
img{allineamento verticale:medio;}
Metodo 2
img{allineamento verticale:medio;}
span{vertical-align:middle;larghezza:0;altezza:100%;display:inline-block}
Tabella correlata
spaziatura dei confini
spazio sulla lunetta
crollo dei confini
fusione dei confini
disposizione dei tavoli
Disposizione tabella fissa
valore
fisso
Disposizione tabella fissa
auto
Disposizione automatica della tabella
celle vuote
Celle senza contenuto visualizzato
valore
nascondere
Nascondi celle senza contenuto
spettacolo
Nessuna visualizzazione del cellulare per quel giorno
Relativo allo sfondo
colore di sfondo
immagine di sfondo
url();
ripetizione dello sfondo
ripetere
nessuna ripetizione
ripeti-x
ripeti-y
posizione dello sfondo
Orizzontale e verticale
px
%
in alto a destra in basso a sinistra
allegato in background
scorrere
relativa casella
fisso
relativa finestra
Elenco correlato
stile elenco: nessuno
css3
selettore
di base
Etichetta
ID
classe
*
Gerarchia
Discendenti
(spazio)
prole
>
fratelli vicini
universale
~
Pseudoclasse
Pseudoclasse dinamica
: passa il mouse
:collegamento
:attivo
:visitato
:messa a fuoco
Pseudoclasse strutturale
serie per bambini
:nesimo-bambino()
:Primogenito
:ultimo bambino
:figlio unico
:ennesimo-ultimo-bambino()
Serie Figlio
:nesimo-di-tipo()
:primo di tipo
:ultimo del tipo
:solo-di-tipo
:ennesimo-ultimo-tipo()
:radice
:vuoto
:non()
negare la pseudo-classe
:non
Pseudoclasse del linguaggio
:lang
Pseudo-classe bersaglio
:bersaglio
Deve essere utilizzato insieme ai collegamenti di ancoraggio
mettere a bersaglio
Quello con l'ID è l'obiettivo
Pseudoclasse dello stato dell'elemento UI
:Disabilitato
:abilitato
:sola lettura
:leggere scrivere
:controllato
Attributi
[attr]
[attr=val]
[attr^=val]
[attr$=val]
[attr*=val]
[attr~=val]
[attr|=val]
Pseudoelementi (in linea)
::dopo {contenuto:""}
::prima del {contenuto:""}
::prima linea
::prima lettera
::selezione
Pesi
*
0,1
Etichetta
1
classe
10
Pseudoclasse
10
Attributi
10
ID
100
in linea
1000
!importante
10000
Attributi
raggio dell'angolo
raggio di confine
ombra della scatola
scatola-ombra
inserto
Ombra interiore
A destra
giù
grado di ambiguità
Grado di espansione
colore dell'ombra
ombra del testo
testo-ombra
A destra
giù
grado di ambiguità
deformazione
trasformare(2D)
tradurre()
ruotare()
scala()
storto()
trasformare(3D)
Definire la profondità di campo
prospettiva
Definire il tipo di deformazione
stile trasformazione: preserva-3d;
Deformazione 3D
tradurre3d
rotax
a rotazione
ruotarez
scala3d
Definire il punto iniziale della deformazione
origine della trasformazione
transizione
transizione
Pendenza
gradiente lineare
sfondo:gradiente lineare(0 gradi, #000, #000)
gradiente radiale
sfondo:gradiente-radiale(raggio nella posizione, #000, #000)
Raggio: maggiore/minore
Posizione: x/y
Piastrellatura a gradiente lineare
sfondo: gradiente lineare ripetuto (0 gradi, #000 5px, #000 10px)
Piastrellatura a gradiente radiale
sfondo:gradiente-radiale ripetuto (raggio nella posizione, #000 5px, #000 10px)
animazione
dichiarazione di animazione
@nome fotogrammi chiave{}
chiamata di animazione
animazione: nome .5s 0 lineari infiniti alertnate per le parole
Disposizione
Disposizione della Flexbox
contenitore
display:flessibile
direzione flessibile
colonna
riga
inversione di colonna
riga inversa
avvolgimento flessibile
avvolgere
senza avvolgimento
wrap-reverse
giustificare il contenuto
avvio flessibile
estremità flessibile
centro
spazio in mezzo
spazio intorno
spazio uniformemente
allineare-elementi
stirata
avvio flessibile
estremità flessibile
centro
linea di base
alegn-content
stirata
avvio flessibile
estremità flessibile
centro
spazio in mezzo
spazio intorno
spazio uniformemente
progetto
flettere
termoretraibile
crescita flessibile
flexbasis
allinearsi
stirata
avvio flessibile
estremità flessibile
centro
linea di base
ordine
layout della griglia
contenitore
visualizzazione: griglia
colonne-modello-griglia
200px 200px 200px
20% 50% 30%
ripeti (3.200 px)
ripeti (riempimento automatico, 20%)
1fr 1fr 1fr
1fr 1fr 1minmax(200px,1fr)
righe-modello-griglia
200px 200px 200px
20% 50% 30%
ripeti (3.200 px)
ripeti (riempimento automatico, 20%)
gap della griglia
riga-gap
gap di colonna
aree del modello di griglia
giustificare il contenuto
allineare-contenuto
giustificare gli elementi
allineare-elementi
progetto
area della griglia
colonna-griglia
inizio-colonna-griglia
fine-colonna-griglia
riga della griglia
griglia-riga-inizio
fine riga della griglia
layout a più colonne
colonne
colonne:5 200px;
conteggio delle colonne
larghezza della colonna
gap di colonna
regola-colonna
campata di colonna
riempimento di colonne
Domande dei media
<link mate="schermo e (larghezza minima:960px) e (larghezza massima:1200px)">
@schermo multimediale e (larghezza minima: 960px) e (larghezza massima: 1200px)
modello a scatola
dimensionamento della scatola
scatola di confine
strano modello di scatola
Caratteristiche
bordo di riempimento entro la larghezza dell'altezza
casella di contenuto
modello a scatola standard
Caratteristiche
l'altezza della larghezza non include il bordo di riempimento
compatibile
contenuto
Tridente
Geco
Webkit
Battito di ciglia
Presto
prefisso
-moz-
-SM-
-webkit-
-o-
il termine
miglioramento progressivo
Prima basso e poi alto, concentrandosi sulla realizzazione delle funzioni della versione bassa e aggiungendo effetti interessanti alla versione alta
Downgrade grazioso
Prima alta e poi bassa, concentrandosi sugli effetti delle funzioni della versione alta e sulla necessità di gestire la compatibilità delle versioni basse
altro
Icona del carattere
http://www.iconfont.cn
collegamento di ancoraggio
<a href="#one"></a>
Salto
<a name="one"></a>
<div id="uno"></div>
Metodo di centratura
posizione
metodo 1
scatola genitore
posizione:relativa;
sottocasella
posizione:assoluta;
superiore:50%;
sinistra:50%;
margine sinistro: metà larghezza;
margine superiore: metà altezza;
margine: automatico
Metodo 2
scatola genitore
posizione:relativa;
sottocasella
posizione:assoluta;
in alto:0;
in basso:0;
sinistra:0;
destra:0;
margine: automatico
Metodo 3
scatola genitore
posizione:relativa;
sottocasella
posizione:assoluta;
top:calc(50% - metà superiore);
sinistra:calc(50% - metà della larghezza);
Metodo 4
scatola genitore
posizione:relativa;
sottocasella
posizione:assoluta;
superiore:50%;
sinistra:50%;
tradurre(-50%,-50%);
Flexbox
metodo 1
scatola genitore
display:flessibile;
sottocasella
margine:automatico;
Metodo 2
scatola genitore
display flessibile;
giustifica-contenuto:centro;
allinea-elementi:centro;
Metodo 3
scatola genitore
display:flessibile;
giustifica-contenuto:centro;
sottocasella
allinearsi:centro
griglia
metodo 1
scatola genitore
visualizzazione:griglia;
giustifica-contenuto:centro;
allineare-contenuto:centro;
Metodo 2
scatola genitore
visualizzazione:griglia;
sottocasella
margine:automatico;
blocco intra-carriera
metodo 1
scatola genitore
altezza della linea: alta;
allineamento testo:centro;
scatola genitore
display: blocco in linea;
allineamento verticale: medio;
altezza della linea: alta;
Metodo 2
scatola genitore
allineamento testo:centro;
sottocasella
display: blocco in linea;
allineamento verticale: medio;
Pseudo-elemento della casella padre::after
contenuto:"";
display: blocco in linea;
allineamento verticale: medio;
larghezza:0;
altezza: 100%;
Metodo 3
scatola genitore
allineamento testo:centro;
allineamento verticale: medio;
display:cella-tabella;
sottocasella
display: blocco in linea;
Centrare verticalmente il testo su più righe
scatola genitore
allineamento verticale: medio;
display:cella-tabella;
segmento di codice
Ellissi
larghezza fissa
larghezza
Nessuna interruzione di riga
spazio bianco:nowrap;
overflow nascosto
overflow: nascosto
Ellissi
testo-overflow:ellissi
Disposizione mobile
vista
Viewport, il valore predefinito per dispositivi mobili è 980
dpr
Rapporto pixel del dispositivo
Disposizione
Disposizione percentuale
Disposizione in scala
unità
em
Un multiplo di se stesso o della dimensione del carattere della casella padre
rem
Multiplo della dimensione del carattere root (html).
vw
L'1% della larghezza del viewport
vh
L'1% dell'altezza del viewport
vmin
lato corto dell'uno per cento
vmax
L'uno per cento del lato lungo
BFC
Proprietà attivabili
galleggiante
Sinistra
Giusto
traboccare
nascosto
scorrere
auto
posizione
assoluto
fisso
Schermo
blocco inline
cella della tabella
didascalia
flettere
applicazione
problema della penetrazione del margine superiore
problema del collasso in altezza
Larghezza e altezza adattive
Contenuti ad adattamento della larghezza
galleggiante
posizione
blocco inline
Contenuti altamente adattivi
altamente crollato
Il riquadro figlio è mobile e l'altezza del riquadro genitore è 0.
risolvere
altezza fissa
vantaggio
Semplice
discordanza
Incapace di adattarsi
Aggiungi overflow:hidden alla casella principale
vantaggio
Adattabile
discordanza
overflow nascosto
Aggiungi una casella vuota sotto il float e imposta clear:both;
vantaggio
Può essere adattivo
Nascondi senza trabocco
discordanza
È necessario caricare un'altra scatola
Metodo universale clear float, aggiungi::after{content:"";display:block;clear:both;} alla casella principale
vantaggio
Adattabile
problema di overflow nascosto
Non è necessario caricare una scatola aggiuntiva
finestra adattiva in altezza
html,corpo{altezza:100%;}
HTML5
Caratteristiche
La struttura di base è più semplice
rilassamento grammaticale
Semantica delle etichette
Anche senza stili è possibile presentare una struttura chiara
Facile per il SEO
Facilita il lavoro di squadra e la modifica post-manutenzione del codice
accessibilità
caratteristiche future
Aggiungi tag semantici
grande semantica
intestazione
piè di pagina
principale
nav
sezione
articolo
a parte
piccola semantica
figura
figcaption
segno
tela
video
Attributi
controlli
riproduzione automatica
disattivato
ciclo continuo
src
Formati supportati
mp4
ogg
webm
larghezza
altezza
Audio
Attributi
controlli
riproduzione automatica
disattivato
ciclo continuo
src
Formati supportati
mp3
ogg
wav
dettagli
riepilogo
fonte
forma intelligente
Aggiungi nuovi attributi
necessario
Campi richiesti
messa a fuoco automatica
messa a fuoco automatica
segnaposto
Segnaposto
completamento automatico
Se abilitare la registrazione della cronologia
valore
SU
spento
modello
Verifica regolare
Aggiungi un nuovo controllo
tel
URL
numero
min
massimo
fare un passo
allineare
min
massimo
fare un passo
colore
ricerca
data
mese
settimana
tempo
datatime-locale
tag comuni html
Classe di testo
titolo
h1
Generalmente utilizzato per posizionare i loghi
h2
Generalmente utilizzato per inserire i titoli delle colonne
h3
h4
h5
h6
paragrafo
P
Classe di modifica
Grassetto
B
forte
Semantica forte
inclinare
io
em
Semantica forte
Sottolineare
tu
ins
Semantica forte
barrato
S
del
Semantica forte
apice e pedice
sup
apice
sub
pedice
Classe di tavola
Etichetta
tavolo
tr
td
th
Intestazione di colonna
didascalia
titolo della tabella
raggruppamento di righe
testa
il corpo
tfoot
raggruppamento di colonne
colgroup
Attributi
regole
Linea di divisione del gruppo
valore
Tutto
col
righe
nessuno
gruppi
larghezza
altezza
confine
bgcolor
allineare
allineamento orizzontale
valore
Sinistra
Giusto
centro
valign
allineamento verticale
valore
superiore
mezzo
metter il fondo a
linea di base
colspan
estensione delle righe
spaziatura delle celle
imbottitura cellulare
Classe del modulo
campi del modulo
modulo
metodo
Metodo di invio
valore
Ottenere
non sicuro
Condivisibile
Dati di processo inferiori a 2 KB
Influenzato dalla lunghezza della barra degli indirizzi
efficiente
Il processo di acquisizione dei dati
inviare
Il processo di trasferimento dei dati
Nessun limite di dimensione
relativamente sicuro
bassa efficienza
Non condivisibile
azione
indirizzo di destinazione
valore
(indirizzo saltato)
nome
bersaglio
Metodo aperto
valore
_vuoto
apri in una nuova finestra
_se stesso
La finestra corrente è aperta
controllo del modulo (tipo)
testo
testo
parola d'ordine
parola d'ordine
Scelta unica
Radio
Ogni gruppo deve avere lo stesso valore dell'attributo nome
Scelta multipla
casella di controllo
cadere in picchiata
seleziona>opzione
campo di testo
textarea
pulsante
Immagine
pulsante
invia
Ripristina
file
Proprietà correlate
nome
nome
valore
valore
multiplo
Scelta multipla
controllato
Selezionato per impostazione predefinita
selezionato
Menu a discesa selezionato per impostazione predefinita
sola lettura
sola lettura
Disabilitato
disattivare
Classe elenco
ordinato
vecchio>li
Attributi
tipo
valore
1
UN
UN
io
IO
inizio
disturbo
ul>li
Attributi
tipo
valore
cerchio
disco
piazza
nessuno
personalizzare
dl>dt dd
dipendente dal percorso
immagine
imm
Attributi
scr
titolo
alt
larghezza
altezza
Collegamento ipertestuale
UN
Attributi
href
titolo
bersaglio
sentiero
relativamente
Stesso livello
./
Scrivi direttamente
livello superiore
../
livello successivo
cartella
documento
assoluto
A partire dalla lettera dell'unità
D:\......
utilizzati dalle pagine web
https://img….
la differenza
relativamente
C'è un riferimento
Impossibile incrociare le lettere dell'unità
assoluto
nessun riferimento
Quelli locali non possono estendersi sui computer (a meno che i percorsi sui computer non siano gli stessi)
altro
fratello
rottura della linea di forza
ora
linea orizzontale
div
arco
entità caratteriale
>
<
©
®
grammatica
doppia etichetta
<nome tag attributo="valore attributo"></nome tag>
etichetta unica
<tag nome attributo="valore attributo" />
etichetta, marchio, elemento
struttura base dell'html
Intestazione della dichiarazione del documento
Di' al browser che il mio tipo di documento è html
Codifica dei caratteri
set di caratteri="utf-8"
titolo della pagina
titolo
concetto di html
Hyper Text Markup Language
Hyper Text Markup Language