Väikeste tüütuste lahendamine veebis stiilse [Firefox ja Chrome] abil

Väikeste tüütuste lahendamine veebis stiilse [Firefox ja Chrome] abil

Veebidisaineritel on peaaegu võimatu töö. Nad peavad välja pakkuma ühe disaini, mis meeldib kõigile. Kui räägite sellisest teenusest nagu Gmail, mida kasutavad lugematud miljonid inimesed üle kogu maailma, võite 'peaaegu' osa tõesti maha jätta - see on lihtsalt võimatu. Isegi kui enamikule inimestele meeldib ümberkujundamine, leidub alati kasutajaid, kellele uus välimus tõesti ei meeldi.





Mõnikord on neid kasutajaid piisavalt, et sundida ettevõtet taganema, nagu Google hiljuti Gmaili ikooninuppudega tegi. Aga mis siis, kui teil on midagi tõesti vihkan ja ettevõte ei muuda seda tagasi? Kas olete sellega igavesti kinni? Tänu kasutajastiilidele saate selliseid probleeme ise lahendada.



Tutvustame stiilset

Stiilne on tasuta lisandmoodul, mis on saadaval mõlemale Firefox ja Chrome ja see võimaldab teil teha midagi päris maagilist - rakendage oma stiilid veebilehe elementidele. Isegi kui te pole veebiarendaja ega ole oma elus kunagi CSS -i kirjutanud, on see palju lihtsam kui tundub. Saate kasutada stiilset veebisaitide täielikuks muutmiseks (nagu ma teile järgmises osas näitan), kuid veelgi olulisem on see, et saate kasutada stiilset, et väikseid pahandusi mõne minutiga kõrvaldada.





Näiteks oli mul probleem Gmaili fondi vaikimisi suurusega. Liides oli korras - ma ei tahtnud oma brauseriga sisse suumida (Ctrl +), sest see suurendaks kõigi liidese elementide suurust ja oleks tõesti kole. Tahtsin lihtsalt võimalust sõnumi fonti veidi suuremaks muuta.

Stiilsega oli see tõesti lihtne ja ma näitan teile, kuidas. Kuid enne, kui vaatame oma kasutajastiilide loomist, räägime teiste inimeste töö võimendamisest.



UserStyles.org

Kui midagi närvidele käib, on täiesti võimalik, et te pole üksi. UserStyles.org on veebisait, mis võimaldab kasutajatel oma loodud stiile jagada. Eespool näete stiili ( Lisage tööriistariba ikoonidele silte ) soovitas MakeUseOf kommentaator RandyN vastuseks meie loole Gmaili ikooninuppude kohta. See stiil võimaldab teil ikoone hoida, kuid lisada tekstisilte - midagi, mida Google ei luba teil teha.

UserStyles.org on suurepärane, kuid mitte täiuslik. Mõned kujundused püüavad teha liiga palju (muuta veebisaidi välimust täielikult) ja mõned on mõeldud veebisaitide vanade versioonide jaoks ja on nüüd katki. Kui proovite midagi väikest parandada ja te ei leia seda saidilt UserStyles.org, on võib -olla teie parim viis seda ise teha.



Oma lihtsa kasutajastiili loomine

Oma kasutajastiili loomiseks peate esmalt teadma, millist lehe elementi proovite muuta ja seejärel millist muudatust soovite teha. Niisiis, alustamiseks paremklõpsake seda, mida soovite muuta, ja valige Kontrollige elementi . Peaksite nägema midagi sellist:

Firefox muudab ülejäänud lehe tumedamaks ja tõmbab valitud elemendi ümber väga selge raami. Selle elemendi kohal on tekst, mis ütleb div#2d6.ii.gt.adP.adO , on hunnik CSS -klasse koos ühe ID -ga (osa, mis algab #-ga). See on valija, mis mõjutab selle elemendi stiili. Ekraani allosas on navigeerimisriba, mis võimaldab teil läbida DOM -puu 'või lihtsamate sõnadega liikuge üles ja alla elementide hierarhias, mis viib valitud elemendini.



Mängu nimi on siin valida stiil, mida soovite kujundada, ja muuta valik mitte nii kitsaks, et see ei mõjuta kõike, mida soovite mõjutada, ega ka nii laialdast, et see segaks muid asju.

Vajutasin ühe elemendi kõrgemale, div.gs , lihtsalt sellepärast, et mulle meeldib selle nimi (tundub nagu midagi, mis ei muutu liiga kiiresti, kuid see on minu täielik oletus). See mõjutab kogu sõnumipiirkonda. Kui ala, mida soovite kujundada, on valitud, klõpsake nuppu Stiil nupu avamiseks paremas alanurgas Reeglid leib:

Ma tean, see on alguses hirmutav. Kuid siin näete erinevaid CSS-reegleid, mis mõjutavad teie valitud elementi, ja siin saate teha oma ajutisi muudatusi ning näha nende mõju lehele reaalajas ilma seda uuesti laadimata. Aga mida peaksite muutma? Klõpsake Omadused nuppu ja tühjendage märkeruut Ainult kasutaja stiilid :

Siin näete täielikku nimekirja kõik CSS reeglid. Saate loendis alla kerida, kuni leiate reegli, mis vastab teie vajadustele (meie puhul fondisuurus), ja isegi selgituslehe avamiseks klõpsake selle kõrval asuvat küsimärki. Niisiis, nüüd me teame, et tahame kohandada fondisuuruse omadust kõigi div-elementide jaoks, millel on klass ' gs '(kirjutatud lühikirjas nagu div.gs ).

Ainus küsimus, mis me tahame, on selle väärtus. Selleks läheme tagasi reeglite paanile ja hakkame mängima:

40 pikslit võib olla natuke hull, kuid saate üldise ettekujutuse. Mängige sellega ja lisage julgelt muid omadusi, kuni saate soovitud välimuse. Ärge sulgege lehte, sest teie muudatused on mitte salvestatud kuhugi.

Uue stiili salvestamine

Kui olete selle saidi osa välja näinud just selline, nagu soovite, on aeg see salvestada. Klõpsake Stiilne ikooni lisandmooduliribal ja valige Kirjutage uus stiil . Stiilne soovib siis teada, millistel lehtedel peaks uut stiili rakendama - meie puhul valige teine ​​võimalus, mail.google.com . Järgmisena näete seda dialoogi:

Olen selle juba täitnud. Ilmselgelt valisin stiilile nime ja mõned sildid. Kuid tegelik asi juhtub koodi sees: rida 3 oli juba olemas - stiilne pani selle paika, et see teaks, millistel lehtedel stiil kehtib. Aga rida 5-7 on minu oma. Analüüsime neid:

5. rida: div.gs { - selle osa peaksite ära tundma. See on element, mille oleme otsustanud kujundada. Avatraktor tähendab, et kirjutame nüüd mõned CSS -reeglid. 6. rida: font-size: 20px! oluline; -see on reegel, mida soovime muuta (fondisuurus), millele järgneb selle uus määratlus (20 pikslit) ja seejärel! Oluline deklaratsioon, mis tähendab, et Firefox järgib seda reeglit isegi siis, kui tekstile lähemal olev element püüab määrata fondi suurus teistsuguseks.Rida 7:} - stiilimääratluse sulgemine.

Seejärel klõpsake nuppu Eelvaade ja imetlege oma tööd:

Ja lõpuks, kui näete, et see töötab, klõpsake Salvesta.

See ei ole täielik juhend

Ma tean hästi, et selle lühikese õpetuse ühe postituse piires hoidmiseks olen pidanud tegema mitmeid hüppeid. Kui olete teel segaduses, võtke palun minu vabandus vastu. CSS on esialgu keeruline, kuid kui see on selge, pole see nii keeruline - ja veebisaitide kohapealne kohandamine on endiselt üks parimaid viise õppimiseks.

Kui olete millestki segaduses, küsige minult allpool ja ma annan endast parima, et aidata.

miks mu kõlarid ei tööta
Jaga Jaga Piiksuma E -post 5 näpunäidet VirtualBox Linuxi masinate ülelaadimiseks

Kas olete väsinud virtuaalmasinate halvast jõudlusest? Siin on, mida peaksite tegema oma VirtualBoxi jõudluse suurendamiseks.

Loe edasi Seotud teemad
  • Brauserid
  • Veebiarendus
  • Veebimeistri tööriistad
  • Mozilla Firefox
  • Google Chrome
  • Veebidisain
Autori kohta Erez Zukerman(Avaldatud 288 artiklit) Rohkem Erez Zukermanilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin