Introduzione al Cheatsheet CSS3
Cascading Stylesheet (CSS) è fondamentalmente un linguaggio di fogli di stile che viene utilizzato per implementare l'aspetto e la formattazione di un documento sviluppato in un linguaggio di markup. Le specifiche CSS sono gestite principalmente dal World Wide Web Consortium (W3C). La moto principale per l'implementazione dei CSS è quella di mostrare la separazione tra presentazione e contenuto che include fronti, formati di layout. CSS3 è l'ultima versione o standard per CSS dopo CSS2. CSS3 è principalmente un mix di specifiche CSS2 e alcune nuove funzionalità.
Di seguito alcuni importanti moduli di Cheatsheet CSS3:
- Modello a scatola
- I selettori
- Effetti di testo
- Trasformazioni 2D
- Trasformazioni 3D
- Rappresentazione dell'immagine
- Interfase utente
- Layout a colonne multiple
- animazioni
- Regolazione e riallocazione dei contenuti
In questo articolo CSS3 sul Cheatsheet discuteremo di cosa sia CSS3 e dei diversi comandi CSS3.
Comandi e contenuti sul Cheatsheet CSS3
CSS3 ha una vasta libreria, interattiva, estensibile e contiene molti metodi integrati per il calcolo di operazioni comuni. Di seguito sono riportati i comandi CSS3 Cheatsheet menzionati che eseguono diverse operazioni da riga di comando:
|
COMANDO |
DESCRIZIONE |
| : messa a fuoco | Concentrarsi su un elemento |
| : attivo | Per visualizzare e selezionare un elemento attivo |
| : abilitato | Per visualizzare un elemento abilitato |
| : selezionato | Per visualizzare un elemento che è selezionato |
| : lang | Per consentire allo sviluppatore di specificare la lingua per un elemento specifico |
| : selezione | Per visualizzare l'elemento evidenziato e selezionato |
| : root | Per visualizzare l'elemento radice all'interno del documento |
| :Primogenito | Per visualizzare il primo elemento di pari livello |
| :ultimo bambino | Per visualizzare l'ultimo elemento fratello |
| :figlio unico | Per visualizzare l'unico elemento figlio |
| : First-of-type | Per visualizzare il primo elemento di pari livello di un tipo specifico |
| : Last-of-type | Per visualizzare l'ultimo elemento fratello di un tipo specifico |
| : Only-of-type | Per visualizzare l'unico elemento fratello di un tipo specifico |
| : vuoto | Per visualizzare l'elemento che non ha figli |
| ::prima lettera | Per aggiungere uno stile specifico alla prima lettera di un testo |
| ::prima linea | Per aggiungere uno stile specifico alla prima riga di un testo |
| :: dopo | Per inserire del contenuto dopo un elemento di testo |
| :: prima | Per inserire del contenuto prima di un elemento di testo |
Operatori: - I diversi tipi di operatori in CSS3 sono operatori di confronto (relazionali), operatori di assegnazione, operatori logici e operatori di identità.
Scale di misurazione: le scale di misurazione CSS3 del cheat sheet sono le seguenti
|
SCALA / PARAMETRO |
DESCRIZIONE |
| em | Dimensione del carattere dell'elemento corrente |
| ex | Altezza del carattere dell'elemento |
| px | Visualizzazione del pixel del dispositivo |
| rem | Dimensione carattere elemento radice |
| vh | Altezza del viewport |
| vw | Larghezza della finestra |
| % | Percentuale |
| pc | Pica |
| pt | Punto |
Codice colore: nome colore = rosso, blu, verde e verde scuro. Trova sotto i codici per lo stesso
|
CODICE |
DESCRIZIONE / SIGNIFICATO |
| rgb (x, y, z) | Per rosso = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | Per rosso = rgb (100%, 0, 0) |
| #RRGGBB | Per rosso = # ff000 |
| flabor | Colore selezionato dall'utente per personalizzare l'interfase utente |
| RGBA (x, y, z, alfa) | Per rosso = rgb (255, 0, 0) |
Proprietà di interfase utente: Le proprietà di interfase utente di cheat sheet CSS3 sono le seguenti.
|
VALORI DI PROPRIETÀ |
DESCRIZIONE |
| icona | Per fornire l'icona nell'area |
| ridimensionamento | Per ridimensionare gli elementi dell'area specificati |
| box-sizing | Per correggere l'area dell'elemento specificato |
| aspetto | Per implementare gli elementi come elementi dell'interfaccia utente |
| nav-down | Per spostare verso il basso gli elementi in base al pulsante freccia giù della tastiera |
| nav-sinistra | Per spostare a sinistra gli elementi in base al pulsante freccia sinistra della tastiera |
| nav-up | Per spostare gli elementi in alto in base al pulsante freccia sinistra della tastiera |
| nav-destra | Per spostare a destra gli elementi in base al pulsante freccia destra della tastiera |
| outline-offset | Per disegnare il contorno dell'area di testo selezionata |
Tipi di selettori : i tipi di selettori CSS3 del foglio cheat sono i seguenti.
|
NOME TIPO |
DESCRIZIONE / SIGNIFICATO |
| universale | Per visualizzare qualsiasi elemento |
| genere | Per visualizzare qualsiasi elemento di tipo specifico |
| Classe | Per visualizzare più elementi di diversi tipi |
| Id | Per visualizzare e identificare un singolo tipo di elemento specifico senza influire sugli altri |
| Bambino | Per visualizzare un elemento che rientra direttamente rientra in un altro elemento |
| Raggruppamento | Per identificare più elementi di diversi tipi |
| Fratello germano adiacente | Per recuperare tutti gli elementi che hanno lo stesso genitore ed elementi e sono nella sequenza immediata |
| Fratello Generale | Per recuperare tutti gli elementi che hanno lo stesso genitore ed elementi e non sono necessariamente nella sequenza immediata |
Suggerimenti e trucchi gratuiti sull'uso dei trucchi CSS3 Comandi: -
- La modalità di fusione CSS3 può essere utilizzata per unificare l'aspetto del contenuto specificato e consente inoltre agli utenti di impostare diverse versioni di colore dell'immagine. Ci sono circa 15 valori della modalità di fusione presenti nel cheat sheet CSS3. Aggiunge inoltre un ulteriore vantaggio dal punto di vista della rappresentazione interfase dell'utente.
- Il ritaglio è un'altra grande caratteristica dei CSS. Utilizzando la funzionalità di ritaglio, un utente può definire la visibilità dell'area dell'immagine secondo il requisito. Pertanto, se una parte dell'immagine non rientra nell'area desiderata, è possibile implementare il ritaglio per nascondere l'area dell'immagine aggiuntiva.
- Nel caso dei CSS, le proprietà shape-inside e shape-outside possono essere implementate per avvolgere i contenuti attorno al percorso personalizzato CSS e possono essere definite e allocate secondo i requisiti dell'utente finale. Fondamentalmente consente all'utente di progettare l'interfase secondo le specifiche definite.
- L'uso dell'animazione SVG (grafica vettoriale scalabile) è un altro vantaggio per CSS3. Utilizzando SVG con l'animazione CSS3, l'interfase diventerà più interattiva e SVG ha anche una propria API DOM.
- La funzione mappa verrà applicata a tutti gli elementi in un elenco di input.
- La funzione di riduzione viene utilizzata per applicare alcuni calcoli su un elenco e restituisce un valore
- Gli effetti Hover possono essere implementati usando il cheat sheet CSS3
- Un menu appiccicoso può essere implementato usando i filtri CSS3 e SVG e questo aiuta un nuovo approccio rappresentativo dal punto di vista dell'interfase utente
- Dal punto di vista del web design, è possibile produrre effetti di parallasse usando CSS3.
- La struttura 3d interattiva e l'interfase utente possono essere prodotte utilizzando CSS3
- Utilizzando una combinazione di selettori diversi, è possibile produrre un'icona del formato file accanto al collegamento per il download utilizzando CSS3.
Conclusione
In questo articolo CSS3 sul Cheat sheet, abbiamo visto che CSS3 è facile da usare e la sua sintassi è più facile da ricordare. CSS3 può essere utilizzato nella rappresentazione delle tecnologie di sviluppo web utilizzando diversi approcci e tecnologie di fogli di stile che supportano CSS3. Sulla base del tipo di necessità del progetto, del tempo di lavoro e di tutti gli altri aspetti discussi, CSS3 dovrebbe essere usato per raggiungere l'obiettivo desiderato.
Articoli consigliati
Questa è stata una guida al cheat sheet CSS3 qui abbiamo discusso il contenuto e il comando, nonché suggerimenti e trucchi gratuiti del cheat sheet CSS3, puoi anche leggere il seguente articolo per saperne di più -
- Foglio informativo CSS
- Cheat sheet HTML
- Incredibile cheat sheet per UNIX
- Cheat Sheet JavaScript: caratteristiche