Hvordan bruke CSS til å utforme en nettbutikk

May 4

CSS er en effektiv måte å skape vellykkede design i nettsteder. For kommersielle nettsteder, kan ha en god design utgjøre forskjellen mellom suksess og fiasko. Ved hjelp av CSS er den primære metoden involvert i å presentere innholdet på en nettbutikk effektivt. De grunnleggende prinsippene for CSS-designen er enkel og lett å plukke opp, så det er ikke noe problem hvis du ikke har noen tidligere erfaring med det. Det kan være lettere å få til en god design hvis du først opprette den ved hjelp av en grafisk design program eller ved å skissere den på papir, senere oversette dette til CSS.

Bruksanvisning

1 Lag en fil for CSS-regler, for å holde dem atskilt fra området HTML. Opprett en ny fil i en tekst editor og lagre det som "storestyle.css" eller noe lignende, plassere den i rotkatalogen på nettstedet ditt. Link til dette i <head> -delen av nettbutikkens HTML-sider som følger:

Prøv å sørge for at HTML bare inneholder innholdet på nettstedet, med indikasjoner på hvordan det kommer til å bli stylet holdes i CSS. HTML skal inneholde data, tekst, bilder og brukerkontroller slik at navigasjon og bestilling som du trenger.

2 Lag en liste over stilregler i CSS-filen som i følgende eksempel:

Stil for HTML <body> element /
kropp
{Font-family: Arial, Helvetica, sans-serif; bakgrunn: # 99FFFF;}

Dette setter skrift og bakgrunnsfarge for hele siden. Du kan bruke CSS til å sette mange forskjellige egenskaper av nettstedet utseende, inkludert tekst og bakgrunnsfarger, fonter, layout, bakgrunnsbilder og element stillinger. Arbeid gjennom hver av de elementene du trenger å style i sin tur, og legger til din style sheet ett element om gangen og testing når du gjør et tillegg slik at feil er lettere å identifisere.

3 Sett universelle egenskaper i stilarket for reglene du vil bruke på tvers av området. Hovedformålet med CSS er å bruke de samme egenskapene til elementer gjennom en nettside eller siden. Du kan skreddersy måten at hvert element av en bestemt type er å se slik ut:

/

Stil for HTML <a> elementer /
a: link, a: besøkte, a: hover
{Text-decoration: none; font-weight: bold}

Dette fjerner automatisk understreking fra eventuelle lenker i HTML og gjør dem vises i fet skrift i hele området. Anker elementer blir behandlet annerledes når de blir svevde over med musen eller allerede har blitt besøkt, og det er derfor tre typene er oppført.

4 Legg attributtene til HTML-elementer til å identifisere dem i CSS. For å dra nytte av de brusende egenskapene til CSS for under deler av elementtyper i området, må du identifisere de elementene slik at de kan bli stylet på riktig måte, som i følgende eksempel:

<Div class = "produkt"> Detaljene for et produkt gå her. </ Div>

I CSS-filen:

Stil for HTML <div> elementer med produktklasse attributt /
div.product
{Background: # FFFF99; border: 1px solid #CCCCCC;}

Dette indikerer at hver <div> med klassen attributt "produkt" vil ha en blek gul bakgrunn og lys grå kant.

5 Kombiner CSS med andre teknologier som Javascript. Folk forventer et høyt nivå av interaktivitet med nettbutikker, og for å oppnå dette må du bruke en rekke ressurser. Sjekk ut gratis kode biblioteker som jQuery for interaktive CSS-effekter, hvorav de fleste er svært enkel å bruke. CSS er et viktig verktøy i å skape gode nettbutikken design, men er best kombinert med bruk av andre medier som bilder og video for å skape et stimulerende opplevelse for kundene.