Iepriekšējās nodaļās mēs apkopojām pamata veidni HTML dokumentiem, noteicām, kas ir HTML tagi, uzzinājām, kā saglabāt un rediģēt HTML failus, un šajā nodaļā mēs Iepazīsimies ar tagu atribūtiem un mainiet teksta un lapas fona krāsu.

Atvērsim mūsu index.html, rediģēšanai: Man izdevās!!! Un nedaudz mainīsim to, pievienosim atribūtus: text="#000000" bgcolor="#ffffff"> Es to izdarīju!!! Atribūts ir taga parametrs, kas tiek ievietots tagā kā “pāris” (parametra nosaukums + parametra vērtība).
Tiek ievietotas taga atribūtu vērtības:
1) text=#000000 bez pēdiņām;
2) teksts = "#000000" vienpēdiņās;
3) teksts "#000000" dubultpēdiņās.
Jebkura no šīm opcijām ir pareiza, taču, ja jums rūp koda ētika, labāk ir izmantot pēdiņas, kā manā piemērā iepriekš.

Atribūts "teksts" kontrolē teksta krāsu visā lapā un "bgcolor" kontrolē lapas fona krāsu.

Tagad es ierosinu runāt par HTML dokumentu krāsām. Krāsa ir iestatīta:
1) teksts = "zelts"- vārdi angļu valodā, piemēram: zelts (zelts), sarkans (sarkans), zaļš (zaļš) un tā tālāk...
Bet krāsa var sastāvēt tikai no viena vārda, piemēram, “sarkans”, bet, ja ierakstāt “zaļsarkans”, pārlūkprogramma to nesapratīs un vienkārši ignorēs.
2) teksts = "#000000"- RBG krāsu shēma (sarkana zaļa zila). "#" šis simbols norāda, ka šis ir krāsas skaitlis, pirmie divi simboli (nulles manā piemērā) norāda, cik “sarkanās” krāsas mēs paņēmām, otrie ir zaļi un pēdējie divi ir zili.
Katra krāsa ir norādīta no 00 līdz FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), piemēram, #000000-black, #ffffff-white, #ff0000-red, # 00ff00- zaļš #0000ff-zils

Kā bonusu no vietnes iesaku lejupielādēt krāsu paleti (2kB), kas ir redzama augstāk esošajā attēlā. Jums ir jāizpako arhīvs un jāpalaiž fails krāsa.html, pēc tam lielajā laukā novietojiet peles rādītāju uz vajadzīgās krāsas, kas tiks parādīta mazā logā, un, ja šajā laikā noklikšķināsiet ar peli, krāsas kods parādīsies mazajā logā labajā pusē.

Tagad atgriezīsimies pie mūsu faila index.html un saglabājiet to kā tsvet.html, tagad paskatīsimies, kas notika. Kāds viņš bija un kāds viņš ir palicis? Un jums ir pilnīga taisnība, jo baltā krāsa ir fons un melna tekstam ir noklusējuma krāsa. Lai pamanītu atšķirību, mainīsim atribūtu vērtības:

text=zelts" bgcolor="#0900b8"> Es to izdarīju!!! Saglabāsim un skatīsimies (atveras jaunā cilnē)

Ir arī citi veidi, kā iestatīt tekstu HTML failos, taču šie divi tiek uzskatīti par galvenajiem.

Nākamajā nodaļā mēs uzzināsim, kā manipulēt ar tekstu ar BR tagiem un ietīt tekstu citā rindā.

HTML vietnes fonu var mainīt, izmantojot abus tagu atribūtus ķermeni, un izmantojot CSS stilus, kas tiek lietoti arī tagam ķermeni. Apsvērsim abas vietnes fona izveides iespējas.

Fona krāsas maiņa, izmantojot HTML

Tag ķermeni, tāpat kā gandrīz jebkuram HTML tagam, ir savi atribūti. Lai atzīmētu atribūtus ķermeni attiecas:

• bgcolor- nosaka lapas fona krāsu;
• fons- ļauj iestatīt attēlu kā tīmekļa lapas fonu (šis jautājums ir detalizēti apskatīts rakstā:);
• ritiniet- kontrolē ritjoslas parādīšanu lapā;
• tekstu- nosaka teksta pamatkrāsu, kas tiks rādīts tīmekļa lapā;
• bgproperties- norāda, vai fons ritinās kopā ar lapu;
• saite- kontrolē lapas saišu noklusējuma krāsu;
• alink- iestata aktīvās saites krāsu;
• vlink- nosaka apmeklētās saites krāsu lapā;
• kreisā mala/labā mala- iestata satura atkāpi no pārlūkprogrammas loga kreisās vai labās malas;
• topmargin/bottommargin- iestata satura atkāpi no pārlūkprogrammas loga augšējās vai apakšējās malas;

Lai mainītu fona krāsu, izmantojot HTML, mēs izmantosim atribūtu bgcolor:

Šis ir baltā teksta piemērs, kas norādīts, izmantojot body taga teksta atribūtu.

Piezīme: Ieteicams norādīt lapas fona krāsu, pat ja fons ir balts. Tas ir tāpēc, ka daži lietotāji savā pārlūkprogrammā var izmantot nestandarta fona krāsu, kā rezultātā jūsu vietnes teksts var kļūt nelasāms.

Lapas fona krāsas maiņa, izmantojot CSS

Šis ir balta teksta kopas piemērs, izmantojot fona CSS. Arī lapas fons tiek iestatīts, izmantojot CSS.

Izmantojot Nubex vietņu veidotāju, jebkurai vietnei varat izvēlēties gatavu fonu no lielas attēlu bibliotēkas vai pievienot savu.

No autora: Laipni lūdzam webformyself, un šodien es vēlos jums pastāstīt, kā mainīt vietnes fonu. Fona krāsai vai attēlam fonā var būt liela nozīme vietnes izskatā, tāpēc jums ir jāzina, kā to iestatīt.

Kā nomainīt fonu programmā WordPress

Atkal, ja jums ir WordPress dzinējs, tad mainīt lapas vispārējo fonu nebūs grūti. Jums vienkārši jānoklikšķina uz pogas "Pielāgot" cilnē "Izskats". Šeit jums jāizvēlas "Krāsas". Atkarībā no izvēlētās veidnes, iespējams, varēsiet izvēlēties dažādu elementu krāsas. Bet lapas krāsu vari izvēlēties jebkurā gadījumā – tavā priekšā atvērsies ērts krāsu panelis.

Iestatījumu skaits šeit ir atkarīgs no jūsu veidnes. Jebkurā gadījumā noteikti vajadzētu būt iespējai iestatīt krāsu visai lapai, dažādās veidnēs var iestatīt arī fonu un krāsu virsrakstiem, saitēm utt.

Patiesībā tas ir viss, kas jums jāzina. Ja nepieciešams lejupielādēt fona attēlu, atlasiet atbilstošo vienumu un atrodiet vajadzīgo failu savā datorā.

JavaScript. Ātrs sākums

Labā nozīmē attēlam nevajadzētu būt pārāk smagam, jo ​​tas lielā mērā ietekmēs vietnes ielādes ātrumu. Ideāli ir izmantot tā sauktos bezšuvju fona attēlus, kas atkārtojas horizontāli un vertikāli un tādējādi aizpilda visu telpu.

Pēc attēla ielādes jums tiks parādīti daži noderīgi iestatījumi, kas jākonfigurē. WordPress ērtība ir tāda, ka jūs uzreiz redzat izmaiņas atkarībā no izvēlētajiem iestatījumiem.

Pirmkārt, jums tiks lūgts izvēlēties atkārtošanas metodi. Ir jau 4 iespējas: atkārtot tikai horizontāli, tikai vertikāli, no abām pusēm un neatkārtot. Atkarībā no izmantotā attēla jums ir jāizdara izvēle.

Atkārtošana ļauj ievērojami ietaupīt uz attēla lielumu, ja tas ir mazs, un to var atkārtot, lai nebūtu redzamas asas pārejas starp atkārtojumiem. Tādā veidā jūs varat ietaupīt desmitiem kilobaitu, salīdzinot ar metodi, kurā tiek ielādēts liela izmēra pilna izmēra attēls.

Pozīcija. Šeit nav ko skaidrot, paskatieties, kā mainās lapas izskats ar dažādām fona pozīcijām. Izvēlieties opciju, kas jums patīk vislabāk.

Saistošs. Šis ir ļoti interesants iestatījums, kas ļauj izvēlēties, vai ritināt fona attēlu kopā ar saturu vai iesaldēt to vienā vietā. Personīgi man vienmēr patīk izvēlēties fiksēto opciju, jo, ritinot uz leju, pārvietojas tikai satura bloki.

Piemēram, ja jūsu fona attēla augstums ir 1000 pikseļi un jūs to neatkārtojat un neuztverat, tad, ritinot uz leju, tas vienkārši pazudīs no skata. Fona fiksēšana ļauj attēlam visu laiku palikt redzamā vietā. Dažreiz tas ir ļoti efektīvs risinājums.

JavaScript. Ātrs sākums

Apgūstiet JavaScript pamatus, izmantojot praktisku piemēru, kā izveidot tīmekļa lietojumprogrammu.

Faktiski tas viss ir paredzēts fona maiņai programmā WordPress. Kā redzat, viss ir pēc iespējas vienkāršāk.

Kā mainīt vietnes fonu html

Labi, mēs esam apskatījuši tīri vizuālu versiju, kurā jums nav jāiedziļinās kodā un nekas nav jāraksta. Tagad izdomāsim, kā mainīt fonu, izmantojot html un css. Kādas priekšrocības tas sniedz? Varat iestatīt fona attēlus ne tikai vietnei kopumā, bet arī katram elementam atsevišķi. Piemēram, kādam logrīkam, izvēlnei, galvenei utt. Tas sniedz daudz plašākas iespējas mājas lapas dizainā un tās dizaina mainīšanā.

Lai piekļūtu šim stilam, jums ir jāatrod veidnes galvenā stila lapa. Parasti tas atrodas saknē vai css mapē, un to sauc par style.css vai main.css.

Tajā jūs redzēsit kodu, kas veido dažādus jūsu vietnes elementus. Ja vēlaties iestatīt fonu globāli, varat to izdarīt, piešķirot fona atlasītājam, tas ir, lapas pamattekstam.

Kā tiek iestatīts fons?

Atcerieties - fona īpašums. Šodien labāk ir izmantot šī īpašuma rakstīšanas saīsināto versiju. Piemēram:

body (fons: #ccc url(bg.png) bez atkārtošanas 50% 50% fiksēts; )

Ko tas viss nozīmē? Pirmais parametrs parasti ir vienkrāsaina krāsa. Pieņemsim, ka mēs iestatījām to uz pelēku. Krāsa var nebūt norādīta, ja ir norādīts fona attēls. Kā redzat, attēls tiek norādīts, izmantojot url (faila ceļa) konstrukciju. Attiecīgi jums ir pareizi jāpieraksta ceļš uz failu, kā arī noteikti jānorāda tā paplašinājums.

Visi parametri, kurus es pierakstīju pēc šī, nav obligāti, un tos var norādīt pēc vēlēšanās. Tātad, norādīju, ka fona attēlu nedrīkst atkārtot, novietot centrā gan horizontāli, gan vertikāli, kā arī fiksēt vienuviet, lai ritinot nepazustu.

Kā redzat, šeit ir visi tie paši parametri, kurus konfigurējāt vizuāli, taču šeit tie tiek reģistrēti kā fona īpašuma vērtības.

Šajā piemērā es izmantoju saīsinātu rekvizītu apzīmējumu, tas ir vienkārši ērtāk, bet patiesībā katram atsevišķam parametram ir savs īpašums: fona krāsa krāsai, fona attēls attēlam, fona pozīcija pozīcijas iestatīšanai.

Protams, lai brīvi pārzinātu šos rekvizītus, iesaku vispirms iziet mūsu kursu un, ja vēlies kļūt par pieredzējušu css valodas lietotāju, tad. Tur jūs uzzināsiet, kā iestatīt vairākus fonus vienlaikus, iestatīt to atkārtošanos, izmantot gradientus utt. Informācija ir ļoti interesanta un noderīga vietņu veidotājiem.

Nu, es jums pastāstīju par darba ar fonu pamatiem. Abonējiet mūsu portālu, lai saņemtu jaunumus un uzzinātu vairāk par vietņu veidošanu.

JavaScript. Ātrs sākums

Apgūstiet JavaScript pamatus, izmantojot praktisku piemēru, kā izveidot tīmekļa lietojumprogrammu.

Jūs varat ļoti vienkārši pilnībā pielāgot savu emuāru vai vietni. Šajā rakstā ir parādīts, cik viegli ir mainīt lapas galvenes fontu un fona attēlu.

Emuāru autori un vietņu īpašnieki parasti maina fonu, lai padarītu savu vietni apmeklētājiem pievilcīgāku. Tomēr fona attēls, kas pievienots nepareizi, var mulsināt apmeklētāju un pat izraisīt neuzticēšanos jūsu vietnei vai emuāram un nevēlēšanos to apmeklēt vēlreiz. Lai pareizi pievienotu fonu, ir svarīgi izmantot atbilstošus HTML kodus.

Ir tikai daži vienkārši veidi, kā mainīt esošās vietnes izskatu. Daudzi lietotāji pat neapzinās, cik tas ir vienkārši.

Kā pielāgot fontu

Pirmkārt, jebkurā vietā pēc tam jums būs jāpievieno četri metatagi< head >. Varat vienkārši kopēt tālāk norādītos simbolus un ielīmēt tos savā resursā, vispirms noņemot atstarpes.

Kā pielāgot fona krāsu

Atveriet sava emuāra vai vietnes HTML lapu. Rediģējot lapu, varat to atvērt programmā Dreamweaver, lai atvieglotu darbu. Ja jūsu vietne tika izveidota, izmantojot vietņu veidotāju, daži pakalpojumi ļauj mainīt HTML iestatījumus tiešsaistē, atverot lapu Dizains un atlasot cilni Rediģēt HTML. Jebkurā gadījumā jums vajadzētu būt iespējai piekļūt sava emuāra vai vietnes HTML kodiem. Iestatīšanas process var ievērojami atšķirties atkarībā no tā, kādi pakalpojumi jums ir pieejami un kādu dzinēju izmantojat.

Nav jēgas mēģināt atrast atsevišķu attēlu ar citu krāsu, ja viss, kas jums jādara, ir mainīt fona krāsu. Tā vietā varat vienkārši rediģēt HTML un mainīt esošo krāsu uz to, kuru vēlaties paturēt.

HTML krāsu diagrammas var viegli atrast specializētās publikācijās. Katra krāsa marķējumā tiek parādīta kā sešciparu kods. Piemēram, balts fons ir norādīts kā #FFFFFF.

Tāpēc atrodiet krāsu kodu, kuru vēlaties rādīt savā vietnē kā fona krāsu. Marķējumā tas izskatīsies šādi:

fona krāsa: #XXXXXX; (

Kad esat saglabājis fona krāsu HTML, redzēsit, ka jūsu lapas izskats ir mainījies.

Fona attēla pievienošana

Atlasiet attēlu, kuru vēlaties pievienot kā fonu. Ir daudzas vietnes, kas ļauj lejupielādēt šādus fonus. Varat arī izmantot attēlu, kas jau ir saglabāts jūsu datorā.

Augšupielādējiet attēlu internetā. Daudzi ļauj augšupielādēt attēlus bez maksas. Iegūstiet URL saiti uz fona attēlu. Lai to izdarītu, pārlūkprogrammā ir jāatver attēls un jākopē URL.

Ielīmējiet kodu, lai pievienotu attēlu kā fonu. HTML formātā tas izskatās šādi:

fona attēls: url(attēla URL);

Jums ir jāpievieno kods vietā, kur sākas lapas pamatteksts HTML. Saglabājiet izmaiņas pēc rediģēšanas un ielādējiet vietni. Jūs varēsiet redzēt, ka attēls ir pilnībā nomainījis fona krāsu.

Tomēr atcerieties, ka pārāk lielu attēlu ielāde var aizņemt ļoti ilgu laiku, kas daudziem apmeklētājiem būs nepatīkami. Šī iemesla dēļ mēģiniet šim nolūkam atlasīt mazus attēlus.

Ar palīdzību CSS krāsa un fons Varat to piešķirt gandrīz jebkuram tīmekļa lapas elementam, brīvi kontrolēt fona attēlu un tā atkārtošanos horizontāli un vertikāli. Turklāt, izmantojot CSS, varat novietot fona attēlu jebkurā ekrāna vietā, izmantojot pozicionēšanu. Pagaidām nevirzīsimies pārāk tālu uz priekšu, iesim kārtībā.

KRĀSU īpašība

Šis rekvizīts norāda elementa krāsu vai, precīzāk, elementā esošā teksta krāsu. Vērtība ir norādīta vienā no iespējamajām formām:

• krāsas nosaukums (ZAĻS, MELNS, SARKANS...);
• heksadecimālais krāsu kods (008000, 000000, FF0000...);
• decimālais krāsu kods RGB (color:rgb (40, 175, 250));

Īpašums COLOR tiek mantots, un, ja nevienam elementam nav iestatīta vērtība, vērtība tiek mantota no tā priekšteča. Bet var gadīties, ka tas nav iestatīts arī priekštecim - tad pārlūkprogrammas stila lapa tiks piemērota, izmantojot noklusējuma vērtības. Elementa krāsa šajā gadījumā, visticamāk, būs melna.

Kā jau minēju, krāsu var iestatīt gandrīz visiem elementiem, tie var būt (H1... H6), (strong, em) un pat veseli skaitļi (p) un pat tabulas apmales, bet par to vēlāk.

Apskatīsim piemēru teksta krāsas iestatīšanai, izmantojot CSS:

h1 (krāsa: zila)

Šajā piemērā visi tīmekļa lapas pirmā līmeņa virsraksti būs zilā krāsā:

spēcīga (krāsa: sarkana)

Šajā gadījumā viss, kas atrodas lapas tekstā, tiks izcelts ar tagu stiprs, kļūs sarkans.

Jūs varat to uzrakstīt šādi:

h1, p, spēcīgs (krāsa: zaļa)

Tad pirmā līmeņa virsraksti, visas rindkopas un viss, kas ir iezīmēts ar tagu, būs zaļš.

Kad ir nepieciešams izcelt virsrakstus dažādās krāsās, tiek izmantoti klašu atlasītāji. Lai definētu klasi HTML, tiek izmantots atribūts klasē, ko var attiecināt uz jebkuriem elementiem. HTML kodā jums būs jāieraksta:

class="Zils" > Šīs klases galvenes krāsa būs zila

Šajā gadījumā CSS stila lapā mēs ierakstām noteikumu, kur atlasītājs būs H1 elements, un caur punktu ( . ) klases nosaukums:

h1.Zils (krāsa: zila)

HTML dokumentos tiek izmantoti arī atlasītāji pēc identifikatora, tos nosaka atribūts id. Identifikators ir svarīgāks vai prioritārāks atribūts nekā klase. Un, ja HTML kodā elementam ir norādīta gan klase, gan identifikators, tiks piemērots identifikatora stils. Identifikators ir norādīts ar jaucējzīmi ( # ). Lai HTML kodā izmantotu identifikatoru, jums būs jāraksta:

id="Zils" > Šī ID galvenes krāsa būs zila

Savukārt stila lapā:

h1#Blue (krāsa: zila)

FONA KRĀSA īpašums

Šis rekvizīts ļauj iestatīt fona krāsu lapai kopumā, rindkopai, saitei vai, vispārīgi, jebkuram HTML elementam. Lai to izdarītu, rekvizīta vērtība norāda krāsu vai vērtību caurspīdīgs(caurspīdīgs). Lapas fona kods ir uzrakstīts:

korpuss (fona krāsa: ūdens)

Šajā gadījumā lapas fons būs tirkīzzils, un, lai galvenei piešķirtu fonu, mēs rakstām:

h1 (fona krāsa: dzeltena)

Pirmā līmeņa virsrakstiem iegūstam dzeltenu fonu.

Krāsa un fons CSS

FONS-ATKĀRTOT īpašums

Šis rekvizīts tiek izmantots, kad tas ir iestatīts, lai noteiktu, vai tas atkārtosies horizontāli un vertikāli. Derīgas vērtības:

• atkārtojiet- attēls tiek atkārtots vertikāli un horizontāli;
• atkārtojiet-x- attēls tiek atkārtots tikai horizontāli;
• atkārtojiet-y- attēls tiek atkārtots tikai vertikāli;
• nē-atkārtoties- attēls neatkārtojas.

Kods ir uzrakstīts šādi:

p(
fona attēls: url( attēla faila adrese) ;
fona atkārtojums: atkārtojiet-x
}

Šīs rindkopas teksts būs virs fona attēla, kas tiks novietots horizontāli.

FONS-PIEVIENOJUMS īpašums

Šis rekvizīts tiek izmantots, lai norādītu pārlūkprogrammai, vai lapas fona attēlam ir jāritina ar tekstu ( ritiniet) vai palikt nekustīgam ( fiksēts).

ķermenis (
fona attēls: url( attēla faila adrese) ;
background-repeat : atkārtot-x ;
fona pielikums: fiksēts
}

Šajā gadījumā fona attēls paliks nekustīgs.

Īpašums FONA-POSITION

Šis rekvizīts tiek izmantots, lai novietotu attēlu attiecībā pret . Vērtības tiek norādītas procentos (%), garuma vienībās (cm, px), ar atslēgvārdiem:

• Vertikāli:
• tops- attēla augšdaļa ir izlīdzināta ar lapas vai bloka augšējo malu;
• centrs
• apakšā- attēla apakšdaļa ir izlīdzināta ar lapas vai bloka apakšējo malu.
• Horizontāli:
• pa kreisi- attēla kreisā mala ir izlīdzināta ar lapas vai bloka kreiso malu;
• centrs- attēla centrs ir izlīdzināts ar lapas vai bloka centru;
• pa labi- attēla labā mala ir izlīdzināta ar lapas vai bloka labo malu.

Mēs rakstām koda piemēru procentos, garuma vienībās un atslēgvārdos:

ķermenis (
fona attēls: url( attēla faila adrese) ;
fona pozīcija: 0% 0%
}

Ķermenis (
fona attēls: url( attēla faila adrese) ;
fona pozīcija: 10 pikseļi 25 cm
}

Ķermenis (
fona attēls: url( attēla faila adrese) ;
fona pozīcija: augšā centrā
}