Izveidojiet CSS stila lapu
Tādā pašā veidā mēs izveidojām atsevišķu teksta failu HTML, jūs izveidosiet CSS teksta failu. Ja jums šim procesam nepieciešami vizuālie materiāli, lūdzu, skatiet pirmo apmācību. Lai izveidotu CSS stila lapu Notepad, veiciet tālāk norādītās darbības.
- Izvēlieties Fails> Jauns Notepad, lai iegūtu tukšu logu
- Saglabājiet failu kā CSS, noklikšķinot uz Fails
- Dodieties uz cietā diska mapi my_website
- Nomaini "Saglabāt kā veidu: "uz"Visi faili"
- Piešķiriet failam nosaukumu "stili.css"(atstājiet pēdiņas) un noklikšķiniet Saglabāt
Saistiet CSS stila lapu ar savu HTML
Kad esat ieguvis stila lapa savai vietnei tā būs jāsaista ar pašu vietni. Lai to izdarītu, izmantojiet saites tagu. Novietojiet šo saites tagu jebkurā vietā.
Labojiet lapas malas
Kad jūs rakstāt XHTML dažādām pārlūkprogrammām jūs uzzināsiet vienu lietu, ka šķiet, ka tām visām ir atšķirīgas piemales un noteikumi, kā tās parāda lietas. Labākais veids, kā pārliecināties, ka jūsu vietne izskatās vienāda lielākajā daļā pārlūkprogrammu, ir neļaut pārlūkprogrammas izvēlei noklusēt tādas lietas kā piemales.
Mēs vēlamies sākt lapas augšējā kreisajā stūrī, bez teksta papildu aizpildīšanas vai piemales. Pat ja mēs gatavojamies ievietot saturu, mēs uzliekam nullei piemales, lai mēs sāktu ar to pašu tukšo lapu. Lai to izdarītu, dokumentam styles.css pievienojiet:
html, body {
piemale: 0px;
polsterējums: 0px;
apmale: 0px;
pa kreisi: 0px;
augšdaļa: 0 pikseļi;
}
Fonta mainīšana lapā
Fonts bieži ir pirmā lieta, ko vēlaties mainīt tīmekļa lapā. Noklusējums fonts tīmekļa lapā var būt neglīts un faktiski ir atkarīgs no paša tīmekļa pārlūka, tāpēc, ja jūs nenosaka fontu, jūs patiešām nezināt, kāda būs jūsu lapa.
Parasti jūs mainītu fontu rindkopās vai dažreiz visā dokumentā. Šai vietnei mēs definēsim fontu galvenes un rindkopu līmenī. Pievienojiet šādam dokumentam styles.css:
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;
}
Mēs sākām ar 1em kā rindkopu un saraksta elementu bāzes izmēru, un pēc tam to izmantojām, lai iestatītu manu virsrakstu lielumu. Mēs nedomājam, ka izmantosim virsrakstu, kas ir dziļāks par h4, taču, ja plānojat, jūs arī vēlaties to veidot.
Padariet savas saites interesantākas
Noklusēto un apmeklēto saišu noklusējuma krāsas ir zilas un violetas. Lai gan tas ir standarts, tas, iespējams, neatbilst jūsu lapu krāsu shēmai, tāpēc mainīsim to. Savā failā styles.css pievienojiet šo:
a: saite {
fontu saime: Arial, Helvetica, sans-serif;
krāsa: # FF9900;
teksta apdare: pasvītrojums;
}
a: apmeklēja {
krāsa: # FFCC66;
}
a: virziet kursoru {
fons: #FFFFCC;
fonta svars: treknrakstā;
}
Mēs iestatījām trīs saišu stilus: a: saiti kā noklusējumu, a: apmeklēto, kad tas ir apmeklēts, mainām krāsu un a: hover. Izmantojot: virziet kursoru, saite iegūst fona krāsu un treknrakstā uzsver, ka tā ir saite, uz kuras jānoklikšķina.
Navigācijas sadaļas veidošana
Tā kā HTML sadaļā vispirms ievietojam navigācijas (id = "nav") sadaļu, vispirms veidosim to stilā. Mums jānorāda, cik platai tai jābūt, un labajā pusē jāievieto plašāka mala, lai galvenais teksts pret to netiktu sasists. mēs arī, ap to ieliekam robežu.
Pievienojiet šādam CSS dokumentam styles.css:
#nav {
platums: 225 pikseļi;
labā mala: 15 pikseļi;
apmale: vidēji cieta # 000000;
}
#nav li {
saraksta stils: nav;
}
.footer {
fonta lielums: .75em;
skaidrs: abi;
platums: 100%;
text-align: center;
}
Saraksta stila rekvizīts izveido sarakstu navigācijas sadaļā, lai tajā nebūtu aizzīmju vai numuru, un .footer stilā autortiesību sadaļa ir mazāka un centrēta sadaļā.
Galvenās sekcijas novietošana
Novietojot galveno sadaļu ar absolūto pozicionēšanu, jūs varat būt pārliecināts, ka tā jūsu vietnē paliks tieši tur, kur vēlaties. Mēs to izveidojām 800 pikseļu platumā, lai to varētu uzņemt lielāki monitori, bet, ja jums ir mazāks monitors, ieteicams to padarīt šaurāku.
Ievietojiet savā stilā.css dokumentā:
#main {
platums: 800px;
augšdaļa: 0 pikseļi;
pozīcija: absolūta;
pa kreisi: 250 pikseļi;
}
Jūsu rindkopu veidošana
Tā kā es jau esmu iestatījis rindkopas fontu iepriekš, es gribēju dot katram rindkopai nelielu papildu "sitienu", lai tas labāk izceltos. Es to izdarīju, uz augšu uzliekot robežu, kas vairāk izceļ rindkopu nekā tikai attēls vien.
Ievietojiet savā stilā.css dokumentā:
.augšējā līnija {
apmales augšdaļa: bieza cieta viela # FFCC00;
}
Mēs nolēmām to darīt kā klasi ar nosaukumu "augšējā līnija", nevis tikai tādā veidā definēt visus punktus. Tādā veidā, ja mēs nolemjam, ka mēs vēlamies, lai būtu rindkopa bez augšējās dzeltenās līnijas, mēs varam vienkārši atstāt rindkopas tagā class = "topline", un tam nebūs augšējās robežas.
Attēlu veidošana
Attēliem parasti ir apmale, un tas ne vienmēr ir redzams, ja vien attēls nav saite, taču mēs vēlētos, lai tajā būtu klase CSS stila lapa, kas automātiski izslēdz robežu. Šai stila lapai mēs izveidojām klasi "noborder", un lielākā daļa dokumentā esošo attēlu ir šīs klases daļa.
Otra šo attēlu īpašā daļa ir to atrašanās vieta lapā. Mēs vēlējāmies, lai viņi būtu daļa no rindkopas, kurā viņi atradās, neizmantojot tabulas, lai tās izlīdzinātu. Vienkāršākais veids, kā to izdarīt, ir izmantot pludiņa CSS īpašumu.
Ievietojiet savā stilā.css dokumentā:
#main img {
pludiņš: pa kreisi;
margin-right: 5px;
apmale apakšā: 15 pikseļi;
}
.noborder {
apmale: 0px nav;
}
Kā redzat, attēliem ir iestatītas arī piemales īpašības, lai pārliecinātos, ka tie nav sagrauti pret peldošo tekstu, kas atrodas blakus tiem rindkopās.
Tagad apskatiet savu pabeigto lapu
Kad esat saglabājis CSS, varat pārlūkot pet.htm lapu savā tīmekļa pārlūkprogrammā. Jūsu lapai vajadzētu izskatīties līdzīgi tai, kas parādīta šajā attēlā, ar attēliem jāsaskaņo un navigācija ir pareizi novietota lapas kreisajā pusē.
Veiciet šīs pašas darbības visām šīs vietnes iekšējām lapām. Jūs vēlaties, lai katrā navigācijas lapā būtu viena lapa.