Hur man skapar ett enkelt CSS-stilark med anteckningsblock

Thistaaches du hur du använder Windows `Notepad app för att lagra information för en webbsida skrivet i HTML och CSS. HTML är programmeringsspråket som används för att skapa din webbsida, medan CSS är det språk som bestämmer stilfärgen, teckensnittet, och så på av HTML-elementen på webbsidan.

Steg

Del 1 av 3:

Skapa en HTML-sida

1. Öppen anteckningsblock. Öppna Start

, Skriv in anteckningsblock, och klicka på det blå Anteckningsblock app längst upp i startfönstret.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 2

2. Ange dokumenttypen. Typ i anteckningsblock, tryck sedan på ↵ Enter för att starta en ny rad.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 3

3. Lägg till HTML-taggen. Skriv in och tryck på ↵ ENTER.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 4

4. Ange kroppsmärket. Skriv in och tryck på ↵ ENTER. Du kan nu börja skriva in din webbsida information.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 5

5. Lägg till en rubrik. Skriv in TEXT, Var noga med att ersätta "TEXT" Med din föredragna sidrubrik och tryck på ↵ Enter.

Till exempel, för att skapa en sidhuvud som säger "Välkommen!", du skulle skriva Välkommen! in i anteckningsblock.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 6

6. Lägg till text under rubriken. Skriv in TEXT, Var noga med att ersätta "TEXT" med ditt önskade meddelande, och tryck på ↵ Enter.

Till exempel, för att lägga till text som säger "Jag är en iguana", du skulle komma in Jag är en iguana in i anteckningsblock.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 7

7. Lägg till fler rubriker och stycken. Varje efterföljande rubrik och stycke måste ha ett stigande nummer som tillämpas på det, till exempel, din andra rubrik kommer att ha taggar runt den, och andra stycket kommer att ha taggar.

Se till att du fortsätter att trycka på ↵ Enter efter varje radkod.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 8

8. Stäng kroppen och HTML-taggarna. När du har angett din senaste radkod skriver du in på egen rad och trycker på ↵ Enter och skriver sedan in . Ditt dokument är nu klart att bli utformat med CSS.

Del 2 av 3:

Lägga till CSS

1. Förstå hur CSS fungerar. Du använder CSS för att ändra utseendet på ett HTML-element (E.g., en paragraf). CSS skrivs vanligtvis i följande rad-för-line-format:

element tag { (till exempel, p {)
Modifierare: Fastighet- (till exempel, FONT-STORLEK: 20px-)
Modifierare: Fastighet- (till exempel, svart färg-)
}

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 10

2. Placera ett mellanslag mellan och taggar. Dessa ska vara nära toppen av sidan.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 11

3. Ange en huvudtag. Skriv in och tryck på ↵ ENTER.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 12

4. Lägg till en stil tagg. Skriv in och tryck på ↵ ENTER.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 13

5. Ändra din webbsida bakgrundsfärg. Att göra så:

Skriv in kropp { och tryck på ↵ ENTER.

Skriv in Bakgrundsfärg: LightBlue- och tryck på ↵ ENTER.

Du kan använda någon stödd färg här, såväl som "ljus" eller "mörk" modifierare.

Skriv in} och tryck på ↵ ENTER.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 14

6. Stil din första rubrik. Skriv in h1 { och tryck på ↵ Enter, lägg till en modifierare och tryck på ↵ Enter och skriv in} och tryck på ↵ Enter. Du kan lägga till flera modifierare till ett element så länge som varje modifierare är på sin egen linje. Vanliga modifierare inkluderar följande:

Textstorlek - Skriv in FONT-STORLEK: 30px- För att ställa in din text som 30-punkts teckensnitt. Ersätta ett nummer som du vill använda.

Text färg - Skriv in svart färg- att göra svart text. Ersätta vilken färg som du vill använda.

Textjustering - Skriv in Text-Justera: Centrum- att centrera texten. Du kan också skriva vänster eller rätt för att anpassa texten på lämpligt sätt.

Teckensnitt som används - Skriv in Font-familj: Times New Roman- Att ställa in ditt teckensnitt som tider nya romerska. Du kan också använda teckensnitt som verdana eller georgien.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 15

7. Stil din första stycke. Skriv in p1 { och tryck på ↵ Enter, lägg till en modifierare och tryck på ↵ Enter och skriv in} och tryck på ↵ Enter.

De modifierare som du kan använda här är identiska med de som används för rubriken.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 16

8. Stil resten av ditt dokument. Du kan ställa något element genom att referera till märktexten och placera en öppen lockig fäste ({), tillsätta modifierare och stänger sedan fästet (}).

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 17

9. Stäng stilen och huvudetiketterna. På en ny rad under din senaste stylingstext skriver du in och trycker på ↵ Enter och skriv sedan in och tryck på ↵ Enter. Ditt CSS-ark är komplett, vilket betyder att du nu kan granska och spara det.

Del 3 av 3:

Spara dokumentet

1. Granska din CSS-stilark. Ditt CSS-dokument varierar något, men det ska se ut så här:

kropp {
Bakgrundsfärg: LightBlue-
}
h1 {
FONT-STORLEK: 45px-
}
p1 {
svart färg-
}
Hej!
Jag är en iguana

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 19

2. Klick Fil. Det är i det övre vänstra hörnet av anteckningsfönstret. En rullgardinsmeny visas.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 20

3. Klick Spara som…. Du får se detta nära botten av rullgardinsmenyn. Klicka på det uppmanar ett fönster att öppna.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 21

4. Välj en spara plats. Klicka på en mapp (e.g., Skrivbord) på vänster sida av fönstret.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 22

5. Klicka på "Spara som typ" rullgardin. En rullgardinsmeny visas.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 23

6. Klick Alla filer. Det är i rullgardinsmenyn.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 24

7. Namn din fil med en ".html" förlängning. I "Filnamn" textfält, skriv in ditt föredragna dokumentnamn (e.g., "Min css") följd av .html.

Till exempel, om du heter din fil "Min css", du skulle skriva min css.html in i fältet.

Om du använder ett program som kan köras ".css" filer, du kan använda .css istället för .html här.

Bild med titeln Skapa ett enkelt CSS-stilark med anteckningsblock Steg 25

8. Klick Spara. Det är i den nedre högra sidan av "Spara som" fönster. Detta sparar ditt CSS-ark i ett körbart format, vilket innebär att du kan öppna den i din föredragna webbläsare eller HTML-editor istället för i anteckningsblock.

Tips

Vid kodning i HTML eller CSS betyder det inte riktigt hur många utrymmen är mellan kodlinjer-du kan trycka på ↵ Ange flera gånger efter varje rad utan att ändra programmets funktion.

Prova att inda olika delar av ditt CSS-stilark för att göra det lättare att hitta element. Du kan till exempel bara ange rubrikkoden en gång och punktkod två gånger.