Hvordan lage Cascading Style Sheets (CSS) enkelt og greit

October 31  by Eliza

Det er virkelig ingen rett eller gal måte å skape Cascading Style Sheets (CSS) for Javascript-applikasjoner, men ved hjelp av en organisert tilnærming kan gjøre oppgaven gå raskere og gi bedre resultater med færre feil. Tross alt, er CSS egentlig om å gi en organisert og hyggelig side utseende slik at brukeren bruker mer tid vise informasjon i stedet for å prøve å finne ut hvor informasjonen ligger.

Følgende trinn gir en prosess du kan bruke til å opprette CSS:

Hvordan lage Cascading Style Sheets (CSS) enkelt og greit

Definere et grunnleggende design for området som helhet.

Bestemme hvordan du vil plassere elementer på skjermen. For eksempel, bestemme hvor du vil plassere en meny. Hvis området skal bruke topp- og bunntekst, må du vurdere hvordan disse elementene vil vises. Hovedinnholdet skal vises i midten av siden, men mange steder også stole på sidefelt for å gi detaljer om elementene brukeren velger. Hereâ € ™ sa typisk eksempel på en side design:

Utvikle en mal for sidene dine som bruker denne grunnleggende design og deretter bruke denne malen for å lage selve sidene.

Malen bør inneholde alle elementer av den grunnleggende design. Bruk <div> koder for å skape elementene. Legg en test oppføring i hvert av områdene slik at du kan se hvor godt CSS fungerer. Hereâ € ™ s et eksempel på en mal du kan bruke med oppsettet for dette eksempelet:

<! DOCTYPE html>

<Html>
<Head>
<Link rel = "stylesheet" href = "Sample.css" />
<Title> Arbeide med CSS </ title>
</ Head>

<Body>
<Div id = "Meny">
<P> Meny </ p>
</ Div>
<Div id = "Header">
<P> Header </ p>
</ Div>
<Div id = "Sidebar">
<P> Sidebar </ p>
</ Div>
<Div id = "innhold">
<P> Innhold </ p>
</ Div>
<Div id = "bunntekst">
<P> bunntekst </ p>
</ Div>
</ Body>
</ Html>

Lag en liste over de elementene du ønsker å style.

Malen inneholder en liste over grunnleggende elementer som du må ta med i din CSS fil. Ita € ™ s viktig å tenke gjennom oppsettet prosessen. Elementet liste fungerer som en disposisjon for layout. Du bruker den til å sikre den resulterende CSS vil oppfører seg som forventet.

Utvikle en CSS-fil for å gå med malen.

Den CSS filen skal inneholde all informasjon som kreves for å gjøre layout en realitet. Her er en grunnleggende eksempel på hva CSS kan se ut for dette eksempelet:

div
{
text-align: center;
font-family: sans-serif;
font-size: 20px;
border: 0px;
padding: 0px;
}

#Menu
{
position: absolute;
background-color: #bfbfff;
width: 90%;
høyde: 80px;
}

#header
{
position: absolute;
top: 80px;
background-color: # FFFF00;
width: 90%;
høyde: 80px;
}

#Sidebar
{
position: absolute;
top: 160px;
background-color: # 00FF00;
width: 30%;
høyde: 200px;
}

#content
{
position: absolute;
top: 160px;
venstre: 31%;
background-color: # ff8080;
width: 60%;
høyde: 200px;
}

#footer
{
position: absolute;
top: 360px;
background-color: # 00FFFF;
width: 90%;
høyde: 80px;
}

Hvordan lage Cascading Style Sheets (CSS) enkelt og greit

Teste oppsettet i alle nettleserne du har tenkt å støtte for søknaden.

Testing er en viktig del av å skape en layout. Noen ganger må du justere noen av layout parametere for å få ønsket resultat. Hereâ € ™ s hvordan oppsettet ser ut i Chrome. Oppsettet ser i hovedsak de samme i Firefox og Internet explorer også.