Modelarea unui Notepad Crearea unei pagini web cu CSS

01 din 10

Creați foaia de stil CSS

În același mod în care am creat un fișier text separat pentru HTML, veți crea un fișier text pentru CSS. Dacă aveți nevoie de vizuale pentru acest proces, vă rugăm să consultați primul tutorial. Iată pașii pentru a crea foaia dvs. de stil CSS în Notepad:

1. Alegeți Fișier> Nou în Notepad pentru a obține o fereastră goală
2. Salvați fișierul ca CSS făcând clic pe Fișier
3. Navigați la folderul my_website de pe hard disk
4. Schimbați opțiunea "Salvați ca tip:" în "Toate fișierele"
5. Denumiți fișierul dvs. "styles.css" (renunțați la ghilimele) și faceți clic pe Salvați

02 din 10

Conectați foaia de stil CSS la HTML

Odată ce ați primit o foaie de stil pentru site-ul Web, va trebui să o asociați cu pagina Web. Pentru aceasta, folosiți eticheta de legătură. Plasați următoarea etichetă de legătură oriunde în etichetele ale documentului dvs. pets.htm:

03 din 10

Corectați marginile paginii

Când scrieți XHTML pentru diferite browsere, un lucru pe care îl veți învăța este că toți par să aibă marje și reguli diferite pentru modul în care acestea afișează lucrurile. Cea mai bună modalitate de a vă asigura că site-ul dvs. arată la fel în majoritatea browserelor este să nu permită ca lucrurile ca marginile să fie implicite la alegerea browserului.

Prefer să-mi pornesc paginile în colțul din stânga sus, fără nicio extra îndoială sau margine în jurul textului. Chiar dacă voi adăuga conținutul, am setat marjele la zero, astfel încât să încep cu aceeași artă goală. Pentru aceasta, adăugați următoarele la documentul dvs. styles.css:

html, body {
margine: 0px;
padding: 0px;
frontieră: 0px;
stânga: 0px;
top: 0px;
}

04 din 10

Schimbarea fontului pe pagina

Fontul este adesea primul lucru pe care doriți să îl modificați pe o pagină Web. Fontul implicit pe o pagină Web poate fi urât și de fapt este chiar browserul Web, deci dacă nu definiți fontul, nu veți ști cum va arăta pagina dvs.

De obicei, ați schimba fontul pe paragrafe sau, uneori, pe întregul document în sine. Pentru acest site vom defini fontul la nivel de antet și de paragraf. Adăugați următoarele la documentul dvs. styles.css:

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

Am inceput cu 1em ca dimensiune de baza pentru paragrafe si elemente de lista, si apoi am folosit-o pentru a seta marimea titlurilor mele. Nu mă aștept să folosesc un titlu mai adânc decât h4, dar dacă intenționezi să-l vrei și să-l folosești.

05 din 10

Efectuarea legăturilor dvs. mai interesante

Culorile implicite pentru linkuri sunt albastru și violet pentru legăturile vizitate și vizitate respectiv. Deși acest lucru este standard, este posibil să nu se potrivească cu schema de culori a paginilor dvs., deci să o modificăm. În fișierul dvs. styles.css, adăugați următoarele:

o legătură {
font-familie: Arial, Helvetica, sans-serif;
culoare: # FF9900;
text-decorare: subliniere;
}
a: a vizitat {
culoare: # FFCC66;
}
a: hover {
fundal: #FFFFCC;
font-weight: bold;
}

Am creat trei stiluri de link-uri, linkul a: implicit, a: vizitat când a fost vizitat, schimba culoarea și un: hover. Cu un: hover am link-ul obține o culoare de fundal și du-te bold pentru a sublinia că este un link pentru a fi făcut clic pe.

06 din 10

Modelarea secțiunii de navigare

Deoarece am plasat prima secțiune de navigare (id = "nav") în html, să o facem mai întâi stil. Trebuie să indicăm cât de largă ar trebui să fie și să pună o marjă mai mare pe partea dreaptă, astfel încât textul principal să nu se împotrivească. De asemenea, am pus o margine în jurul ei.

Adăugați următorul CSS în documentul dvs. styles.css:

#nav {
lățime: 225px;
margin-dreapta: 15px;
frontieră: mediu solid # 000000;
}
#nav li {
listă: nu există;
}
.subsol {
font-size: .75em;
clar: ambele;
lățime: 100%;
text-align: centru;
}

Proprietatea în stil listă stabilește lista din interiorul secțiunii de navigare pentru a nu avea gloanțe sau numere, iar stilul .foter supune secțiunii de drepturi de autor mai mici și centrate în secțiune.

07 din 10

Poziționarea secțiunii principale

Prin poziționarea secțiunii principale cu poziția absolută puteți fi siguri că va rămâne exact în locul în care doriți să rămână pe pagina Web. Mi-am făcut a mea de 800px larg pentru a găzdui monitoare mai mari, dar dacă aveți un monitor mai mic, poate doriți să faceți acest lucru mai restrâns.

Plasați următoarele în documentul dvs. styles.css:

#main {
lățime: 800px;
top: 0px;
poziția: absolută;
stânga: 250px;
}

08 din 10

Modelarea paragrafelor dvs.

Din moment ce am setat deja fontul de paragraf de mai sus, am vrut să dau fiecărui paragraf un pic mai mult "lovitură" pentru ao face mai bine. Am făcut acest lucru punând o margine în partea de sus care a evidențiat paragraful mai mult decât imaginea în sine.

Plasați următoarele în documentul dvs. styles.css:

.linia de sus {
frontală superioară: solid gros # FFCC00;
}

Am decis să o fac ca o clasă numită "topline", mai degrabă decât să definesc toate paragrafele în acest fel. În acest fel, dacă decid că vreau să aibă un paragraf fără o linie galbenă de sus, pot să las pur și simplu clasa = "linia superioară" în eticheta paragrafului și nu va avea marginea superioară.

09 din 10

Modelarea imaginilor

Imaginile au, de obicei, o margine în jurul lor, aceasta nu este întotdeauna vizibilă decât dacă imaginea este o legătură, dar îmi place să am o clasă în foaia mea de corespondență CSS care să închidă automat frontiera. Pentru această foaie de stil, am creat clasa "noborder", iar majoritatea imaginilor din document fac parte din această clasă.

Cealaltă parte specială a acestor imagini este locația lor pe pagină. Am vrut ca aceștia să facă parte din paragraful în care s-au aflat, fără a folosi tabele pentru a le alinia. Cea mai simplă modalitate de a face acest lucru este să utilizați proprietatea CSS float.

Plasați următoarele în documentul dvs. styles.css:

#main img {
plutește la stânga;
margin-dreapta: 5px;
margin-bottom: 15px;
}
.fara limita {
border: 0px none;
}

După cum puteți vedea, există și proprietăți de margini setate pe imagini, pentru a vă asigura că nu sunt distruse împotriva textului plutitor care se află lângă ele în paragrafe.

10 din 10

Acum, uita-te la pagina ta finalizată

Odată ce ați salvat CSS, puteți reîncărca pagina pets.htm în browserul Web. Pagina dvs. ar trebui să arate ca cea prezentată în această imagine, imaginile aliniate și navigația plasată corect în partea stângă a paginii.

Urmați aceiași pași pentru toate paginile dvs. interne pentru acest site. Doriți să aveți o pagină pentru fiecare pagină din navigația dvs.