01 ho ea ho 10
Bopa leqephe la CSS Style
Tsela e ts'oanang eo re e entseng ka fomati e fapaneng ea text bakeng sa HTML, o tla bopa fono ea fono bakeng sa CSS. Haeba o hloka litšoantšo bakeng sa ts'ebetso ena ka kopo bona thuto ea pele. Mona mehato ea ho hlahisa leqhepe la mokhoa oa CSS oa Notepad:
- Khetha Feshene> Ncha ho Notepad ho fumana fensetere e se nang letho
- Boloka faele e le CSS ka ho tobetsa File
- E-ea ho fensetere ea ka ea_ebsite ho hard drive ea hau
- Fetola "Save as Type:" ho "All Files"
- Bolela faele ea hau "styles.css" (tlohela litlhaloso) ebe u tobetsa Save
02 ho ea ho 10
Kopanya Letlapa la Style la CSS ho HTML ea hau
Hang ha u se u e-na le letlapa la sethala bakeng sa Websaete ea hau, u tla e kopanya le websaeteng ea hau. Ho etsa sena u sebelisa lebokose la marang-rang. Beha lebokose le latelang la marang kapa kae kae kapa kae har'a "hlooho" ea litokomane tsa liphoofolo tsa hau tsa liphoofolo.htm:
03 ho ea ho 10
Lokisa Page Margins
Ha u ntse u ngola XHTML bakeng sa li-browser tse fapaneng, ntho e le 'ngoe eo u tla e ithuta ke hore kaofela ha bona ba bonahala ba e-na le marabo a sa tšoaneng le melao ea kamoo ba bonts'ang lintho kateng. Tsela e molemohali ea ho netefatsa hore sebaka sa hau se shebahala se le seng libukeng tse ngata ke ho se lumelle lintho tse kang margins hore li se ke tsa fetoha ho khetho ea sebapali.
Ke khetha ho qala maqephe a ka karolong e ka holimo e ka letsohong le letšehali, ho se na padding e eketsehileng kapa margin o potolohileng temana eo. Esita le haeba ke tla pata se ka hare, ke beha margins ho ea holimo hoo ke qalang ka letlapa le le leng le se nang letho. Ho etsa sena, kenyelletsa tse latelang tokomong ea hau ea styles.css:
html, body {
marginal: 0px;
ho roala: 0px;
moeli: 0px;
ka ho le letšehali: 0px;
holimo: 0px;
}}
04 ho ea ho 10
Ho fetola Fontana ho Leqephe
Hangata fonte ke ntho ea pele eo u tla batla ho e fetola leqepheng la Websaete. Molaetsa o sa khaotseng o hlahang leqepheng la Websaete o ka ba obe, 'me ha e le hantle o nyolohela ho sebapali sa Websaete ka boeona, kahoo haeba o sa hlalose fonte, ha o tsebe hantle hore na leqephe la hau le tla shebahala joang.
Ka tloaelo, o ne o tla fetola molaetsa ka lirapa, kapa ka linako tse ling tokomaneng eohle ka boeena. Bakeng sa sebaka sena re tla hlalosetsa molaetsa sehloohong le serapeng sa serapa. Kenya tse latelang ho tokomane ea hau ea styles.css:
p, li {
mongolo: 1em Arial, Helvetica, sans-serif;
}}
h1 {
mongolo: 2em Arial, Helvetica, sans-serif;
}}
h2 {
mongolo: 1.5em Arial, Helvetica, sans-serif;
}}
h3 {
mongolo: 1.25m Arial, Helvetica, sans-serif;
}}
Ke qalile ka 1em joaloka boholo ba ka ba likhara le lintlha tsa lethathamo, ebe joale ke li sebelisa ho beha boholo ba lihlooho tsa ka. Ha ke lebele ho sebelisa sehlooho se tebileng ho feta h4, empa haeba u rerile ho tla u batla hape.
05 ho ea ho 10
Ho Etsa Likhokahano Tsa Hao Hamolemo
Mebala e sa feleng ea li-link e le 'mala o moputsoa le o pherese bakeng sa ho sa elelloe le ho etela lihlopha ka ho latellana Le ha ena e le e tloaelehileng, e ka 'na ea se ke ea lumellana le moralo oa maqephe a hau, kahoo a re fetole. Ka faele ea hau ea styles.css, eketsa tse latelang:
a: link {
mongolo-mongolo: Arial, Helvetica, sans-serif;
'mala: # FF9900;
mongolo-mokhabiso: o totobetse;
}}
a: o etetse {
'mala: # FFCC66;
}}
a: hover {
semelo: #FFFFCC;
font-weight: bold;
}}
Ke thehile mekhoa e meraro ea li-link, e: link ka ho feletseng, e: e etselitsoeng ha e etela, ke fetola 'mala, le: hover. Ka: hover ke na le sekapali se fumanang 'mala oa mokokotlo ebe ke ea sebete ho totobatsa hore ke khokahano ea ho tobetsa.
06 ho ea ho 10
Ho khabisa Tsela ea Tsela
Kaha re beha karolo ea ho tsamaea (id = "nav") pele ka HTML, a re e qaleng pele. Re hloka ho bonts'a hore na e lekana hakae mme e behe sebaka se seholo ka lehlakoreng le letona e le hore taba e ka sehloohong e se ke ea theoha khahlanong le eona. Ke boetse ke beha moeli ho potoloha.
Kenya CSS e latelang ho tokomane ea hau ea styles.css:
#nav {
bophara: 225px;
marginal-right: 15px;
moeli: o sephara o tiileng # 000000;
}}
#nav li {
mokhoa oa lethathamo: ha ho letho;
}}
.footer {
boholo ba maqephe: .75em;
hlakisa: bobeli;
bophara: 100%;
ho ngolla mongolo: bohareng;
}}
Setša sa marang-rang se beha lenane ka hare ho karolo ea ho sesa ho se na li-bullets kapa linomoro, le mefuta ea .footer e leng karolo ea copyright e tla ba e nyane le e bohareng ba karolo.
07 ho ea ho 10
Ho beha sebaka se ka sehloohong Karolo
Ka ho beha karolo ea hau e kholo ka boemo bo botle u ka kholiseha hore e tla lula moo u batlang hore e lule ho Websaeteng ea hau. Ke entse hore bophara ba 800px ba ka buisana le litebelisoa tse khōloanyane, empa haeba u e-na le leihlo le lenyenyane, u ka 'na ua batla ho etsa joalo.
Kenya lintho tse latelang tokomaneng ea hau ea styles.css:
#main {
bophara: 800px;
holimo: 0px;
boemo: ho feletseng;
ka ho le letšehali: 250px;
}}
08 ho ea ho 10
Ho Otla Lirapa Tsa Hao
Kaha ke se ke ntse ke behile tokomane ea serapeng ka holimo, ke ne ke batla ho fa serapa ka seng "kick" e nyenyane e eketsehileng ho etsa hore e hlahe hantle. Ke entse sena ka ho beha moeli ka holimo o bontšang serapa ho feta setšoantšo feela.
Kenya lintho tse latelang tokomaneng ea hau ea styles.css:
.topline {
moeli-top: teteaneng e tiileng # FFCC00;
}}
Ke entse qeto ea ho e etsa joaloka sehlopha se bitsoang "topline" ho e-na le ho hlalosa lirapa tsohle ka tsela eo. Ka tsela ena, haeba ke etsa qeto ea hore ke batla ho ba le serapa se se nang molaetsa oa mosehla o moholo, ke khona ho tlohela tlelase = "topline" lebokoseng la serapa 'me ha se na moeli o ka holimo.
09 ho ea ho 10
Ho khabisa Litšoantšo
Litšoantšo li na le moeli o ba pota-potileng, sena hase kamehla se bonts'ang ntle le hore setšoantšo se be le khokahanyo, empa ke rata ho ba le tlelase ka har'a mokhoa oa ka oa mechine ea CSS o fellang moeli ka ho toba. Bakeng sa mokhoa ona oa litšoantšo, ke entse sehlopha sa "noborder", 'me boholo ba litšoantšo tse ngotsoeng ke karolo ea sehlopha sena.
Karolo e 'ngoe e ikhethang ea litšoantšo tsena ke sebaka sa bona leqepheng. Ke ne ke batla hore ba be karolo ea serapa seo ba neng ba le ho sona ntle le ho sebelisa litafole ho li lumellanya. Tsela e bonolo ka ho fetisisa ea ho etsa sena ke ho sebelisa thepa ea CSS ea float.
Kenya lintho tse latelang tokomaneng ea hau ea styles.css:
#main img {
float: ho le letšehali;
margin-ka ho le letona: 5px;
marginal-bottom: 15px;
}}
.noborder {
moeli: 0px letho;
}}
Joalokaha u ka bona, ho boetse ho na le matlotlo a marang-rang a behiloeng litšoantšong, ho tiisa hore ha a thunngoe khahlanong le taba e ntseng e le haufi le serapeng.
10 ho ea ho 10
Joale sheba leqephe la hau le phethiloeng
Hang ha u se u bolokile CSS ea hau u ka boela ua kenya leqephe la liphoofolo tsa liphoofolo ka har'a Websaete ea hau. Leqephe la hau le lokela ho shebahala le tšoanang le le bontšitsoeng setšoantšong sena, 'me litšoantšo li lumellane le ho tsamaisoa ho nepahetse ka lehlakoreng le letšehali la leqephe.
Latela mehato e tšoanang bakeng sa maqephe a hau a ka hare a sebaka sena. U batla ho ba le leqephe le le leng la leqephe le leng le le leng ha u tsamaea.