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 imagini vizuale pentru acest proces, consultați primul tutorial. Iată pașii pentru a crea foaia de stil CSS în Notepad:
- Alege Fișier> Nou în Notepad pentru a obține o fereastră goală
- Salvați fișierul ca CSS făcând clic pe Fișier
- Navigați la folderul my_website de pe hard disk
- Schimba "Salvați ca tip:" la "Toate filele"
- Denumiți fișierul dvs. "stiluri.css"(lăsați ghilimelele) și faceți clic pe Salvați
Conectați foaia de stil CSS la codul dvs. HTML
Odată ce ai un foaie de stil pentru site-ul dvs. web, va trebui să îl asociați cu pagina web în sine. Pentru a face acest lucru, utilizați eticheta de link. Plasați următoarea etichetă de link oriunde în cadrul.
Remediați marginile paginii
Când scrii XHTML pentru diferite browsere, un lucru pe care îl veți învăța este că toate par să aibă margini și reguli diferite pentru modul în care afișează lucrurile. Cel mai bun mod de a vă asigura că site-ul dvs. arată la fel în majoritatea browserelor este să nu permiteți ca marjele să fie implicite la alegerea browserului.
Preferăm să începem paginile din colțul din stânga sus, fără nicio umplutură suplimentară sau margine în jurul textului. Chiar dacă intenționăm să tamponăm conținutul, setăm marginile la zero, astfel încât să începem cu aceeași ardezie goală. Pentru a face acest lucru, adăugați următoarele în documentul dvs. styles.css:
html, corp {
marja: 0px;
umplutură: 0 px;
chenar: 0px;
stânga: 0px;
sus: 0px;
}
Schimbarea fontului pe pagină
Fontul este adesea primul lucru pe care doriți să îl modificați pe o pagină web. Implicit font pe o pagină web poate fi urât și depinde de fapt de browserul web, așa că, dacă nu definiți fontul, nu știți cu adevărat cum va arăta pagina dvs.
De obicei, ați schimba fontul pe paragrafe sau, uneori, pe întregul document. Pentru acest site, vom defini fontul la nivelul antetului și al paragrafului. Adăugați următoarele în documentul dvs. 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;
}
Am început cu 1em ca dimensiune de bază pentru paragrafe și elemente de listă și apoi am folosit-o pentru a seta dimensiunea titlurilor mele. Nu ne așteptăm să folosim un titlu mai adânc decât h4, dar dacă intenționați, veți dori să îl stilizați și.
Faceți linkurile dvs. mai interesante
Culorile implicite pentru linkuri sunt albastru și violet pentru linkurile nevizitate și respectiv vizitate. Deși acest lucru este standard, s-ar putea să nu se potrivească schemei de culori a paginilor dvs., așa că să o schimbăm. În fișierul styles.css, adăugați următoarele:
o legătură {
font-family: Arial, Helvetica, sans-serif;
culoare: # FF9900;
decorare text: subliniat;
}
a: vizitat {
culoare: # FFCC66;
}
a: hover {
fundal: #FFFFCC;
font-weight: bold;
}
Am configurat trei stiluri de link, linkul a: ca implicit, a: vizitat pentru când a fost vizitat, schimbăm culoarea și a: hover. Cu un: hover avem linkul pentru a obține o culoare de fundal și pentru a sublinia că este un link pe care trebuie să faceți clic.
Stilizarea secțiunii de navigare
Deoarece punem prima secțiune de navigare (id = "nav") în HTML, haideți să o stilizăm mai întâi. Trebuie să indicăm cât de larg ar trebui să fie și să punem o marjă mai largă pe partea dreaptă, astfel încât textul principal să nu se lovească de el. de asemenea, punem o margine în jurul ei.
Adăugați următorul CSS în documentul dvs. styles.css:
#nav {
lățime: 225px;
margine-dreapta: 15px;
chenar: mediu solid # 000000;
}
#nav li {
list-style: nici unul;
}
.subsol {
font-size: .75em;
clar: ambele;
lățime: 100%;
text-align: centru;
}
Proprietatea în stil listă configurează lista în secțiunea de navigare pentru a nu avea gloanțe sau numere, iar .footer stilizează secțiunea drepturilor de autor pentru a fi mai mică și centrată în secțiune.
Poziționarea secțiunii principale
Poziționând secțiunea principală cu poziționare absolută, puteți fi sigur că va rămâne exact acolo unde doriți să rămână pe pagina dvs. web. Am făcut o lățime de 800 px pentru a se potrivi monitoare mai mari, dar dacă aveți un monitor mai mic, vă recomandăm să faceți acest lucru mai îngust.
Plasați următoarele în documentul dvs. styles.css:
#main {
lățime: 800px;
sus: 0px;
poziție: absolută;
stânga: 250px;
}
Amenajarea paragrafelor
Întrucât am setat deja fontul de paragraf de mai sus, am vrut să le dau fiecărui paragraf câte o „lovitură” suplimentară pentru a o face să iasă în evidență mai bine. Am făcut acest lucru punând o margine în partea de sus care evidențiază paragraful mai mult decât doar imaginea.
Plasați următoarele în documentul dvs. styles.css:
.linia de sus {
top-border: solid gros # FFCC00;
}
Am decis să o facem ca o clasă numită „topline”, mai degrabă decât să definim toate paragrafele în acest fel. În acest fel, dacă decidem că vrem să avem un paragraf fără o linie galbenă de sus, putem pur și simplu să lăsăm clasa „topline” în eticheta de paragraf și nu va avea marginea de sus.
Stilizarea imaginilor
Imaginile au de obicei o margine în jurul lor, acest lucru nu este întotdeauna vizibil decât dacă imaginea este un link, dar ne place să avem o clasă în Foaie de stil CSS care oprește automat marginea. 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 acestea să facă parte din paragraful în care se aflau fără a utiliza tabele pentru a le alinia. Cel mai simplu mod 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;
marginea-dreapta: 5px;
marginea de jos: 15 px;
}
.fara limita {
chenar: 0px nici unul;
}
După cum puteți vedea, există, de asemenea, proprietăți de margine setate pe imagini, pentru a vă asigura că nu sunt sfărâmate cu textul plutit care se află lângă ele în paragrafe.
Acum uită-te la pagina ta finalizată
După ce ați salvat CSS, puteți reîncărca pagina pets.htm în browserul dvs. Web. Pagina dvs. ar trebui să arate similar cu cea afișată în această imagine, cu imagini aliniate și navigarea 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 navigare.