Pag-istilo sa usa ka Notepad Nahimo nga Web Page with CSS

01 sa 10

Paghimo sa CSS Style Sheet

Paghimo sa CSS Style Sheet. Jennifer Kyrnin

Sa susama nga paagi nga among gihimo ang usa ka linain nga file sa teksto alang sa HTML, maghimo ka og text file alang sa CSS. Kon kinahanglan nimo ang mga biswal alang niini nga proseso palihug tan-awa ang unang panudlo. Ania ang mga lakang sa paghimo sa imong CSS style sheet sa Notepad:

  1. Pilia ang File> New in Notepad aron makakuha og walay sulod nga bintana
  2. Luwasa ang file isip CSS pinaagi sa pagklik sa File
  3. Pagdala sa my_website folder sa imong hard drive
  4. Usba ang "Save As Type:" ngadto sa "All Files"
  5. Ngalan ang imong file "styles.css" (biyai ang mga kinutlo) ug i-klik ang Save

02 sa 10

I-link ang CSS Style Sheet sa Imong HTML

I-link ang CSS Style Sheet sa Imong HTML. Jennifer Kyrnin

Sa higayon nga adunay usa ka estilo sa estilo alang sa imong Web site, kinahanglan nimo kining i-associate sa Web page mismo. Sa pagbuhat niini imong gamiton ang link tag. Ibutang ang mosunod nga link tag bisan asa sulod sa mga tag sa sa imong mga dokumento sa pets.htm:

03 sa 10

I-ayo ang mga Panid sa Panid

I-ayo ang mga Panid sa Panid. Jennifer Kyrnin

Kon nagsulat ka sa XHTML alang sa lainlaing mga browser, usa ka butang nga imong makat-unan mao nga kini daw adunay lainlaing mga lagda ug mga lagda kon giunsa nila pagpakita ang mga butang. Ang pinakamaayo nga paagi aron masiguro nga ang imong site susama sa kadaghanan sa mga browsers mao ang dili pagtugot sa mga butang sama sa mga margin nga mahimong default sa pagpili sa browser.

Gipili nako nga magsugod sa akong mga panid sa ibabaw nga bahin sa wala, nga wala'y dugang nga padding o gilapad nga naglibot sa teksto. Bisan kon akong ibutang ang mga sulod, akong gibutang ang mga margin ngadto sa zero aron magsugod ko sa sama nga blangkong slate. Sa pagbuhat niini, idugang ang mosunod sa imong estilo sa estilo sa dokumento:

html, lawas {
kilid: 0px;
padding: 0px;
utlanan: 0px;
wala: 0px;
top: 0px;
}

04 sa 10

Pag-usab sa Font sa Page

Pag-usab sa Font sa Page. Jennifer Kyrnin

Ang font mao ang kanunay nga unang butang nga gusto nimong usbon sa usa ka Web page. Ang default nga font sa usa ka pahina sa Web mahimo nga mangil-ad, ug sa pagkatinuod ang Web browser mismo, mao nga kung dili nimo matino ang font, dili nimo mahibal-an kung unsa ang hitsura sa imong panid.

Kasagaran, imong usbon ang font sa mga parapo, o usahay sa tibuok nga dokumento mismo. Alang niini nga site atong ipasabut ang font sa header ug paragraph level. Idugang ang mosunod sa imong estilo.css nga dokumento:

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.25em Arial, Helvetica, sans-serif;
}

Gisugdan nako ang 1em isip sukaranan sa akong mga sumbanan alang sa mga parapo ug mga lista sa mga butang, ug dayon gigamit kana aron ibutang ang gidak-on alang sa akong mga ulohan. Dili ko magdahom nga mogamit og mas taas nga ulohan kay sa h4, apan kung nagplano ka nga imo usab nga estilo.

05 sa 10

Paghimo sa Imong mga Links nga Mas Makaiikag

Paghimo sa Imong mga Links nga Mas Makaiikag. Jennifer Kyrnin

Ang mga default nga mga kolor alang sa mga sumpay usa ka asul ug purpura alang sa wala gibutyag ug gibisita ang mga sumpay. Samtang kini mao ang sumbanan, kini dili mahimong mohaum sa color scheme sa imong mga panid, mao nga usbon nato kini. Sa imong styles.css file, idugang ang mosunod:

a: link {
font-family: Arial, Helvetica, sans-serif;
kolor: # FF9900;
text-decoration: underline;
}
a: mibisita {
kolor: # FFCC66;
}
a: hover {
background: #FFFFCC;
font-weight: bold;
}

Gitakda nako ang tulo ka mga estilo sa pag-link, ang usa ka: link ingon nga default, usa: pagbisita sa kung kini gibisita, akong usbon ang kolor, ug usa: hover. Uban sa usa: hover ko ang link nga adunay usa ka kolor sa background ug moadto nga maisugon aron ipasiugda kini usa ka link nga pag-klik.

06 sa 10

Pag-istilo sa Navigation Section

Pag-istilo sa Navigation Section. Jennifer Kyrnin

Tungod kay gibutang nato una ang bahin sa nabigasyon (id = "nav") sa HTML, i-estoryahan una kini. Kinahanglan naton ipakita kung unsa kini ka lapad ug ibutang ang usa ka mas lapad nga kilid sa tuo nga kilid aron nga ang main nga teksto dili makabangon batok niini. Gibutang usab nako ang utlanan libot niini.

Idugang ang mosunod nga CSS sa imong estilo.css nga dokumento:

#nav {
lapad: 225px;
kilid-tuo: 15px;
utlanan: medium solid # 000000;
}
#nav li {
list-style: wala;
}
.footer {
font-size: .75em;
tin-aw: ang duha;
gilapdon: 100%;
text-align: center;
}

Ang estilo sa estilo sa lista nagbutang sa lista sa sulod sa seksyon sa nabigasyon aron walay mga bala o mga numero, ug ang mga estilo sa bakak ang seksyon sa copyright nga mas gamay ug nakasentro sa sulod sa seksyon.

07 sa 10

Ibutang ang Main Section

Ibutang ang Main Section. Jennifer Kyrnin

Pinaagi sa pag-position sa imong main section sa absolutong positioning makasiguro ka nga kini magpabilin kung asa nimo gusto nga kini magpabilin sa imong Web page. Gihimo nako ang akong 800px nga gilapdon aron sa pagdawat sa mas dako nga mga monitor, apan kung ikaw adunay mas gamay nga monitor, mahimo nimo kining himoon nga mas pig-ot.

Ibutang ang mosunod sa imong estilo nga dokumento:

#main {
lapad: 800px;
top: 0px;
posisyon: hingpit;
wala: 250px;
}

08 sa 10

Pag-istilo sa imong mga Parapo

Pag-istilo sa imong mga Parapo. Jennifer Kyrnin

Tungod kay akong gibutang na ang parapo sa parapo sa ibabaw, gusto nakong hatagan ang matag parapo ug gamay nga "sipa" aron kini mas maayo. Gibuhat nako kini pinaagi sa pagbutang sa usa ka utlanan sa ibabaw nga nagpasiugda sa parapo nga labaw pa kay sa hulagway lamang.

Ibutang ang mosunod sa imong estilo nga dokumento:

.topline {
utlanan-ibabaw: baga nga solid # FFCC00;
}

Nakahukom ko nga buhaton kini isip usa ka klase nga gitawag og "topline" kay sa paghatag lamang sa tanang mga parapo nianang paagiha. Niining paagiha, kon modesisyon ako nga gusto ko nga adunay usa ka parapo nga wala ang usa ka top yellow nga linya, mahimo ko lang biyaan ang klase = "topline" sa tag sa parapo ug dili kini ang kinatibuk-ang utlanan.

09 sa 10

Pag-istilo sa mga Imahen

Pag-istilo sa mga Imahen. Jennifer Kyrnin

Ang mga hulagway kasagaran adunay usa ka utlanan sa ilang palibot, kini dili kanunay makita gawas kon ang hulagway usa ka sumpay, apan gusto ko nga adunay usa ka klase sa sulod sa akong CSS stylesheet nga magpapas sa utlanan awtomatik. Alang niining stylesheet, gibuhat nako ang klase nga "noborder", ug ang kadaghanan sa mga imahen sa dokumento kabahin niini nga klase.

Ang laing espesyal nga bahin sa mga imahen mao ang ilang nahimutangan sa panid. Gusto ko sila nga mahimong usa ka bahin sa parapo nga ilang gigamit nga wala magamit ang mga lamesa aron ilarayan kini. Ang pinakayano nga paagi sa pagbuhat niini mao ang paggamit sa float CSS property.

Ibutang ang mosunod sa imong estilo nga dokumento:

#main img {
float: left;
kilid-tuo: 5px;
giladmon-bottom: 15px;
}
.noborder {
utlanan: 0px wala;
}

Sumala sa imong makita, adunay mga kabtangan usab nga nahimutang sa mga hulagway, aron maseguro nga dili kini madugmok batok sa naglutaw nga teksto nga anaa sa tupad nila sa mga parapo.

10 sa 10

Karon Tan-awa ang Imong Nahuman nga Pahina

Karon Tan-awa ang Imong Nahuman nga Pahina. Jennifer Kyrnin

Sa higayon nga imong gitipigan ang imong CSS mahimo nimo i-reload ang mga pets.htm nga panid sa imong Web browser. Ang imong panid susama sa usa nga gipakita sa niini nga hulagway, nga giparis ang mga hulagway ug ang paglaraw nga gibutang sa husto sa wala nga bahin sa panid.

Sunda kini nga susamang mga lakang alang sa tanan sa imong mga internal nga mga pahina alang niining site. Gusto nimo nga adunay usa ka panid alang sa matag panid sa imong paglayag.