Latest web development tutorials
×

CSS Manuale di riferimento

CSS Manuale di riferimento CSS selettore CSS discorso di riferimento CSS Web font sicure CSS animazione CSS unità CSS colore CSS valori di colore legali CSS nomi dei colori CSS valori di colore esadecimali CSS Supporto per il browser

CSS proprietà

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight grid-columns grid-rows hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position punctuation-trim quotes resize right rotation tab-size table-layout target target-name target-new target-position text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

selettori CSS

selettori CSS sono utilizzati per selezionare gli elementi che si desidera modello di stile.

colonna "CSS" indica, in cui le proprietà CSS definiti (CSS1, CSS2, CSS3 o).

selettore esempio esempio spettacoli CSS
. Classe .intro Selezionare tutte le class = elemento "intro" 1
# Id #firstname Selezionare tutti gli elementi id = "Nome" 1
* * Selezionare tutti gli elementi 2
elementop Selezionare tutti gli elementi <p> 1
elemento, elementodiv,p Selezionare tutti gli elementi <div> e il <p> elemento 1
elemento elemento div p Selezionare <div> tutti gli elementi <p> ​​all'interno dell'elemento 1
element> Elemento div>p Seleziona tutto il genitore è un elemento <div> dell'elemento <p> 2
element + div+p Seleziona elemento <p> seguito da tutti i <div> elementi dopo 2
[Attributo] [target] Selezionare tutti gli elementi con l'attributo target 2
[Attributo = valore] [target=-blank] Seleziona tutto l'uso target = - elemento "vuoto" di 2
[Attributo ~ = value] [title~=flower] Selezionare tutti gli elementi dell'attributo titolo contiene la parola "fiore" di 2
[Attributo | = lingua] [lang|=en] Selezionare tutti gli elementi di un lang valore di start = "IT" di 2
: Link a:link Selezionare tutti i collegamenti non visitati 1
: visited a:visited Selezionare tutti i link visitati 1
: attiva a:active Selezionare il link attivo 1
: hover a:hover Quando si seleziona il mouse sul link qui sopra 1
: focus input:focus Selezionare l'elemento di input ha il focus 2
: First-letter p:first-letter Selezionare la prima lettera di ogni <P> elemento 1
: First-line p:first-line Selezionare ogni <P> Il primo elemento di linea 1
: First-child p:first-child Specificata solo quando <p> elemento è il primo figlio del suo stile principale. 2
: prima p:before Inserisci contenuto prima di ogni elemento <p> 2
: dopo p:after Inserisci contenuto dopo ogni <p> ​​elemento 2
: Lang (lingua) p:lang(it) Selezionare un attributo lang valore di start = "it" tutti gli elementi <p> 2
element1 ~ element2 p ~ ul Ogni elemento scelta p ul dopo elemento 3
[Attributo ^ = valore] un [src ^ = "https"] Selezionare ogni valore di attributo src per "https" all'inizio dell'elemento 3
[Attributo $ = valore] un [src = $ ". pdf"] Selezionare ogni valore di attributo src per ".pdf" alla fine dell'elemento 3
[Attributo * = valore] un [src = * "w3big"] Selezionare ogni elemento src valore di attributo contiene la stringa "w3big" di 3
: First-of-type p: first-of-type Selezionare ogni elemento p p è il primo elemento del suo genitore 3
: Last-of-type p: last-of-type Selezionare ogni elemento p è l'ultimo elemento del suo genitore p 3
: Only-of-type p: only-of-type Selezionare ogni elemento p è l'unico elemento del suo genitore p 3
: Solo-bambino p: solo ai bambini Selezionare ogni elemento p è l'unico elemento figlio del suo genitore 3
: Nth-child (n) p: nth-child (2) Selezionare ogni elemento p è il secondo figlio del suo genitore 3
: Nth-last-child (n ) p: nth-last-child (2) Selezionare ogni elemento p è il secondo figlio del suo genitore, contando dall'ultimo bambino 3
: Nth-of-type (n ) p: nth-of-type (2) Selezionare ogni elemento p è il secondo elemento p del suo genitore 3
: Nth-last-of-type (n) p: nth-last-of-type (2) Selezionare ogni elemento p è il secondo elemento p del suo genitore, contando dall'ultimo bambino 3
: Last-child p: last-child Selezionare ogni elemento p è l'ultimo figlio del suo genitore. 3
: root : Root Selezionare l'elemento radice del documento 3
: vuoto p: empty Selezionare ogni dell'elemento P non ha figli (inclusi i nodi di testo) 3
: bersaglio #news: bersaglio Selezionare l'elemento #news attualmente attivo (compresa la URL di ancoraggio nome cliccabile) 3
: abilitato Ingresso: abilitato Selezionare ogni elemento di input abilitato 3
: disabilitato Ingresso: disabilitato La selezione di ogni elemento di input disattivato 3
: selezionata Ingresso: selezionata Selezionare ogni elemento di input selezionato 3
: Non (selettore) : Not (p) Selezionare ogni elemento non è elementi p 3
:: selezione :: Selezione Elemento viene selezionata o evidenziata nello stato della corrispondenza parziale utente 3
: Out-of-range : Out-of-range elemento di input valore corrispondente di fuori del campo specificato 3
: In-range : In-range Abbinamento elemento di input valore all'interno della gamma specifica della 3
: Lettura-scrittura : Lettura e scrittura Ha usato per abbinare elemento di lettura e scrittura 3
: Sola lettura : Sola lettura Per abbinabili "sola lettura" (read-only) elemento di attributo 3
: opzionale Optional: Per corrispondenza elemento di input opzionale 3
: necessaria : Richiesto Impostazioni per l'elemento "richiesta" di proprietà 3
: valida : valido Usato per corrispondere al valore di ingresso è un elemento di legittima 3
: non valido : non valido Valore non ammesso per le partite elemento di input 3