01 ng 10
Lumikha ng CSS Style Sheet
Sa parehong paraan lumikha kami ng isang hiwalay na file ng teksto para sa HTML, ikaw ay lilikha ng isang text file para sa CSS. Kung kailangan mo ng mga visual para sa prosesong ito mangyaring tingnan ang unang tutorial. Narito ang mga hakbang upang lumikha ng iyong CSS style sheet sa Notepad:
- Pumili ng File> Bago sa Notepad upang makakuha ng isang walang laman na window
- I-save ang file bilang CSS sa pamamagitan ng pag-click sa File
- Mag-navigate sa my_website na folder sa iyong hard drive
- Baguhin ang "I-save Bilang Uri:" sa "Lahat ng Mga File"
- Pangalanan ang iyong file na "styles.css" (iwanan ang mga panipi) at i-click ang I-save
02 ng 10
I-link ang CSS Style Sheet sa Iyong HTML
Sa sandaling nakakuha ka ng isang style sheet para sa iyong Web site, kakailanganin mong iugnay ito sa mismong Web page. Upang gawin ito gamitin mo ang link na tag. Ilagay ang sumusunod na tag ng link kahit saan sa loob ng
na mga tag ng iyong mga pets.htm na dokumento:03 ng 10
Ayusin ang Mga Margins ng Pahina
Kapag sumusulat ka ng XHTML para sa iba't ibang mga browser, ang isang bagay na matututunan mo ay ang lahat ng ito ay tila may magkakaibang mga margin at mga tuntunin para sa kung paano nagpapakita ang mga ito ng mga bagay. Ang pinakamahusay na paraan upang siguraduhin na ang iyong site ay mukhang pareho sa karamihan sa mga browser ay hindi pinapayagan ang mga bagay na tulad ng mga margin sa default sa pagpili ng browser.
Mas gusto kong simulan ang aking mga pahina sa itaas na kaliwang sulok, nang walang dagdag na padding o gilid na nakapalibot sa teksto. Kahit na kung papunta ako sa pad ng mga nilalaman, itinakda ko ang mga gilid sa zero upang magsimula ako sa parehong blankong slate. Upang gawin ito, idagdag ang mga sumusunod sa iyong estilo.css dokumento:
html, body {
margin: 0px;
padding: 0px;
hangganan: 0px;
kaliwa: 0px;
itaas: 0px;
}
04 ng 10
Pagbabago ng Font sa Pahina
Ang font ay madalas na ang unang bagay na nais mong baguhin sa isang pahina ng Web. Ang default na font sa isang pahina ng Web ay maaaring pangit, at aktwal na up ang Web browser mismo, kaya kung hindi mo tukuyin ang font, hindi mo talaga alam kung ano ang magiging hitsura ng iyong pahina.
Karaniwan, babaguhin mo ang font sa mga talata, o kung minsan sa buong dokumento mismo. Para sa site na ito tutukuyin namin ang font sa header at antas ng parapo. Idagdag ang sumusunod sa iyong mga dokumento sa styles.css:
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;
}
Nagsimula ako sa 1em bilang sukat ng base ko para sa mga talata at listahan ng mga item, at pagkatapos ay ginagamit na upang itakda ang laki para sa aking mga headline. Hindi ko inaasahan na gumamit ng isang headline na mas malalim kaysa sa h4, ngunit kung balak mo sa gusto mo rin itong estilo.
05 ng 10
Paggawa ng Iyong mga Link Higit pang mga Kagiliw-giliw
Ang mga default na kulay para sa mga link ay asul at kulay-ube para sa mga hindi nakuha at binisita ang mga link ayon sa pagkakabanggit. Habang ito ay pamantayan, maaaring hindi ito magkasya ang scheme ng kulay ng iyong mga pahina, kaya baguhin natin ito. Sa iyong mga estilo.css file, idagdag ang mga sumusunod:
isang: link {
font-family: Arial, Helvetica, sans-serif;
kulay: # FF9900;
text-decoration: underline;
}
a: binisita {
kulay: # FFCC66;
}
a: hover {
background: #FFFFCC;
font-weight: bold;
}
Nag-set up ako ng tatlong mga estilo ng link, ang isang: link bilang default, isang: binisita para sa kapag ito ay binisita, baguhin ko ang kulay, at isang: hover. Gamit ang isang: hover Mayroon akong link na makakuha ng isang kulay ng background at pumunta bold upang bigyang-diin ito ay isang link na ma-click.
06 ng 10
Pag-istilo ng Navigation Section
Dahil inilagay namin muna ang seksyon ng nabigasyon (id = "nav" sa HTML, muna natin itong estilo. Kailangan nating ipahiwatig kung gaano kalawak ang dapat na ito at maglagay ng mas malawak na margin sa kanang bahagi upang ang pangunahing teksto ay hindi mag-uumpisa laban dito. Nagbibigay din ako ng isang hangganan sa paligid nito.
Idagdag ang sumusunod na CSS sa iyong mga dokumento sa styles.css:
#nav {
lapad: 225px;
margin-right: 15px;
hangganan: medium solid # 000000;
}
#nav li {
estilo ng listahan: none;
}
.footer {
laki ng font: .75em;
malinaw: parehong;
lapad: 100%;
text-align: center;
}
Ang estilo ng listahan ng estilo ay nagtatakda ng listahan sa loob ng seksyong nabigasyon upang walang mga bullet o numero, at ang mga estilo ng sapatos na seksyon ng copyright ay mas maliit at nakasentro sa loob ng seksyon.
07 ng 10
Puwesto ang Pangunahing Seksyon
Sa pamamagitan ng pagpoposisyon sa iyong pangunahing seksyon na may ganap na pagpoposisyon maaari mong siguraduhin na ito ay manatili eksakto kung saan mo nais na manatili ito sa iyong Web page. Ginawa ko ang aking 800px na lapad upang mapagkaloob ang mga mas malaking monitor, ngunit kung mayroon kang mas maliit na monitor, maaari mong gawin itong mas makitid.
Ilagay ang mga sumusunod sa iyong dokumento sa styles.css:
#main {
lapad: 800px;
itaas: 0px;
posisyon: absolute;
kaliwa: 250px;
}
08 ng 10
Pag-istilo ng iyong mga Talata
Dahil naitakda ko na ang font ng talata sa itaas, nais kong bigyan ang bawat talata ng isang maliit na dagdag na "sipa" upang gawing mas lalong kanais-nais. Ginawa ko ito sa pamamagitan ng paglalagay ng hangganan sa itaas na naka-highlight ang talata nang higit pa kaysa sa larawan lamang.
Ilagay ang mga sumusunod sa iyong dokumento sa styles.css:
.topline {
hangganan-itaas: makapal na solid # FFCC00;
}
Nagpasiya akong gawin ito bilang isang klase na tinatawag na "topline" sa halip na tukuyin ang lahat ng mga talata sa ganitong paraan. Sa ganitong paraan, kung magpasiya ako na gusto kong magkaroon ng isang talata nang walang tuktok na dilaw na linya, maaari ko lang iwanan ang klase = "topline" sa tag na talata at hindi ito magkakaroon ng pinakamataas na hangganan.
09 ng 10
Pag-istilo ng Mga Larawan
Ang mga imahe ay karaniwang may isang hangganan sa paligid ng mga ito, hindi ito laging nakikita maliban kung ang imahe ay isang link, ngunit nais kong magkaroon ng isang klase sa loob ng aking CSS stylesheet na lumiliko off ang hangganan awtomatikong. Para sa stylesheet na ito, nilikha ko ang klase ng "noborder", at karamihan sa mga imahen sa dokumento ay bahagi ng klase na ito.
Ang iba pang mga espesyal na bahagi ng mga imaheng ito ay ang kanilang lokasyon sa pahina. Nais kong maging bahagi sila ng talata na hindi nila ginagamit ang mga talahanayan upang ihanay sila. Ang pinakamadaling paraan upang gawin ito ay ang paggamit ng float property ng CSS.
Ilagay ang mga sumusunod sa iyong dokumento sa styles.css:
#main img {
lumutang pakaliwa;
margin-right: 5px;
margin-bottom: 15px;
}
.walang hanggan {
border: 0px none;
}
Tulad ng makikita mo, mayroon ding mga katangian ng margin na nakalagay sa mga imahe, upang tiyakin na hindi sila maputol laban sa nilulutang teksto na nasa tabi nila sa mga talata.
10 ng 10
Ngayon Tingnan ang Iyong Nakumpletong Pahina
Sa sandaling nai-save mo ang iyong CSS maaari mong i-reload ang mga page ng pets.htm sa iyong Web browser. Ang iyong pahina ay dapat magmukhang katulad ng ipinakita sa larawan na ito, na may mga larawan na nakahanay at ang nabigasyon ay inilagay ng tama sa kaliwang bahagi ng pahina.
Sundin ang mga parehong hakbang na ito para sa lahat ng iyong mga panloob na pahina para sa site na ito. Gusto mong magkaroon ng isang pahina para sa bawat pahina sa iyong nabigasyon.