Looge CSS-i stiilileht
Samamoodi lõime selle jaoks eraldi tekstifaili HTML, loote CSS-i jaoks tekstifaili. Kui vajate selle protsessi jaoks visuaale, vaadake palun esimest õpetust. CSS-i stiililehe loomiseks Notepadis toimige järgmiselt.
- Valige Fail> Uus Notepadis tühja akna saamiseks
- Salvestage fail CSS-iga, klõpsates nuppu Fail
- Liikuge kõvakettal kausta my_website
- Muuda "Salvesta tüübina: "kuni"Kõik failid"
- Pange failile nimi "stiilid.css"(jätke jutumärgid välja) ja klõpsake nuppu Salvesta
Linkige CSS-i stiilileht oma HTML-iga
Kui teil on stiilileht oma veebisaidi jaoks peate selle seostama veebisaidi endaga. Selleks kasutate lingi silti. Asetage järgmine lingimärgend mis tahes kohta.
Parandage lehe veerised
Kui kirjutate XHTML erinevate brauserite puhul saate teada, et neil kõigil on erinevad veerised ja reeglid, kuidas asju kuvada. Parim viis olla kindel, et teie sait näeb enamikus brauserites sama välja, on keelata brauseri valimisel vaikimisi sellised marginaalid nagu marginaalid.
Eelistame alustada lehti vasakus ülanurgas, ilma et teksti ümbritseks täiendav polsterdus või veeris. Isegi kui kavatseme sisu polsterdada, määrame veerised nulli, nii et alustame sama tühja tahvliga. Selleks lisage oma dokumendile styles.css järgmine:
HTML, body {
veeris: 0px;
polster: 0px;
ääris: 0px;
vasakul: 0px;
ülemine: 0px;
}
Lehe fondi muutmine
Fond on sageli esimene asi, mida soovite veebilehel muuta. Vaikimisi font veebilehel võib olla kole ja on tegelikult veebibrauseri enda teha, nii et kui te ei määra fonti, ei tea te tõesti, milline teie leht välja näeb.
Tavaliselt muudaksite paragrahvide või mõnikord kogu dokumendi enda fonti. Selle saidi jaoks määratleme fondi päise ja lõigu tasemel. Lisage oma dokumendile styles.css järgmine teave:
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;
}
Alustasime lõigete ja loendiüksuste alussuurusena 1em ja kasutasime seda siis minu pealkirjade suuruse määramiseks. Me ei looda kasutada pealkirja, mis on sügavam kui h4, kuid kui kavatsete seda teha, soovite ka selle kujundada.
Linkide huvitavamaks muutmine
Lingide vaikevärvid on vastavalt külastamata ja külastatud linkide puhul sinised ja lillad. Kuigi see on standard, ei pruugi see teie lehtede värviskeemiga sobida, nii et muutkem seda. Lisage faili styles.css järgmine:
a: link {
font-perekond: Arial, Helvetica, sans-serif;
värv: # FF9900;
teksti kaunistamine: allajoonimine;
}
a: külastatud {
värv: # FFCC66;
}
a: hõljutage {
taust: #FFFFCC;
fondi kaal: paks;
}
Seadistasime kolm lingistiili, vaikimisi a: lingi, külastatud a: külastatud, muudame värvi ja a: hover. Kasutades: hõljutage linki, saate linki taustavärvi ja muutke julgeks, et rõhutada, et see link on klõpsatav.
Navigeerimisosa kujundamine
Kuna me panime HTML-i esimeseks navigeerimisjaotise (id = "nav"), stiliseerime selle kõigepealt stiiliga. Peame näitama, kui lai see peaks olema, ja panema paremale küljele laiema veerise, et põhitekst selle vastu ei põruks. panime ka selle ümber piiri.
Lisage oma dokumendile styles.css järgmine CSS:
#nav {
laius: 225px;
paremäär: 15px;
ääris: keskmine tahke # 000000;
}
#nav li {
list-style: puudub;
}
.footer {
fondi suurus: .75em;
selge: mõlemad;
laius: 100%;
teksti joondamine: keskel;
}
Loendistiilis atribuut seab loendi navigeerimisjaotises nii, et selles ei oleks täppe ega numbreid, ja .footer stiilib autoriõiguste jaotise väiksemaks ja jaotise keskele.
Põhiosa positsioneerimine
Kui asetate oma peajaotise absoluutse positsioneerimisega, võite olla kindel, et see jääb teie veebisaidile täpselt sinna, kuhu soovite. Tegime selle mahutamiseks 800px laiuse suuremad monitorid, kuid kui teil on väiksem monitor, võiksite selle kitsamaks muuta.
Lisage oma dokumendisse styles.css järgmine:
#main {
laius: 800px;
ülemine: 0px;
positsioon: absoluutne;
vasakul: 250px;
}
Lõigude kujundamine
Kuna ma olen juba ülaltoodud lõigu fondi määranud, tahtsin igale lõigule anda väikese täiendava "löögi", et see paremini esile tuleks. Tegin seda nii, et panin ülaosale piiri, mis lõiku rohkem esile tõstis kui ainult pilt.
Lisage oma dokumendisse styles.css järgmine:
.topline {
border-top: paks tahke # FFCC00;
}
Otsustasime seda teha klassina, mille nimi on "ülaliin", selle asemel, et lihtsalt kõik lõigud sel viisil defineerida. Sel moel, kui otsustame, et soovime saada lõigu ilma kollase ülemise jooneta, võime lõigulipikastist lihtsalt klassi = "topline" välja jätta ja sellel pole ülemist piiri.
Piltide kujundamine
Piltide ümber on tavaliselt piir, see pole alati nähtav, kui pilt pole link, kuid meile meeldib, kui klassis on klass CSS-i stiilitabel, mis lülitab piiri automaatselt välja. Selle stiililehe jaoks lõime klassi "noborder" ja enamik dokumendis olevaid pilte on selle klassi osa.
Nende piltide teine eriline osa on nende asukoht lehel. Tahtsime, et nad oleksid osa lõikest, milles nad olid, ilma et nende joondamiseks kasutataks tabeleid. Lihtsaim viis selleks on kasutada float CSS atribuuti.
Lisage oma dokumendisse styles.css järgmine:
#main img {
ujuk: vasak;
paremäär: 5px;
alumine serv: 15 pikslit;
}
.noborder {
ääris: 0px puudub;
}
Nagu näete, on piltidele seatud ka veeriste omadused, veendumaks, et need pole purustatud lõikudes nende kõrval asuva hõljuva teksti vastu.
Nüüd vaadake oma lõpetatud lehte
Kui olete oma CSS-i salvestanud, saate lehe pets.htm oma veebibrauserisse laadida. Teie leht peaks välja nägema sarnane sellel pildil näidatuga, pildid joondatuna ja navigeerimine lehe vasakule küljele õigesti paigutatud.
Järgige samu juhiseid kõigi selle saidi siselehtede jaoks. Soovite, et navigeerimisel oleks iga lehe jaoks üks leht.