Styling af en Notepad Oprettet webside med CSS

click fraud protection

Opret CSS Style Sheet

Opret CSS Style Sheet

På samme måde oprettede vi en separat tekstfil til HTML, opretter du en tekstfil til CSS. Hvis du har brug for grafik til denne proces, se den første vejledning. Her er trinene til oprettelse af dit CSS-stilark i Notesblok:

  1. Vælge Fil> Ny i Notesblok for at få et tomt vindue
  2. Gem filen som CSS ved at klikke på Fil
  3. Naviger til my_website-mappen på din harddisk
  4. Skift "Gem som type:" til "Alle filer"
  5. Navngiv din fil "styles.css"(slip citaterne) og klik Gemme

Link CSS Style Sheet til din HTML

Link CSS Style Sheet til din HTML

Når du har en stilark for dit websted, skal du knytte det til selve websiden. For at gøre dette bruger du linketiketten. Placer følgende link tag hvor som helst inden for.

Ret sidemargenerne

Ret sidemargenerne

Når du skriver XHTML for forskellige browsere er en ting, du lærer, at de alle ser ud til at have forskellige margener og regler for, hvordan de viser ting. Den bedste måde at være sikker på, at dit websted ser det samme ud i de fleste browsere, er at ikke lade ting som margener være standard til browservalget.

instagram viewer

Vi foretrækker at starte sider i øverste venstre hjørne uden ekstra polstring eller margen omkring teksten. Selvom vi skal pude indholdet, sætter vi margenerne til nul, så vi starter med den samme tomme skifer. For at gøre dette skal du tilføje følgende til dit styles.css-dokument:

html, krop {
margen: 0px;
polstring: 0px;
kant: 0px;
venstre: 0px;
top: 0px;
}

Ændring af skrifttype på siden

Ændring af skrifttype på siden

Skrifttypen er ofte den første ting, du vil ændre på en webside. Standardindstillingen skrifttype på en webside kan være grim og er faktisk op til selve webbrowseren, så hvis du ikke definerer skrifttypen, ved du virkelig ikke, hvordan din side vil se ud.

Typisk ændrer du skrifttypen på afsnit eller nogle gange på hele selve dokumentet. For dette websted definerer vi skrifttypen på side- og afsnitniveau. Føj følgende til dit styles.css-dokument:

p, li {
skrifttype: 1em Arial, Helvetica, sans-serif;
}
h1 {
skrifttype: 2em Arial, Helvetica, sans-serif;
}
h2 {
skrifttype: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
skrifttype: 1.25em Arial, Helvetica, sans-serif;
}

Vi startede med 1 em som basisstørrelse for afsnit og listeelementer og brugte derefter det til at indstille størrelsen på mine overskrifter. Vi forventer ikke at bruge en overskrift dybere end h4, men hvis du planlægger det, vil du også style det.

Gør dine links mere interessante

Gør dine links mere interessante

Standardfarverne for links er henholdsvis blå og lilla for ubesøgte og besøgte links. Selvom dette er standard, passer det muligvis ikke til farveskemaet på dine sider, så lad os ændre det. Tilføj din følgende i din styles.css-fil:

et link {
font-familie: Arial, Helvetica, sans-serif;
farve: # FF9900;
tekst-dekoration: understreg;
}
a: besøgte {
farve: # FFCC66;
}
a: svæv {
baggrund: #FFFFCC;
font-vægt: fed;
}

Vi opretter tre linkformater, a: linket som standard, a: besøgt for når det er blevet besøgt, vi ændrer farven og a: svæver. Med a: svæver vi har linket få en baggrundsfarve og blive fed for at understrege, at det er et link, der skal klikkes på.

Styling af navigationsafsnittet

Styling af navigationsafsnittet

Da vi sætter navigationssektionen (id = "nav") først i HTML, lad os style den først. Vi er nødt til at angive, hvor bred den skal være, og lægge en bredere margen på højre side, så hovedteksten ikke støder op mod den. vi lægger også en grænse omkring den.

Føj følgende CSS til dit styles.css-dokument:

#nav {
bredde: 225px;
margen-højre: 15px;
grænse: medium solid # 000000;
}
#nav li {
liste-stil: ingen;
}
.footer {
skriftstørrelse: .75em;
klart: begge;
bredde: 100%;
tekstjustering: center;
}

List-stil egenskaben indstiller listen inde i navigationsafsnittet, så den ikke har kugler eller tal, og .footer stiler ophavsretssektionen, så den er mindre og centreret i sektionen.

Placering af hovedsektionen

Placering af hovedsektionen

Ved at placere din hovedsektion med absolut positionering kan du være sikker på, at den forbliver nøjagtigt, hvor du vil have den, på din webside. Vi fik den 800 px bred for at rumme større skærme, men hvis du har en mindre skærm, vil du måske gøre det smallere.

Placer følgende i dit styles.css-dokument:

#main {
bredde: 800 px;
top: 0px;
position: absolut;
venstre: 250px;
}

Styling af dine afsnit

Styling af dine afsnit

Da jeg allerede har indstillet afsnitstypen ovenfor, ville jeg give hvert afsnit et lille ekstra "spark" for at gøre det bedre. Jeg gjorde dette ved at sætte en kant på toppen, der fremhævede afsnittet mere end blot billedet alene.

Placer følgende i dit styles.css-dokument:

.topline {
kant-top: tykt solidt # FFCC00;
}

Vi 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 vi beslutter, at vi vil have et afsnit uden en øverste gule linje, kan vi simpelthen udelade class = "topline" i afsnitstagget, og det har ikke den øverste kant.

Styling af billederne

Styling af billederne

Billeder har typisk en kant omkring sig, dette er ikke altid synligt, medmindre billedet er et link, men vi kan godt lide at have en klasse inden for CSS-stilark, der automatisk slukker grænsen. Til dette typografiark oprettede vi klassen "noborder", og de fleste billeder i dokumentet er en del af denne klasse.

Den anden specielle del af disse billeder er deres placering på siden. Vi ønskede, at de skulle være en del af det afsnit, de var 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:

#main img {
flyde: venstre;
margen-højre: 5 px;
margin-bund: 15px;
}
.noborder {
kant: 0px ingen;
}

Som du kan se, er der også indstillet margenegenskaber på billederne for at sikre, at de ikke smadres op mod den flydende tekst, der er ved siden af ​​dem i afsnittene.

Se nu på din afsluttede side

Se nu på din afsluttede side

Når du har gemt din CSS, kan du genindlæse pets.htm-siden i din webbrowser. Din side skal se ud som den, der vises på dette billede, med billederne justeret og navigationen placeret korrekt i venstre side af siden.

Følg de samme trin for alle dine interne sider for dette websted. Du vil have en side for hver side i din navigation.

instagram story viewer