01 of 10
Hamorona ny CSS Style Sheet
Toy izany koa no namoronanay rakitra an-tsoratra iray ho an'ny HTML, hamorona rakitra ho an'ny CSS ianao. Raha mila visa ho an'ity dingana ity ianao dia jereo ny lesona voalohany. Ireto ny dingana natao hamoronana ny tarehintsoratra CSS ao amin'ny Notepad:
- Fidio ny rakitra> New in Notepad mba hahazoana varavarankely foana
- Save ny tahiry amin'ny CSS amin'ny fipihana ny rakitra
- Mankanesa any amin'ny tranokala my_website eo amin'ny fiara sarotra
- Hanova ny "Save as Type:" mankany amin'ny "rakitra rehetra"
- Lazao ny tahiry "styles.css" (avelao ny quotes) ary tsindrio Save
02 of 10
Ampifandraiso amin'ny takelaka HTML ny takelaka CSS
Raha vantany vao misy raki-tsoratra amin'ny tranonkalanao, dia mila ampifandraisinao amin'ny pejy Internet izany. Mba hanaovana izany dia mampiasa ny rohy tag ianao. Ampidino ity rohy manaraka ity na aiza na aiza ao amin'ny loha
ao amin'ny pets pets.htm anao:03 of 10
Hamafiso ny rindrin'ny pejy
Rehefa manoratra XHTML ho an'ny navigateur samihafa ianao dia zavatra iray izay hianaranao dia ny hoe toa samy manana rindrina sy fitsipika samihafa izy ireo amin'ny fomba fampisehoany. Ny fomba tsara indrindra ahazoana antoka fa ny tranokalanao dia mitovy amin'ny ankamaroan'ny navigateurs dia ny tsy mamela ny zavatra toy ny margins ho tsy voafaritra amin'ny safidy browser.
Aleoko manomboka ny pejinako ao amin'ny zoro ambony havia, tsy misy fingotra na marika manodidina ny lahatsoratra. Na dia handefasana ny votoaty aza aho, dia mametraka ny sisiny ho amin'ny zero aho mba hanombohako ilay tadidy tsy misy dikany. Ampio izao manaraka izao ao amin'ny tahiry styles.css anao:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
ankavia: 0px;
top: 0px;
}
04 of 10
Manova ny soratra eo amin'ny pejy
Ny endri-tsoratra dia matetika no zavatra voalohany tianao hovana amin'ny pejy web. Ny endri-tsoratra default amin'ny pejy web dia mety ho ratsy, ary raha ny marina dia ny tranokalan'ny tranonkala mihitsy, ka raha tsy mamaritra ny fonosana ianao, dia tsy ho fantatrao izay ho hitanao amin'ny pejy.
Amin'ny ankapobeny, mety hanova ny endri-tsoratra amin'ny paragrafy, na indraindray ao amin'ny rakitra manontolo mihitsy. Ho an'ity tranonkala ity dia hamaritra ny endritsoratra eo amin'ny loham-bokatra sy ny paragrafy. Ampio ity manaraka ity amin'ny tahiry styles.css anao:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25m Arial, Helvetica, sans-serif;
}
Nanomboka tamin'ny 1em aho noho ny habaka fototra ho an'ny fehintsoratra sy lisitra, ary avy eo dia nampiasa izany mba hametra ny habeny ho an'ny lohako. Tsy manantena ny hampiasa lohateny lalindalina kokoa noho ny h4 aho, fa raha manomana anao ianao dia te-hanamboatra izany koa.
05 of 10
Ataovy izay mahaliana anao
Ny loko afara ho an'ny rohy dia manga sy volomparasy ho an'ny rohy tsy voamarina sy voatahiry. Na dia mety aza izany, dia mety tsy mifanentana amin'ny sari-tanin'ny pejyo izany, koa aoka isika hiova. Soraty ao amin'ny file.css ny rakitrao:
a: rohy {
font-family: Arial; Helvetica; sans-serif;
loko: # FF9900;
text-decoration: teboka;
}
a: nitsidika {
loko: # FFCC66;
}
a: hover {
fototra: #FFFFCC;
font-weight: bold;
}
Nanangana rohy telo rohy aho, ny a: rohy tahaka ny default, a: nitsidika ny fotoana nitsidihany, nanova ny loko aho ary ny: hover. Miaraka amin'ny: hoverana azoko ny rohy hahazoana loko aforitra ary mandehan-doha mba hanantitranterana fa rohy iray tokony hofidiana.
06 of 10
Ny fananganana fizarana ny fizarana
Hatramin'ny nametrahantsika ny fizarana (id = "nav") eo amin'ny HTML voalohany, avelao ny lohahevitra voalohany. Ilaintsika ny manondro ny halehiben'izany ary hametrahana ny sisin-dàlana avo kokoa amin'ny lafiny ankavanana mba tsy hamelezan'ny lahatsoratra fototra azy io. Nasiako sisin-tany manodidina azy koa.
Ampio ity CSS ity ao amin'ny tahiry styles.css anao:
#nav {
width: 225px;
margin-right: 15px;
sisin-tany: fampirimana matanjaka # 000000;
}
#nav li {
lisitry ny lisitra: tsy misy;
}
.footer {
font-size: .75em;
mazava: both;
width: 100%;
text-align: center;
}
Ny fananana lisitry ny lisitry ny style dia mametraka ny lisitra ao anatin'ny sehatry ny tranonkala ka tsy manana bala na isa, ary ny .footer dia mampiseho ny fizarana ofisialy ho kely kokoa ary mifototra amin'ny sehatra.
07 of 10
Manoritra ny fizarana Main
Amin'ny fametrahanao ny fizarana lehibe anao amin'ny fametrahana toerana tsara indrindra dia azonao antoka fa hijanona ho marina ny toerana tianao hijanonana ao amin'ny pejin'ny tranonkala. Nataoko ny 800px malalako mba hananganana monisipaly lehibe kokoa, kanefa raha manana drafitra madinika ianao, dia azonao atao ny mampitombo izany.
Apetraho ao amin'ny styles.css anao ireto manaraka ireto:
#main {
width: 800px;
top: 0px;
toerana: absolute;
left: 250px;
}
08 of 10
Manoritra ny paragrafy
Hatramin'ny nametrahako ny fango fohifohy etsy ambony, dia te-hanome fehezanteny fohy kely iray fanampiny aho mba hahatonga azy ho tsara kokoa. Nataoko izany tamin'ny fametrahana sisin-tany iray ambony izay nanasongadina ny fehintsoratra mihoatra ny sary fotsiny.
Apetraho ao amin'ny styles.css anao ireto manaraka ireto:
.topline {
sisin-tany: tony matanjaka # FFCC00;
}
Nanapa-kevitra ny hanao izany ho toy ny kilasy antsoina hoe "topline" aho fa tsy hoe mamaritra ny fehintsoratra rehetra amin'izany fomba izany. Amin'izany fomba izany, raha manapa-kevitra aho fa haniry fehintsoratra tsy misy loko mavomavo, azoko atao ny mamela fotsiny ny class = "topline" ao amin'ny andinin-tsoratra ary tsy hanana sisintany ambony.
09 of 10
Manamboatra ireo sary
Ny sary dia misy sisin-tany manodidina azy, tsy hita izany raha tsy hoe rohy ilay sary, fa tiako ny manana kilasy iray ao amin'ny CSS-stylesheet izay manidy ny sisintany automatique. Ho an'ity endri-tsoratra ity, namorona ny kilasin'ny "noorn" aho, ary ny ankamaroan'ny sary ao anatin'ilay rakitra dia ampahany ao amin'ity kilasy ity.
Ny ampahany manokana amin'izany sary izany dia ny toerana eo amin'ny pejy. Tiako izy ireo ho ampahany amin'ny andininy izay tsy nampiasana latabatra mba hampifanarahana azy ireo. Ny fomba tsotra indrindra hanaovana izany dia ny fampiasana ny zotra CSS.
Apetraho ao amin'ny styles.css anao ireto manaraka ireto:
#main img {
float: havia;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
grenady: 0px tsy misy;
}
Araka ny hitanao, dia misy koa ny marginal ny marika napetraka eo amin'ny sary, mba hahazoana antoka fa tsy nopotehina tamin'ny lahatsoratry ny teboka izay ankoatra azy ireo ao amin'ny fehintsoratra.
10 of 10
Jereo ange ny pejy vita
Raha vao voavonjy ny CSS ianao dia afaka mamerina ny pejy pets.htm ao amin'ny tranonkalanao. Ny pejinao dia tokony hitovy amin'ny iray aseho eto amin'ity sary ity, miaraka amin'ny sary mifanaraka ary ny fiaramanidina napetraka marina amin'ny lafiny ankavia.
Araho ireo dingana mitovy ireo ho an'ny pejy rehetra ato amin'ity tranonkala ity. Te hanana pejy iray ho an'ny pejy tsirairay ao amin'ny navigateur ianao.