Pubblicazioni come giornali e riviste formattare testo in colonne per la lettura più facile, poiché l'occhio tende a vagare quando leggere lunghe righe di testo. Poiché Cascading Style Sheets livello 3 (CSS3) ha aggiunto la proprietà per la formattazione con più colonne, questo è un buon effetto per aggiungere alle pagine Web. Utilizzare più colonne per spezzare grandi blocchi di testo ed elenchi puntati lungo. Tenete a mente, però, che i vecchi browser non supporterà più colonne senza un JavaScript fallback.
Istruzioni
1
Aprire il tuo file CSS in blocco note o un editor di codice e aggiungere una nuova regola di stile:
{. Text-colonne
}
Questa regola consente di selezionare qualsiasi elemento HTML con un nome di classe di "colonne di testo." È possibile utilizzare successivamente per aggiungere stili di colonna a qualsiasi testo sulla tua pagina Web.
2
Impostare il numero di colonne utilizzando la proprietà "column-count":
{. Text-colonne
column-count: 4;
}
È possibile impostare qualsiasi numero di colonne desiderato per questa proprietà, tenendo tuttavia presente che Firefox non romperà le parole lunghe, causando loro di fluire sopra altre colonne se si imposta un numero eccessivo di loro. Browser basati su WebKit Chrome e Safari spezzare le parole, però.
3
Definire le dimensioni delle grondaie tra le colonne utilizzando la proprietà "colonna-gap":
{. Text-colonne
numero di colonne: 4;
colonna-gap: 10px;
}
Non utilizzare valori di percentuale come "10%" in questa struttura perché i browser lo ignora. È possibile, tuttavia, utilizzare ems per dare il vostro colonna dimensioni lacune rispetto al testo di colonna: "2em".
4
Se si desidera linee che separano le colonne, aggiungere le regole della colonna:
{. Text-colonne
numero di colonne: 4;
colonna-gap: 10px;
colonna-regola: 1px solid #eee;
}
La proprietà "column-rule" ha tre valori: larghezza della regola, regola stile e colore. Questi valori funzionano esattamente come quelli delle frontiere. È inoltre possibile impostare stili come "tratteggiato" per creare una regola di colonna tratteggiata. Si noti che le regole guardano meglio all'interno di più grandi lacune di colonna di venti pixel o più.
5
Duplicare tutte le proprietà di colonna e aggiungere la "-moz" prefisso per ciascuno di essi. Fare lo stesso per "-webkit":
{. Text-colonne
numero di colonne: 4;
colonna-gap: 10px;
colonna-regola: 1px solid #eee;
-moz-column-count: 4;
-moz-colonna-gap: 10px;
-moz-column-rule: 1px solid #eee;
-webkit-column-count: 4;
-webkit-colonna-gap: 10px;
-webkit-column-rule: 1px solid #eee;
}
Questo aggiungerà il supporto per Firefox, Chrome e Safari finché non implementano completamente colonne come standard. Opera supporta già le colonne CSS senza prefissi di browser. Internet Explorer 9 non li supporta a tutti ma li supporterà completamente in versione 10.
6
Aprire la pagina Web in blocco note o un editor di codice e trovare i tag per tutti gli elementi in cui si desidera visualizzare il testo in colonne. Aggiungere il nome della classe "colonne di testo":
< div class = "testo-colonne" >
Contenuto qui...
< / div >
È possibile aggiungere colonne per altri tipi di testo oltre a paragrafi piano. Aggiungere colonne a elenchi puntati o elenchi numerati, troppo.