Latest web development tutorials

Fondazione CSS di riferimento

default Fondazione

Fondazione per utilizzare la dimensione del browser predefinito del carattere ( font-size:100% ). Per la maggior parte del dispositivo browser desktop, la dimensione del font di default è 16px. Per il browser per i dispositivi mobili, la dimensione del font di default è 12px. Il font di default è "Helvetica Neue" , il default line-height a 1.5 .

Queste impostazioni vengono applicate a <body> elemento all'interno dell'elemento.

Inoltre, <p> elemento esterno e la parte inferiore della distanza (margin-bottom) è 1.25rem, line-altezza 1,6.

testo

I seguenti elementi HTML, Fondazione impostare uno stile di rendering separata non userà lo stile predefinito del browser. Fai clic su "provare" per visualizzare esempio on-line.

elemento descrizione Esempi online
<H1> - <h6> intestazioni h6 - H1 provare
<a> Luce collegamenti blu, spostare il mouse al collegamento verranno sottolineati provare
<Small> Luce sottotitolo testo grigio provare
<Blockquote> modulo Citation provare
<STRONG> Il testo in grassetto provare
<Em> corsivo provare
<Abbr> Specificare la parola sigla, utilizzare l'elemento appare punteggiata di testo sottolineatura, muovere il mouse verso l'alto chiederà provare
<Kbd> Ricevere comandi di input da tastiera: CTRL + P provare
<Hr> livello provare
<Code> frammento provare
<Ul> lista non ordinata provare
<Ol> Elenco ordinato provare
<Dl> Lista descrittiva provare

Allineamento testo

Utilizzare classe CSS per modificare l'allineamento del testo:

categoria descrizione Esempi
.text-sinistra testo allineato a sinistra provare
.text-destra testo allineato a destra provare
.text-center centro provare
.text-giustificare giustificato provare

Allineare diverse dimensioni dello schermo

Utilizzare classe CSS per modificare l'allineamento del testo di diverse dimensioni dello schermo:

categoria descrizione Esempi
sinistra
.small-text-sinistra Tutto il formato schermo di sinistra provare
.small-solo-testo-sinistra Piccolo schermo di sinistra (larghezza inferiore a 40em) provare
.medium-text-sinistra La larghezza è più grande della dimensione dello schermo 40.0625em Sinistra provare
.medium-solo-testo-sinistra larghezza 40.0625em allineata a sinistra della dimensione 64em schermo provare
.large-text-sinistra La larghezza è più grande della dimensione dello schermo 64.0625em Sinistra provare
.large-solo-testo-sinistra larghezza 64.0625em allineata a sinistra della dimensione 90em schermo provare
.xlarge-text-sinistra La larghezza è più grande della dimensione dello schermo 90.0625em Sinistra provare
.xlarge-solo-testo-sinistra larghezza 90.0625em allineata a sinistra della dimensione 120em schermo provare
.xxlarge-text-sinistra La larghezza è più grande della dimensione dello schermo 120em Sinistra provare
Allinea a destra
.small-text-destra Tutte le dimensioni dello schermo allineato a destra provare
.small-solo-testo-destra Piccolo schermo allineamento a destra (larghezza inferiore a 40em) provare
.medium-text-destra Larghezza maggiore della dimensione dello schermo 40.0625em allineato a destra provare
.medium-solo-testo-destra larghezza 40.0625em allineata alle dimensioni dello schermo a destra 64em provare
.large-text-destra Larghezza maggiore della dimensione dello schermo 64.0625em allineato a destra provare
.large-solo-testo-destra larghezza 64.0625em allineata alle dimensioni dello schermo a destra 90em provare
.xlarge-text-destra Larghezza maggiore della dimensione dello schermo 90.0625em allineato a destra provare
.xlarge-solo-testo-destra larghezza 90.0625em allineata alle dimensioni dello schermo a destra 120em provare
.xxlarge-text-destra Larghezza maggiore della dimensione dello schermo 120em allineato a destra provare
allineare
.small-text-centro Allineare tutte le dimensioni dello schermo provare
.small-solo-testo-center Le piccole dimensioni dello schermo centrato (larghezza inferiore a 40em) provare
.medium-text-centro Larghezza maggiore rispetto alla dimensione dello schermo centrato 40.0625em provare
.medium-solo-testo-center larghezza 40.0625em per dimensioni dello schermo centrato 64em provare
.large-text-centro Larghezza maggiore rispetto alla dimensione dello schermo centrato 64.0625em provare
.large-solo-testo-center larghezza 64.0625em per dimensioni dello schermo centrato 90em provare
.xlarge-text-centro Larghezza maggiore rispetto alla dimensione dello schermo centrato 90.0625em provare
.xlarge-solo-testo-center 90.0625em larghezza di 120em dimensioni dello schermo centrato provare
.xxlarge-text-centro Larghezza maggiore rispetto alla dimensione dello schermo centrato 120em provare
giustificato
.small-text-giustifica Tutte le dimensioni dello schermo sono giustificate provare
.small-solo-testo-giustifica Giustificare le piccole dimensioni dello schermo (larghezza inferiore a 40em) provare
.medium-text-giustificare La larghezza è più grande della dimensione dello schermo 40.0625em Justify provare
.medium-solo-testo-giustificare Allineare entrambe le estremità della larghezza dello schermo di dimensioni 40.0625em 64em provare
.large-text-giustificare La larghezza è più grande della dimensione dello schermo 64.0625em Justify provare
.large-solo-testo-giustificare Allineare entrambe le estremità della larghezza dello schermo di dimensioni 64.0625em 90em provare
.xlarge-text-giustificare La larghezza è più grande della dimensione dello schermo 90.0625em Justify provare
.xlarge-solo-testo-giustificare Allineare entrambe le estremità della larghezza del 90.0625em dimensioni dello schermo 120em provare
.xxlarge-text-giustificare La larghezza è più grande della dimensione dello schermo 120em Justify provare

altro

categoria descrizione Esempi
.left -Floating sinistra elemento provare
.right elementi flottanti a destra provare
.clearfix Float chiaro - deve essere aggiunto l'elemento elemento genitore galleggiante
.nascosto elemento nascosto (il CSS display: none ) provare
.list-Inline Tutti gli elementi disposti nella stessa riga provare
.lead Lasciate <p> elemento è più evidente provare
.subheader Impostazione <h1> di colore chiaro - <h6> elementi provare