Variablat në kodin html. Variablat vendas në CSS

Përshëndetje të gjithëve, tema e variablave në CSS ka qenë rreth Internetit për një kohë të gjatë, por jo të gjithë e dinë se çfarë është, dhe vetë teknologjia u lëshua jo shumë kohë më parë. Dhe megjithëse është shumë herët për ta përdorur atë në shumë raste, tashmë është koha për të kuptuar se çfarë është dhe si ta përdorim atë. Le të përpiqemi të kuptojmë teknologjinë së bashku. Ju lutemi vini re se ky artikull është për ata që nuk e dinë Variablat CSS(pronat me porosi) ose sapo keni dëgjuar për to. Nëse jeni njohur dhe dini të punoni me këtë veçori, atëherë ky artikull nuk do t'ju interesojë.

Pra, tema me variabla në stile është konsumuar tashmë në vrima, sepse. ata kanë qenë në parapërpunues për një kohë të gjatë. Kjo është e përshtatshme, unë tashmë kam një ide të keqe për stilet e të shkruarit pa aftësinë për të ruajtur një vlerë të caktuar diku (ngjyra, madhësia, emri i shkronjave, lloji i shënuesit për listën, gjithçka që mund të vijë në mendje ...). Megjithatë, parapërpunuesit nuk mund të na japin fleksibilitetin që na japin variablat vendas në CSS, dhe së shpejti do ta shihni pse.

Së pari ju duhet të kuptoni se si të deklaroni dhe përdorni variablat. Variablat deklarohen në përzgjedhës:

:root ( --body-background: #ccc; ) body ( background-color: var(--body-background); )
Siç mund ta shihni nga lista e mësipërme, variablat deklarohen me dy viza përpara emrit:
--variabla-emër

Për të përdorur një ndryshore, duhet të përdorni funksionin var. Ka 2 parametra. Ky është, natyrisht, emri i ndryshores dhe i dyti parametër opsional vjen vlera e vetive që do të përdoret nëse variabli nuk ekziston.

Seti i veçorive të reja me ardhjen e variablave, natyrisht, nuk përfundon këtu. Pasja e variablave në arsenalin CSS na jep shumë fleksibilitet në stilet e të shkruarit. Për shembull, tani për të hartuar një kërkesë mediatike për ekranet<320px в ширину, не нужно переопределять свойство целиком. Достаточно изменить значение переменной. Т.е.

Titulli ( --gjerësia e mbështjellësit: 50%; gjerësia: var(--gjerësia e mbështjellësit); ) @media (gjerësia maksimale: 320 px) ( --gjerësia e mbështjellësit: 100%; )
Gjithçka! Kjo është e mjaftueshme për pronën gjerësia ndryshoi kuptimin e saj!

Nëse CSS është në gjendje të gjurmojë ndryshimet në variablat e saj, kjo do të thotë se mund të ndërveprohet me të në mënyra të ndryshme.

Po JavaScript?

Duke manipuluar atributin e stilit, ju mund ta ndryshoni stilin me përpjekje minimale. Unë do të jap një shembull të përafërt në React.

Titulli ( --sfondi: blu; ngjyra e sfondit: var(--sfondi); )
changeColor() ( this.setState(( style: ("--background": "jeshile") ));)

Tani klikoni mbi elementin me klasën titullin ngjyra e sfondit të elementit do të ndryshojë. E lezetshme? Ende do! Nuk ka nevojë të shtoni një klasë të re, të ripërcaktoni një veçori ose të bëni ndonjë gjë tjetër që ndryshon ngjyrën e sfondit të elementit.

vërejtje

Nëse dikush nuk është i njohur me React ose dikush thjesht nuk e kupton se çfarë ndodhi. Ne thjesht ndryshuam atributin e stilit të elementit duke përdorur JavaScript duke ndryshuar vlerën e ndryshores
-- sfond

Duke përdorur variabla, është bërë më e lehtë të ndryshosh css nga jashtë, mund të dalësh me shumë metoda përdorimi dhe ne do të vazhdojmë.

Fushëveprimi

Duhet të themi disa fjalë për shtrirjen e variablave CSS, gjithçka është e thjeshtë këtu. Variabli i deklaruar është i disponueshëm për të gjithë përzgjedhësit fëmijë të këtij përzgjedhësi. ato. në listën e mëposhtme përdorni variablin --b në etiketë html do të jetë e pamundur. Dhe këtu është ndryshorja --a në trupi dhe të gjithë elementët e fëmijëve do të funksionojnë pa probleme (përveç nëse, sigurisht, është anashkaluar diku më poshtë).

Html ( --a: #ccc; ) trupi ( --b: #a3a3a3; )
(E di që ngjyrat në shembuj janë të mërzitshme, por ngjyrat e kodit hex nuk i mbaj mend shumë mirë :))

Variablat dhe kalc

Ashtu si çdo vlerë numerike e vetive, ju mund të përdorni një ndryshore në një funksion kalc.

Titulli ( --gjerësia e titullit: 300px; gjerësia: llogaritur(var(--gjerësia e titullit) + 150px); )
E bukur! Sidomos kur merrni parasysh atë variabël --titulli-gjerësia, mund të ndryshohet si brenda CSS ashtu edhe nga jashtë.

Vini re se ne duhet të vendosim vlerën në një ndryshore. Shtoni px, % , rem etj. në variablin e thirrur nuk do të kemi sukses. Sidoqoftë, asgjë nuk na pengon të shumëzohemi duke përdorur funksionin kalc vlera për njësi në vlerën që na nevojitet.

Titulli ( --title-width: 300; /* nuk do të funksionojë kështu */ gjerësia: var(--title-width)px; /* punon si kjo */ gjerësia: calc(var(--title-width ) * 1 px) ;)

Së fundi

Variablat CSS ju japin shumë fleksibilitet, ato janë një mjet i fuqishëm që mund të jetë shumë i dobishëm në një sërë rastesh. Sidoqoftë, nuk rekomandoj të nxitoni për ta përdorur atë në projekte luftarake. Nëse shikojmë

Fleksibiliteti i personalizimit të shablloneve të faqeve sigurohet nga aftësia për të futur elementë të ndryshëm të të dhënave në shabllon - të tilla si, për shembull, banderola, tituj faqesh, njoftime lajmesh - duke përdorur variabla.

Për të futur variabla në shabllonin e faqes, përdorni listën rënëse në krye të dritares së shabllonit.

Thjesht zgjidhni variablin e kërkuar nga lista dhe ai do të futet në kodin e faqes.

Futja e llojeve të mëposhtme të variablave është e disponueshme në shabllonin e faqes: "objektet e përgjithshme"; “Lajmet, artikujt më të fundit”; "grupe pankartash"; "menu"; "objektet e bashkangjitura në faqe". Variablat e llojeve të tilla si "Lajmet e fundit, artikujt", "grupet e banerëve" dhe "menyja" krijohen nga përdoruesit, pjesa tjetër janë të pranishme në sistem si parazgjedhje.

Seksioni i variablave " Lajmet e fundit, artikujt” janë një listë e të gjitha njoftimeve të faqeve të lajmeve të krijuara deri më tani, për të cilat lloji i njoftimit është “N-postimet e fundit në një faqe tjetër” (lexoni më shumë rreth kësaj në seksionin përkatës të manualit).


Në kodin e faqes, variabli i njoftimit të lajmeve duket kështu:
(anonses id=№№)
, ku №№ - njoftimi id.
Për lehtësinë e identifikimit të variablave, është më mirë t'u jepni njoftimeve të tilla emrat më të detajuar, gjithashtu mund të përqendroheni në identifikuesin e njoftimit (numrat pas id në kokën e njoftimit). Është e rëndësishme të mbani mend se njoftimi, pasi ta vendosni në shabllonin e faqes, do të shfaqet vetëm në ato faqe që janë të specifikuara në shabllonin e lajmeve në skedën "Rregullat e formimit të bllokut".

Seksioni i variablave " Grupet e banerëve” janë një listë e të gjitha grupeve të banerëve të krijuar deri në këtë pikë (lexoni më shumë rreth kësaj në seksionin përkatës të manualit).
( ID e banerit=№№)
, ku ## - id i grupit të banerëve.
Për lehtësinë e identifikimit të variablave, është më mirë t'u jepni grupeve të banderolave ​​emrat më të detajuar, gjithashtu mund të përqendroheni në ID-në e grupit të banderolave ​​(numrat pas id në kokë).

Seksioni i variablave " Menu” janë një listë e të gjitha menyve të krijuara deri në këtë pikë (lexoni më shumë rreth kësaj në seksionin përkatës të manualit).
Në kodin e faqes, ndryshorja e shabllonit duket kështu
(ID e menysë=№№)
, ku №№ - id i menysë.
Për lehtësinë e identifikimit të variablave, është më mirë t'i jepni menusë emrat më të zgjeruar, gjithashtu mund të përqendroheni në identifikuesin e menusë (numrat pas id në titull). Është e rëndësishme të mbani mend se menutë do të shfaqen vetëm në faqet e specifikuara në skedën Vetitë e përgjithshme të shabllonit të menysë.

Konsideroni tani variablat e grupit " Objekte të përgjithshme”, d.m.th. variabla të disponueshëm për futje në shabllonin e paracaktuar të faqes.

E ndryshueshme	Qëllimi
(Titulli i faqes)	Titulli i faqes. Përputhet me titullin e specifikuar në fushën "Emri" në formën e krijimit/redaktimit të faqes (shih seksionin përkatës të manualit), përputhet me emrin e faqes në strukturën e faqes. Përdoret për të shfaqur titullin në tekstin e faqes.
(faqe_i plotë_titull)	Titulli i plotë i faqes. Korrespondon me titullin e specifikuar në fushën "Titulli i plotë" në formularin e krijimit/redaktimit të faqes (shih seksionin përkatës të manualit). Zakonisht përdoret si etiketë Llogaritja e variablave. Ju gjithashtu mund të krijoni një funksion për të llogaritur numrat, për shembull, variablat mund të ndahen (/ ), të shumëzohen (* ), të shtohen (+ ) dhe të zbriten (-). Për ta bërë këtë, mjafton të shkruani një variabël më shumë, për shembull $s . Ndryshorja $s do të jetë përgjegjëse për rezultatin. Pra, në një shembull. Le të përpiqemi të bëjmë funksione të ndryshme llogaritjet me shifra: Kështu që, variabli $s - përgjegjës për rezultatin e marrë gjatë shtimit të vlerave; ndryshorja $h - përgjegjëse për rezultatin e marrë gjatë zbritjes së vlerave; ndryshorja $p - përgjegjëse për rezultatin e marrë gjatë shumëzimit të vlerave; ndryshorja $x - është përgjegjëse për rezultatin e marrë gjatë pjesëtimit të vlerave. Tani do të shihni dobinë e shmangies së variablave. Le të themi se duhet të shfaqni emrat me dy thonjëza " " në ekranin e monitorit, për shembull, Styopka punon në PJSC "KMZ". Nëse shkruani në kodin PHP si kjo: Atëherë do të përfundoni me këtë gabim të bukur: Arsyeja e këtij gabimi është thonjëza të dyfishta në fjalën: $name = "Stepka punon në PAO " KMZ " "; Do të jetë e drejtë. Kjo bëhet me "\". Shembull: Rezultati do të jetë si ky: Për të qenë i sinqertë, nuk e kam përdorur kurrë këtë funksion në praktikë. Por unë duhet t'ju tregoj për docking. Le të përpiqemi të lidhim variablin $a me $f. Kjo bëhet me pikën e zakonshme". ". Ky do të jetë rezultati: Sot ju ngarkova me një teori, por në mësimin tjetër do të vazhdojmë trajnim praktik, dhe shikoni vetë se si funksionojnë variablat në PHP. Le të përpiqemi t'i shfaqim të gjithë këta shembuj në ekran me rezultatet. Do të njiheni me operatorin e daljes "echo". Përveç kësaj, ju gjithashtu mund të përdorni variablat e posaçëm të paracaktuar në vijim, të cilat janë të rëndësishme vetëm në shabllonet HTML. Variablat për përdorim vetëm në shabllonet e faqeve të seksioneve: Këto variabla mund të përdoren vetëm në shabllonet e faqeve të seksioneve. Ato janë të vlefshme në të gjitha formatet e daljes të bazuara në HTML (Html ​​Help, Browser Help, eBook dhe Help studio vizuale/ Ndihmë MS 2.0). E ndryshueshme <%DOCTYPE%> Fut etiketën e saktë DOCTYPE në fillim të faqeve të daljes HTML. Ky variabël është qendror për të gjithë shabllonet dhe nuk duhet hequr. Nëse e hiqni atë, do të merrni një mesazh gabimi nga përpiluesi. <%DOCCHARSET%> Insertet informacion të saktë grup karakteresh në meta etiketat në fillim të faqeve të daljes HTML. Ky variabël është qendror për të gjithë shabllonet dhe nuk duhet hequr. Nëse e hiqni atë, do të merrni një mesazh gabimi nga përpiluesi. <%STYLESHEET%> Fut një lidhje në një tabelë stilet css, i cili përmban të gjithë informacionin e stilit për projektin tuaj. Ky variabël është qendror për të gjithë shabllonet dhe nuk duhet hequr. Nëse e hiqni atë, do të merrni një mesazh gabimi nga përpiluesi. <%TOPIC_HEADER%> Fut një titull seksioni aktual nëse ekziston. Nëse seksioni aktual nuk ka titull, vlera e kësaj ndryshore është zero. Kjo mund të ndryshojë nga kreu i seksionit të futur me<%TOPIC_TITLE%> . <%TOPIC_HEADER_TEXT%> Fut titullin e seksionit aktual si tekst i thjeshtë. Kjo është veçanërisht e dobishme nëse titujt e dizajnit tuaj janë të ndryshëm dhe më të gjatë se titujt e Përmbajtjes me të cilët janë futur<%TOPIC_TITLE%> . Kjo përdoret kryesisht për optimizimin e motorëve të kërkimit, për të cilin do ta futni në meta etiketën e përshkrimit, si kjo: <%TOPIC_TEXT%> Fut tekstin kryesor të seksionit, domethënë mesazhin e seksionit, i cili redaktohet dhe formatohet në projektin tuaj në redaktuesin Help & Manual. Kjo është ndryshorja më e rëndësishme - nëse e shpërfillni, ndarjet tuaja do të jenë bosh! <%TOPIC_BREADCRUMBS%> Gjeneron një grup "lidhje navigimi" të gjurmëve të bukës në seksionet mbi seksionin aktual në pemën e Përmbajtjes. Kjo variabël është bosh në seksione niveli më i lartë. Në seksionet e nivelit të dytë dhe më poshtë, ndryshorja gjeneron një seri lidhjesh në formatin Link1 > Link2 > Link3 ... Seksioni aktual nuk përfshihet në seri. Nëse dëshironi të vendosni titullin aktual të seksionit në fund të gjurmës së bukës, mund ta bëni këtë me variablin<%TOPIC_TITLE%>(Shikoni më poshtë). Variabli i gjurmës së thërrimeve është bosh në seksione në seksionin Seksionet e padukshme. Kjo variabël ka një çift kushtesh korresponduese: dhe . Këto kushte mund të përdoren për të futur një gjurmë vetëm kur është e përshtatshme, dhe për të futur përmbajtje alternative kur nuk është e përshtatshme. Variablat për përdorim vetëm në Web Help: Të gjitha variablat e mbetur janë të rëndësishme vetëm në Ndihma e shfletuesit(HTML): Variablat globale për të gjithë shabllonet e Ndihmës së Uebit: E ndryshueshme <%HREF_TOP_PAGE%> <%HREF_CONTENT_PAGE%> <%HREF_INDEX_PAGE%> <%HREF_SEARCH_PAGE%> Variablat vetëm për shabllonin e vendosjes së grupeve të kornizave: E ndryshueshme <%HREF_CONTENT_PAGE_DYN%> <%HREF_CONTENT_PAGE_STATIC%> <%NAVIGATION_SCRIPT%> Fut skriptin e lundrimit të kërkuar nga korniza kryesore. Variablat vetëm për shabllonin e përmbajtjes: E ndryshueshme Artikujt kryesorë të lidhur Si të ktheni një smartphone të humbur ose të vjedhur Si të gjeni një telefon të humbur të vjedhur Sa kushton një ngastër me Aliexpress? Kush e shpiku i pari llambën inkandeshente Kategoritë: Programet Siguria Windows 10 Hekuri Windows 8 Në kontakt me Gabimet © 2022 bumotors.ru. Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ.