Leathanach Gréasáin Styling a Notepad Cruthaithe le CSS

01 de 10

Cruthaigh Bileog Stíl CSS

Cruthaigh Bileog Stíl CSS. Jennifer Kyrnin

Ar an mbealach céanna chruthaigh muid comhad téacs ar leith don HTML, cruthóidh tú comhad téacs don CSS. Más gá visuals don phróiseas seo, féach an chéad teagaisc. Seo na céimeanna chun do bhileog stíl CSS a chruthú i Notepad:

  1. Roghnaigh Comhad> Nua i Notepad le fuinneog folamh a fháil
  2. Sábháil an comhad mar CSS trí chliceáil ar
  3. Téigh chuig fillteán my_website ar do dhiosca crua
  4. Athraigh an "Sábháil mar Cineál:" go "Gach Comhad"
  5. Ainmnigh "file.css" do chomhad (fág na sleachta) agus cliceáil Sábháil

02 de 10

Nasc Bileog Stíl CSS chuig Do HTML

Nasc Bileog Stíl CSS chuig Do HTML. Jennifer Kyrnin

Nuair atá bileog stíl agat i do shuíomh Gréasáin, beidh ort é a chomhcheangal leis an leathanach Gréasáin féin. Chun seo a dhéanamh, úsáideann tú an nasc nasc. Cuir an nasc nasc seo a leanas in áit ar bith laistigh de na clibeanna ar do dhoiciméad pets.htm:

03 de 10

Socraigh na Margáin Leathanach

Socraigh na Margáin Leathanach. Jennifer Kyrnin

Nuair atá tú ag scríobh XHTML do bhrabhsálaithe éagsúla, is é rud amháin a fhoghlaimfidh tú ná go bhfuil corrlaigh agus rialacha difriúla ag gach duine ar an gcaoi a léiríonn siad rudaí. Is é an bealach is fearr chun a bheith cinnte go bhféachann do shuíomh mar an gcéanna i bhformhór na mbrabhsálaithe ná gan ligean do rudaí cosúil le corrlaigh a bheith réamhshocraithe le rogha an bhrabhsálaí.

Is fearr liom mo chuid leathanach a thosú sa chúinne uachtarach ar chlé, gan aon stuáil nó imeall breise a bhaineann leis an téacs. Fiú má tá mé ag dul i gceannas ar an ábhar, leag mé na corrlaigh go nialas ionas go mbeidh mé ag tosú leis an scláta bán céanna. Chun seo a dhéanamh, cuir an méid seo a leanas ar do dhoiciméad stíleanna.css:

html, comhlacht {
imeall: 0px;
stuáil: 0px;
teorainn: 0px;
clé: 0px;
barr: 0px;
}

04 de 10

Ag Athrú an Chló ar an Leathanach

Ag Athrú an Chló ar an Leathanach. Jennifer Kyrnin

Is minic gurb é an cló an chéad rud is mian leat a athrú ar leathanach Gréasáin. Is féidir leis an gcló réamhshocraithe ar leathanach Gréasáin a bheith gránna, agus is é an brabhsálaí Gréasáin é féin i ndáiríre, mar sin mura sainmhíníonn tú an cló, ní bheidh a fhios agat cad is cosúil le do leathanach.

De ghnáth, d'athródh tú an cló ar mhíreanna, nó uaireanta ar an doiciméad iomlán féin. Maidir leis an suíomh seo, déanfaimid sainmhíniú ar an gcló ag an gceannteideal agus ar leibhéal na míre. Cuir an méid seo a leanas ar do dhoiciméad stíleanna.css:

p, li {
cló: 1em Arial, Helvetica, sans-serif;
}
h1 {
cló: 2em Arial, Helvetica, sans-serif;
}
h2 {
cló: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
cló: 1.25em Arial, Helvetica, sans-serif;
}

Thosaigh mé le 1em mar mhéid bunúsach do mhíreanna agus míreanna a liostáil, agus ansin úsáid mé sin chun an méid a leagan síos do na ceannlínte. Ní dóigh liom ceannlíne níos doimhne ná h4 a úsáid, ach má tá sé beartaithe go mbainfidh tú ag iarraidh é a stíl chomh maith.

05 de 10

Do Naisc a Dhéanamh Níos Suimiúil

Do Naisc a Dhéanamh Níos Suimiúil. Jennifer Kyrnin

Tá na dathanna réamhshocraithe le haghaidh naisc gorm agus corcra le haghaidh naisc nach ndearnadh cuairt orthu agus a ndearna siad cuairt orthu faoi seach. Cé go bhfuil sé seo caighdeánach, d'fhéadfadh sé nach mbeadh sé oiriúnach do scéim dathanna do leathanaigh, mar sin déanfaimid é a athrú. I do chomhad styles.css, cuir an méid seo a leanas leis:

a: nasc {
cló-theaghlaigh: Arial, Helvetica, sans-serif;
dath: # FF9900;
maisiú téacs: dírigh;
}
a: cuairt {
dath: # FFCC66;
}
a: hover {
cúlra: #FFFFCC;
cló-mheáchan: trom;
}

Bhunaigh mé trí stíleanna nasc, an: nasc mar an réamhshocraithe, a: a thugtar cuairt orthu nuair a thugtar cuairt air, athraigh mé an dath, agus: hover. Le: hover Tá mé ag teacht ar an nasc le dath cúlra agus téigh go trom le béim a chur ar an nasc atá le cliceáil.

06 de 10

An Rannóg Nascleanúna a stíliú

An Rannóg Nascleanúna a stíliú. Jennifer Kyrnin

Ós rud é go gcuirfí an t-alt nascleanúint (id = "nav") ar dtús sa HTML, déanaim stíl é ar dtús. Ní mór dúinn a léiriú cé chomh leathan agus ba cheart go mbeadh corrlach níos leithne ar an taobh dheis ionas nach gcuirfidh an téacs is mó i gcoinne é. Chuir mé teorainn timpeall air freisin.

Cuir an CSS seo a leanas le do dhoiciméad stíleanna.css:

#nav {
leithead: 225px;
ceart corrlach: 15px;
teorainn: meánach soladach # 000000;
}
#nav li {
liosta-stíl: none;
}
.footer {
clómhéid: .75em;
soiléir: araon;
leithead: 100%;
téacs-ailíniú: lár;
}

Leagann an t-ionad stíl liosta suas an liosta taobh istigh den rannán nascleanúna gan aon urchair nó uimhreacha a bheith ann, agus na stíleanna .footer go bhfuil an t-alt cóipchirt níos lú agus lárnach laistigh den rannóg.

07 de 10

An Príomh-Roinn a chur i bhfeidhm

An Príomh-Roinn a chur i bhfeidhm. Jennifer Kyrnin

Trí shuíomh do phríomh-alt a shuíomh le suíomhanna iomlána is féidir leat a bheith cinnte go bhfanfaidh sé go díreach nuair is mian leat fanacht ar do leathanach Gréasáin. Rinne mé mianach 800px ar leithead chun monatóireacht níos mó a dhéanamh, ach má tá monatóireacht níos lú agat, b'fhéidir gur mhaith leat é sin a dhéanamh níos cúinge.

Cuir an méid seo a leanas i do dhoiciméad styles.css:

#priomh {
leithead: 800px;
barr: 0px;
seasamh: iomlán;
clé: 250px;
}

08 de 10

Stíliú do mhíreanna

Stíliú do mhíreanna. Jennifer Kyrnin

Ós rud é go bhfuil mé leagtha amach cheana féin ar an gclár thuasluaite, ba mhaith liom "ciceáil" breise a thabhairt do gach mír chun é a dhéanamh níos fearr. Rinne mé é seo trí theorainn a chur ar an mbarr a mhínigh an mhír níos mó ná an íomhá amháin amháin.

Cuir an méid seo a leanas i do dhoiciméad styles.css:

.toplíne {
teorainn-barr: soladach tiubh # FFCC00;
}

Chinn mé é a dhéanamh mar rang ar a dtugtar "barrlíne" seachas na míreanna go léir a shainiú ar an mbealach sin. Ar an mbealach seo, má chinneann mé gur mhaith liom mír a bheith gan líne buí is fearr, is féidir liom a fhágáil as an rang = "barrlíne" sa chlib mír agus ní bheidh an teorainn is airde aige.

09 de 10

Styling the Images

Styling the Images. Jennifer Kyrnin

De ghnáth tá teorainn ag íomhánna timpeall orthu, níl sé seo le feiceáil ach amháin mura nasc í an íomhá, ach is maith liom rang a bheith laistigh de mo bhileog stíl CSS a fhágann an teorainn go huathoibríoch. Maidir leis an mbileog seo, chruthaigh mé an rang "nobord", agus is cuid den rang seo an chuid is mó de na híomhánna sa cháipéis seo.

Is é an chuid eile de na híomhánna seo a suíomh ar an leathanach. Ba mhaith liom iad a bheith mar chuid den mhír a bhí siad gan úsáid a bhaint as táblaí chun iad a ailíniú. Is é an bealach is simplí é seo a dhéanamh chun maoin CSS snámhphointe a úsáid.

Cuir an méid seo a leanas i do dhoiciméad styles.css:

#main img {
snámhphointe: ar chlé;
ceart-imeall: 5px;
bun imeall: 15px;
}
.noborder {
teorainn: 0px none;
}

Mar a fheiceann tú, tá airíonna corrlaigh atá leagtha síos ar na híomhánna, chun a chinntiú nach ndéantar iad a scriosadh i gcoinne an téacs flóite atá in aice leo sna míreanna.

10 de 10

Anois Féach ar Do Leathanach Críochnaithe

Anois Féach ar Do Leathanach Críochnaithe. Jennifer Kyrnin

Nuair a shábháil tú do CSS is féidir leat an leathanach pets.htm a athlódáil ar do bhrabhsálaí Gréasáin. Ba chóir go mbeadh do leathanach cosúil leis an gceann a thaispeántar sa phictiúr seo, agus tá íomhánna ailínithe agus an loingseoireacht curtha i gceart ar thaobh clé na leathanach.

Lean na céimeanna céanna seo do gach ceann de do leathanaigh inmheánacha don suíomh seo. Ba mhaith leat leathanach amháin a bheith agat le haghaidh gach leathanach i do nascleanúint.