Hvordan lage en master CSS-fil - dummies

Mange designere lager sin egen versjon av en master CSS-fil med HTML-koder, som de tilpasser seg behovene til hvert enkelt nettsted, for å bidra til å raskere prosessen med å bygge et nettsted fra bunnen av.

Når du bygger flere og flere nettsteder, vil noen stiler bli en vanlig del av din standard design praksis. For eksempel kan du alltid sette sidemarginene til 0, angi bakgrunnsfargen på en side, velge en standardfont for all tekst, lage omdefinerte stiler for avsnitt og overskrifter, angi stilattributter for minst to (lenke og besøkte) hyperkobling stater, og lage en egendefinert kule stil.

Bruk denne filen til å teste stilene for CSS mens du lager master css-filen. Eksempel-HTML-filen inneholder avsnittet tekst, en overskrift 1, en overskrift 2, en uordnet liste og et par fungerende hyperkoblinger.

For å lage din egen master CSS-fil, følg disse trinnene:

Lag et nytt tomt dokument uten HTML-koding, og lagre det med filnavn-masteren. css.

Lagre denne CSS-filen på samme sted på datamaskinen som din prøve. html-fil.
Inne i prøvenes område. html-fil, legg til en kobling til den nye eksterne css-filen som inneholder medietypen som er satt til alle:
Denne koblingen forteller prøven. html-fil for å bruke stildefinisjonene i koblet eksternt CSS.
Inne i mesteren. css-fil, opprett en Tag-omdefinere-stil for taggen som angir topp, venstre, bunn og høyre sidemarginaler til 0px; polstring på alle fire sider av siden til 10px; og bakgrunnen til en lys peachy oransje farge med den heksadesimale verdien av # fc3bb6.

Din stilkode skal se slik ut:
```
body {margin: 0px; polstring: 10px; bakgrunnsfarge: # fc3bb6;}
```
Når alle fire sider av et objekt bruker samme verdi, som med marginavstanden og utfyllingen vist her, må verdien bare angis i CSS bare én gang. Men når verdien er forskjellig på en eller flere sider, må du angi verdier for hver av sidene:
```
body {margin: 10px 10px 0px 0px; polstring: 20px 0px 0px 20px; bakgrunnsfarge: # fc3bb6;}
```

Opprett en taggdefiner stil i CSS-filen for

og

-kodene ved å angi skriftstørrelse, skriftstørrelse og skriftfarge for hver.

Bruk hvilken som helst skrift, størrelse, vekt og farge du liker fordi du kan tilpasse verdiene senere for å matche et bestemt prosjekt. Her er et eksempel på koden du kan bruke:

p {font-family: Georgia, "Times New Roman", Times, serif; skriftstørrelse: 12px; farge: # 000000;} h1 {font-familie: Arial, Helvetica, sans-serif; skriftstørrelse: 36px; font-weight: bold; farge: # 000066;} h2 font-familie: Arial, Helvetica, sans-serif; skriftstørrelse: 24px; font-weight: bold; farge: # 000066;}

Hvis du vil endre standard hyperkoblings-stil, kan du opprette pseudoklasseelementstiler for hver av de fire hyperkoblingstilstandene.

Du kan angi noen attributter du vil ha for hver av de fire tilstandene, fra å endre skrift eller skriftvekt, for å endre tekstfargen eller bakgrunnsfargen, for å endre standardtekstdekorasjonen.

Her er et eksempel på koden du kan bruke for de fire koblingslandene:
```
a: link {font-weight: bold; tekst-dekorasjon: understreke; farge: # 0099cc;} a: besøkt {font-weight: bold; tekst-dekorasjon: understreke; farge: # 990000;} a: svever {font-weight: normal; tekst-dekorasjon: ingen; farge: #ffffff; bakgrunn: # ff9933;} a: aktiv {font-weight: normal; tekst-dekorasjon: ingen; farge: #ffffff; bakgrunn: # cc0000;}
```
Hvis du vil utforme den uordnede listen, kan du enten omdefinere taggen
eller opprette en klassestil som kan brukes selektivt til en hvilken som helst
tag med klassetributtet. Hvis ønskelig, angi et bilde som skal erstatte standardkulene.

Stildefinisjonen ser ut som om du omdefinerer taggen
eller lager din egen tilpassede klassestil; bare selgeren er skrevet forskjellig, som enten li eller kanskje som. kule.

Koden for bullet li-omdefiner stilen kan se slik ut:
```
li {listestil-posisjon: utenfor; liste-stil-bilde: url (bilder / bullet. gif); font-familie: Arial, Helvetica, sans-serif; fontstørrelse: 12px;}
```
Lagre HTML- og CSS-filene og start HTML-filen i et nettleservindu.

For å vise siden i en nettleser, kan du enten dobbeltklikke på HTML-filen eller dra og slippe filikonet i et hvilket som helst åpent nettleservindu.

Filen skal vises med alle stilattributtene du nettopp har opprettet i master CSS-filen din. Hvis det ikke ser helt riktig ut, eller hvis visse elementer ikke vises riktig, åpner du filene og kontrollerer nøyaktigheten av hele koden, reparerer eventuelle feil du finner, og prøv igjen. Pass på at du har husket å legge til perioden (.) Før alle dine egendefinerte klassenavn og et tallsymbol (#) før alle dine heksadesimale fargeværdier.
Test dine nye hyperkoblingsstiler i nettleservinduet ved
1. Mousing over en lenke for å se hover-stilen.
2. Klikk og hold musen over en lenke for å se den aktive stilen.
3. Klikk på en kobling og returner til eksempelsiden din ved å klikke på Back-knappen for å se hvordan koblingen endres fra det normale til den besøkte lenken.

Nå som du har din første master CSS-fil, i stedet for å gjenoppfinne hjulet hver gang du starter et nytt webprosjekt, kan du bruke denne filen som utgangspunkt. Selvfølgelig, for noen prosjekter kan det være lettere eller praktisk å bygge CSS fra grunnen, men hvis du har en master CSS-fil sparer du tid, bruker du det som en designteknikk.