Utilizați Notepad pentru a crea o foaie de stil CSS simplă

În acest wikiHow, vă vom arăta cum să utilizați Windows Notepad pentru a stoca informații pentru o pagină web scrisă în HTML și CSS. HTML este limbajul de programare cu care este creată pagina dvs. web, în timp ce CSS este limba care guvernează stilul elementelor HTML, i. Culoare, font și așa mai departe, destinate paginii.

conținut

Metodă

Partea 1creați o pagină html

Text

Bine ai venit!

Partea 2adăugați css
Partea 3salvați documentul

Bună!

Sfaturi
Avertismente

metodă

Partea 1
Creați o pagină HTML

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

Deschideți Notepad. Continuă start

, robinet Notepad și faceți clic pe cea albastră Notepad App în partea de sus a ferestrei de pornire.

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

Specificați tipul documentului. robinet în Notepad și apoi apăsați Intră ⌅, pentru a începe o nouă linie.

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

Inserați eticheta HTML. robinet și apăsați Intră ⌅.

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

Introduceți eticheta BODY. robinet și apăsați Intră ⌅. Acum puteți începe să introduceți informațiile despre site-ul dvs. Web.

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

Adăugați un titlu. robinet TEXT și asigurați-vă că înlocuiți "TEXT" cu antetul paginii și apăsați Intră ⌅.

Pentru z. De exemplu, un antet al paginii "Bun venit!" să creezi, vrei Bine ai venit! în Notepad.

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

Inserați textul sub titlu. robinet TEXT și înlocuiți "TEXT" cu textul dorit. Apoi apăsați Intră ⌅.

Pentru z. De exemplu, pentru a adăuga un text "Eu sunt un iguana", ai face Sunt un iguana în Notepad.

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

Adăugați mai multe rubrici și paragrafe. Fiecare poziție și paragraf ulterior trebuie să fie urmate de un număr descrescător. Al doilea titlu este z. Între etichete și al doilea paragraf între .

Asigurați-vă că continuați să urmați fiecare linie de cod Intră ⌅ presare.

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

Închideți BODY și eticheta HTML. Dacă ați introdus ultimul rând de cod, tastați o linie separată pe, apăsați Intră ⌅ și apoi da a. Documentul dvs. poate fi acum formatat cu CSS.

Partea 2
Adăugați CSS

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

Înțelegeți cum funcționează CSS. Cu CSS, modificați aspectul unui element HTML (de exemplu, un paragraf). CSS este de obicei scrisă pe linie în următorul format:

element tag { (Z. B. p {)
modificator: proprietate (de ex font-size: 20px)
modificator: proprietate (de ex culoare: negru)
}

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

Puneți un spațiu între etichete și . Acestea ar trebui să fie mai mari pe pagină.

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

Introduceți o etichetă HEAD. robinet și apăsați Intră ⌅.

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

Adăugați o etichetă STYLE. robinet și apăsați Intră ⌅, apoi tastați și apăsați Intră ⌅. Foaia dvs. CSS este acum completă, d. h. că puteți acum să o urmăriți și să o salvați.

Partea 3
Salvați documentul

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

Uită-te la foaia de stil CSS. Documentul dvs. CSS va fi puțin diferit, dar trebuie să arate astfel:

Bună!
Sunt un iguana

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

Faceți clic pe Fișier în colțul din stânga sus al ferestrei Notepad. Se deschide un meniu derulant.

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

Faceți clic pe Salvați ca mai jos în acest meniu. Dacă faceți clic pe el, se deschide o fereastră.

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

Alegeți un loc pentru salvare. Faceți clic pe un dosar din partea stângă a ferestrei (de ex desktop-).

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

Dați clic pe meniul derulant "Salvați ca tip". Apare un meniu derulant.

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

În acest clic pe Toate fișierele.

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

Dați fișierului dvs. un nume cu extensia de fișier ".html". În caseta de text Nume fișier, introduceți numele pe care doriți să-l dați documentului (de exemplu, My CSS), urmat de .html.

Dacă vă place fișierul z. De exemplu, dacă ați avea numele "My CSS", ați merge în câmp meu css.html Enter.
Dacă aveți un program care poate rula fișiere ".css", puteți merge aici .css în loc de .html utilizați.

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

Dați clic pe Salvați în colțul din dreapta jos al casetei "Salvați ca". Acest lucru vă salvează foaia CSS într-un format executabil, ceea ce înseamnă că îl puteți deschide în browserul dvs. preferat sau în editorul HTML în loc de Notepad.

Sfaturi

Când programați în HTML sau CSS, nu contează cu adevărat câte linii goale aveți între liniile de cod. Puteți să faceți clic pe fiecare rând de mai multe ori Intră ⌅ Apăsați fără a modifica funcția programului.
Încercați să aliniați diferite părți ale foii de stil CSS pentru a facilita găsirea elementelor. Ai putea z. De exemplu, indentați codul pentru o rubrică o dată și codul pentru un paragraf de două ori.