Manuale completo di esempi CSS

CSS testo

• Impostare il colore del testo

• Allineamento del testo

• Ritardo del testo

• Decorazione del testo

• Impostare lo spazio tra i caratteri

• Impostare lo spazio tra le parole

• Impostare lo spazio tra le righe di testo

• Mantenere gli spazi e i caratteri di newline

• Riavvolgimento del testo all'interno dell'elemento

• Allineamento verticale dell'immagine nel testo

CSS carattere

• Impostare il tipo di carattere del testo

• Impostare la dimensione del carattere

• Impostare lo stile del carattere

• Impostare la variante del carattere

• Impostare il carattere in grassetto

• Impostare tutte le proprietà dei caratteri in una singola dichiarazione - attributi abbreviati dei caratteri

CSS collegamento

• Impostare lo stile dei diversi stati dei collegamenti

• Rimuovere la sottolineatura predefinita dai collegamenti ipertestuali

• Rimuovere il contorno tratteggiato dai collegamenti ipertestuali

• Creare una casella di collegamento

• Invertire l'immagine

CSS elenco

• Specificare i simboli di elenco e numerazione nella lista

• Impostare la posizione del segno di spunta dell'elemento della lista

• Impostare l'immagine come segno di spunta dell'elemento della lista

• Creare un menu a discesa semplice

• Impostare tutte le proprietà della lista in una singola dichiarazione - attributi abbreviati di stile lista

Tabella CSS

• Impostare il bordo della tabella

• Specificare le dimensioni della tabella

• Creare una tabella migliore attraverso la sovrapposizione dei bordi della tabella

• Impostare l'allineamento orizzontale del testo all'interno delle celle della tabella

• Impostare l'allineamento verticale del contenuto

• Specificare come visualizzare le celle vuote

• Specificare il riempimento delle celle della tabella

• Specificare l'algoritmo di layout della tabella - automatico o fisso

• Impostare la posizione del titolo della tabella

Sfondo CSS

• Impostare il colore di sfondo dell'elemento

• Impostare l'immagine come sfondo dell'elemento

• Ripetere l'immagine di sfondo orizzontalmente o verticalmente

• Specificare la posizione dell'immagine di sfondo

• Sfondo immagine fisso, non ruota con l'elemento contenitore

• Impostare tutte le proprietà di sfondo in una singola dichiarazione - proprietà di abbreviazione di sfondo

• Impostare la dimensione dell'immagine di sfondo

• Impostare la tagliatura dello sfondo

• Impostare il punto di origine dello sfondo

• Aggiungere più sfondi all'elemento

Unità CSS

• Utilizzare unità assolute (ad esempio, px, pt, cm ecc.)

• Utilizzare unità relative (ad esempio, em, ex, % ecc.)

Dimensioni CSS

• Impostare la larghezza e l'altezza dell'elemento

• Impostare la larghezza e l'altezza massima dell'elemento

• Impostare la larghezza e l'altezza minima dell'elemento

• Controllare il sovraccarico

Allineamento CSS

• Allineare il testo e gli elementi inline all'interno degli elementi bloccanti

• Allineare i blocchi di testo utilizzando le proprietà di margine

• Allineare gli elementi orizzontalmente utilizzando la proprietà float

• Allineare gli elementi in direzione orizzontale e verticale utilizzando la proprietà position

• Prevenire il crollo del parent con l'attributo clear

• Creare un menu orizzontale semplice

Posizionamento CSS

• Posizionare l'elemento rispetto alla finestra del browser

• Posizionare l'elemento rispetto al suo elemento genitore

• Posizionare l'elemento rispetto alla sua posizione normale

• Sovrapporre gli elementi utilizzando la proprietà z-index

Visualizzazione CSS

• Nascondere l'elemento utilizzando la proprietà di visibilità

• Eliminare l'elemento dal DOM utilizzando la proprietà display

• Visualizzare l'elemento come un elemento inline

• Visualizzare l'elemento come un elemento bloccante

• Fondere gli elementi della tabella

Bordo e contorno CSS

• Disegnare un bordo intorno all'elemento

• Disegnare un bordo su ciascun lato dell'elemento

• Impostare diversi stili per il bordo

• Impostare tutte le proprietà di bordo in una singola dichiarazione - proprietà di abbreviazione di bordo

• Creare angoli arrotondati intorno all'elemento

• Creare un bordo utilizzando un'immagine

• Disegnare un contorno intorno all'elemento

• Disegnare un bordo intorno all'elemento senza influire sugli elementi circostanti

Margine e riempimento CSS

• Impostare il margine di ciascun lato dell'elemento

• Impostare tutte le proprietà di margine in una singola dichiarazione - proprietà di abbreviazione di margine

• Impostare il riempimento di ciascun lato dell'elemento

• Impostare tutte le proprietà di riempimento in una singola dichiarazione - proprietà di abbreviazione di riempimento

Opacità CSS

• Impostare la trasparenza dell'elemento

• Effetto di inversione dell'immagine e trasparenza

• Testo all'interno di un riquadro trasparente

Contenuti generati da CSS

• Specificare le virgolette

• Parti e categorie di numerazione automatica

• Utilizzare CSS per inserire contenuti generati

Pseudo-classe CSS

• Impostare uno stile per diversi stati degli hyperlink

• Utilizzare: il selettore di pseudo-classe focus per applicare uno stile agli elementi di formulario in stato di focus

• Utilizzare: il selettore di pseudo-classe first-child per applicare uno stile al primo figlio dell'elemento

• Utilizzare: il selettore di pseudo-classe first-child per applicare uno stile all'ultimo figlio dell'elemento

• Imposta lo stile per l'nth-child dell'elemento utilizzando il pseudo-classe :nth-child

• Imposta lo stile per un linguaggio specifico utilizzando il pseudo-classe :lang()

• Usa pseudo-classe con selettore

Pseudo-elementi CSS

• Crea un effetto di iniziale cadente utilizzando il pseudo-elemento:: first-letter

• Imposta il primo paragrafo del testo in modo diverso utilizzando il pseudo-elemento:: first-line

• Inserisci alcuni contenuti prima o dopo l'elemento utilizzando i pseudo-elementi:: before o:: after

• Usa pseudo-elementi in una classe

Gradiente CSS3

• Crea unagradiente lineare da alto a basso

• Crea unagradiente lineare da sinistra a destra

• Crea unagradiente lineare lungo la diagonale

• Imposta la direzione dellagradiente lineare utilizzando l'angolo

• Crea unagradiente lineare utilizzando più colori di stop

• Imposta la posizione di fermata del colore nella creazione dellagradiente

• Ripeti lagradiente lineare

• Crea unagradiente radiale

• Imposta la forma dellagradiente radiale

• Imposta la dimensione dellagradiente radiale

• Ripeti lagradiente radiale

• Usa trasparenza per lagradiente

Ombra CSS3

• Crea un'ombra di riquadro

• Aggiungi più ombre di riquadro all'elemento

• Crea un'effetto di ombra di testo

Trasformazione 2D CSS3

• Muovi l'elemento utilizzando il metodo translate()

• Ruota l'elemento utilizzando il metodo Rotate()

• Aumenta o riduci la dimensione dell'elemento utilizzando il metodo scale()

• Applica una trasformazione 2D utilizzando il metodo matrix()

• Applica più trasformazioni all'elemento

Trasformazione 3D CSS3

• Muovi l'elemento in tre dimensioni utilizzando il metodo translate3d()

• Ruota l'elemento in tre dimensioni utilizzando il metodo rotate3d()

• Scala l'elemento in tre dimensioni utilizzando il metodo scale3d()

• Applica una trasformazione 3D utilizzando il metodo matrix3d()

• Applica più trasformazioni 3D all'elemento

Transizione CSS3

• Applica l'effetto di transizione al colore di sfondo

• Applica l'effetto di transizione a più proprietà

• Imposta tutte le proprietà di transizione in una volta - proprietà di abbozzo di transizione

Animazione CSS3

• Elementi animati nel sito web

• Definisci i fotogrammi chiave quando crei un'animazione

• Imposta tutte le proprietà di animazione in una volta - proprietà di abbozzo di animazione

Layout a più colonne CSS3

• Crea una布局 a più colonne

• Imposta il numero di colonne o la larghezza

• Imposta lo spaziatura tra le colonne

• Aggiungi regole o linee verticali tra le colonne