Opret CSS Style Sheet
På samme måde skabte vi en separat tekstfil til HTML, du vil oprette en tekstfil til CSS. Hvis du har brug for billeder til denne proces, bedes du se den første vejledning. Her er trinene til at oprette dit CSS-stilark i Notesblok:
- Vælg Filer> Ny i Notesblok for at få et tomt vindue
- Gem filen som CSS ved at klikke på Filer <Gem som …
- Naviger til my_website-mappen på harddisken
- Skift "Gem som type:" til "Alle filer"
- Navngiv din fil "styles.css" (slip fra citaterne) og klik på Gem
Link CSS Style Sheet til din HTML
Når du har et stilark til dit websted, skal du tilknytte det til selve websiden. For at gøre dette bruger du linketiketten. Anbring følgende link tag hvor som helst inden for
tags af dit pets.htm dokument:
03 af 10 Når du skriver XHTML til forskellige browsere, er en ting du vil lære, at de alle synes at have forskellige marginer og regler for, hvordan de viser ting. Den bedste måde at være sikker på, at dit websted ser ud til at være det samme i de fleste browsere, er ikke at tillade ting som margener som standard til browseren. Jeg foretrækker at starte mine sider i øverste venstre hjørne uden ekstra polstring eller margin omkring teksten. Selv hvis jeg skal pudse indholdet, sætter jeg margenerne til nul, så jeg starter med det samme blanke skifer. For at gøre dette skal du føje følgende til dit styles.css-dokument: Skrifttypen er ofte den første ting, du vil ændre på en webside. Standard skrifttypen på en webside kan være grim, og er faktisk op i selve webbrowseren, så hvis du ikke definerer skrifttypen, ved du virkelig ikke, hvordan din side vil se ud. Typisk vil du ændre skrifttypen på afsnit eller nogle gange på hele dokumentet. For dette websted definerer vi skrifttypen på overskrift og stykkenniveau. Tilføj følgende til dit styles.css-dokument: Jeg startede med 1em som min basisstørrelse for afsnit og listeposter, og brugte det til at angive størrelsen for mine overskrifter. Jeg forventer ikke at bruge en overskrift dybere end h4, men hvis du planlægger at du vil gerne stil det så godt. Standardfarverne for links er blå og lilla for henholdsvis uvisede og besøgte links. Selvom dette er standard, passer det måske ikke til dine siders farveskema, så lad os ændre det. I din styles.css-fil skal du tilføje følgende: Jeg har oprettet tre linkformater, a: linket som standard, a: besøgt for, når det er blevet besøgt, jeg ændrer farven og a: svinger. Med en: svømmer jeg har linket få en baggrundsfarve og gå fed for at understrege, at det er et link, der skal klikkes. Da vi først sætter navigeringsnavnet (id = "nav") i HTML'en, lad os først stil det. Vi skal angive, hvor bredt det skal være, og sæt en bredere margen på højre side, så hovedteksten ikke støder op imod den. Jeg sætter også en kant omkring den. Tilføj følgende CSS til dit styles.css-dokument: Ejendommen i listestilen opretter listen inde i navigationssektionen for ikke at have nogen kugler eller tal, og .footer-stilen ophavsretlige sektionen er mindre og centreret i sektionen. Ved at placere dit hovedafsnit med absolut positionering kan du være sikker på, at den forbliver præcis, hvor du vil have den på din webside. Jeg lavede min 800px bred for at imødekomme større skærme, men hvis du har en mindre skærm, vil du måske gøre det mindre. Placer følgende i dit styles.css-dokument: Da jeg allerede har angivet afsnit skrift ovenfor, ville jeg give hvert afsnit et lille ekstra "kick" for at gøre det skiller sig ud bedre. Det gjorde jeg ved at sætte en kant øverst, der fremhævede stykket mere end blot billedet alene. Placer følgende i dit styles.css-dokument: Jeg besluttede at gøre det som en klasse kaldet "topline" snarere end blot at definere alle afsnit på den måde. På denne måde, hvis jeg beslutter mig for at have et afsnit uden en øverste gule linje, kan jeg simpelthen forlade klassen = "topline" i afsnitstegnet, og den vil ikke have den øverste grænse. Billeder har typisk en kant omkring dem. Dette er ikke altid synligt, medmindre billedet er et link, men jeg kan godt lide at have en klasse i mit CSS stilark, der automatisk slukker grænsen.Til dette stilark har jeg oprettet klassen "noborder", og de fleste af billederne i dokumentet er en del af denne klasse. Den anden specielle del af disse billeder er deres placering på siden. Jeg ville have, at de skulle være en del af det afsnit, de var inde i, uden at bruge tabeller til at justere dem. Den enkleste måde at gøre dette på er at bruge float CSS-ejendommen. Placer følgende i dit styles.css-dokument: Som du kan se, er der også marginegenskaber, der er sat på billederne, for at sikre, at de ikke smadres op mod den fladte tekst, der er ved siden af dem i afsnitene. Når du har gemt dit CSS, kan du genindlæs pet.htm siden i din webbrowser. Din side skal se ud som den, der vises på dette billede, med billeder justeret og navigationen placeret korrekt på venstre side af siden. Følg disse samme trin for alle dine interne sider for denne side. Du vil have en side for hver side i din navigation. Løs sidemargenerne
Ændring af skrifttypen på siden
Gør dine links mere interessante
Styling af navigationssektionen
Placering af hovedafsnittet
Styling dine afsnit
Styling af billederne
Se nu på din komplette side
