Cum se creează o foaie de stil CSS simplă utilizând Notepad

Thiste parere Cum să utilizați aplicația Windows "Notepad pentru a stoca informații pentru o pagină web scrisă în HTML și CSS. HTML este limba de programare utilizată pentru a crea pagina dvs. web, în timp ce CSS este limba care determină culoarea stilului, fontul și astfel de elemente HTML de pe pagina web.

Pași

Partea 1 din 3:

Crearea unei pagini HTML

1. Deschideți notepad. Deschis start

, introduceți Notepad, și faceți clic pe albastru Notepad Aplicație în partea de sus a ferestrei de pornire.

Imagine intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 2

2. Indicați tipul de document. Tip în notepad, apoi apăsați ↵ Introduceți pentru a începe o nouă linie.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 3

3. Adăugați eticheta HTML. Introduceți și apăsați ↵ Introduceți.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 4

4. Introduceți eticheta corpului. Introduceți și apăsați ↵ Introduceți. Acum puteți începe să introduceți informațiile despre pagina dvs. web.

Imaginea intitulată Creați o foaie de stil CSS simplă utilizând Notepad Pasul 5

5. Adăugați un antet. Introduceți TEXT, Asigurați-vă că ați înlocuit "TEXT" Cu titlul preferat de pagină și apăsați ↵ Introduceți.

De exemplu, pentru a crea un antet de pagină care spune "Bine ati venit!", ai tastați Bine ati venit! în notepad.

Imaginea intitulată Creați o foaie de stil CSS simplă utilizând Notepad Pasul 6

6. Adăugați textul sub antet. Introduceți TEXT, Asigurați-vă că ați înlocuit "TEXT" Cu mesajul dvs. preferat și apăsați ↵ Introduceți.

De exemplu, pentru a adăuga text care spune "Sunt o iguana", ai intrat Sunt o iguana în notepad.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 7

7. Adăugați mai multe anteturi și paragrafe. Fiecare antet și paragraf ulterior trebuie să aibă un număr ascendent aplicat, de exemplu, cel de-al doilea antet va avea etichete în jurul ei, iar al doilea paragraf va avea etichete.

Asigurați-vă că continuați să apăsați ↵ Introduceți după fiecare linie de cod.

Imaginea intitulată Creați o foaie de stil CSS simplă utilizând Notepad Pasul 8

8. Închideți corpul și etichetele HTML. Odată ce ați introdus ultima linie de cod, introduceți-vă pe propria linie și apăsați pe ↵ Introduceți, apoi introduceți în . Documentul dvs. este acum gata să fie așadar cu CSS.

Partea 2 din 3:

Adăugarea CSS

1. Înțelegeți cum funcționează CSS. Utilizați CSS pentru a schimba aspectul unui element HTML (E.G., un paragraf). CSS este de obicei scris în următorul format linie de linie:

etichetă etichetă { (de exemplu, p {)
Modificator: proprietate- (de exemplu, Font-dimensiune: 20px-)
Modificator: proprietate- (de exemplu, culoarea neagra-)
}

Imaginea intitulată Creați o foaie de stil CSS simplă utilizând Notepad Pasul 10

2. Plasați un spațiu între și etichete. Acestea ar trebui să fie aproape de partea de sus a paginii.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 11

3. Introduceți o etichetă de cap. Introduceți și apăsați ↵ Introduceți.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 12

4. Adăugați o etichetă de stil. Introduceți și apăsați ↵ Introduceți.

Imaginea intitulată Creați o foaie de stil CSS simplă utilizând Notepad Pasul 13

5. Schimbați culoarea de fundal a paginii web. Pentru a face acest lucru:

Introduceți corp { și apăsați ↵ Introduceți.

Introduceți Culoare de fundal: Lightblue- și apăsați ↵ Introduceți.

Puteți utiliza orice culoare acceptată aici, precum și "ușoară" sau "întuneric" Modificatori.

Introduceți}} și apăsați ↵ Introduceți.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 14

6. Stilul dvs. primul antet. Introduceți H1 { și apăsați ↵ Introduceți, adăugați un modificator și apăsați ↵ ENTER, și introduceți}}} și apăsați ↵ Enter. Puteți adăuga mai mulți modificatori la un element atâta timp cât fiecare modificator este pe propria linie. Modificatoarele comune includ următoarele:

Mărimea textului - Introduceți Font-dimensiune: 30px- Pentru a vă stabili textul ca font de 30 de puncte. Înlocuiți orice număr pe care doriți să îl utilizați.

Culoarea textului - Introduceți culoarea neagra- pentru a face text negru. Înlocuiți orice culoare pe care doriți să o utilizați.

Alinierea textului - Introduceți Text-align: Centrul- Pentru a centra textul. De asemenea, puteți scrie stânga sau dreapta Pentru a alinia textul în mod corespunzător.

Fontul folosit - Introduceți Font-Family: Times New Roman- Pentru a vă stabili fontul în timp de New Roman. De asemenea, puteți utiliza fonturi ca Verdana sau Georgia.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 15

7. Stilul primului paragraf. Introduceți P1 { și apăsați ↵ Introduceți, adăugați un modificator și apăsați ↵ ENTER, și introduceți}}} și apăsați ↵ Enter.

Modificatoarele pe care le puteți utiliza aici sunt identice cu cele utilizate pentru antet.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 16

8. Stilul restului documentului. Puteți stilul oricărui element prin trimiterea textului etichetei și plasarea unui suport deschis ({), adăugând modificatori, apoi închiderea brațului (}).

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 17

9. Închideți etichetele stilului și capului. Pe o nouă linie sub ultimul text de stil, introduceți și apăsați pe ↵ Enter, apoi introduceți și apăsați pe ↵ Introducere. Fișa dvs. CSS este completă, ceea ce înseamnă că acum puteți revizui și salva.

Partea 3 din 3:

Salvarea documentului

1. Examinați stilul dvs. CSS. Documentul dvs. CSS va varia ușor, dar ar trebui să arate așa ceva:

corp {
Culoare de fundal: Lightblue-
}
H1 {
Font-dimensiune: 45px-
}
P1 {
culoarea neagra-
}
Salut!
Sunt o iguana

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 19

2. Clic Fişier. Este în colțul din stânga sus al ferestrei Notepad. Va apărea un meniu derulant.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 20

3. Clic Salvează ca…. Veți vedea acest lucru lângă partea de jos a meniului derulant. Dacă faceți clic pe ea, solicită deschiderea unei ferestre.

Imagine intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 21

4. Selectați o locație de salvare. Faceți clic pe un dosar (e.G., Desktop) în partea stângă a ferestrei.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 22

5. Apasă pe "Salvați ca tip" cutie derulantă. Va apărea un meniu derulant.

Imaginea intitulată Creați o foaie de stil CSS simplă folosind Notepad Pasul 23

6. Clic Toate filele. Este în meniul derulant.

Imaginea intitulată Creați o simplă formă de stil CSS utilizând Notepad Pasul 24

7. Denumiți fișierul dvs. cu a ".HTML" extensie. În "Nume de fișier" câmpul de text, introduceți numele documentului preferat (e.G., "CSS-ul meu") urmată de .HTML.

De exemplu, dacă ați fost numit fișierul "CSS-ul meu", Ai tastați tastați CSS-ul meu.HTML în câmpul.

Dacă utilizați un program care poate funcționa ".css" Fișiere, puteți utiliza .css in loc de .HTML Aici.

Imaginea intitulată Creați o simplă formă de stil CSS folosind Notepad Pasul 25

8. Clic Salvați. Este în partea de jos-dreapta a "Salvează ca" fereastră. Acest lucru va salva foaia CSS într-un format executabil, ceea ce înseamnă că îl puteți deschide în browserul dvs. preferat sau editorul HTML, mai degrabă decât în Notepad.

sfaturi

Când codificați în HTML sau CSS, nu contează cu adevărat câte spații sunt între linii de cod - puteți apăsa ↵ Introduceți de mai multe ori după fiecare linie fără a schimba funcția programului.

Încercați indentarea diferitelor părți ale stilului dvs. CSS pentru a face mai ușor elemente de identificare. De exemplu, ați putea indenta codul antet o dată și codul de paragraf de două ori.