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 <Save As …
- 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
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ā vietnē
jūsu pets.htm dokumenta tagi:
03 no 10 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: 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: 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. 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: 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. 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: 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ļā. 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: 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: 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. 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: 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. 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. Labojiet lapas maržas
Fonta maiņa lapā
Padarīt saites interesantākas
Navigācijas nodaļas stils
Galvenās sekcijas novietošana
Tavu punktu veidošana
Attēlu veidošana
Tagad meklējiet savu pabeigto lapu
