Tutti (o quasi tutto) quello che dovete sapere per iniziare con i CSS

Ho deciso di far rivivere questo post tratto dal mio vecchio blog e metterlo qui. E 'sempre bene avere una guida ogni volta che si dimentica qualcosa nei fogli di stile l'agente.

Quindi cerchiamo di mettersi al lavoro!

I fogli di stile può essere collegato a un documento in tre modi:

1. Collegato o importato;
2. Incorporated;
3. Inline.

Foglio di stile esterno

Un foglio di stile si dice fuori, quando le regole CSS sono dichiarati in un documento nel documento HTML . Il foglio di stile è un file separato e html file ha l'estensione. Css

Un foglio di stile esterno è ideale per essere applicato a più pagine. Con un foglio di stile esterno, è possibile modificare l'aspetto di un intero sito modificando solo un file (il file del foglio di stile).

Il file CSS dal foglio di stile esterno deve essere collegato o importato documento HTML all'interno del tag <> del documento. La sintassi generale per collegare un foglio di stile chiamato estilo.css è la seguente:

La sintassi generale di importare un foglio di stile chiamato estilo.css è la seguente:

Il navigatore leggerà il file di regole di stile estilo.css, e il formato del documento di conseguenza.

Un foglio di stile esterno può essere scritto in qualsiasi editor di testo. Il file non deve contenere tag HTML. I fogli di stile deve essere "salvati" con A. Css
Foglio di stile incorporati o interni

Un foglio di stile si chiama incorporato o interno, quando le regole CSS sono dichiarati nel documento HTML.

Un foglio di stile incorporati o interno, è ideale per applicazioni come una singola pagina. Con un foglio di stile o incorporato all'interno, è possibile modificare l'aspetto di un solo documento, quello in cui è incorporato il foglio di stile.

Le regole di stile, valido per il documento sono dichiarati nella sezione <> del documento con il tag stile <>, come la sintassi illustrata di seguito:

Il browser ora leggere le regole di stile nella pagina stessa, e il formato del documento di conseguenza.

Nota: Un browser ignora normalmente tag sconosciuti. Ciò significa che un vecchio browser che non supporta gli stili, ignoreranno il tag, ma il contenuto del tag viene visualizzato sullo schermo. È possibile impedire un vecchio browser per visualizzare il contenuto

tag ", si nasconde" attraverso l'uso di commento HTML markup.

Si noti l'inserimento di simboli (commento chiudere) nel codice di cui sopra.
Inline foglio di stile

Un foglio di stile CSS in linea si chiama quando le regole vengono dichiarati all'interno del tag dell'elemento HTML.

Uno stile in linea si applica solo a un elemento HTML. Perde molti dei vantaggi dei fogli di stile per i contenuti miscelazione con presentazione. Utilizzare questo metodo in casi eccezionali, come quando si desidera applicare uno stile a una singola occorrenza di un elemento.

La sintassi per applicare lo stile in linea è la seguente:

Ora, le proprietà più importanti dei CSS:

La proprietà font

Le proprietà per le fonti, definire le caratteristiche (valori in regola CSS) delle lettere che costituiscono il testo all'interno degli elementi HTML.

Le fonti di base e saranno trattati in questa guida sono elencati di seguito:

* Colore: ... ... ... ... ... .... il colore dei font
Font-family: ... ... .... Font
Font-size: ... ... ... .... Dimensione carattere
Font-style: ... ... ... ... lo stile del carattere
Font-variant: caso ... ... ... fonti di piccole dimensioni
Font-weight: ... ... ... più scura della fonte (in grassetto)
* Carattere: ... ... ... ... ... ... .. scorciatoia per tutte le proprietà

I valori validi per le proprietà della sorgente

* Colore:
1. hex code: # FFFFFF
2. rgb codice: rgb (255,235,0)
3. nome del colore rosso, blu, verde, ecc ...
Font-family:
1. famiglia-name: è definito dal nome del carattere,
P. ex: "Verdana", "Helvetica", "Arial", ecc.
2. generic-famiglia: è definito dal nome generico,
P. ad esempio, "serif", "sans-serif", "corsivo", ecc.
Font-size:
1. xx-small
2. x-small
3. piccolo
4. medio
5. grande
6. x-large
7. xx-large
8. Minore
9. maggiore
10. lunghezza: una misura riconosciuta dalla CSS (px, pt, in, cm, ...)
11. %
Font-style:
1. normale: font normale in verticale
2. corsivo: pendenza fontana
3. obliqui: obliquo fonte
Font-variant:
1. normale: normale carattere
2. small-caps: lettere maiuscole trasformato in minore altezza
Font-weight:
1. normale
2. Audace
3. più audaci
4. accendino
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

Il testo della proprietà

Al testo, definire le caratteristiche (valori in regola CSS) del testo di input con gli elementi HTML.

Le proprietà del testo sono elencati di seguito:

* Colore ... ... ... ... ... ... ... il colore del testo;
* Lettera-spacing ... ... .. spaziatura tra le lettere;
* Word-spacing ... ... ... spaziatura tra le parole;
* Text-align ... ... ... ... .. l'allineamento del testo;
* Text-decoration text-decoration ... ...;
* Testo-trattino ... ... ... ... rientro del testo;
* Text-transform ... .... forma delle lettere;
* Direzione ... ... ... ... ... direzione del testo;
* Bianco-space ... ... ... come il browser tratta i campi;
I valori validi per la proprietà del testo

* Colore:
1. hex code: # FFFFFF
2. rgb codice: rgb (255,235,0)
3. nome del colore rosso, blu, verde, ecc ...
* Lettera-spacing:
1. normale: è la spaziatura di default
2. lunghezza: una misura riconosciuta dalla CSS (px, pt, in, cm, ...) sono validi i valori negativi
* Word-spacing:
1. normale: è la spaziatura di default
2. lunghezza: una misura riconosciuta dalla CSS (px, pt, in, cm, ...) sono validi i valori negativi
* Text-align:
1. a sinistra: allineare il testo a sinistra
2. a destra: allineare il testo a destra
3. centro: allinea il testo al centro
4. justify: le forze di testo ad occupare l'intera lunghezza della linea da sinistra a destra
* Text-decoration:
1. nessuno: nessuna decorazione
2. sottolineare: underline luoghi nel testo
3. overline: linea sopra un posto nel testo
4. line-through: mettere una linea sopra il testo
5. Blink: il testo è lampeggiante
* Testo-trattino:
1. lunghezza: una misura riconosciuta dalla CSS (px, pt, in, cm, ...)
2. %: Percentuale della larghezza dell'elemento genitore
* Text-transform:
1. nessuno: testo normale
2. capitalizzare: tutte le prime lettere del testo in maiuscolo
3. maiuscolo, tutte le lettere del testo in maiuscolo
4. minuscole: tutte le lettere minuscole del testo
* Direzione:
1. litri: testo scritto da sinistra verso destra
2. RTL: testo scritto da destra a sinistra
* White-space:
1. normale: gli spazi vuoti vengono ignorati dal browser
2. preliminare: i campi saranno conservati dal browser
3. nowrap: il testo sarà visualizzato il tutto su una sola riga sullo schermo. Non ci sono interruzioni di riga per trovare un tag <>

Il margine di proprietà

La proprietà per le banche, imposta un valore per lo spessore dei bordi degli elementi HTML.

Le proprietà dei margini sono elencati di seguito:
* Margin-top ... ... .... Imposta il margine superiore;
* Margin-right ... ... .. imposta il margine destro;
* Margin-bottom ... .... Imposta il margine inferiore;
* Margin-left ... ... ... imposta il margine sinistro;
* Margine ... ... ... ... .. scorciatoia per tutte le banche

I valori validi per la proprietà margine

1. auto: valore di default del margine
2. lunghezza: una misura riconosciuta dalla CSS (px, pt, in, cm, ...)
3. %: Percentuale della larghezza dell'elemento genitore

Il confine di proprietà

Le proprietà per i bordi, definiscono le caratteristiche (valori in regola CSS) dei quattro bordi di un elemento HTML.

Le proprietà per i bordi sono elencati di seguito:

* Border-width: ... ... ... ... .... spessore del bordo
* Border-style: ... ... ... ... .... Stile del confine
* Border-color: ... ... ... ... .... Colore del bordo
* --------------
* Border-top-width: ... ... ... ... spessore del bordo superiore
* Border-top-style: lo stile ... ... ... ... dal bordo superiore
* Border-top-color: ... ... ... ... il colore del bordo superiore
* --------------
* Border-right-width: ... ... ... spessore del bordo destro
* Border-right-style: ... ... .... Il bordo destro dello stile
* Border-right-color: ... ... .... il colore del bordo destro
* --------------
* Border-bottom-width: ... ... ... spessore del bordo inferiore
* Border-bottom-style: lo stile ... ... ... dal bordo inferiore
* Border-bottom-color: ... ... ... il colore del bordo inferiore
* --------------
* Border-left-width: ... ... ... .. spessore del bordo sinistro
* Border-left-style: lo stile ... ... ... .. dal margine sinistro
* Border-left-color: ... ... ... .. il colore del bordo sinistro
* --------------
* Border-top: ... un'abbreviazione per tutte le proprietà del bordo superiore
* Border-right: .. un'abbreviazione per tutte le proprietà dal bordo destro
* Border-bottom: .. un'abbreviazione per tutte le proprietà del bordo inferiore
* Border-left: .. un'abbreviazione per tutte le proprietà dal margine sinistro
* Bordo: ... ... ... scorciatoie per tutti e quattro i bordi

I valori validi per le proprietà dei bordi

* Colore:
1. hex code: # FFFFFF
2. rgb codice: rgb (255,235,0)
3. nome del colore rosso, blu, verde, ecc ...
* Stile:
1. nessuno: nessun confine
2. nascosti: equivalente a nessuno
3. punteggiata: punteggiata di confine
4. tratteggiata, bordo tratteggiato
5. Solid: Solid Edge
6. doppio: doppio confine
7. scanalatura, bordo dentellato
8. crinale, sporgenza sporgenza
9. inset: bordo in bassorilievo
10. fin dall'inizio: bordo in rilievo
* Larghezza:
1. sottile: sottile bordo
2. medi: margine mediale
3. di spessore: bordo spesso
4. lunghezza: una misura riconosciuta dalla CSS (px, pt, in, cm, ...)

L'imbottitura proprietà

Proprietà per la spaziatura (alcuni traducono come "riempitivo") definisce un valore per la spaziatura tra il contenuto e le frontiere degli elementi HTML.

Proprietà per distanze sono elencati di seguito:

* Padding-top ... ... .... Imposta il padding-top;
* Padding-right ... ... .. definisce il giusto spazio;
Padding-bottom * ... .... Definisce la spaziatura inferiore;
* Padding-left ... ... ... imposta la spaziatura a sinistra;
* Imbottitura ... ... ... ... .. scorciatoia per tutte le distanze
I valori validi per le proprietà di spaziatura

1. auto: valore di default del margine
2. lunghezza: una misura riconosciuta dalla CSS (px, pt, in, cm, ...)
3. %: Percentuale della larghezza dell'elemento genitore

Lo sfondo di proprietà

La proprietà background definisce le caratteristiche (valori in regola CSS) dal fondo degli elementi HTML.

Le caratteristiche di fondo sono elencati di seguito:

* Background-color ... ... ... ... ... il colore di sfondo;
* Background-image ... ... ... .... immagine di sfondo;
* Background-repeat ... ... ... .... come l'immagine di sfondo è posizionata;
* Background-attachment ... .... Se l'immagine di sfondo "rotoli" per lo schermo o meno;
* Background-position ... ... ... ... come e dove l'immagine di sfondo è posizionata;
* Background ... ... ... ... ... ... ... ... scorciatoia per tutte le proprietà;

I valori validi per le proprietà dello sfondo

* Background-color:
1. hex code: # FFFFFF
2. rgb codice: rgb (255,235,0)
3. nome del colore rosso, blu, verde, ecc ...
4. Trasparente: trasparente
* Background-image:
1. URL: url (percorso / image.gif)
* Background-repeat:
1. non repeat: no-repeat
2. ripetere verticale e orizzontale: repeat
3. Verticale: repeat-y
4. Orizzontale repeat: repeat-x
* Background-attachment:
1. immagine sullo schermo: fisso
2. immagine "rotola" per scorrere la schermata di
* Background-position:
1. x-pos y-pos
2. x-% y-%
3. in alto a sinistra
4. in alto al centro
5. in alto a destra
6. centro-sinistra
7. centro centro
8. centro destra
9. in basso a sinistra
10. basso al centro
11. in basso a destra

La proprietà list

La lista proprietà definisce le caratteristiche (valori) di elenchi HTML.

Le proprietà di elenco sono elencati di seguito:

* List-style-image ... ... ... .... immagine come marcatore della lista;
* List-style-position ... ... .... Se il marcatore viene inserito nella lista;
* List-style-type ... ... ... ... ... sorta di segnalibro dalla lista;
* Elenco in stile ... ... ... ... ... ... ... ... scorciatoia per tutte le proprietà;

I valori validi per le proprietà della lista

* List-style-image:
1. nessuno
2. URL: url (percorso / marcador.gif)
* List-style-position:
1. fuori: fuori l'etichetta di allineamento del testo
2. all'interno: una linea di demarcazione con testo
* List-style-type:
1. nessuno: nessun marcatore
2. Discussione: cerchio (sfera piena)
3. cerchio: cerchio (sfera vuota)
4. quadrato, quadrato solido
5. decimale: 1, 2, 3, 4, ...
6. decimal-leading-zero,
7. basso-romana: minuscoli romani I, II, III, IV, ...
8. superiore-romana: roman maiuscole I, II, III, IV, ...
9. lower-alpha, minuscole a, b, c, d, ...
10. superiore-alfa: una lettera maiuscola A, B, C, D, ...
11. inferiore greco
12. basso latino
13. superiore-latino
14. ebraico
15. armeno
16. georgiano
17. CJK-ideografico
18. hiragana
19. katakana
20. hiragana-Iroha
21. katakana-Iroha

BONUS!

POSIZIONE

L'attributo posizione può ricevere tre valori:

* Assoluta: è l'unico che permette di stratificazione e con essa si stabilisce una posizione sulla pagina che hai creato e pronto. Posizionamento assoluto;
* Relativo: questo valore definisce il testo avrà il resto delle posizioni sulla pagina, e quindi non possono sovrapporsi, ma è ancora in grado di riconoscere alcune caratteristiche interessanti. Posizionamento relativo;
Estatic *, determina che non riconoscerà alcuna posizione di particolari determinati dalle livelli di controllo. Posizionamento statico.

SINISTRA

Imposta la distanza che lo strato sarà il bordo sinistro del browser o l'elemento padre. Potete prendere l'valori assoluti, relativi o auto (automatico).

Nota: valori assoluti accettano valori secondo la definizione dei formati descritti in "i formati".
DESTRA

Imposta la distanza che lo strato avrà il bordo destro del browser o l'elemento padre. Potete prendere l'valori assoluti, relativi o auto (automatico).

Nota: valori assoluti accettano valori secondo la definizione dei formati descritti in "i formati".
TOP

Consente di impostare la distanza dal livello superiore avranno il browser o l'elemento padre. Potete prendere l'valori assoluti, relativi o auto (automatico).

Nota: valori assoluti accettano valori secondo la definizione dei formati descritti in "i formati".
Botom

Consente di impostare la distanza dal livello più basso avrà il browser o l'elemento padre. Potete prendere l'valori assoluti, relativi o auto (automatico).

Nota: valori assoluti accettano valori secondo la definizione dei formati descritti in "i formati".

Z-INDEX

Determina l'ordine di sovrapposizione di elementi. Accetta il valore auto (automatico) e il numero, più elevato è il valore, lo strato superiore.

VISIBILITÀ

Questo stile è usato per nascondere un elemento. Un elemento invisibile occupa ancora spazio sulla pagina. I valori validi sono: visible (visibile), hidden (nascosto) ed ereditare (attributo eredita dello strato superiore, di default).

OVERFLOW

Determina come si comporterà il contenuto del livello, quando i suoi limiti sono meno del suo contenuto. I valori validi sono: visibile (visibile, ridimensiona il livello di visualizzare il suo contenuto), nascosto (eccedenza occulto ignora il contenuto del livello), scroll (la barra di scorrimento mostra il livello) e auto (visualizza la barra di scorrimento per strato se necessario).

DISPLAY

Identifica quando e se un elemento deve essere visualizzato:

* Block: come un blocco, con interruzione di linea prima e dopo l'elemento. Crea una nuova casella in relazione ad elementi circostanti (valore di default);
* Inline: nessuna interruzione di linea prima e dopo l'elemento;
* List-item: lo stesso blocco tranne un marcatore di lista si aggiunge;
* Nessuno: è invisibile e non occupa spazio sulla pagina. Disabilita la visualizzazione degli elementi in qualsiasi situazione, compreso il secondario.

poi farò un post sulle loro innovazioni e CSS 3.

Related Posts

1. Div centro verticalmente e orizzontalmente con galleggiante e chiaro

Tags: css