01 of 10
Loo CSS-i stiilileht
Samamoodi, kui loome HTML-i jaoks eraldi tekstifaili, loote CSS-i jaoks tekstifaili. Kui vajate seda protsessi visuaale, vaadake palun esimest õpetust. Siin on samme CSS-i stiili lehe loomiseks Notepadis:
- Tühja akna saamiseks vali menüükäsk Fail> Uus Notepadis
- Salvestage fail CSS-failina, klõpsates käsul File
- Liikuge oma kõvakettale my_website kausta
- Muutke "Salvesta kui tüüp": "Kõik failid"
- Nimetage oma fail "styles.css" (jätke pakkumised välja) ja klõpsake käsul Salvesta
02 of 10
Link CSS stiilileht HTML-ile
Kui veebisaidil on stiilileht, peate selle veebi lehele ise siduma. Selleks kasutate linki märgendit. Asetage järgmine linki märgend kõikjal teie pets.htm dokumendi
-märgis:03 of 10
Paranda Page Margins
Kui sa kirjutad XHTML-i erinevatele brauseritele, siis üks asi, mida sa õpid, on see, et neil kõigil on erinevad marginaalid ja reeglid, kuidas need asjad kuvatakse. Enamiku brauserite puhul on parim viis veenduda, et teie sait näeb välja sama, et mitte lubada selliseid asju nagu brauseri valiku vaikeväärtused.
Ma eelistan alustada oma lehti ülemises vasakus nurgas, ilma teksti lisapinda ega marginaali. Isegi kui ma hakkan sisu pakkima, seadisin marginaalid nulliks, nii et ma alustan samast tühjast kiltkivist. Selleks lisage oma styles.css dokumendile järgmine tekst:
html, keha {
marginaal: 0px;
padding: 0px;
piiri: 0px;
vasakule: 0px;
top: 0px;
}
04 10-st
Fondi muutmine lehel
Font on sageli esimene asi, mida soovite veebisaidil muuta. Veebilehe vaikefriit võib olla kole ja on tegelikult veebibrauser ise, nii et kui te ei määra fonti, siis te ei tea, mida teie leht välja näeb.
Tavaliselt muudaksite fonti lõigetes või mõnikord kogu dokumendis endal. Sellel saidil määratleme fondi päise ja lõike tasemel. Lisage oma styles.css dokumendile järgmine tekst:
p, li {
fond: 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;
}
Alustasin 1em-ga kui minu baasmõõduga lõigud ja loendiüksused ning seejärel kasutasin seda, et määrata oma pealkirjade suurus. Ma ei oota, et kasutaksin pealkirja, mis on sügavam kui h4, kuid kui plaanite, et soovite seda ka stiili muuta.
05 of 10
Lingid on huvitavamad
Linkide vaikerivärvid on sinised ja lillad vastavalt külastatud ja külastatud lingile. Kuigi see on standardne, ei pruugi see sobida teie lehtede värviskeemiga, nii et muutke seda. Sisestage oma styles.css-fail järgmiselt:
a: link {
font-family: Arial, Helvetica, sans-serif;
värv: # FF9900;
tekstikujundus: rõhutage;
}
a: külastatud {
värv: # FFCC66;
}
a: hover {
taust: #FFFFCC;
font-mass: bold;
}
Ma seadisin kolme linki stiili, a: linki vaikimisi, a: külastasin, kui see on külastatud, muudan värvi ja a: hõljutage kursorit. Kui kasutate: hover, siis on mul link tausta värvi ja julge, et rõhutada, et see on klõpsatav ling.
06 10-st
Navigatsiooni sektsiooni kujundamine
Kuna me panime HTML-i algusse navigeerimise (id = "nav"), laseme stiilil see kõigepealt. Me peame näitama, kui ulatuslikult see peaks olema, ja seadma paremale küljele suurema varu, nii et peamine tekst ei satuks selle vastu. Ma panin selle ümber ka piiri.
Lisage oma styles.css dokumendile järgmine CSS:
#nav {
laius: 225px;
marginaalne paremale: 15px;
piir: keskmine tahkis # 000000;
}
#nav li {
loendi stiil: pole;
}
.footer {
font-size: .75em;
selge: mõlemad;
laius: 100%;
teksti-joondus: keskus;
}
Nimekirja stiili varundus loob navigeerimisosas oleva loendi, millel puuduvad täpid või numbrid, ja .kõlar stiilib autoriõigustega seotud jaotisest väiksemat ja tsentreeritavat sektsiooni.
07 of 10
Peamised sektsioonid asetatakse
Kui asetate oma põhiosa absoluutse positsioneerimisega, võite olla kindel, et see jääb täpselt kohale, kus soovite veebisaidile jääda. Ma teenisin 800 pikslit laiust, et hoida suuremaid monitore, kuid kui teil on väiksem monitor, võite soovida seda kitsamalt muuta.
Asetage oma styles.css dokumendis järgmine tekst:
#main {
laius: 800px;
top: 0px;
ametikoht: absoluutne;
vasakule: 250px;
}
08 10-st
Teie lõigete kujundamine
Kuna ma olen juba eespool kirjelõigud kirjutanud, tahtsin anda igale lõikele veidi "kick", et see paistaks paremaks. Ma tegin seda, pannes piiri tippu, mis rõhutas seda lõiget rohkem kui ainult pilt üksi.
Asetage oma styles.css dokumendis järgmine tekst:
.topline {
border-top: paks tahke aine # FFCC00;
}
Ma otsustasin teha seda klassi nimega "toppline", mitte lihtsalt määratleda kõik lõigud sel viisil. Kui ma otsustasin, et tahaksin lõigata ilma ülemise kollase jooneta, võin ma lihtsalt jätta lõigu sildi klass = "topline" ja sellel ei ole ülemist piiri.
09 of 10
Piltide kujundamine
Piltidel on tavaliselt nende ümbermõõde, see pole alati nähtav, kui pilt on link, kuid mulle meeldib klassis oma CSS-i stiililaadis, mis lülitab piirid automaatselt välja. Selle stiilitabeli jaoks lõin "noborder" klassi ja enamus dokumendis olevatest piltidest on selle klassi osa.
Teine nende piltide eriline osa on nende asukoht lehel. Ma tahtsin, et nad oleksid osa lõigust, milles nad kasutasid, ilma tabeleid kasutamata. Selle lihtsaim viis on kasutada ujuvat CSS-i vara.
Asetage oma styles.css dokumendis järgmine tekst:
#main img {
ujuk: vasakule;
paremale paremale: 5px;
marginaal-põhi: 15px;
}
.noborder {
piir: 0px pole;
}
Nagu näete, on ka piltidele lisatud säilitusomadused, et veenduda, et neid ei lõigata lõigetes toodud kõrval oleva teksti peale.
10-st 10-st
Nüüd vaadake oma lõpetatud lehte
Kui olete CSSi salvestanud, võite veebibrauseris uuesti laadida pets.htm lehte. Teie leht peaks nägema sarnast pildil näidatud joonist, joonistatud joonised ja navigeerimine lehe vasakus servas õigesti.
Järgige neid samu samme selle saidi kõikide sisemiste lehtede jaoks. Soovite oma lehel navigeerida iga lehe kohta ühte lehte.