Te whakairi i te Putea Hangaia he Whārangi Tukutuku me CSS

01 o te 10

Waihangahia te Puka Tahua CSS

Ko te ara ano i hangaia e matou he kōnae kuputuhi motuhake mo te HTML, ka hangaia e koe he kōnae kuputuhi mo te CSS. Ki te hiahia koe ki nga ataata mo tenei tukanga, tirohia te akoranga tuatahi. Anei nga taahiraa hei waihanga i to pepa ahua CSS i roto i te Tuhipoka:

1. Kōwhiria Kōnae> Hōu kei te Pouakaata hei tiki i te matapihi kore
2. Tiakina te kōnae hei CSS mā te pāwhiri i te Kōnae
3. Whakatere ki te kōpaki my_website i runga i to puku puku
4. Hurihia te "Tiaki Hei Momo:" ki "Ngā Kōnae Katoa"
5. Whakaingoatia to kōnae "styles.css" (waiho atu i nga korero) ka pāwhiri Save

Tuhinga o mua

Honoa te Pepa Style CSS ki to HTML

I te wa e whai ahua ana koe mo to paetukutuku, ka hiahia koe ki te hono atu ki te whārangi Tukutuku ano. Hei whakamahi i tenei ka whakamahi koe i te tūtohu hono. Tuhia te ingoa o te hono i muri i roto i nga tohu o to tuhinga pets.htm:

Tuhinga o mua

Whakatikahia nga Tae Whārangi

Ina tuhia e koe te XHTML mo nga kaiwhakarato rereke, he mea kotahi ka ako koe ko te ahua o nga waahi rereke me nga ture mo te whakaatu i nga mea. Ko te huarahi pai ki te mohio kei te titiro tonu o to paetukutuku ki te nuinga o nga kaitoro kia kaua e tukua nga mea hei taapete ki te taunoa ki te whiriwhiringa o te pūtirotiro.

Kei te hiahia ahau ki te tīmata i aku whārangi ki te kokonga maui ki runga, kaore he taputapu atu, he taapiri ranei e karapoti ana i te kuputuhi. Ahakoa ka haere ahau ki te tirotiro i nga tuhinga, ka whakatakotoria e ahau nga taapete ki te kore o te mea ka timata ahau me te paparangi tuwhera. Ki te mahi i tenei, tohua nga mea e whai ake nei ki to tuhinga tuhinga.css:

html, tinana {
tapahi: 0px;
taraiwa: 0px;
rohe: 0px;
ki maui: 0px;
runga: 0px;
}

04 o te 10

Te huri i te Momotuhi i te Whārangi

Ko te momotuhi ko te mea tuatahi ka hiahia koe ki te whakarereke i runga i te Whārangi Tukutuku. Ko te momotuhi taunoa i runga i te Whārangi Tukutuku e taea te kino, a ko te mea kei te hangaia te Tukutuku Tukutuku, na, kaore koe e tautuhi i te momotuhi, kaore koe e mohio he aha te ahua o to tuhinga.

Ko te tikanga, ka hurihia te momotuhi i runga i nga parawae, i etahi wa i te tuhinga katoa ano. Mo tenei pae ka tautuhia e matou te momotuhi i te pane me te taumata parawae. Tāpirihia te whai ake ki to tuhinga tuhinga.css:

p, li {
momotuhi: 1em Arial, Helvetica, kore-serif;
}
h1 {
momotuhi: 2em Arial, Helvetica, kore-serif;
}
h2 {
momotuhi: 1.5em Arial, Helvetica, kore-serif;
}
h3 {
momotuhi: 1.25em Arial, Helvetica, kore-serif;
}

I tīmata ahau me te 1em hei raupapa matua mo nga paraka me te whakariterite i nga taonga, ka whakamahi i tera hei whakarite i te rahi mo aku upoko. Kaore ahau e hiahia ana ki te whakamahi i te upoko matua atu i te h4, engari ki te whakamahere koe kia hiahia koe ki te whakapai i taua mea ano.

Tuhinga o mua

Te Whakanuia o To Hononga

Ko nga tae taunoa mo nga hononga he puru, he papura hoki mo nga hononga kaore i tirohia me te toro atu. Ahakoa he paerewa tenei, kaore e pai ki te mahinga tae o o rarangi, na kia whakarereketia. I roto i to kōnae file.css, tapiritia e whai ake nei:

a: hono {
momotuhi-whanau: Arial, Helvetica, kore-serif;
tae: # FF9900;
whakapaipai kuputuhi: tohaina;
}
a: i tae atu ki {
tae: # FFCC66;
}
a: hover {
whakamārama: #FFFFCC;
momotuhi-taimaha: maia;
}

I whakaturia e ahau etahi momo hono hono e toru, ko te: hono rite ki te taunoa, a: i tae mai mo te waa i tae mai ai, ka huri i te tae, me te: hover. Ki te: he nui te hononga o te hononga ki te tiki i te tae papamuri me te haere maia ki te whakapuaki i te hono ki te panui.

06 o te 10

Te tarai i te Waahi Whakaterenga

Mai i te mea ka whakauruhia te waa whakatere (id = "nav") i te HTML, me taatai ​​i te tuatahi. Me whakaatu mai te whanui o te waa me te whakanoho i te taha whanui ki te taha matau kia kore ai e pakaru te tuhinga matua. I whakaturia ano e ahau he rohe a tawhio noa.

Tāpirihia te CSS e whai ake nei ki to tuhinga tuhinga.css:

#nav {
whanui: 225px;
tawhiri-matau: 15px;
rohe: te piringa o te taiao # 000000;
}
#nav li {
rārangi rārangi: kahore;
}
.ahiwae {
momotuhi momotuhi: .75em;
mārama: e rua;
whanui: 100%;
tuhi kuputuhi: pokapū;
}

Ko te hanganga-raupapa tahua te whakatakoto i te rarangi i roto i te waa whakatere ki te kore he putea, he nama ranei, me nga waaahi o te raupapa taapiri ka iti iho te waahanga ki te waahanga.

Tuhinga o mua

Ko te Whakarite i te Wahanga Matua

Na roto i te tautuhi i to waahanga matua me te tuuturu rawa ka taea e koe te mohio kei te noho tonu koe ki te wahi e hiahia ana koe kia noho tonu ki taau Whārangi Tukutuku. I hanga e ahau taku 800px whānui ki te haere ki te aroturuki nui, engari ki te whai koe i te aroturuki iti, kia hiahia koe ki te hanga i te iti atu.

Tuhia nga mea e whai ake nei i roto i to tuhinga tuhinga styles.css:

#main {
whanui: 800px;
runga: 0px;
tūranga: tino;
ki maui: 250px;
}

Tuhinga o mua

Te tarai i o taapiri

Mai i te mea kua whakaturia e ahau te momotuhi paraka i runga nei, i hiahia ahau ki te tuku i ia parawae he iti noa atu te "whana" ki te whakapiki ake. I mahia e ahau tenei ma te tuhi i te rohe i runga ake nei i whakamaramahia ai te waahanga nui ake i te kii anake.

Tuhia nga mea e whai ake nei i roto i to tuhinga tuhinga styles.css:

.topline {
te rohe-runga: te matotoru maamaa # FFCC00;
}

I whakatau ahau ki te mahi i te mea hei akomanga e huaina ana ko te "topline" kaore i te tautuhi i nga parawae katoa i taua huarahi. I tenei ara, ki te whakatau ahau ka hiahia au ki te whakauru i te parawae kaore he raina kowhai kowhai, ka taea e ahau te whakarereke i te akomanga = "topline" i roto i te tūtohu paraka, kaore hoki i te rohe o runga.

Tuhinga o mua

Te tarai i nga Images

Ko nga ahua o te waa e karapoti ana ia ratou, kaore i te kitea i tenei wa kaore he hononga o te whakapakoko, engari e hiahia ana ahau ki te whai i tetahi akomanga i roto i taku waahanga CSS ka tahuri ke atu i te rohe. Mo tenei ahuaheet, i hanga e ahau te akomanga "noborder", me te nuinga o nga whakaahua kei te tuhinga he waahanga o tenei akomanga.

Ko era atu waahanga motuhake o enei whakaahua ko to taahiranga kei runga i te whaarangi. I hiahia ahau kia waiho ratou hei waahanga o te paraka i roto i a raatau me te kore e whakamahi i ngapu hei whakarite ia ratou. Ko te huarahi tino maatau ki te mahi i tenei ko te whakamahi i te taonga CSS float.

Tuhia nga mea e whai ake nei i roto i to tuhinga tuhinga styles.css:

#main img {
rererangi: te maui;
taha-matau: 5px;
tawhiri-raro: 15px;
}
.e whakawhitiwhiti {
rohe: 0px kore;
}

Ka taea e koe te kite, he maha nga waahanga kei runga i nga whakaahua, kia mohio ai kaore i pakaruhia atu ki a ratau te kuputuhi e tu ana ki a ratou i roto i nga paraka.

Tuhinga o mua

Na, titiro ki tou Whārangi kua oti

Kia tiakina e koe to CSS ka taea e koe te taake i te whārangi pets.htm i roto i to rorohiko Tukutuku. Kia rite te ahua o to whārangi ki te whakaaturanga e whakaaturia ana i tenei pikitia, me nga whakaahua e hono ana, me te whakatere ki te taha mauī o te whārangi.

Me whai ano i enei huarahi mo o raatau o roto mo o raatau pae tukutuku. E hiahia ana koe kia kotahi te whārangi mo nga whārangi katoa i roto i to whakatere.