01 de 10
Cruthaich an duilleag stoidhle CSS
An aon dòigh anns an do chruthaich sinn faidhle teacsa fa leth airson HTML, cruthaichidh tu faidhle teacsa airson CSS. Ma tha feum agad air visuals airson a 'phròiseis seo, faic a' chiad oideachadh. Seo na ceuman gus an duilleag stoidhle CSS agad a chruthachadh ann an Notepad:
- Tagh File> New ann an Notepad gus uinneag fhalamh fhaotainn
- Sàbhail am faidhle mar CSS le bhith a 'briogadh air
- Seòl gu fillteadair my_website air do dhràma cruaidh
- Atharraich "Save as Type:" gu "All Files"
- Ainmich "styles.css" am faidhle agad (fàg na briathran) agus briog air Sàbhail
02 de 10
Ceangail an duilleag stoidhle CSS gu do HTML
Aon uair 's gum bi duilleag stoidhle agad airson do làrach-lìn, feumaidh tu a cheangal ris an duilleag lìn fhèin. Gus seo a dhèanamh bidh thu a 'cleachdadh an taga ceangail. Cuir an taga ceangail a leanas an àite sam bith taobh a-staigh tagaichean
de do phets.htm document:03 de 10
Cuir crìoch air na margaidhean-duilleige
Nuair a tha thu a 'sgrìobhadh XHTML airson diofar bhrobhsairean, aon rud a dh' ionnsaich tu gu bheil e coltach gu bheil iomall agus riaghailtean eadar-dhealaichte aca airson mar a tha iad a 'taisbeanadh rudan. Is e an dòigh as fheàrr air a bhith cinnteach gu bheil an làrach agad coltach ris a 'chuid as motha anns a' mhòr-chuid de bhrabhsairean gus nach bi rudan mar iomaill gu ruige roghainn a 'bhrabhsair.
Is fheàrr leam tòiseachadh air mo dhuilleagan anns an oisean gu h-àrd air an làimh chlì, gun sgàradh no iomall a bharrachd mun teacsa. Fiù 's ma tha mi a' dol a phutadh a-steach, chuir mi na h-iomaill gu neoni gus am bi mi a 'tòiseachadh leis an aon sglèat bhàn. Gus seo a dhèanamh, cuir na leanas ris an sgrìobhainn styles.css agad:
html, body {
iomall: 0px;
lannachadh: 0px;
crìochan: 0px;
clì: 0px;
top: 0px;
}
04 de 10
Ag atharrachadh an fhuaim air an duilleig
Is e am fuadach a 'chiad rud a bhios thu ag iarraidh atharrachadh air duilleag lìn. Faodaidh an cruth bunaiteach air duilleag lìn a bhith grànda, agus tha e an-còmhnaidh suas am brabhsair lìn fhèin, mar sin mura mìnich thu an cruth-clò, chan eil fios agad dè an coltas a bhios aig do dhuilleag.
Mar as trice, atharraicheadh tu an cruth air paragrafan, no uaireannan air an sgrìobhainn gu lèir fhèin. Airson an làrach seo, bidh sinn a 'mìneachadh a' chruth-clò aig an ceann agus ìre paragraf. Cuir na leanas ris an sgrìobhainn styles.css agad:
p, li {
cruth: 1em Arial, Helvetica, sans-serif;
}
h1 {
cruth: 2em Arial, Helvetica, sans-serif;
}
h2 {
cruth: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
cruth: 1.25em Arial, Helvetica, sans-serif;
}
Thòisich mi le 1em mar mo mheud bunaiteach airson paragrafan agus liosta de rudan, agus an uairsin chleachd mi sin gus meud a shuidheachadh airson na cinn-naidheachd agam. Chan eil dùil agam a bhith a 'cleachdadh ceann nas doimhne na h4, ach ma tha thu an dùil gum bi thu airson stoidhle a dhèanamh cuideachd.
05 de 10
A 'dèanamh do cheanglaichean nas inntinneach
Tha na dathan bunaiteach airson cheanglaichean gorm agus purpaidh airson ceanglaichean nach eil air am foillseachadh no air tadhal orra fa leth. Ged a tha seo coitcheann, is dòcha nach bi e freagarrach do dhuilleag nan duilleagan agad, mar sin leig dhuinn atharrachadh. Anns an fhaidhle styles.css agad, cuir na leanas ris:
a: ceangal {
teaghlach-clò: Arial, Helvetica, sans-serif;
dath: # FF9900;
teacs-sgeadachadh: foillsich;
}
a: thadhail {
dath: # FFCC66;
}
a: hover {
cùl-sgeul: #FFFFCC;
cruth-clò: cruaidh;
}
Stèidhich mi trì stoidhlichean ceangail, an ceangal: mar am bunaiteach, a: air a thadhal airson nuair a thadhail e, atharraichidh mi an dath, agus a: hover. Le: hover tha mi air an ceangal fhaighinn le dath cùl-raoin agus bidh mi trom airson a bhith a 'cur cuideam air a' cheangal a tha ri briogadh.
06 de 10
A 'dealbhadh roinn nan seòladh
Bho chuir sinn an earrann seòladh (id = "nav") an toiseach san HTML, leig le stoidhle e an toiseach. Feumaidh sinn sealltainn dè cho farsaing 'sa bu chòir dha a bhith agus a' cur farsaingeachd nas fharsainge air an taobh dheis gus am bi am prìomh theacsa a 'stad an aghaidh. Cuideachd chuir mi crìoch timcheall air.
Cuir na CSS a leanas ris an sgrìobhainn styles.css agad:
#nav {
leud: 225px;
deas-làimh: 15px;
crìoch: medium solid # 000000;
}
#nav li {
liosta-stoidhle: none;
}
.footer {
font-size: .75em;
soilleir: an dà chuid;
leud: 100%;
teacs-align: ionad;
}
Bidh an togalach stoidhle liosta a 'suidheachadh an liosta taobh a-staigh na h-earrainn seòlaidh gus nach bi peilearan no àireamhan ann, agus na stoidhlichean .footer gum bi an earrann dlighe-sgrìobhaidh nas lugha agus nas cudthromaiche san earrann.
07 de 10
A 'suidheachadh na Prìomh Earrainn
Le bhith a 'suidheachadh na prìomh earrainn agad le suidheachadh iomlan faodaidh tu a bhith cinnteach gum fuirich e gu dìreach far a bheil thu ag iarraidh fuireach air an duilleig lìn agad. Rinn mi mo 800px a leud airson faireachaidhean nas motha a chumail, ach ma tha sgrùdadh nas lugha agad, 's dòcha gum bi thu airson sin a dhèanamh nas cumhainge.
Cuir na leanas ann an sgrìobhainn styles.css:
#main {
leud: 800px;
top: 0px;
suidheachadh: iomlan;
clì: 250px;
}
08 de 10
Styling Your Paragraphs
Seach gu bheil mi mu thràth air cruth a 'pharagraf a shuidheachadh gu h-àrd, bha mi airson beagan "barrachd" a thoirt dha gach paragraf gus a dhèanamh nas fheàrr na seasamh. Rinn mi seo le bhith a 'cur crìoch air a' mhullach a sheall am paragraf barrachd na dìreach an ìomhaigh a-mhàin.
Cuir na leanas ann an sgrìobhainn styles.css:
.topline {
mullach crìche: cruaidh tiugh # FFCC00;
}
Cho-dhùin mi a dhèanamh mar chlas ris an cante "topline" seach a bhith a 'mìneachadh gach paragraf san dòigh sin. Mar seo, ma cho-dhùineas mi tha mi airson paragraf a bhith agad gun loidhne buidhe àrd, is urrainn dhomh dìreach falbh às an class = "topline" anns a 'chlàir paragraf agus cha bhi a' chrìoch as àirde aige.
09 de 10
Styling the Images
Mar as trice tha ìomhaighean aig crìochan orra, chan eil seo daonnan follaiseach mura h-eil an ìomhaigh na cheangal, ach is toil leam clas a bhith taobh a-staigh an stoidhle stoidhle CSS agam a tha a 'tionndadh na crìche gu fèin-obrachail. Airson an stoidhle stoidhle seo, chruthaich mi an clas "noborder", agus tha a 'chuid as motha de na h-ìomhaighean anns an sgrìobhainn nam pàirt den chlas seo.
Is e am pàirt shònraichte eile de na h-ìomhaighean sin an làrach aca air an duilleig. Bha mi airson gum biodh iad nam pàirt den pharagraf a bha iad a-staigh gun a bhith a 'cleachdadh chlàran airson an ceangal. Is e an dòigh as sìmplidhe airson seo a dhèanamh a bhith a 'cleachdadh seilbhe CSS flùraichean.
Cuir na leanas ann an sgrìobhainn styles.css:
#main img {
flùraichean: clì;
iomall-dheis: 5px;
bonn a 'chlàir: 15px;
}
.noborder {
crìochan: 0px none;
}
Mar a chì thu, tha cuideachd feartan coilltean air an suidheachadh air na h-ìomhaighean, gus dèanamh cinnteach nach eil iad air an briseadh suas an aghaidh an teacsa flòbh a tha ri taobh anns na paragrafan.
10 de 10
A-nise Coimhead air an duilleag crìochnaichte agad
Aon uair 's gu bheil thu air do CSS a shàbhaladh, faodaidh tu duilleag pets.htm ath-ghluasaid anns a' bhrobhsair agad. Bu chòir do dhuilleag a bhith coltach ris an fhear a tha air a shealltainn san dealbh seo, le ìomhaighean air an co-dhealbhadh agus an seòladh air a chur gu ceart air taobh clì na duilleige.
Lean na h-aon cheumannan seo airson gach duilleag a-staigh agad airson na làraich seo. Tha thu airson aon duilleag a bhith agad airson gach duilleag anns an t-seòladh agad.