Opprett CSS-stilarket
På samme måte som vi opprettet en egen tekstfil for HTML, vil du opprette en tekstfil for CSS. Hvis du trenger visuals for denne prosessen, vennligst se første veiledning. Her er fremgangsmåten for å lage ditt CSS-stilark i Notisblokk:
- Velg Arkiv> Ny i Notisblokk for å få et tomt vindu
- Lagre filen som CSS ved å klikke på Fil <Lagre som …
- Naviger til my_website-mappen på harddisken din
- Endre "Lagre som type:" til "Alle filer"
- Navngiv filen "styles.css" (la av sitatene) og klikk Lagre
Koble CSS-stilarket til HTML-en din
Når du har et stilark for webområdet ditt, må du knytte det til selve websiden. For å gjøre dette bruker du linketiketten. Plasser følgende koblingsmerke hvor som helst innenfor
koder av ditt pets.htm-dokument:
03 av 10 Når du skriver XHTML for forskjellige nettlesere, er det en ting du vil lære at de alle har forskjellige marginer og regler for hvordan de viser ting. Den beste måten å være sikker på at nettstedet ditt ser ut i de fleste nettlesere, er å ikke tillate ting som marginer som standard for nettleservalget. Jeg foretrekker å starte sidene mine øverst til venstre, uten ekstra polstring eller margin rundt teksten. Selv om jeg skal legge inn innholdet, setter jeg margene til null slik at jeg starter med samme tomme skifer. For å gjøre dette, legg til følgende i style.css-dokumentet ditt: Skriften er ofte det første du vil endre på en nettside. Standardfonten på en nettside kan være stygg, og er faktisk oppe i nettleseren, så hvis du ikke definerer skrifttypen, vet du ikke hva siden din vil se ut. Vanligvis vil du endre skrift på avsnitt, eller noen ganger på hele dokumentet selv. For dette nettstedet definerer vi skriften på topptekst og avsnittsnivå. Legg til følgende i ditt styles.css-dokument: Jeg startet med 1em som min grunnstørrelse for avsnitt og listeposter, og brukte det til å angi størrelsen på overskriftene mine. Jeg forventer ikke å bruke overskrift dypere enn h4, men hvis du planlegger at du vil ønske å stil det også. Standardfargene for koblinger er henholdsvis blå og lilla for uviste og besøkte koblinger. Selv om dette er standard, kan det ikke passe fargeskjemaet på sidene dine, så la oss endre det. I din styles.css-fil legger du til følgende: Jeg har opprettet tre koblingsstiler, a: -linken som standard, a: besøkt for når den har blitt besøkt, jeg endrer fargen og en: svinger. Med en: svever jeg har lenken, får du en bakgrunnsfarve og bli fet for å understreke at det er en link som skal klikkes. Siden vi setter navigasjonsnavnet (id = "nav") først i HTML, la oss stilere det først. Vi må angi hvor bred den skal være og sette bredere margin på høyre side, slik at hovedteksten ikke støter opp mot den. Jeg legger også en kant rundt den. Legg til følgende CSS i ditt styles.css-dokument: Listestilsegenskapen setter opp listen inne i navigasjonsseksjonen for å ikke ha noen kuler eller tall, og .fotografen stiler opphavsretten til å være mindre og sentrert i seksjonen. Ved å plassere hoveddelen med absolutt posisjonering, kan du være sikker på at den forblir nøyaktig hvor du vil at den skal være på websiden din. Jeg gjorde min 800px bred 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: Siden jeg allerede har angitt avsnittet ovenfor, ønsket jeg å gi hvert avsnitt et lite ekstra "spark" for å gjøre det skikkelig bedre. Jeg gjorde dette ved å sette en kant på toppen som markerte avsnittet mer enn bare bildet alene. Plasser følgende i ditt styles.css-dokument: Jeg bestemte meg for å gjøre det som en klasse som heter "topline" i stedet for bare å definere alle avsnittene på den måten. På denne måten, hvis jeg bestemmer meg for at jeg vil ha et avsnitt uten en topp gul linje, kan jeg bare gå av klassen = "topline" i avsnittet, og det vil ikke ha den øverste grensen. Bilder har vanligvis en grense rundt dem, dette er ikke alltid synlig med mindre bildet er en lenke, men jeg liker å ha en klasse i CSS-stilarket som automatisk slår av grensen.For dette stilarket har jeg opprettet klassen "noborder", og de fleste bildene i dokumentet er en del av denne klassen. Den andre spesielle delen av disse bildene er deres plassering på siden. Jeg ville at de skulle være en del av avsnittet de var inne 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: Som du kan se, er det også marginalegenskaper som er angitt på bildene, for å sikre at de ikke knuses opp mot den flytende teksten som er ved siden av dem i avsnittene. Når du har lagret CSS, kan du laste inn siden pets.htm i nettleseren din. Siden din skal se ut som den som vises i dette bildet, med bilder justert og navigasjonen plassert riktig på venstre side av siden. Følg disse samme trinnene for alle dine interne sider for dette nettstedet. Du vil ha en side for hver side i navigasjonen din. Løsne sidemarginene
Endre skriften på siden
Gjør dine lenker mer interessante
Styling av navigasjonsseksjonen
Plassering av hoveddelen
Styling dine avsnitt
Styling av bildene
Se nå på din ferdige side
