Yksinkertaisen CSS -tyylitaulukon luominen Notepadin avulla

Video: HTML5/CSS: Miten CSS-tiedosto luodaan?

Sisältö

Askeleet
Vinkkejä
Tarvitsemasi asiat

Muistio on yksi tekstieditorista, jota voidaan käyttää CSS -asiakirjan luomiseen. Kun olet luonut CSS -tiedoston Muistiossa, voit linkittää tiedoston verkkosivulle, jotta verkkosivun sisältö voidaan muotoilla tyylitaulukolla.

Askeleet

1 Avaa Notepad -ohjelma.
2Kopioi seuraava koodi:

@charset "utf-8"; / * CSS-asiakirja * // * Määritä runkoelementin väri * / body {background: # FFFFFF;} / * Tämä osio on tarkoitettu linkkeille * / a: link { fontin paino: normaali; väri: laivasto} a: vieraillut {font-weight: normal; väri: vihreä;} a: hover {font-weight: bold; väri punainen; font-variant: small-caps;} / * Tämä osio on tarkoitettu kappaleosalle * / p {font-style: italic; font-size: 18px;} sininen {color: # 0000FF;} / * Tämä osio on tarkoitettu kuvan mustalle reunalle. * / img {border-color: # 000000; raja: paksu; reunatyyli: harjanne;}

# Liitä vaiheen 2 koodi Muistioon.

1 Tallenna tiedosto Muistioon. Tallenna se nimellä "SimpleCSS.css" napsauttamalla "Tiedosto" -painiketta ja valitsemalla "Tallenna" -komento. "Tallenna" -painikkeen napsauttamisen jälkeen "Tallenna nimellä" -valintaikkuna tulee näkyviin.
2 Nimeä CSS -tiedostosi. Kirjoita "SimpleCSS.css" tai mikä tahansa nimi "Tiedostonimi" -tekstikenttään ".css" -laajennuksella.
3 Napsauta "Tallenna" -painiketta.
4 Se on tehty!

Vinkkejä

Tallenna Notepad -tiedosto vain tekstinä (joskus voit kutsua sitä tekstiasiakirjaksi tai ASCII: ksi) ja anna sille laajennus ".css".
Tässä kirjoittamamme koodi on vain esimerkki siitä, kuinka voit luoda CSS -perustiedoston Notepadilla, jotta voit käsitellä sen HTML -elementtejä Esittely -osiossa näytetyssä esimerkkisivullamme. Voit kuitenkin muuttaa CSS -koodaustamme, miten haluat muotoilla verkkosivujen tyylit ja ulkoasun.
Muista sijoittaa tallennettu CSS -asiakirja samaan kansioon kuin HTML -asiakirjasi, joihin olet luonut verkkosivusi.
Kun olet luonut CSS -asiakirjasi, sinun on ehkä suoritettava seuraava vaihe. eli linkitä asiakirja ja verkkosivu. Katso tähän liittyvät artikkelit.