Ṣiṣe akọsilẹ akọsilẹ kan Ṣẹda oju-iwe ayelujara pẹlu CSS

01 ti 10

Ṣẹda CSS Style Sheet

Ni ọna kanna ti a da faili faili ti a sọtọ fun HTML, iwọ yoo ṣẹda faili ọrọ fun CSS. Ti o ba nilo awọn oju aworan fun ilana yii jọwọ wo akọsilẹ akọkọ. Eyi ni awọn igbesẹ lati ṣẹda CSS ara dì ni Akọsilẹ:

1. Yan Faili> Titun ni Akọsilẹ lati gba window ti o ṣofo
2. Fi faili pamọ bi CSS nipa tite File
3. Ṣawari si folda folda mi lori dirafu lile rẹ
4. Yi awọn "Fipamọ bi Iru:" si "Gbogbo Awọn faili"
5. Lorukọ faili rẹ "styles.css" (fi kuro awọn abajade) ki o si tẹ Fipamọ

02 ti 10

Ṣe asopọ si CSS Style Sheet si rẹ HTML

Lọgan ti o ba ni iwe-ara kan fun oju-iwe ayelujara rẹ, iwọ yoo nilo lati ṣepọ rẹ si oju-iwe ayelujara funrararẹ. Lati ṣe eyi o lo tag tag. Fi aami atokasi yii si nibikibi nibikibi ti o wa ninu awọn iwe akọle

03 ti 10

Ṣatunkọ awọn Awọn Page Awọn aṣayan

Nigbati o ba nkọ XHTML fun awọn aṣàwákiri oriṣiriṣi, ohun kan ti iwọ yoo kọ ni pe gbogbo wọn dabi pe o ni awọn agbegbe ti o yatọ ati awọn ofin fun bi wọn ti ṣe afihan ohun. Ọna ti o dara julọ lati rii daju pe aaye rẹ wa ni oju kanna ni ọpọlọpọ awọn aṣàwákiri ni lati ko gba laaye awọn ohun bii agbegbe lati aiyipada si aṣayan aṣàwákiri.

Mo fẹ lati bẹrẹ awọn oju-iwe mi ni apa osi ni apa osi, laisi iyokuro afikun tabi agbegbe ti o yika ọrọ naa. Paapa ti Mo ba lo awọn akọọlẹ naa, Mo ṣeto awọn agbegbe si odo ki n bẹrẹ pẹlu awọn ileti ti o fẹlẹfẹlẹ. Lati ṣe eyi, fi awọn wọnyi si iwe iwe styles.css rẹ:

html, ara {
ala: 0px;
padding: 0px;
aala: 0px;
sosi: 0px;
oke: 0px;
}

04 ti 10

Iyipada Ipo-ori lori Oju-ewe naa

Awọn fonti jẹ igba akọkọ ohun ti o yoo fẹ lati yipada lori oju-iwe ayelujara kan. Fọọmu aiyipada lori oju-iwe ayelujara kan le jẹ ẹgàn, o si jẹ oju-iwe ayelujara kiri funrararẹ, nitorina ti o ko ba ṣafọjuwe fonti, iwọ ko ni mọ ohun ti oju-iwe rẹ yoo dabi.

Ni igbagbogbo, iwọ yoo yi ẹrọ naa pada si awọn parakafi, tabi nigbakugba lori gbogbo iwe naa rara. Fun aaye yii a yoo ṣapejuwe fonti ni akọsori ati ipele ipele. Fi awọn wọnyi si iwe kika styles.css rẹ:

p, li {
fonti: Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
folda: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
fonti: 1.25em Arial, Helvetica, sans-serif;
}

Mo ti bẹrẹ pẹlu 1em gege bi ipilẹṣẹ ipilẹ fun paragiramu ki o ṣe akojọ ohun kan, lẹhinna lo pe lati ṣeto iwọn fun awọn akọle mi. Emi ko reti lati lo akọle akọle ti o jinle ju h4, ṣugbọn ti o ba gbero si o yoo fẹ lati ṣe ara rẹ.

05 ti 10

Ṣiṣe Awọn Isopọ Rẹ Diẹ sii

Awọn awọ aiyipada fun awọn ìjápọ jẹ buluu ati eleyi ti awọn ọṣọ ti a ko ti ṣawari ati ti a ṣe akiyesi lẹsẹkẹsẹ. Lakoko ti o jẹ otitọ, o le ko ni ibamu si eto awọ ti awọn oju-iwe rẹ, nitorina jẹ ki a yi i pada. Ni faili styles.css rẹ, fi awọn wọnyi:

a: ọna asopọ {
ẹkun-ẹda: Arial, Helvetica, sans-serif;
awọ: # FF9900;
ohun-ọṣọ: akọle;
}
a: ṣàbẹwò {
awọ: # FFCC66;
}
a: hover {
abẹlẹ: #FFFFCC;
aṣiṣe-aṣiṣe: alaifoya;
}

Mo ti ṣeto awọn ọna kika mẹta, eyi: a ṣe asopọ bi aiyipada, a: ṣàbẹwò fun nigba ti a ti bẹwo, Mo yi awọ pada, ati pe: hover. Pẹlu a: hover Mo ni asopọ lati gba awọ-lẹhin ati ki o lọ ni igboya lati fi rinlẹ pe ọna asopọ lati wa.

06 ti 10

Ṣiṣe Ẹka Lilọ kiri

Niwon a ti fi ọna lilọ kiri (id = "nav") ṣaju akọkọ ni HTML, jẹ ki ara wa ni akọkọ. A nilo lati fihan bi o ṣe yẹ ki o yẹ ki o wa ati ki o fi aaye ti o tobi julọ si apa ọtún ki oju-iwe akọkọ ko ba le ṣe afẹfẹ si. Mo tun fi agbegbe kan si i.

Fi CSS ti o tẹle yii ranṣẹ si awọn aza styles.css rẹ:

#nav {
iwọn: 225px;
ala-ọtun: 15px;
aala: alabọde alabọde # 000000;
}
#nav li {
akojọ-ara: kò;
}
.footer {
Iwọn-aṣiṣe-iwọn: .75em;
ko o: mejeeji;
iwọn: 100%;
ọrọ-kikọ: aarin;
}

Awọn ohun-ini-ini akojọ aṣayan ṣeto apẹrẹ ni akojọ lilọ kiri lati ko awọn awako tabi awọn nọmba, ati awọn iru ẹda itẹwọsẹ ni apakan aladakọ lati wa ni kekere ati ti o wa ni aaye laarin apakan.

07 ti 10

Pii Ifilelẹ Akọkọ

Nipa gbigbe ipo akọkọ rẹ pẹlu ipo pipe o le rii daju pe yoo duro ni ibi ti o fẹ ki o duro lori oju-iwe ayelujara rẹ. Mo ṣe ibiti o pọju 800px mi lati mu awọn ayaniwo nla pọ, ṣugbọn bi o ba ni atẹle diẹ, o le fẹ lati ṣe eyi ti o kere julọ.

Gbe awọn wọnyi ni awọn aza styles.ss rẹ:

#main {
iwọn: 800px;
oke: 0px;
ipo: idi;
sosi: 250px;
}

08 ti 10

Ṣiṣe Awọn Akọsilẹ Rẹ

Niwon Mo ti ṣeto tẹlẹ paragilefi loke, Mo fẹ lati fun paramba kọọkan diẹ diẹ sii "kick" lati ṣe o dara jade. Mo ṣe eyi nipa fifi ami kan si apa oke ti o ṣe afihan paragifi ti o ju aworan nikan lọ.

Gbe awọn wọnyi ni awọn aza styles.ss rẹ:

.topline {
laala oke-oke: nipọn to lagbara # FFCC00;
}

Mo pinnu lati ṣe eyi gẹgẹbi kilasi ti a npe ni "topline" ju ki o ṣe apejuwe gbogbo awọn asọtẹlẹ ni ọna naa. Ni ọna yii, ti mo ba pinnu pe Mo fẹ lati ni paragilefi lai laini iwọn ila-oorun kan, Mo le fi kuro ni kilasi = "topline" ni paragilefi tag ati pe kii yoo ni oke-aala oke.

09 ti 10

Gigun Awọn Aworan

Awọn aworan le ni iyipo ni ayika wọn, eyi kii ṣe han nigbagbogbo ayafi ti aworan jẹ ọna asopọ, ṣugbọn Mo fẹ lati ni kilasi laarin CSS stylesheet mi ti o pa aala kuro laifọwọyi. Fun iru awoṣe yii, Mo ṣẹda kilasi "noborder", ati ọpọlọpọ awọn aworan ninu iwe naa jẹ apakan ti kilasi yii.

Apa pataki ti awọn aworan wọnyi jẹ ipo wọn lori oju-iwe naa. Mo fe ki wọn jẹ apakan ti paragirafi ti wọn wa laisi lilo awọn tabili lati so wọn pọ. Ọna ti o rọrun julọ lati ṣe eyi ni lati lo ohun elo CSS float.

Gbe awọn wọnyi ni awọn aza styles.ss rẹ:

#main img {
float: osi;
ala-ọtun: 5px;
ala-isalẹ: 15px;
}
Ikọwe agbedemeji {
aala: 0px kò si;
}

Gẹgẹbi o ti le ri, awọn ẹya-ara ti o wa ni agbegbe tun wa lori awọn aworan, lati rii daju pe wọn ko ni iparun si ọrọ ti o ṣafo ti o wa lẹgbẹ wọn ninu awọn asọtẹlẹ.

10 ti 10

Nisisiyi Wo Ni Oju Rẹ Page

Lọgan ti o ba ti fipamọ CSS rẹ o le tun gbe oju-iwe pets.htm ni oju-iwe ayelujara rẹ. Oju-iwe rẹ yẹ ki o wo iru si ọkan ti a fihan ni aworan yii, pẹlu awọn aworan ṣe deedee ati lilọ kiri ti a gbe si ọtun ni apa osi ti oju-iwe naa.

Tẹle awọn igbesẹ kanna fun gbogbo awọn oju-iwe inu rẹ fun aaye yii. O fẹ lati ni oju-ewe kan fun gbogbo oju-ewe ninu lilọ kiri rẹ.