Hoe om `n eenvoudige CSS Styles te skep deur Notepad te gebruik

Diskes jy hoe om Windows `Notepad-program te gebruik om inligting te stoor vir `n webblad wat in HTML en CSS geskryf is. HTML is die programmeertaal wat gebruik word om jou webblad te skep, terwyl CSS die taal is wat die stylkleur, lettertipe en so aan die HTML-elemente op die webblad bepaal.

Stappe

Deel 1 van 3:

Skep `n HTML-bladsy

1. Oop notaboek. Oopmaak Aanskakel

, tik in notaboek, en klik op die blou Notaboek App aan die bokant van die beginvenster.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 2

2. Dui die dokumenttipe aan. Tipe In Notepad, druk dan ↵ Enter om `n nuwe reël te begin.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 3

3. Voeg die HTML-tag by. Tik in en druk ↵ Enter.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 4

4. Voer die liggaamsmerk in. Tik in en druk ↵ Enter. U kan nou begin met u webblad se inligting.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 5

5. Voeg `n koptekst by. Tik in Teks, Maak seker dat jy vervang word "Teks" Met u voorkeurbladsy opskrif, en druk ↵ Enter.

Byvoorbeeld, om `n bladsyopskrif te skep wat sê "Welkom!", Jy sal tik Welkom! in notaboek.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 6

6. Voeg teks onder die koptekst by. Tik in Teks, Maak seker dat jy vervang word "Teks" met jou voorkeur boodskap, en druk ↵ Enter.

Byvoorbeeld, om teks by te voeg wat sê "Ek is `n leguaan", Jy sal binnekom Ek is `n leguaan in notaboek.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 7

7. Voeg meer opskrifte en paragrawe by. Elke daaropvolgende kop en paragraaf moet `n stygende nommer daaraan toegepas hê.

Maak seker dat jy voortgaan om te druk ↵ Enter na elke reël kode.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 8

8. Maak die liggaam en html-etikette toe. Sodra jy jou laaste kode ingeskryf het, tik op sy eie lyn en druk ↵ Enter, tik dan in . Jou dokument is nou gereed om met CSS gestileer te word.

Deel 2 van 3:

Voeg css by

1. Verstaan hoe CSS werk. Jy gebruik CSS om die voorkoms van `n HTML-element te verander (e.heid g., `n paragraaf). CSS word tipies in die volgende reël-vir-lyn-formaat geskryf:

Element tag { (byvoorbeeld, p {)
WYSIGER: EIENDOM- (byvoorbeeld, Font-grootte: 20px-)
WYSIGER: EIENDOM- (byvoorbeeld, Kleur: Swart-)
}

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 10

2. Plaas `n spasie tussen die en tags. Dit moet naby die bokant van die bladsy wees.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 11

3. Voer `n kopmerk in. Tik in en druk ↵ Enter.

Beeld getiteld Skep `n eenvoudige CSS Stylet met Notepad Stap 12

4. Voeg `n styl tag by. Tik in en druk ↵ Enter.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 13

5. Verander jou webblad se agtergrondkleur. Om so te doen:

Tik in liggaam { en druk ↵ Enter.

Tik in Agtergrond-kleur: LightBlue- en druk ↵ Enter.

U kan hier enige ondersteunde kleur gebruik, sowel as "lig" of "donker" Wysigers.

Tik in} en druk ↵ Enter.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 14

6. Styl jou eerste kop. Tik in H1 en druk ↵ Enter, voeg `n wysiger by en druk ↵ Enter, en tik in} en druk ↵ Enter. U kan verskeie wysigers by een element voeg solank elke wysiger op sy eie lyn is. Algemene wysigers sluit die volgende in:

Teks grootte - Tik in Font-grootte: 30px- Om jou teks as 30-punt font te stel. Vervang enige nommer wat u wil gebruik.

Teks kleur - Tik in Kleur: Swart- Om swart teks te maak. Vervang enige kleur wat u wil gebruik.

Teksbelyning - Tik in TEKST-ALIGN: SENTRUM- Om die teks te sentreer. Jy kan ook tik links of regs Om die teks toepaslik in lyn te bring.

Font gebruik - Tik in Font-familie: Times New Roman- Om jou skrif te stel as tye Nuwe Romeinse. U kan ook lettertipes gebruik Verdana of Georgia.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 15

7. Styl jou eerste paragraaf. Tik in p1 { en druk ↵ Enter, voeg `n wysiger by en druk ↵ Enter, en tik in} en druk ↵ Enter.

Die wysigers wat u hier kan gebruik, is identies aan die wat vir die koptekst gebruik word.

Beeld getiteld Skep `n eenvoudige CSS Stylet met Notepad Stap 16

8. Styl die res van jou dokument. Jy kan enige element staak deur sy tag-teks te verwys en `n oop krulvrye hakie ({) te plaas, wysigers by te voeg en dan die hakie te sluit (}).

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 17

9. Sluit die styl en kop tags. Op `n nuwe lyn onder jou laaste styl teks, tik in en druk ↵ Enter, tik dan in en druk ↵ Enter. Jou CSS-vel is voltooi, wat beteken dat jy dit nou kan hersien en stoor.

Deel 3 van 3:

Besparing van die dokument

1. Hersien jou CSS Stylet. Jou CSS-dokument sal effens wissel, maar dit moet so iets lyk:

liggaam {
Agtergrond-kleur: LightBlue-

}
H1
Font-grootte: 45px-
}
p1 {
Kleur: Swart-
}
Hi!
Ek is `n leguaan

Beeld getiteld Skep `n eenvoudige CSS Stylet met Notepad Stap 19

2. Kliek lêer. Dit is in die boonste linkerhoek van die notaboekvenster. `N Aftrekkieslys sal verskyn.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 20

3. Kliek Stoor as ... Jy sal dit naby die onderkant van die keuselys sien. Klik dit vra `n venster om oop te maak.

Beeld getiteld Skep `n eenvoudige CSS Stylet met Notepad Stap 21

4. Kies `n stoorplek. Klik op `n gids (E.heid g., Desktop) aan die linkerkant van die venster.

Beeld getiteld Skep `n eenvoudige CSS Stylet met Notepad Stap 22

5. Klik op die "Stoor as tipe" drop-down box. `N Aftrekkieslys sal verskyn.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 23

6. Kliek Alle lêers. Dit is in die keuselys.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 24

7. Noem jou lêer met `n ".html" aanbousel. In die "Lêernaam" Teksveld, tik in u voorkeurdokument naam (e.heid g., "My css") gevolg deur .html.

Byvoorbeeld, as jy jou lêer genoem het "My css", jy wil tik my css.html in die veld.

As jy `n program gebruik wat kan hardloop ".css" lêers, kan jy gebruik .css in plaas van .html hier.

Beeld getiteld Skep `n eenvoudige CSS Stylesheet met Notepad Stap 25

8. Kliek Spaar. Dit is in die onderkant van die regterkant van die "Stoor as" venster. Dit sal jou CSS-vel in `n uitvoerbare formaat stoor, wat beteken dat jy dit kan oopmaak in jou voorkeurblaaier of HTML-redakteur eerder as in Notepad.

Wenke

Wanneer kodering in HTML of CSS is, maak dit nie regtig saak hoeveel spasies tussen lyne van kode is nie - jy kan druk ↵ `n paar keer na elke reël invul sonder om die funksie van die program te verander.

Probeer om verskillende dele van jou CSS-styleheet in te samel om elemente makliker te vind. Byvoorbeeld, jy kan een keer op die hoofkode of paragraaf kode twee keer.