CSS Sintassi
Il selettore elemento
Il selettore id
Il selettore di classe (per tutti gli elementi)
Il selettore di classe (solo per <p> elementi)
Raggruppamento selettori
Sfondi CSS
Impostare il colore di sfondo della pagina
Impostare il colore di diversi elementi di sfondo
Impostare un'immagine come sfondo di una pagina
Come ripetere un'immagine di sfondo solo orizzontalmente
Come posizionare un'immagine di sfondo
Una immagine di sfondo fisso (questa immagine non scorrere con il resto della pagina)
Tutte le proprietà dello sfondo in una dichiarazione
Esempio sfondo avanzata
Proprietà dello sfondo spiegato
CSS Borders
Impostare la larghezza dei quattro bordi
Impostare la larghezza del bordo superiore
Impostare la larghezza del bordo inferiore
Impostare la larghezza del bordo sinistro
Impostare la larghezza del bordo destro
Impostare lo stile dei quattro bordi
Impostare lo stile del bordo superiore
Impostare lo stile del bordo inferiore
Impostare lo stile del bordo sinistro
Impostare lo stile del bordo destro
Impostare il colore dei quattro bordi
Impostare il colore del bordo superiore
Impostare il colore del bordo inferiore
Impostare il colore del bordo sinistro
Impostare il colore del bordo destro
Tutte le proprietà del bordo in una dichiarazione
Impostare diverse confini su ogni lato
Tutte le proprietà migliori di confine in una dichiarazione
Tutte le proprietà del bordo di fondo in una dichiarazione
Tutte le proprietà del bordo di sinistra in una dichiarazione
Tutte le proprietà del bordo di destra in una dichiarazione
Margini CSS
Specifica margini differenti per ogni lato di un elemento
Lasciate che il margine sinistro essere ereditata dall'elemento genitore
La proprietà margine di stenografia
Impostare il margine di auto per centrare l'elemento all'interno del suo contenitore
Proprietà dei margini spiegato
Imbottitura CSS
Impostare il padding sinistro di un elemento
Impostare il padding destro di un elemento
Impostare il padding superiore di un elemento
Impostare il padding inferiore di un elemento
Tutte le proprietà imbottitura in una dichiarazione
CSS Testo
Impostare il colore del testo di elementi diversi
Allineare il testo
Rimuovere la riga sotto link
Decorare il testo
Controllare le lettere in un testo
testo rientro
Specificare lo spazio tra i caratteri
Specificare lo spazio tra le linee
Impostare la direzione del testo di un elemento
Aumentare lo spazio bianco tra le parole
Disabilitare la disposizione del testo all'interno di un elemento
Allineamento verticale di un'immagine all'interno del testo
CSS Caratteri
Impostare il carattere di un testo
Impostare la dimensione del carattere
Impostare la dimensione del carattere in px
Impostare la dimensione del carattere in em
Impostare la dimensione del carattere in percentuale e em
Impostare lo stile del carattere
Impostare la variante del carattere
Imposta l'audacia del carattere
Tutte le proprietà del carattere in una dichiarazione
CSS Links
Aggiungere colori diversi per i link visitati / non visitati
L'uso del text-decoration sui link
Specificare un colore di sfondo per i collegamenti
Aggiungere altri stili di collegamenti ipertestuali
Avanzate - Creare scatole di collegamento
Avanzate - Creare scatole di collegamento con bordi
Proprietà del collegamento spiegato
liste CSS
Tutti i diversi marcatori di voci di elenco in elenchi
Impostare un'immagine come marcatore di lista
Posizionare il marcatore di lista
Tutte le proprietà di elenco in una dichiarazione
Liste stile con i colori
Full-width elenco delimitato
tabelle CSS
Specificare un bordo nero per la tavola, elementi th e td
L'utilizzo di border-collapse
Bordo unico intorno al tavolo
Specificare la larghezza e l'altezza di un tavolo
Impostare l'allineamento orizzontale del contenuto (text-align)
Impostare l'allineamento verticale del contenuto (vertical-align)
Specificare l'imbottitura per gli elementi th e td
divisori orizzontali
tavolo Hoverable
tavoli a righe
Specificare il colore dei bordi della tabella
Impostare la posizione della didascalia tavolo
Tabella responsive
Creare una tabella di fantasia
CSS Box Model
Specificare un elemento con una larghezza totale di 250px
Outline CSS
Tracciare una linea intorno ad un elemento (cenni)
Impostare lo stile di uno schema
Impostare il colore di uno schema
Impostare la larghezza di un contorno
Proprietà dello schema spiegato
CSS Dimension
Impostare l'altezza e la larghezza di un elemento
Impostare max-larghezza di un elemento
Impostare l'altezza e la larghezza di elementi diversi
Impostare l'altezza e la larghezza di un'immagine utilizzando cento
Impostare min-width e max-larghezza di un elemento
Set min-height e max-height di un elemento
Proprietà delle quote spiegato
CSS display
Come nascondere un elemento (visibility:hidden)
Come per non visualizzare un elemento (display:none)
Come visualizzare un elemento a livello di blocco come un elemento in linea
Come visualizzare un elemento inline come un elemento a livello di blocco
Come usare i CSS con Javascript per mostrare contenuti nascosti
Proprietà di visualizzazione spiegato
Posizionamento CSS
Posizionare un elemento relativamente alla finestra del browser
Posizionare un elemento rispetto alla sua posizione normale
Posizionare un elemento con un valore assoluto
elementi sovrapposti
Impostare la forma di un elemento
Come creare una barra di scorrimento quando il contenuto di un elemento è troppo grande per adattarsi
Come impostare il browser per gestire automaticamente trabocco
Impostare il bordo superiore di un'immagine utilizzando un valore di pixel
Impostare il bordo inferiore di un'immagine utilizzando un valore di pixel
Impostare il bordo sinistro di un'immagine utilizzando un valore in pixel
Impostare il bordo destro di un'immagine utilizzando un valore di pixel
Modificare il cursore del testo dell'immagine Posizione (angolo in alto a sinistra)
Testo dell'immagine di posizione (in alto a destra)
Testo dell'immagine Posizione (angolo in basso a sinistra)
Testo dell'immagine di posizione (in basso a destra)
Immagine posizione del testo (centrato)
Le proprietà di posizionamento spiegato
Floating CSS
Una semplice utilizzo della proprietà float
Un'immagine con bordo e margini che galleggia sulla destra in un paragrafo
Un'immagine con una didascalia che galleggia sulla destra
Lasciate che la prima lettera di un paragrafo galleggiante a sinistra
Creare una galleria di immagini con la proprietà float
Spegnimento galleggiante (utilizzando la proprietà chiaro)
Creazione di un menu orizzontale
La creazione di una home page senza tabelle
CSS allineamento Elementi
Centro allineando con un margine
Sinistra / Destra allineamento con la posizione
Sinistra / Destra allineamento con la posizione - soluzione Crossbrowser
Sinistra / Destra allineamento con galleggiante
Sinistra / Destra allineamento con galleggiante - soluzione Crossbrowser
Allineare le proprietà spiegate
CSS combinatori
selettore di discendente
selettore Bambino
Selettore fratello adiacente
Selettore generale Sibling
CSS Generated Content
Inserire l'URL tra parentesi dopo ogni collegamento con la proprietà dei contenuti
Numerazione sezioni e sottosezioni con "Section 1", "1.1", "1.2" , etc.
Specificare le virgolette con la proprietà citazioni
Le pseudo-classi CSS
Aggiungere colori diversi per un collegamento ipertestuale
Aggiungere altri stili di collegamenti ipertestuali
L'utilizzo di: focus
:first-child - corrisponde al primo elemento p
:first-child - corrisponde al primo elemento che in tutti gli elementi p
:first-child - Trova tutti i gli elementi in tutte le p primi elementi figlio
Utilizzare di :lang
CSS Gli pseudo-elementi
Effettuare la prima lettera speciale in un testo
Effettuare la prima linea speciale in un testo
Effettuare la prima lettera e la prima linea speciale
Usa: prima di inserire alcuni contenuti prima di un elemento
Usa: dopo di inserire alcuni contenuti dopo un elemento
Bar CSS Navigation
Completamente in stile barra di navigazione verticale
Completamente in stile barra di navigazione orizzontale
CSS Dropdowns
testo discesa
Menu a discesa
Menu a discesa allineato a destra
immagine discesa
Barra di navigazione a discesa
CSS Tooltips
tooltip destro
tooltip sinistra
Top tooltip
tooltip fondo
Tooltip con la freccia
tooltip animate
Galleria CSS immagine
Galleria di immagini
Galleria immagini Responsive
CSS immagine Opacità
La creazione di immagini trasparenti - effetto mouseover
Creazione di una scatola trasparente con testo su un'immagine di sfondo
Sprites CSS Immagine
Un sprite immagine
Un sprite immagine - una lista di navigazione
Un sprite immagine con effetto hover
CSS selettori di attributo
Seleziona tutti <a> elementi con un attributo target
Seleziona tutti <a> gli elementi con un target = "_ blank" attributo
Seleziona tutti gli elementi con un attributo titolo che contiene un elenco separato da spazi di parole, uno dei quali è "fiore"
Seleziona tutti gli elementi con un valore di attributo di classe che inizia con "top" (deve essere parola intera)
Seleziona tutti gli elementi con un valore di attributo di classe che inizia con "top" (non deve essere parola intera)
Seleziona tutti gli elementi con un valore di attributo di classe che si conclude con "test"
Seleziona tutti gli elementi con un valore di attributo classe che contiene "te"
I selettori di attributo spiegato
Forme CSS
Campo di input Full-width
Campo di inserimento imbottito
Campo di input delimitato
Fondo campo di input delimitato
Campi di input colorate
Campi di input mirate
Campi di input Focused 2
Ingresso icona / immagine con
Ricerca ingresso animate
textarea styling
Styling selezionare i menu
Styling pulsanti di input
Contatori CSS
Creare un contatore
Contatori nidificati 1
Contatori nidificati 2
CSS3 angoli arrotondati
Aggiungere angoli arrotondati agli elementi
Turno ogni angolo separatamente
Creare angoli ellittiche
CSS3 angoli arrotondati spiegato
Immagini CSS3 Border
Crea un bordo immagine intorno ad un elemento, utilizzando la parola chiave rotonda
Crea un bordo immagine intorno ad un elemento, utilizzando la parola chiave tratto
Immagine di frontiera - valori diversa sezione
Immagini di confine CSS3 spiegato
CSS3 Backgrounds
Aggiungere più immagini di sfondo per un elemento
Specificare la dimensione di un'immagine di sfondo
Scalare un'immagine di sfondo utilizzando "contenere" e "copertura"
Definire le dimensioni di più immagini di sfondo
Immagine di sfondo Full-size (riempire completamente l'area del contenuto)
Utilizzare background-origine per specificare dove l'immagine di sfondo è posizionata
Utilizzare background-clip per specificare l'area di pittura dello sfondo
CSS3 gradienti
Sfumatura lineare - dall'alto verso il basso
Sfumatura lineare - da sinistra a destra
Sfumatura lineare - diagonale
Sfumatura lineare - con un angolo specificato
Sfumatura lineare - con più interruzioni di colore
Sfumatura lineare - colore di un arcobaleno + testo
Sfumatura lineare - con la trasparenza
Sfumatura lineare - un gradiente lineare ripetizione
Radial Gradient - interruzioni di colore equidistanti
Gradiente radiale - interruzioni di colore diverso distanziati
Radial Gradient - figura insieme
Radial Gradient - parole chiave diverse dimensioni
Gradiente radiale - un gradiente radiale ripetizione
CSS3 Effetti Ombra
Semplice effetto ombra
Aggiungere un colore alla ombra
Aggiungere un effetto di sfocatura per l'ombra
Il testo bianco con ombra nera
Un bagliore ombra neon rosso
Un bagliore ombra rosso e blu al neon
Il testo bianco con ombra nera, blu e blu scuro
Aggiungere un semplice box-shadow di un elemento
Aggiungere colore al box-shadow
Aggiungere il colore e l'effetto sfocato di box-shadow
Creare schede di carta simil-(testo)
Creare schede di carta simil-(immagini Polaroid)
CSS3 effetti di ombreggiatura spiegato
CSS3 Text
Specificare come nascosto, contenuto traboccato deve essere segnalato per l'utente
Come visualizzare il contenuto in overflow quando il mouse sopra l'elemento
Consentire parole lunghe per poter essere rotto e avvolgere sulla riga successiva
Specificare le regole linea di rottura
CSS3 Fonts
Usa i tuoi "propri" font in @font-face regola
Usa i tuoi "propri" font in @font-face regola (in grassetto)
Trasformazioni 2D CSS3
translate() - spostare un elemento dalla posizione attuale
rotate() - ruotare un elemento in senso orario
rotate() - ruotare un elemento in senso antiorario
scale() - aumentare un elemento
scale() - diminuire un elemento
skewX() - inclina un elemento lungo l'asse X
skewY() - inclina un elemento lungo l'asse Y
skew() - distorce un elemento lungo X e Y
matrix() - ruotare, scalare, spostare, e l'inclinazione di un elemento
CSS3 3D Transforms
rotateX() - ruotare un elemento intorno al suo asse X in un dato grado
rotateY() - ruotare un elemento intorno al suo asse Y in un dato grado
rotateZ() - ruotare un elemento intorno al suo asse Z in un dato grado
CSS3 Transitions
Larghezza di cambiamento di un elemento - Transizione
Transizione - Larghezza cambiamento e l'altezza di un elemento
Specificare diverse curve di velocità per una transizione
Specificare un ritardo per un effetto di transizione
Aggiungere una trasformazione a un effetto di transizione
Specificare tutte le proprietà di transizione in una proprietà abbreviata
CSS3 animazioni
Associare un'animazione a un elemento
Animazione - cambiamento di colore di sfondo di un elemento
Animazione - variazione background-colore e la posizione di un elemento
Ritardo un'animazione
Eseguire l'animazione 3 volte prima di fermarsi
Eseguire animazione per sempre
Animazione Eseguire in senso inverso
Animazione Esegui in cicli alternati
Curve di velocità per le animazioni
Animazione proprietà abbreviata
Immagini CSS3
immagine arrotondata
immagine cerchiata
Immagine in miniatura
Immagine in miniatura come collegamento
immagine responsive
Testo dell'immagine (angolo in alto a sinistra)
Testo dell'immagine (in alto a destra)
Testo dell'immagine (in basso a sinistra)
Testo dell'immagine (in basso a destra)
Testo dell'immagine (centrato)
immagini Polaroid
Filtro immagini in scala di grigi
Avanzate - Immagine modale con i CSS e JavaScript
Pulsanti CSS3
Pulsanti di base CSS
colori dei pulsanti
dimensioni Button
bottoni arrotondati
Confini tasto colorato
pulsanti Hoverable
pulsanti ombra
pulsanti disabili
larghezza Button
gruppi di pulsanti
Gruppo di pulsanti Delimitata
Pulsante animato (Hover Effect)
Pulsante animato (Ripple Effect)
Pulsante animato (Pressato Effect)
CSS3 Impaginazione
impaginazione semplice
Impaginazione attivo e hoverable
Arrotondato impaginazione attiva e hoverable
Effetto di transizione Hoverable
impaginazione delimitata
Arrotondato impaginazione delimitato
Impaginazione con lo spazio tra i link
dimensione impaginazione
Impaginazione con lo spazio tra i link
impaginazione centrato
Briciole di pane
CSS3 più colonne
Creazione di colonne multiple
Specificare la distanza tra le colonne
Specificare lo stile della regola tra le colonne
Specificare la larghezza della regola tra le colonne
Specificare il colore della regola tra le colonne
Specificare la larghezza, lo stile e il colore della regola tra le colonne
Specificare il numero di colonne di un elemento dovrebbe estendersi su
Specificare una larghezza ottimale suggerita per le colonne
Interfaccia utente CSS3
Sia un utente ridimensionare la larghezza di un elemento
Sia un utente ridimensionare l'altezza di un elemento
Lasciate un utente ridimensionare sia la larghezza e l'altezza di un elemento
Aggiungere spazio tra un profilo e il confine di un elemento
Interfaccia utente CSS3 spiegato
CSS3 Box Dimensionamento
Larghezza di elementi senza scatola-dimensionamento
Larghezza di elementi con box-dimensionamento
Elementi di modulo + box-sizing
Scatola CSS3 dimensionamento spiegato
CSS3 Flexbox
Flexbox con tre elementi flessibili
Flexbox con tre elementi di flessione - direzione rtl
flex-direzione - Row-reverse
flex-direzione - Colonna
flex-direzione - Colonna-reverse
giustificare-content - flex-end
giustificare-content - Centro
giustificare-content - spazio-tra
giustificare-content - spazio-around
align-oggetti - tratto
align-oggetti - flex-start
align-oggetti - flex-end
align-oggetti - Centro
align-oggetti - di base
Flex-wrap - nowrap
Flex-wrap - avvolgere
Flex-wrap - avvolgere-reverse
align-content - Centro
Ordina gli articoli flex
Margin-right: auto;
Margin: auto; = Centraggio perfetto
allineare-auto su elementi flessibili
Specifica la lunghezza dell'elemento flessibile, rispetto al resto degli elementi flessibili
Creare un sito web reattivo con FlexBox
CSS3 Media Queries
Cambiare il colore di sfondo al verde chiaro se la finestra è 480px di larghezza o più largo
Mostra un menu che galleggia sulla sinistra della pagina, se la finestra è 480px di larghezza o più largo
CSS3 Media Queries - altri esempi
La pagina HTML
Larghezza da 520 a 699px - Applicare un'icona e-mail a ogni link
Larghezza da 700 a 1000 px - Prefazione i legami con un testo
Larghezza sopra 1001PX - Applicare indirizzo di posta elettronica per collegamenti
Larghezza sopra 1151px - Aggiungi icona come abbiamo usato prima
Utilizzare l'elenco di link e-mail su una barra laterale in una pagina web
Supporto CSS3 interroga spiegato esempi