Sådan oprettes et simpelt CSS-stilark ved hjælp af Notepad

ThisTeaches dig, hvordan du bruger Windows `Notepad-app til at gemme oplysninger til en webside skrevet i HTML og CSS. HTML er programmeringssproget, der bruges til at oprette din webside, mens CSS er det sprog, der bestemmer stilfarven, skrifttypen, og så på HTML-elementerne på websiden.

Trin

Del 1 af 3:

Oprettelse af en HTML-side

1. Åben notesblok. Åben Start

, indtaste Notepad, og klik på den blå Notepad app øverst i startvinduet.

Billedet med titlen Opret et simpelt CSS-stylesheet ved hjælp af Notepad Trin 2

2. Angiv dokumenttypen. Type ind i notesblok, og tryk derefter på ↵ ENTER for at starte en ny linje.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 3

3. Tilføj HTML-mærket. Indtast og tryk på ↵ ENTER.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 4

4. Indtast kroppen. Indtast og tryk på ↵ ENTER. Du kan nu begynde at indtaste dine websideoplysninger.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 5

5. Tilføj en header. Indtaste TEKST, Sørg for at erstatte "TEKST" med din foretrukne side overskrift, og tryk på ↵ ENTER.

For eksempel at oprette en sidehoved, der siger "Velkommen!", du ville skrive Velkommen! ind i notesblok.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 6

6. Tilføj tekst under overskriften. Indtaste TEKST, Sørg for at erstatte "TEKST" med din foretrukne besked, og tryk på ↵ ENTER.

For eksempel at tilføje tekst, der siger "Jeg er en leguana", du ville indtaste Jeg er en leguana ind i notesblok.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 7

7. Tilføj flere overskrifter og afsnit. Hver efterfølgende overskrift og afsnit skal have et stigende nummer, der anvendes på det - for eksempel vil din anden header have tags omkring det, og andet afsnit vil have tags.

Sørg for, at du fortsætter med at trykke på ↵ Indtast efter hver linje af kode.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 8

8. Luk kroppen og HTML-tags. Når du har indtastet din sidste kodeord, skal du skrive på sin egen linje og trykke på ↵ ENTER, og indtast derefter . Dit dokument er nu klar til at blive stylet med CSS.

Del 2 af 3:

Tilføjelse af CSS

1. Forstå, hvordan CSS virker. Du bruger CSS til at ændre udseendet af et HTML-element (E.G., et afsnit). CSS er typisk skrevet i det følgende line-by-line format:

Element Tag { (for eksempel, p {)
Modifikator: Ejendom- (for eksempel, Font-størrelse: 20px-)
Modifikator: Ejendom- (for eksempel, Farve: Black-)
}

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 10

2. Placer et mellemrum mellem og tags. Disse skal være tæt på toppen af siden.

Billedet med titlen Opret et simpelt CSS Stylesheet ved hjælp af Notepad Trin 11

3. Indtast et hovedmærke. Indtast og tryk på ↵ ENTER.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 12

4. Tilføj en stil tag. Indtast og tryk på ↵ ENTER.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 13

5. Skift din webside baggrundsfarve. For at gøre det:

Indtaste krop { og tryk på ↵ ENTER.

Indtaste Baggrundsfarve: LightBlue- og tryk på ↵ ENTER.

Du kan bruge enhver understøttet farve her, såvel som "lys" eller "mørk" Modifiers.

Indtast} og tryk på ↵ ENTER.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 14

6. Style din første header. Indtaste h1 { og tryk på ↵ ENTER, tilføj en modifikator, og tryk på ↵ ENTER, og indtast}, og tryk på ↵ ENTER. Du kan tilføje flere modifikatorer til et element, så længe hver modifikator er på egen linje. Fælles modifikatorer omfatter følgende:

Tekststørrelse - Indtaste Font-størrelse: 30px- For at indstille din tekst som 30-punkts skrifttype. Erstatte et hvilket som helst nummer, du vil bruge.

Tekstfarve - Indtaste Farve: Black- at lave sort tekst. Erstatte enhver farve, du vil bruge.

Tekstjustering - Indtaste Tekst-ALIGN: Center- at centrere teksten. Du kan også skrive venstre eller ret For at justere teksten korrekt.

Skrifttype brugt - Indtaste Font-Family: Times New Roman- For at indstille din skrifttype som Times New Roman. Du kan også bruge skrifttyper som Verdana eller Georgia.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 15

7. Style dit første afsnit. Indtaste p1 { og tryk på ↵ ENTER, tilføj en modifikator, og tryk på ↵ ENTER, og indtast}, og tryk på ↵ ENTER.

De modifikatorer, du kan bruge her, er identiske med dem, der bruges til overskriften.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 16

8. Style resten af dit dokument. Du kan style ethvert element ved at henvise til mærketeksten og placere en åben krøllet beslag ({), tilføje modifikatorer, og derefter lukker beslaget (}).

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 17

9. Luk stil og hoved tags. På en ny linje under din sidste styling tekst, skriv ind og tryk på ↵ ENTER, og indtast derefter og tryk på ↵ ENTER. Dit CSS-ark er komplet, hvilket betyder at du nu kan gennemgå og gemme det.

Del 3 af 3:

Gem dokumentet

1. Gennemgå dit CSS Stylesheet. Dit CSS-dokument varierer lidt, men det skal se sådan ud:

krop {
Baggrundsfarve: LightBlue-
}
h1 {
Font-størrelse: 45px-
}
p1 {
Farve: Black-
}
Hej!
Jeg er en leguana

Billedet med titlen Opret et simpelt CSS Stylesheet ved hjælp af Notepad Trin 19

2. Klik Fil. Det er i øverste venstre hjørne af notesblok vinduet. En rullemenu vises.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 20

3. Klik Gem som…. Du vil se dette nær bunden af rullemenuen. Ved at klikke på det beder om et vindue for at åbne.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 21

4. Vælg en Gem placering. Klik på en mappe (E.G., Desktop) på venstre side af vinduet.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 22

5. Klik på "Gem som Type" drop-down boks. En rullemenu vises.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 23

6. Klik Alle filer. Det er i rullemenuen.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 24

7. Navngiv din fil med en ".html" udvidelse. I "Filnavn" Tekstfelt, skriv dit foretrukne dokumentnavn (E.G., "Min css") efterfulgt af .html.

For eksempel, hvis du har kaldt din fil "Min css", du vil skrive min css.html ind i feltet.

Hvis du bruger et program, der kan køre ".CSS" filer, du kan bruge .CSS i stedet for .html her.

Billedet med titlen Opret et simpelt CSS stylesheet ved hjælp af Notepad Trin 25

8. Klik Gemme. Det er i nederste højre side af "Gem som" vindue. Dette gemmer dit CSS-ark i et eksekverbart format, hvilket betyder at du kan åbne det i din foretrukne browser eller HTML-editor i stedet for i Notepad.

Tips

Når du koder i HTML- eller CSS, betyder det ikke rigtigt, hvor mange mellemrum der er mellem kodelinjer - du kan trykke på ↵ Indtast flere gange efter hver linje uden at ændre programmets funktion.

Prøv at indrykke forskellige dele af dit CSS-stylesheet for at gøre det lettere at finde elementer. For eksempel kan du indgive header kode en gang og stykke kode to gange.