Lag CSS Style Sheet
På samme måte som vi opprettet en egen tekstfil for HTML, vil du opprette en tekstfil for CSS. Hvis du trenger bilder for denne prosessen, kan du se den første veiledningen. Her er trinnene for å lage CSS-stilarket i Notisblokk:
- Velge Fil> Ny i Notisblokk for å få et tomt vindu
- Lagre filen som CSS ved å klikke Fil
- Naviger til my_website-mappen på harddisken
- Endre "Lagre som type:" til "Alle filer"
- Gi filen din navnet "styles.css"(la anbudene stå) og klikk Lagre
Koble CSS Style Sheet til HTML-en
Når du har en stilark for nettstedet ditt, må du knytte det til selve websiden. For å gjøre dette bruker du koblingstaggen. Plasser følgende koblingskode hvor som helst i
Fiks sidemargene
Når du skriver XHTML for forskjellige nettlesere er en ting du vil lære at de alle ser ut til å ha forskjellige marginer og regler for hvordan de viser ting. Den beste måten å være sikker på at nettstedet ditt ser likt ut i de fleste nettlesere, er å ikke la ting som marginer være standard til nettleservalget.
Vi foretrekker å starte sider i øvre venstre hjørne, uten ekstra polstring eller margin rundt teksten. Selv om vi skal putte innholdet, setter vi marginene til null slik at vi begynner med samme blanke skifer. For å gjøre dette, legg til følgende i styles.css-dokumentet:
html, kropp {
margin: 0px;
polstring: 0px;
grense: 0px;
venstre: 0px;
topp: 0px;
}
Endre skrift på siden
Skriften er ofte det første du vil endre på en webside. Standaren skrift på en webside kan være stygg og er faktisk opp til nettleseren selv, så hvis du ikke definerer skriften, vet du virkelig ikke hvordan siden din vil se ut.
Vanligvis vil du endre skrift på avsnitt, eller noen ganger på hele selve dokumentet. For dette nettstedet definerer vi skrifttypen på topp- og avsnittnivå. Legg til følgende i ditt styles.css-dokument:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Vi startet med 1em som basisstørrelse for avsnitt og listeelementer, og brukte den til å angi størrelsen på overskriftene mine. Vi forventer ikke å bruke en overskrift dypere enn h4, men hvis du planlegger det, vil du også style den.
Gjør koblingene dine mer interessante
Standardfargene for lenker er henholdsvis blå og lilla for ubesøkte og besøkte lenker. Selv om dette er standard, passer det kanskje ikke til fargevalget på sidene dine, så la oss endre det. Legg til følgende i styles.css-filen:
en kobling {
font-familie: Arial, Helvetica, sans-serif;
farge: # FF9900;
tekstdekorasjon: understrek;
}
a: besøkt {
farge: # FFCC66;
}
a: sveve {
bakgrunn: #FFFFCC;
skriftvekt: fet;
}
Vi setter opp tre koblingsstiler, a: lenken som standard, a: besøkt for når den er besøkt, vi endrer farge og a: svever. Med a: svever har vi lenken en bakgrunnsfarge og blir fet for å understreke at det er en lenke som skal klikkes.
Styling av navigasjonsseksjonen
Siden vi setter navigasjonsdelen (id = "nav") først i HTML, la oss style den først. Vi må indikere hvor bred den skal være og legge en større margin på høyre side slik at hovedteksten ikke støter mot den. vi setter også en grense rundt den.
Legg til følgende CSS i styles.css-dokumentet:
#nav {
bredde: 225px;
margin-høyre: 15px;
border: medium solid # 000000;
}
#nav li {
liste-stil: ingen;
}
.footer {
skriftstørrelse: .75em;
klar: begge deler;
bredde: 100%;
tekstjustering: sentrum;
}
List-stil-egenskapen setter opp listen i navigasjonsseksjonen slik at den ikke har noen kuler eller tall, og .footeren utformer copyright-delen slik at den er mindre og sentrert i seksjonen.
Posisjonering av hovedseksjonen
Ved å plassere hoveddelen med absolutt posisjonering, kan du være sikker på at den vil forbli akkurat der du vil at den skal forbli på websiden din. Vi gjorde det 800 px bredt for å imøtekomme større skjermer, men hvis du har en mindre skjerm, vil du kanskje gjøre det smalere.
Plasser følgende i ditt styles.css-dokument:
#main {
bredde: 800px;
topp: 0px;
posisjon: absolutt;
venstre: 250px;
}
Styling av avsnittene dine
Siden jeg allerede har satt avsnittet over, ønsket jeg å gi hvert avsnitt et lite ekstra "spark" for å få det til å skille seg ut bedre. Jeg gjorde dette ved å sette en kant på toppen som fremhevet avsnittet mer enn bare bildet alene.
Plasser følgende i ditt styles.css-dokument:
.øverste linje {
border-top: tykt solid # FFCC00;
}
Vi bestemte oss for å gjøre det som en klasse kalt "topline" i stedet for bare å definere alle avsnitt på den måten. På denne måten, hvis vi bestemmer oss for at vi vil ha et avsnitt uten en topp gul linje, kan vi bare la være med class = "topline" i avsnittstaggen, og den har ikke den øvre rammen.
Styling av bildene
Bilder har vanligvis en kant rundt seg, dette er ikke alltid synlig med mindre bildet er en lenke, men vi liker å ha en klasse i CSS-stilark som automatisk slår av grensen. For dette stilarket opprettet vi klassen "noborder", og de fleste bildene i dokumentet er en del av denne klassen.
Den andre spesielle delen av disse bildene er plasseringen på siden. Vi ønsket at de skulle være en del av avsnittet de var i uten å bruke tabeller for å justere dem. Den enkleste måten å gjøre dette på er å bruke float CSS-egenskapen.
Plasser følgende i ditt styles.css-dokument:
#main img {
flyte: venstre;
margin-høyre: 5px;
margin-bunn: 15px;
}
.noborder {
border: 0px ingen;
}
Som du kan se, er det også satt marginegenskaper på bildene for å sikre at de ikke blir knust mot den flytende teksten som er ved siden av dem i avsnittene.
Se nå på den fullførte siden din
Når du har lagret CSS-en din, kan du laste inn pets.htm-siden på nytt i nettleseren din. Siden din skal se ut som den som vises på dette bildet, med bilder justert og navigasjonen plassert riktig på venstre side av siden.
Følg de samme trinnene for alle dine interne sider for dette nettstedet. Du vil ha en side for hver side i navigasjonen.