September 13
CSS è un modo efficace per creare progetti di successo in siti web. Per i siti commerciali, con un buon design può fare la differenza tra successo e fallimento. Usando i CSS è il metodo principale coinvolto nel presentare i contenuti di un negozio online in modo efficace. I principi fondamentali della progettazione CSS sono semplici e facili da imparare, quindi non c'è nessun problema se si dispone di alcuna precedente esperienza di usarlo. Può essere più facile per ottenere un buon progetto, se si crea utilizzando un programma di grafica o addirittura disegnando su carta, poi tradurre questo in CSS.
1 Creare un file per le regole CSS, per tenerli separati dal sito HTML. Creare un nuovo file in un editor di testo e salvarlo come "storestyle.css" o qualcosa di simile, ponendolo nella directory principale del tuo sito. Link a questa nella sezione <head> delle pagine HTML del tuo negozio online come segue:
<Link rel = "stylesheet" type = "text / css" href = "storestyle.css" />
Cercate di fare in modo che il codice HTML contiene solo il contenuto del sito, con indicazioni di come sta andando ad avere uno stile conservato nel CSS. L'HTML deve contenere i dati, testi, immagini e controlli utente che consente la navigazione e l'ordinazione come richiedete.
2 Creare un elenco di regole di stile nel vostro file CSS, come nel seguente esempio:
/
Stile per HTML <body> /
corpo
{Font-family: Arial, Helvetica, sans-serif; background: # 99FFFF;}
Consente di impostare il colore per l'intera pagina del carattere e dello sfondo. È possibile utilizzare i CSS per impostare molte proprietà differenti di aspetto sito, inclusi testo e colori di sfondo, font, il layout, le immagini di sfondo e le posizioni degli elementi. Lavoro attraverso ciascuno degli elementi necessari per lo stile, a sua volta, aggiungere al vostro foglio di stile un elemento alla volta e il test ogni volta che si effettua una aggiunta in modo che gli errori sono più facili da identificare.
3 Impostare le proprietà universali nel foglio di stile per le regole che si desidera applicare attraverso il sito. Lo scopo principale dei CSS è quello di applicare le stesse proprietà di elementi di tutto un sito web o una pagina. È possibile personalizzare il modo in cui ogni elemento di un certo tipo è quello di apparire come segue:
/
Stile per HTML <a> elementi /
a: link, a: visited, a: hover
{Text-decoration: none; font-weight: bold}
Ciò elimina la sottolineatura automatica da qualsiasi link nel codice HTML e li fa apparire in grassetto in tutto il sito. elementi di ancoraggio sono trattati in modo diverso quando vengono aleggiava con il mouse o sono già stati visitati, motivo per cui tre tipi sono elencati.
4 Aggiungere attributi per gli elementi HTML per identificarli nel CSS. Per sfruttare le proprietà cascata di CSS per sotto-sezioni di tipi di elementi nel vostro sito, è necessario identificare gli elementi in modo che possano essere in stile in modo appropriato, come nel seguente esempio:
<Div class = "prodotto"> I dettagli di un prodotto andate qui. </ Div>
Nel vostro file CSS:
/
Stile per HTML <div> elementi con attributo class di prodotto /
div.product
{Background: # FFFF99; border: 1px solid # CCCCCC;}
Ciò indica che ogni <div> con l'attributo "prodotto" di classe avranno uno sfondo giallo pallido e il bordo grigio chiaro.
5 Combina il tuo CSS con altre tecnologie come JavaScript. La gente si aspetta un alto livello di interattività con negozi online, e per raggiungere questo obiettivo è necessario utilizzare una varietà di risorse. Scopri librerie di codice gratuiti come jQuery per gli effetti CSS interattivi, la maggior parte dei quali sono estremamente facile da usare. CSS è uno strumento chiave nella creazione di grandi disegni negozio on-line, ma è meglio combinato con l'uso di altri media come immagini e video per creare un'esperienza stimolante per i clienti.