Varijable u html kodu. Izvorne varijable u CSS-u

20.04.2019 Savjet

Pozdrav svima, tema varijabli u CSS-u postoji već dugo na internetu, ali ne znaju svi što je to, a sama tehnologija je objavljena ne tako davno. I iako je u mnogim slučajevima prerano koristiti ga, već je vrijeme da shvatimo što je to i kako ga koristiti. Pokušajmo zajedno razumjeti tehnologiju. Napominjemo da je ovaj članak za one koji ne znaju CSS varijable(prilagođena svojstva) ili ste upravo čuli za njih. Ako ste upoznati i znate kako raditi s ovom značajkom, onda vas ovaj članak neće zanimati.

Dakle, tema s varijablama u stilovima je već izlizana do rupa, jer. već dugo su u pretprocesorima. Ovo je zgodno, već imam lošu ideju o pisanju stilova bez mogućnosti da negdje spremim određenu vrijednost (boja, veličina, naziv fonta, tip markera za popis, sve što vam padne na pamet...). Međutim, predprocesori nam ne mogu pružiti fleksibilnost koju nam daju izvorne varijable u CSS-u, a uskoro ćete vidjeti i zašto.

Prvo morate razumjeti kako deklarirati i koristiti varijable. Varijable se deklariraju u selektorima:

:root ( --body-background: #ccc; ) body (pozadina-boja: var(--body-background); )
Kao što možete vidjeti iz gornjeg popisa, varijable su deklarirane s dvije crtice ispred imena:
--ime-varijable

Da biste koristili varijablu, morate koristiti funkciju var. Ima 2 parametra. Ovo je, naravno, naziv varijable, a drugi izborni parametar dolazi vrijednost svojstva koje će se koristiti ako varijabla ne postoji.

Skup novih značajki s pojavom varijabli, naravno, tu ne završava. Posjedovanje varijabli u CSS arsenalu daje nam veliku fleksibilnost u stilovima pisanja. Na primjer, sada za sastavljanje medijskog upita za zaslone<320px в ширину, не нужно переопределять свойство целиком. Достаточно изменить значение переменной. Т.е.

Naslov ( --wrapper-width: 50%; širina: var(--wrapper-width); ) @media (max-width: 320px) ( --wrapper-width: 100%; )
Sve! Ovo je dovoljno za nekretninu širina promijenio značenje!

Ako CSS može pratiti promjene svojih varijabli, to znači da se s njim može komunicirati na različite načine.

Što je s JavaScriptom?

Manipuliranjem atributom stila možete promijeniti stil uz minimalan napor. Navest ću grubi primjer na Reactu.

Naslov ( --pozadina: plava; boja pozadine: var(--pozadina); )
changeColor() ( this.setState(( stil: ("--pozadina": "zeleno") )); )

Titula

Sada kliknite na element s klasom titula boja pozadine elementa će se promijeniti. cool? Ipak bi! Ne morate dodati novu klasu, redefinirati svojstvo ili učiniti bilo što drugo što mijenja boju pozadine elementa.

napomena

Ako netko nije upoznat s Reactom ili netko jednostavno ne razumije što se dogodilo. Jednostavno smo promijenili atribut stila elementa koristeći JavaScript promjenom vrijednosti varijable
--pozadina

Koristeći varijable, postalo je lakše mijenjati css izvana, možete smisliti mnogo načina korištenja, a mi ćemo ići dalje.

Opsegovi

Moramo reći nekoliko riječi o opsegu CSS varijabli, ovdje je sve jednostavno. Deklarisana varijabla dostupna je svim podređenim selektorima ovog selektora. Oni. u donjem popisu koristite varijablu --b u oznaci html bit će nemoguće. A ovdje je varijabla --a v tijelo i svi podređeni elementi će raditi bez problema (osim ako se naravno ne poništi negdje ispod).

Html ( --a: #ccc; ) tijelo ( --b: #a3a3a3; )
(Znam da su boje u primjerima dosadne, ali ne sjećam se dobro heksadecimalnih boja :))

Varijable i kalc

Kao i svaka brojčana vrijednost svojstva, možete koristiti varijablu u funkciji kalc.

Naslov ( --title-width: 300px; širina: calc(var(--title-width) + 150px); )
Cool! Pogotovo kada uzmete u obzir da je varijabla --naslov-širina, može se mijenjati i unutar CSS-a i izvana.

Imajte na umu da vrijednost moramo staviti u varijablu. Dodati px, % , rem itd. na pozvanu varijablu nećemo uspjeti. Međutim, ništa nas ne sprječava da množimo pomoću funkcije kalc vrijednost po jedinici u vrijednosti koja nam je potrebna.

Naslov ( --title-width: 300; /* neće raditi tako */ width: var(--title-width)px; /* radi ovako */ width: calc(var(--title-width) ) * 1px) ;)

Konačno

CSS varijable daju vam veliku fleksibilnost, moćan su alat koji može biti vrlo koristan u brojnim slučajevima. Međutim, ne preporučujem žurbu s korištenjem u borbenim projektima. Ako pogledamo

Fleksibilnost prilagodbe predložaka stranica osigurava mogućnost umetanja različitih elemenata podataka u predložak - kao što su, na primjer, banneri, naslovi stranica, najave vijesti - korištenjem varijabli.

Da biste umetnuli varijable u predložak stranice, koristite padajući popis na vrhu prozora predloška.

Jednostavno odaberite potrebnu varijablu s popisa i ona će biti umetnuta u kod stranice.

U predložak stranice dostupno je umetanje sljedećih vrsta varijabli: "opći objekti"; "Posljednje vijesti, članci"; "skupine transparenta"; "izbornik"; "objekti priloženi stranici". Varijable tipa "Najnovije vijesti, članci", "grupe bannera" i "izbornik" kreiraju korisnici, a ostale su prema zadanim postavkama prisutne u sustavu.

Odjeljak varijabli " Najnovije vijesti, članci” su popis svih do sada kreiranih najava stranica s vijestima, za koje je vrsta objave “Zadnjih N-postova na drugoj stranici” (više o tome pročitajte u odgovarajućem odjeljku priručnika).

U kodu stranice varijabla najave vijesti izgleda ovako:
(id anonsa=№№)
, gdje je №№ - id najave.
Radi praktičnosti identificiranja varijabli, bolje je takvim najavama dati najdetaljnije nazive, također se možete usredotočiti na identifikator najave (brojevi nakon id-a u zaglavlju objave). Važno je zapamtiti da će se najava, nakon što je umetnete u predložak stranice, prikazati samo na onim stranicama koje su navedene u predlošku vijesti na kartici "Pravila formiranja bloka".

Odjeljak varijabli " Grupe bannera” su popis svih grupa bannera stvorenih do ovog trenutka (više o tome pročitajte u odgovarajućem odjeljku priručnika).
(id bannera=№№)
, gdje je ## - id grupe bannera.
Radi praktičnosti identificiranja varijabli, bolje je grupama bannera dati najdetaljnije nazive, također se možete usredotočiti na ID grupe bannera (brojevi iza ID-a u zaglavlju).

Odjeljak varijabli " izbornik” su popis svih izbornika stvorenih do ove točke (više o tome pročitajte u odgovarajućem odjeljku priručnika).
U kodu stranice varijabla predloška izgleda ovako
(ID izbornika=№№)
, gdje je №№ - id izbornika.
Za praktičnost identifikacije varijabli, bolje je izborniku dati najdetaljnija imena, također se možete usredotočiti na identifikator izbornika (brojevi nakon id-a u naslovu). Važno je zapamtiti da će se izbornici prikazivati samo na stranicama navedenim na kartici Opća svojstva predloška izbornika.

Razmotrimo sada varijable grupe " Opći objekti“, tj. varijable dostupne za umetanje u zadani predložak stranice.

Varijabilna

Svrha

(Naslov stranice)

Naslov stranice. Odgovara naslovu navedenom u polju "Naziv" u obrascu za izradu/uređivanje stranice (pogledajte odgovarajući odjeljak priručnika), odgovara nazivu stranice u strukturi stranice. Koristi se za prikaz naslova u tekstu stranice.

(puni_naslov_stranice)

Naslov cijele stranice. Odgovara naslovu navedenom u polju "Puni naslov" u obrascu za izradu/uređivanje stranice (pogledajte odgovarajući odjeljak priručnika). Obično se koristi kao oznaka stranicama</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(page_notags_title)</th> <td>( page_full_title), iz koje su izrezane sve html oznake</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(sadržaj_stranice)</th> <td>Prikazuje sadržaj stranice. Za tekstualnu stranicu to će biti tekstualni sadržaj stranice, za stranice s vijestima to će biti najava vijesti, za stranice kataloga to će biti popis elemenata itd.</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(informacije o stranici)</th> <td>Opis stranice. Odgovara naslovu navedenom u polju "Opis" u obrascu za izradu/uređivanje stranice (pogledajte odgovarajući odjeljak priručnika).</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(meta_stranice)</th> <td>Meta oznake stranice. Odgovara naslovu navedenom u polju "Riječi za promociju" u obrascu za izradu/uređivanje stranice (pogledajte odgovarajući odjeljak priručnika). Za razliku od drugih varijabli, ne prikazuje samo podatke, već odmah i oznaku <meta>. </td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(stranica_css)</th> <td>Uključuje veze na dodatne stilova. Obavezno kada stranica ima module "forum", "poslužitelj osobnih poruka"</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(ime_firme)</th> <td>Naziv stranice. Postavlja se u postavkama - u administratorskoj ploči.</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(firm_slogan)</th> <td>Slogan web stranice. Postavlja se u postavkama - u administratorskoj ploči</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(body_onload)</th> <td>Varijabla sustava, koja se koristi za izlaz pozivanja skripte pri pokretanju <body>. Pozvan u tijelu oznake - <body{ body_onload}>. Korisnik u sustavu ne može utjecati na ovu varijablu. Da biste inicijalizirali pozivanje vlastitih skripti, umetnite pozivni kod izravno u predložak nakon varijable ( body_onload). Radi praktičnosti umetanja inicijalizacije skripte u predloške nekoliko stranica, ovaj kod možete premjestiti u zasebnu grupu bannera i konfigurirati poziv varijable bannera u predlošku - <body{ body_onload} { banner id=№№}>. </td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(javascript)</th> <td>Varijabla sustava, koja se koristi za izlaz pozivanja skripti. Pozvan unutar oznake <head> - <head>(javascript)</head>. Korisnik u sustavu ne može utjecati na ovu varijablu. Da biste pokrenuli pozivanje vlastitih skripti, umetnite pozivni kod izravno u predložak nakon varijable (javascript). Radi praktičnosti umetanja inicijalizacije skripte u predloške nekoliko stranica, ovaj kod možete premjestiti u zasebnu grupu bannera i konfigurirati poziv varijable bannera u predlošku - <head>( javascript) ( banner id=##)</head>. </td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(naslov_roditelja)</th> <td>Ako je stranica podstranica, prikazuje se naziv "roditeljske" stranice. Koristi se za sastavljanje složenih naslova stranica i prikaz navigacije u krušnim mrvicama.</td> </tr><tr><th style="VERTICAL-ALIGN: top; font-wight: bold">(id_prekidača_jezika=0)</th> <td>Prebacivanje jezika</td> </tr></tbody></table></td> Prijeđimo na sljedeću lekciju koja se zove " Varijabla u PHP-u". Prvo, otkrijmo teoretski što je varijabla. Ne znam za vas, ali moje razmišljanje bolje funkcionira ako vizualno obradim potrebne informacije. Lakše mi je sve razumjeti kad vidim crtež ili dijagram. Iz tog razloga, također ću nacrtati dijagram za vas i objasniti značenje varijable koristeći ga. Što je varijabla? Varijabilna je spremnik koji sadrži informacije. Varijable u PHP-u počinju znakom dolara "$". Pogledajte dijagram: Pojašnjenje sheme: Ako pogledate shemu, možete vidjeti da varijabla $ a (u spremniku) pohranjuje digitalnu vrijednost - broj " 2", a varijabla $ f pohranjuje tekstualni sadržaj " site» Sada ću prikazati ovu shemu u PHP kodu. To će izgledati ovako:$ je varijabla; a i f su naziv varijable. Naziv varijable može biti kakav god želite. Ali zapamtite, postoji razlika u načinu na koji pišete naziv varijable velikim ili malim slovima, na primjer GERL i gerl - to će biti različiti nazivi; = - znači dodijeliti vrijednost; 2 i "site" je numerička i tekstualna vrijednost. Imajte na umu da se brojčana vrijednost piše bez navodnika " " , a tekstualna vrijednost mora biti napisana s navodnicima; ; - to znači da je radnja završena. Sada zalijepite ovaj PHP kod u HTML dokument: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Osnove PHP-a

Proračun varijabli.

Također možete stvoriti funkciju za izračunavanje brojeva, na primjer, varijable se mogu podijeliti (/), množiti (*), zbrajati (+) i oduzimati (-). Da biste to učinili, dovoljno je napisati još jednu varijablu, na primjer $s . Za rezultat će biti odgovorna varijabla $s. Dakle, na primjeru.

Osnove PHP-a

Pokušajmo napraviti različite funkcije izračuni znamenki:

Osnove PHP-a

Tako,
varijabla $s - odgovorna za rezultat dobiven prilikom dodavanja vrijednosti;
varijabla $h - odgovorna za rezultat dobiven pri oduzimanju vrijednosti;
varijabla $p - odgovorna za rezultat dobiven pri množenju vrijednosti;
varijabla $x - odgovorna je za rezultat dobiven pri dijeljenju vrijednosti.

Sada ćete vidjeti korisnost izbjegavanja varijabli. Recimo da trebate prikazati imena s dva navodnika " " na zaslonu monitora, na primjer, Styopka radi u PJSC "KMZ".
Ako u PHP kodu pišete ovako:

Tada ćete završiti s ovom prekrasnom pogreškom:

Razlog za ovu grešku je dvostruki navodnici u jednoj riječi:

$name = "Stepka radi u PAO-u " KMZ " ";

Bit će ispravno . To se radi s "\". Primjer:

Rezultat će biti ovakav:

Da budem iskren, ovu funkciju nikada nisam koristio u praksi. Ali moram vam reći o pristajanju.
Pokušajmo spojiti varijablu $a s $f. To se radi s uobičajenom točkom". ".

Osnove PHP-a

Ovo će biti rezultat:

Danas sam vas natovario jednom teorijom, ali u sljedećoj lekciji ćemo prijeći na praktični trening, i uvjerite se sami kako varijable rade u PHP-u. Pokušajmo sve ove primjere prikazati na ekranu s rezultatima. Upoznat ćete se s "echo" izlaznim operatorom.

Osim toga, možete koristiti i sljedeće posebne unaprijed definirane varijable, koje su relevantne samo u HTML predlošcima.

Varijable za upotrebu samo u predlošcima stranica odjeljka:

Te se varijable mogu koristiti samo u predlošcima stranica odjeljka. Vrijede u svim izlaznim formatima koji se temelje na HTML-u (HTML pomoć, pomoć za preglednik, e-knjiga i pomoć vizualni studio/ MS Help 2.0).

Varijabilna

<%DOCTYPE%>	Umeće ispravnu oznaku DOCTYPE na početak HTML izlaznih stranica. Ova varijabla je središnja za sve predloške i ne treba je uklanjati. Ako ga uklonite, dobit ćete poruku o pogrešci od prevoditelja.
<%DOCCHARSET%>	Umetci točne informacije skup znakova u meta oznakama na početku HTML izlaznih stranica. Ova varijabla je središnja za sve predloške i ne treba je uklanjati. Ako ga uklonite, dobit ćete poruku o pogrešci od prevoditelja.
<%STYLESHEET%>	Umeće vezu na tablicu css stilova, koji sadrži sve informacije o stilu za vaš projekt. Ova varijabla je središnja za sve predloške i ne treba je uklanjati. Ako ga uklonite, dobit ćete poruku o pogrešci od prevoditelja.
<%TOPIC_HEADER%>	Umeće naslov trenutni dio ako postoji. Ako trenutni odjeljak nema naslov, vrijednost ove varijable je nula. Ovo se može razlikovati od naslova odjeljka umetnutog sa<%TOPIC_TITLE%> .
<%TOPIC_HEADER_TEXT%>	Umeće naslov trenutnog odjeljka kao običan tekst. Ovo je osobito korisno ako su naslovi vašeg dizajna drugačiji i duži od naslova sadržaja koji su umetnuti<%TOPIC_TITLE%> . Ovo se prvenstveno koristi za optimizaciju tražilice, za koju biste ga umetnuli u metaoznaku description, ovako:
<%TOPIC_TEXT%>	Umeće glavni tekst odjeljka, odnosno poruku odjeljka, koja je uređena i oblikovana u vašem projektu u uređivaču Help & Manual. Ovo je najvažnija varijabla - ako je zanemarite, vaše će particije biti prazne!
<%TOPIC_BREADCRUMBS%>	Generira skup "veza za navigaciju" traga za navigaciju na odjeljke iznad trenutnog odjeljka u stablu sadržaja. Ova varijabla je prazna u odjeljcima vrhunska razina. U odjeljcima druge razine i ispod, varijabla generira niz veza u formatu Link1 > Link2 > Link3 ... Trenutni odjeljak nije uključen u seriju. Ako želite postaviti trenutni naslov odjeljka na kraj krušne putanje, to možete učiniti pomoću varijable<%TOPIC_TITLE%>(Pogledaj ispod). Varijabla traga mrvica prazna je u odjeljcima u odjeljku Nevidljivi odjeljci. Ova varijabla ima odgovarajući par uvjeta: i . Ovi se uvjeti mogu koristiti za umetanje traga samo tamo gdje je to prikladno i umetanje zamjenskog sadržaja kada nije prikladno.