01 no 10
CSS stila lapas izveidošana
Tāpat kā mēs izveidojām atsevišķu teksta failu HTML, jūs izveidosiet teksta failu CSS. Ja jums nepieciešama vizuālā informācija šim procesam, lūdzu, skatiet pirmo pamācību. Tālāk ir norādītas CSS stila lapas izveides instrukcijas Notepad:
- Izvēlieties File> New in Notepad, lai iegūtu tukšu logu
- Saglabājiet failu kā CSS, noklikšķinot uz File
- Pārejiet uz my_website mapi uz cietā diska
- Mainiet "Saglabāt kā veidu:" uz "Visi faili"
- Nosaukiet savu failu "styles.css" (atstājiet piezīmes) un noklikšķiniet uz Saglabāt
02 no 10
Saistīt CSS stila lapu ar savu HTML
Kad jūsu tīmekļa vietnei ir izveidots stilu tabula, jums tas jāpiesaista pašai tīmekļa lapai. Lai to izdarītu, izmantojat saites tagu. Novietojiet tālāk norādīto saišu tagu jebkurā jūsu pets.htm dokumenta
tagos:03 no 10
Labojiet lapas maržas
Kad jūs rakstāt XHTML dažādām pārlūkprogrammām, viena lieta, ko jūs uzzināsit, ir tā, ka visās tajās, šķiet, ir dažādas robežas un noteikumi par to, kā tās parādās. Lielākajā daļā pārlūkprogrammu vislabākais veids, kā pārliecināties, ka jūsu vietne izskatās vienāda, ir tādas, ka pārlūkprogrammas izvēlei nav pieļaujamas noklusējuma iespējas.
Es gribētu sākt savas lapas augšējā kreisajā stūrī, bez papildu polsterējuma vai atstarpes ap tekstu. Pat ja es gatavojas salabot saturu, es iestatīju maržas nulli, lai es sāktu ar to pašu tukšu slānekļa. Lai to izdarītu, pievienojiet dokumentam styles.css šādu informāciju:
html, ķermenis {
starpība: 0px;
polsterējums: 0 pikseļi;
robeža: 0px;
pa kreisi: 0px;
top: 0 pikseļi;
}
04 no 10
Fonta maiņa lapā
Fonts bieži ir pirmā lieta, kuru vēlaties mainīt tīmekļa lapā. Web lapas noklusējuma fonts var būt neglīts un patiešām ir pati interneta pārlūba, tādēļ, ja neesat definējuši fontu, jūs patiešām nezināt, kā izskatīsies jūsu lapa.
Raksturīgi, ka jūs mainītu fontu punktos vai dažreiz visam dokumentam. Šajā vietnē mēs definēsim fontu galvenes un rindkopas līmenī. Pievienojiet savu dokumenta styles.css šādu:
p, li {
fonts: 1em Arial, Helvetica, sans-serif;
}
h1 {
fonts: 2em Arial, Helvetica, sans-serif;
}
h2 {
fonts: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
fonts: 1.25em Arial, Helvetica, sans-serif;
}
Es sāku ar 1em kā manu bāzes izmēru punktiem un saraksta vienumiem, pēc tam to izmantoju, lai iestatītu izmēru manām virsrakstiem. Es nedomāju izmantot virsrakstu, kas ir dziļāks par h4, bet, ja jūs plānojat, ka vēlaties to stilīgi.
05 no 10
Padarīt saites interesantākas
Saistību noklusējuma krāsas ir zilas un purpursarkanās attiecīgi par neatlasītajām un apmeklētajām saitēm. Lai gan tas ir standarta, tas var neatbilst jūsu lapu krāsu shēmai, tādēļ mainīsim to. Failā styles.css pievienojiet šādu:
a: saite {
fonta ģimene: Arial, Helvetica, sans-serif;
krāsa: # FF9900;
teksta apdare: pasvītrojums;
}
a: apmeklēja {
krāsa: # FFCC66;
}
a: uzlidiniet {
fons: #FFFFCC;
fonta svars: treknrakstā;
}
Es iestatīju trīs saites stilus, a: saiti kā noklusēto, a: apmeklēja, kad tas tika apmeklēts, mainu krāsu, un a: kursoru. Ar: peles kursoru, man ir saite, iegūstot fona krāsu un drosiet, lai uzsvērtu, ka tā ir saite uz klikšķi.
06 no 10
Navigācijas nodaļas stils
Tā kā mēs vispirms ievietojam navigācijas (id = "nav") sadaļu HTML, vispirms to stils. Mums ir jānorāda, cik plaša tā būtu, un labajā pusē jāpiešķir plašāka rezerve, lai galvenais teksts nebūtu pretrunā ar to. Ar to es arī novietoju robežu.
Pievienojiet šādu CSS savu stilu.css dokumentam:
#nav {
platums: 225 pikseļi;
maržas labajā pusē: 15 pikseļi;
robeža: vidējs ciets # 000000;
}
#nav li {
saraksta stils: nav;
}
.auto {
fonta lielums: .75em;
skaidrs: abas;
platums: 100%;
teksta izlīdzināšana: centrs;
}
Saraksta stila īpašums izveido sarakstu navigācijas sadaļas iekšpusē, lai tam nebūtu lodes vai ciparu, un .footer stila autortiesību sadaļu, kas ir mazāka un centrēta sadaļā.
07 no 10
Galvenās sekcijas novietošana
Novietojot savu galveno sadaļu ar absolūtu pozicionēšanu, jūs varat būt pārliecināts, ka tas paliks tieši tajā vietā, kur jūs vēlaties to palikt savā tīmekļa lapā. Es izveidoju mīnu ar 800 pikseļu platumu, lai pielāgotu lielākus monitorus, taču, ja jums ir mazāks monitoru skaits, jūs varētu vēlēties padarīt to šaurāku.
Ievietojiet šādu tekstu savā dokumentā styles.css:
#main {
platums: 800 pikseļi;
top: 0 pikseļi;
amats: absolūti;
pa kreisi: 250 pikseļi;
}
08 no 10
Tavu punktu veidošana
Tā kā jau iepriekš esmu iestatījis rindkopas fontu, es gribēju katrai rindkopai piešķirt nedaudz papildu "kick", lai to labāk izceltu. Es to izdarīju, ieliekot robežu uz augšu, kas izcēlāja šo rindkopu vairāk nekā tikai viens attēls.
Ievietojiet šādu tekstu savā dokumentā styles.css:
.augšējā līnija {
border-top: biezs cietais # FFCC00;
}
Es nolēmu to darīt kā klasi, ko sauc par "topline", nevis tikai definējot visus punktus šādā veidā. Tādā veidā, ja es izlemtu, ka es gribētu, lai būtu punkts ar augšējo dzelteno līniju, es varu vienkārši atstāt no klases = "topline" punktā tag, un tam nebūs augšējās robežas.
09 no 10
Attēlu veidošana
Attēliem parasti ir robeža ap viņiem, tas ne vienmēr ir redzams, ja vien attēls nav saite, bet man patīk būt klasē CSS stilu tabulā, kas automātiski izslēdz robežu. Šai stilu lapai es izveidoju "noborder" klasi, un lielākā daļa no dokumenta attēliem ir šīs klases daļa.
Cita īpaša šo attēlu daļa ir to atrašanās vieta lapā. Es gribēju, lai viņi būtu daļa no punkta, kurā viņi bija, neizmantojot tabulas, lai tos saskaņotu. Vienkāršākais veids, kā to izdarīt, ir izmantot peldošā CSS īpašību.
Ievietojiet šādu tekstu savā dokumentā styles.css:
#main img {
pludiņš: pa kreisi;
maržas labajā pusē: 5 pikseļi;
margin-bottom: 15 pikseļi;
}
.noborder {
robeža: 0px nav;
}
Kā jūs varat redzēt, uz attēliem ir iestatītas arī atstarpes īpašības, lai pārliecinātos, ka tie nav sadalīti pret peldēto tekstu, kas blakus šajos punktos ir.
10 no 10
Tagad meklējiet savu pabeigto lapu
Kad esat saglabājis CSS, jūs varat pārlādēt pets.htm lapu savā tīmekļa pārlūkprogrammā. Jūsu lapai ir jābūt līdzīgai tai, kas parādīta šajā attēlā, ar izlīdzinātiem attēliem un navigāciju, kas atrodas pareizi lapas kreisajā pusē.
Izpildiet šos pašus soļus visās šīs vietnes iekšējās lapās. Jūs vēlaties, lai būtu viena lappuse katrai jūsu navigācijas lapai.