Kaip nustatyti fono paveikslėlį CSS

Svetainės kūrimas yra puikus būdas išreikšti save. Nors svetainių kūrimo įrankių yra daug, patys rašydami tai yra įdomus būdas sužinoti daugiau apie tai, kaip svetainės veikia užkulisiuose. Geras pradedančiųjų projektas yra sukurti svetainę ir pridėti fono paveikslėlį naudojant CSS. Šis projektas padės jums pradėti naudoti HTML ir CSS.

Kas yra CSS?

CSS reiškia kaskadinį stiliaus lapą. Tai programavimo kalba, leidžianti stilizuoti žymėjimo kalbas. Viena iš tokių žymėjimo kalbų yra HTML arba hiper-teksto žymėjimo kalba. HTML naudojamas svetainėms kurti. Nors kai kuriuos svetainės stilius galite valdyti naudodami HTML, CSS siūlo daug daugiau valdymo ir dizaino parinkčių.

Pagrindinės svetainės kūrimas naudojant HTML

Kadangi CSS yra tik stiliaus kalba, norint ją naudoti, pirmiausia reikia kažko stiliaus. Pradėti žaisti su CSS pakaks labai paprastos svetainės. Mūsų puslapyje bus rodomas „Labas pasaulis“.

  
  
  
  
 Hello World

Jei nesate susipažinę su HTML, greitai peržiūrėkime, ką daro visi elementai. Kaip minėta, HTML yra žymėjimo kalba, o tai reiškia, kad ji naudoja žymas tekstui pažymėti. Kai tik pamatai žodį apsuptą tai yra etiketė. Yra dviejų tipų žymos: žyma, žyminti skilties pradžią naudojant, ir kita, kuri žymi skilties naudojimą. Skilties tekstas taip pat skirtas tam, kad būtų lengviau pastebėti šį skirtumą.

Mūsų pavyzdyje yra keturios žymos. The html žyma nurodo, kurie elementai yra svetainės dalis. The galva žymoje yra antraštės informacija, kuri nerodoma puslapyje, bet reikalinga puslapiui sukurti. Visi rodomi elementai yra tarp kūnas žymes. Turime tik vieną rodomą elementą, p žyma. Žiniatinklio naršyklei nurodoma, kad tekstas yra pastraipa.

Susijęs: 10 paprastų CSS kodo pavyzdžių, kuriuos galite išmokti per 10 minučių

CSS pridėjimas prie HTML

Dabar, kai turime paprastą puslapį, galime pritaikyti stilių naudodami CSS. Mūsų puslapis šiuo metu yra gana paprastas, ir mes negalime daug ką padaryti, bet pradėkime nuo to, kad mūsų pastraipa išsiskirtų, kad galėtume ją atskirti nuo fono pridėdami kraštinę.

  
  
  
  
 Hello World

Dabar mūsų pastraipą supa juoda siena. Pridėjus stiliaus aprašą CSS prie pastraipos žymos, svetainė nurodė, kaip sukurti pastraipą. Galime pridėti daugiau aprašymų. Padidinkime tuščią erdvę arba užpildymą aplink mūsų pastraipą ir sutelkkime tekstą.

  
  
  
  
 Hello World

Mūsų svetainė atrodo geriau, tačiau mūsų HTML pradeda atrodyti netvarkingai su visais aprašymais pastraipos žymoje. Šią informaciją galime perkelti į savo antraštę. Mūsų antraštė skirta informacijai, kurią turime pateikti teisingai svetainei.

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 Hello World

Dabar mūsų HTML yra lengviau skaitomas. Jūs pastebėsite, kad mes turėjome pakeisti kai kuriuos dalykus. Stiliaus žyma nurodo žiniatinklio naršyklės stiliaus informaciją, bet ir tai, ką stilizuoti. Mūsų pavyzdyje mes panaudojome du skirtingus būdus, kaip pasakyti, ką stilizuoti. The p stiliaus žyma nurodo žiniatinklio naršyklei taikyti šį stilių visoms pastraipų žymoms. The #mūsųPunktas skyriuje nurodoma, kad tik stiliaus elementai turi ID mūsų pastraipa . Pastebėti, kad id informacija buvo pridėta prie mūsų kūno p žymos.

geriausias mėnuo pirkti kompiuterį

CSS failo importavimas į svetainę

Pridėjus stiliaus informaciją prie antraštės, mūsų kodą bus daug lengviau perskaityti. Tačiau jei norime vienodai formuoti daugybę skirtingų puslapių, tą tekstą turime pridėti kiekvieno puslapio viršuje. Tai gali neatrodyti kaip daug darbo, galų gale galite nukopijuoti ir praeiti, tačiau tai sukuria daug darbo, jei norite vėliau pakeisti elementą.

Vietoj to, CSS informaciją laikysime atskirame faile ir importuosime failą, kad sukurtume puslapio stilių. Nukopijuokite ir įklijuokite informaciją tarp stiliaus žymų į naują CSS failą ourCSSfile.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Tada importuokite failą į HTML failą.

  
  
  
  
  
 Hello World

Fono vaizdo pridėjimas naudojant CSS

Dabar, kai turite tvirtą HTML ir CSS pagrindą, fono paveikslėlio pridėjimas bus pyragas. Pirmiausia nustatykite, kuriam elementui norite suteikti fono paveikslėlį. Mūsų pavyzdyje pridėsime viso puslapio foną. Tai reiškia, kad norime pakeisti kūnas . Atminkite, kad kūno žymėse yra visi matomi elementai.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Norėdami pakeisti kūno stilių CSS, pirmiausia naudokite kūnas raktinis žodis. Tada pridėkite garbanotus skliaustus, kaip ir anksčiau {}. Visa kūno stiliaus informacija turi būti tarp garbanotų skliaustų. Stiliaus atributas, kurį norime pakeisti fono vaizdas . Yra daug stiliaus atributų. Nesitikėkite jų visų įsiminti. Pažymėkite CSS ypatybių apgaulės lapą su atributais, kuriuos norite prisiminti.

Susijęs: 8 puikūs HTML efektai, kuriuos kiekvienas gali pridėti prie savo svetainės

veido atpažinimas palyginkite dvi nuotraukas internete

Po atributo dvitaškiu nurodykite, kaip pakeisite atributą. Norėdami importuoti vaizdą, naudokite url () . tai rodo, kad naudojate nuorodą, norėdami nukreipti į vaizdą. Įdėkite failo vietą į skliaustus tarp kabučių. Galiausiai eilutę užbaikite kabliataškiu. Nors tuščias tarpas CSS neturi reikšmės, naudokite įtrauką, kad CSS būtų lengviau skaityti.

Mūsų pavyzdys atrodo taip:

Jei jūsų vaizdas netinkamai rodomas dėl vaizdo dydžio, galite jį tiesiogiai pakeisti. Tačiau CSS yra fono stiliaus atributų, kuriuos galite naudoti norėdami pakeisti foną. Vaizdai, kurie yra mažesni už foną, automatiškai kartosis fone. Norėdami tai išjungti, pridėkite fonas-kartojimas:nekartoti; į tavo stichiją.

Taip pat yra du būdai, kaip vaizdas padengia visą foną. Pirma, naudodami fono dydį galite nustatyti ekrano dydį fono dydis: 100% 100%; , bet tai ištempia vaizdą ir gali per daug iškreipti vaizdą. Jei nenorite keisti vaizdo proporcijų, taip pat galite nustatyti fono dydį viršelis . Viršelis padengs fono vaizdą fonu, bet neiškraipys vaizdo.

Fono spalvos keitimas

Keiskime paskutinį dalyką. Dabar, kai turime pagrindą, mūsų pastraipą sunku perskaityti. Padarykime jo foną baltą. Procesas panašus. Elementas, kurį norime modifikuoti, yra #mūsųParagrafas. # Nurodo, kad „ourPalace“ yra ID pavadinimas. Toliau norime nustatyti fono spalva atributas baltas.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 background-color: white;  
 border-style: solid;  
 padding: 30px;  
}

Daug geriau.

Toliau kurkite savo svetainę naudodami CSS

Dabar, kai žinote, kaip pakeisti skirtingų HTML elementų stilių, dangus yra riba! Pagrindinis stiliaus atributų keitimo metodas yra tas pats. Nustatykite elementą, kurį norite pakeisti, ir aprašykite, kaip pakeisti atributą. Geriausias būdas sužinoti daugiau yra žaisti su įvairiais atributais. Iššūkis sau pakeisti kitą teksto spalvą.

Dalintis Dalintis „Tweet“ Paštu 8 geriausios kokybės HTML kodavimo pavyzdžių svetainės

Norite išmokti HTML koduoti savo svetaines ir programas? Naudokite šiuos tinklalapio pavyzdžius ir šaltinio kodą, kad išmoktumėte HTML ir CSS.

Skaityti toliau Susijusios temos

Programavimas
HTML
Interneto svetainės dizainas
CSS

Apie autorių Jennifer Seaton(Paskelbti 21 straipsniai)

J. Seatonas yra mokslo rašytojas, kurio specializacija yra sudėtingų temų skaidymas. Ji turi daktaro laipsnį Saskačevano universitete; jos tyrimas buvo sutelktas į žaidimu pagrįsto mokymosi panaudojimą, siekiant padidinti studentų dalyvavimą internete. Kai ji nedirba, ją rasite skaitydama, žaisdama vaizdo žaidimus ar dirbdama sode.

Daugiau iš Jennifer Seaton

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia