Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Introduzione ai CSS

I CSS lo sonoFogli di stile(L'abbreviazione di Cascading Style Sheets) viene utilizzata per controllare con precisione lo stile delle pagine HTML per visualizzare meglio le informazioni grafiche o produrre un'esperienza interattiva interessante e amichevole.

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

Il suffisso del file CSS è .css

Commento

/* 注释的内容 */
1

Tre modi per aggiungere stili

1. stile Stili in linea

<span style="color: red">红色文字</span>
1

2. Aggiungi tramite il selettore di stile CSS

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140226382

3. Eredità

Gli elementi all'interno del contenitore otterranno gli stili aggiunti al contenitore

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• Gli attributi dello stile del testo sono tutti ereditati. Questi attributi includono: colore, che inizia con testo-, che inizia con linea e che inizia con carattere-.
• Le proprietà di casella, posizionamento e layout non possono essere ereditate.

Chi decide lo stile finale?

Poiché esistono molte origini di stili sugli elementi, inclusi stili predefiniti del browser, stili in linea di stile, stili aggiunti da vari selettori CSS e stili ereditati da elementi principali, lo stile finale sarà quello con la priorità più alta tra molti stili Determinati da stile.

Priorità dello stile CSS

Italiano: https://blog.csdn.net/weixin_41192489/article/details/139720467

Basi essenziali dello stile

Unità di lunghezza CSS

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140236423

Funzioni CSS

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140318834

modello a scatola

Italiano: https://blog.csdn.net/weixin_41192489/article/details/102411612

• Sia l'altezza che l'altezza della riga possono aprire la scatola, ma l'immagine di sfondo non può aprire la scatola.

Cose da notare sugli elementi in linea

• Gli elementi in linea possono visualizzare solo i margini interni ed esterni all'inizio e alla fine e dovrebbero essere evitati il ​​più possibile, quindi non impostare i margini interni ed esterni per gli elementi in linea.

• Dopo che gli elementi in linea sono stati spostati, la visualizzazione dei bordi verrà impilata e disordinata, quindi non impostare i bordi per gli elementi in linea!

• Quando è necessario aggiungere bordi/margini interni ed esterni a un elemento in linea, convertilo in un riquadro in linea

  display：inline-block
  1

Quali stili possono essere aggiunti?

Stile universale

Gli stili possono essere aggiunti a quasi tutti gli elementi html.

Larghezza altezza

• larghezza: l'impostazione predefinita è la larghezza del contenuto (non la larghezza della casella)
• altezza: l'altezza predefinita è l'altezza del contenuto (non l'altezza della scatola)

Attraverso lo stile seguente, è possibile modificare il modello box standard predefinito dell'elemento nel modello box IE.

box-sizing:border-box;
1

in questo momento

• Larghezza: la larghezza della casella (bordo sinistro + imbottitura sinistra + larghezza del contenuto + imbottitura destra + bordo destro)
• altezza: altezza della scatola (bordo superiore + imbottitura superiore + altezza del contenuto + imbottitura inferiore + bordo inferiore)

Imbottitura

• I valori negativi non sono supportati
• Il valore percentuale, sia orizzontale che verticale, viene calcolato rispetto alla larghezza.

padding: 10px;
1

Imbottitura: 10px per la parte superiore, inferiore, sinistra e destra

padding:10px 5px;
1

L'imbottitura superiore e inferiore sono 10px

L'imbottitura destra e sinistra sono 5px

padding:10px 5px 15px;
1

L'imbottitura superiore è di 10 px

L'imbottitura destra e sinistra sono 5px

L'imbottitura inferiore è di 15 px

padding:10px 5px 15px 20px;
1

L'imbottitura superiore è di 10 px

L'imbottitura destra è 5px

L'imbottitura inferiore è di 15 px

L'imbottitura sinistra è 20px

confine di confine

Anche gli stili correlati lo sono

• bordo-raggio-bordo arrotondato
• border-fill bordo-immagine
• contorno

Guarda i detagli Italiano: https://blog.csdn.net/weixin_41192489/article/details/140325106

margine

Italiano: Italiano: https://blog.csdn.net/weixin_41192489/article/details/115140348

overflowoverflow

• visibile [Valore predefinito] Tutto il contenuto in eccesso verrà visualizzato senza tagliare o aggiungere barre di scorrimento.
• nascosto: nasconde la barra di scorrimento e non visualizza il contenuto che supera le dimensioni dell'oggetto, ma è comunque possibile scorrerlo.
• auto: Se il contenuto non supera, la barra di scorrimento non verrà visualizzata; se il contenuto supera, verrà visualizzata la barra di scorrimento;
• scroll: nella piattaforma Windows la barra di scorrimento viene sempre visualizzata indipendentemente dal fatto che il contenuto superi il limite. Sulla piattaforma Mac è uguale all'attributo auto.

I contenitori con valori di overflow auto e scroll sono contenitori a rotazione (contenitori con barre di scorrimento). Non è consigliabile utilizzare il riempimento per lo spazio bianco. A causa di problemi di compatibilità, è possibile utilizzare solo il margine inferiore degli elementi figlio l'imbottitura inferiore del contenitore di scorrimento è bianca.

trasparenzaopacità

Il valore dell'attributo varia da 0,0 (completamente trasparente) a 1,0 (completamente opaco). Se supera il limite dell'intervallo compreso tra 0 e 1, il valore calcolato finale è il valore limite.

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

sfondo di fondo

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140301618

shadowbox-ombra

L'ombra non modificherà la dimensione della scatola e non influenzerà la disposizione degli elementi fratelli. Puoi anche impostare più ombre sui bordi per ottenere effetti migliori e migliorare l'effetto tridimensionale.

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• Offset orizzontale: valore positivo a destra, valore negativo a sinistra.
• Offset verticale: valori positivi verso il basso e valori negativi verso l'alto.
• Livello di sfocatura: non può essere negativo
• Ombra interna/esterna: il riquadro è l'ombra interna, non scritta come ombra esterna

box-shadow: 15px 21px 48px -2px #666;
1

Ombre comunemente usate

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

Vedi più utilizzo
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

• [Pratico] Sovrascrivere il colore di sfondo del riempimento automatico della casella di input

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• [Pratico] Modifica i colori dei pulsanti in batch

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【Combattimento reale】Guida per principianti sull'effetto di mascheramento

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

clip percorso clip

Italiano: https://blog.csdn.net/weixin_41192489/article/details/121341551

• [Pratico] clip-path implementa l'animazione di transizione simile a PPT
  https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation

trasformaretrasformare

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140314866

zoom Zoom

Il browser Firefox non lo supporta. Può avere i seguenti valori di attributo.

• Valore percentuale.zoom:50%, indicando il restringimento alla metà della dimensione originale.
• valore numerico.zoom:0.5, indicando il restringimento alla metà della dimensione originale.
• normalParole chiave.zoom:normalEquivalente azoom:1, è il valore predefinito.
• resetParole chiave.zoom:reset , indicando che quando l'utente preme Ctrl e − o Ctrl e + per ingrandire il documento, gli elementi non verranno ridotti o ingranditi di conseguenza. Tuttavia, questa parola chiave ha scarsa compatibilità ed è supportata solo dal browser Safari.

Confronto tra le funzioni zoom e scale()

• zoomLa coordinata centrale del ridimensionamento dell'attributo è relativa all'angolo superiore sinistro dell'elemento e non può essere modificata.transformtrasformandoscale()La coordinata centrale predefinita del ridimensionamento della funzione è il punto centrale dell'elemento.
• Il ridimensionamento dell'attributo zoom modificherà lo spazio dimensionale occupato dall'elemento in tempo reale e attiverà il ridisegno e il ricalcolo. Pertanto, le prestazioni del ridimensionamento dell'attributo zoom sono peggiori di quelle della funzione scale().
• L'applicazione dell'attributo zoom a un elemento non creerà un contesto a cascata, non influenzerà il posizionamento degli elementi fissi e l'overflow che nasconde gli elementi posizionati in modo assoluto da parte dell'attributo overflow, né modificherà il blocco contenitore degli elementi posizionati in modo assoluto.

maschera maschera

Italiano: https://blog.csdn.net/weixin_41192489/article/details/121158821

gradiente

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140316024

Stili unici per diverse tipologie di elementi

testo

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140264311

Collegamento ipertestuale

Stili di pseudo-classe: devono essere scritti nel seguente ordine fisso:

• :link "Link": prima che venga cliccato il collegamento ipertestuale - si applica a tutti i collegamenti ipertestuali con attributi href (esclusi gli ancoraggi) - può essere omesso, abbreviato nel tag a
• :visited "Visitato": dopo che il collegamento è stato visitato - può essere omesso, abbreviato nel tag a
• :hover "hover": quando il mouse è posizionato sull'etichetta
• :active "Attiva": Quando il mouse fa clic sull'etichetta ma non la lascia andare.

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

immagine

Filtro filtro immagine

Italiano: https://www.runoob.com/cssref/css3-pr-filter.html

icona

• Implementa icone reattive con peso del carattere
  Quando la dimensione del carattere è maggiore, il carattere dell'icona è più dettagliato, mentre quando la dimensione del carattere è più piccola, il carattere dell'icona è più semplice.
  Italiano: https://demo.cssworld.cn/8/5-1.php

• Unione di icone css: tecnologia ClipPath Sprites
  Italiano: https://blog.csdn.net/weixin_41192489/article/details/121242735

foglio

Evidenzia le righe al passaggio del mouse

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

righe alternate di colori

I colori alternati tra le righe di dati possono ridurre l’affaticamento della lettura da parte dell’utente.

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

scorrere

cursore del mouse

cursore

Colore del cursore-colore del cursore
Imposta il colore del cursore di inserimento della casella di input (non ancora supportato dai browser IE ed Edge)

input {
    caret-color: red;
}
1
2
3

Mostra e nascondi gli stili correlati

Quando non ci sono stili successivi che possano nascondere gli elementi, gli elementi vengono visualizzati (alcuni non sono visibili solo perché la cascata è coperta):

• display: none [Utilizzato comunemente] Gli elementi nascosti, non occupano spazio, caricheranno le risorse e il DOM è accessibile (l'aggiunta di hidden al tag html cambierà la visualizzazione del tag in none)
• visibility: hidden Gli elementi nascosti occupano la posizione, le risorse verranno caricate e il DOM sarà accessibile
  • Se l'elemento genitore imposta visibilità: nascosto, anche gli elementi figli saranno invisibili (ereditarietà)
  • Se visibilità: visibile è impostato su un elemento figlio, l'elemento figlio verrà visualizzato nuovamente.
• opacity: 0 L'elemento è invisibile, prende posizione e può essere cliccato o selezionato.
• clip: rect(0 0 0 0) L'elemento è invisibile, non può essere cliccato, non occupa spazio, ma è accessibile da tastiera
• Valori z-index negativi nascondono l'elemento è invisibile e non può essere cliccato, ma occupa spazio ed è accessibile dalla tastiera.

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

Stili dipendenti dalla posizione

La posizione di un elemento sulla pagina è determinata da molti stili, tra cui posizionamento, visualizzazione, mobile, margine, ecc.

Quando posizione, visualizzazione e float esistono contemporaneamente, l'effetto di visualizzazione finale dell'elemento sarà determinato secondo la logica descritta nel collegamento seguente.

Italiano: https://blog.csdn.net/weixin_41192489/article/details/119009647

posizione di posizione

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140242430

layoutdisplay

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140250775

margine

Italiano: Italiano: https://blog.csdn.net/weixin_41192489/article/details/115140348

Allineare

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140255028

Z-index a cascata

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140297366

Stili legati all'interazione

Comportamento di scorrimento fluido: fluido

Italiano: https://blog.csdn.net/weixin_41192489/article/details/121365831

ridimensionamento allungato

Italiano: https://blog.csdn.net/weixin_41192489/article/details/121396794

Stili relativi all'adattamento del dispositivo

Domande dei media @media

Italiano: https://blog.csdn.net/weixin_41192489/article/details/126028971

[Pratiche] Soluzioni di adattamento dei terminali mobili (tre tipi)

Italiano: https://blog.csdn.net/weixin_41192489/article/details/120999355

Stili CSS personalizzati (variabili CSS/proprietà personalizzate)

Italiano: https://blog.csdn.net/weixin_41192489/article/details/140317369

Migliorare l'efficienza della scrittura CSS

Preprocessore CSS

Il preprocessore CSS è un linguaggio di programmazione specializzato utilizzato per aggiungere alcune funzionalità di programmazione ai CSS (i CSS in sé non sono un linguaggio di programmazione). Non è necessario considerare i problemi di compatibilità del browser perché il preprocessore CSS alla fine compila e genera stili CSS standard. Puoi utilizzare competenze di programmazione di base come variabili, semplici giudizi logici e funzioni nel preprocessore CSS.

I preprocessori CSS tradizionali includono Sass (Scss), Less e Stylus.
(SASS è stato rinominato SCSS dalla versione 3.0)

• Tutorial pratico SCSS
  Italiano: https://blog.csdn.net/weixin_41192489/article/details/134313564

struttura CSS

• Tutorial pratico UnoCSS
  Italiano: https://blog.csdn.net/weixin_41192489/article/details/140034188

Convenzioni di codifica CSS

• Ripristina gli stili predefiniti del browser
• Cerca di evitare di usare lo stile
• Le unità possono essere omesse solo se il valore dell'attributo è zero
• Il valore è solitamente un numero pari, ad esempio 6px anziché 5px (soprattutto l'altezza della riga e la dimensione del carattere, in modo da garantire che la loro differenza sia divisibile per 2, in modo che il carattere sia centrato nella riga)
• Il nome della classe dovrebbe essere semantico, in modo da poter identificare a colpo d'occhio su quale elemento agisce il nome della classe/l'effetto di stile ottenuto dal nome della classe.

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Stili di testo consigliati

• Il contenitore di testo utilizza la dimensione del carattere: media (quando viene modificata la dimensione predefinita del browser, il testo può essere ingrandito o ridotto di conseguenza)
• Il testo all'interno del contenitore di testo, utilizzando le unità relative: percentuale o em
• Usa em come unità per i margini del testo

Animazione ad alte prestazioni

I tre elementi dell'animazione ad alte prestazioni CSS si riferiscono al posizionamento assoluto, all'attributo di opacità e all'attributo di trasformazione. Pertanto, lo stesso effetto di animazione viene ottenuto innanzitutto utilizzando l'attributo di trasformazione. Ad esempio, le animazioni del movimento degli elementi dovrebbero utilizzare l'attributo di trasformazione anziché l'attributo di margine.