Paano Ayusin ang Maliit na Mga Pagkakainis sa Web Sa Naka-istilong [Firefox & Chrome]

Paano Ayusin ang Maliit na Mga Pagkakainis sa Web Sa Naka-istilong [Firefox & Chrome]

Ang mga taga-disenyo ng web ay may halos imposibleng trabaho. Kailangan nilang magkaroon ng isang disenyo na nakalulugod sa lahat. Kapag pinag-uusapan ang tungkol sa isang serbisyo tulad ng Gmail, na ginagamit ng hindi mabilang na milyun-milyong tao sa buong mundo, maaari mo talagang i-drop ang 'halos' bahagi - imposible lamang. Kahit na ang isang disenyo ng disenyo ay muling nagustuhan ng karamihan sa mga tao, palaging may mga gumagamit na talagang hindi gusto ang bagong hitsura.





Minsan may sapat na mga gumagamit na ito upang pilitin ang isang kumpanya na mag-backtrack, tulad ng ginawa kamakailan ng Google sa mga pindutan ng icon ng Gmail. Ngunit paano kung may isang bagay ka Talaga galit, at hindi ito binabago ng kumpanya? Natigil ka ba dito nang tuluyan? Salamat sa mga istilo ng gumagamit, maaari mong ayusin ang iyong mga problema sa iyong sarili.



Ipinakikilala ang naka-istilong

Ang naka-istilong ay isang libreng add-on na magagamit kapwa para sa Firefox at Chrome , at hinahayaan kang gumawa ng isang bagay na medyo mahiwagang - ilapat ang iyong sariling mga istilo sa mga elemento ng webpage. Kahit na hindi ka isang developer ng web at hindi ka pa nakasulat ng kaunting CSS sa iyong buhay, mas madali ito kaysa sa tunog nito. Maaari mong gamitin ang naka-istilong upang ganap na ibahin ang anyo ang mga website (tulad ng ipapakita ko sa iyo sa susunod na seksyon), ngunit higit na mahalaga, maaari mong gamitin ang naka-istilong upang ayusin ang maliliit na inis sa ilang minuto.





Halimbawa, nagkaroon ako ng problema sa default na laki ng font sa Gmail. Mabuti ang interface - Ayokong mag-zoom in (Ctrl +) sa aking browser, dahil tataas nito ang laki ng lahat ng mga elemento ng interface at talagang pangit. Nais ko lamang ng isang paraan upang gawing mas malaki ang font ng mensahe.

Sa naka-istilong, ito ay talagang simple, at ipapakita ko sa iyo kung paano. Ngunit bago namin tingnan ang paglikha ng iyong sariling mga istilo ng gumagamit, pag-usapan muna natin ang tungkol sa paggamit ng trabaho ng ibang tao.



UserStyles.org

Kung may nakakakuha ng nerbiyos mo, posible na ikaw ay hindi mag-isa. UserStyles.org ay isang website na hinahayaan ang mga gumagamit na magbahagi ng mga istilo na nilikha nila. Sa itaas maaari mong makita ang isang estilo ( Magdagdag ng mga label sa mga icon ng toolbar ) inirekomenda ng komentarista ng MakeUseOf na si RandyN bilang tugon sa aming kwento tungkol sa mga pindutan ng icon ng Gmail. Hinahayaan ka ng istilong ito na panatilihin ang mga icon, ngunit magdagdag ng mga label ng teksto - isang bagay na hindi papayag sa iyo ang Google.

Ang UserStyles.org ay mahusay, ngunit hindi ito perpekto. Ang ilan sa mga disenyo ay subukang gumawa ng labis (baguhin ang hitsura ng isang website), at ang ilan ay para sa mga lumang bersyon ng mga website at nasira na ngayon. Kung sinusubukan mong ayusin ang isang maliit at hindi ito mahahanap sa UserStyles.org, marahil ang iyong pinakamahusay na landas ng pagkilos ay gawin ito nang mag-isa.



Lumilikha ng Iyong Sariling Simple Estilo ng Gumagamit

Upang lumikha ng iyong sariling istilo ng gumagamit, kailangan mo munang malaman kung anong elemento ng pahina ang sinusubukan mong baguhin, at pagkatapos kung anong pagbabago ang nais mong gawin. Kaya, upang makapagsimula, mag-right click sa kung ano man ang nais mong baguhin, at pumili Suriin ang Elemento . Dapat mong makita ang isang bagay tulad nito:

Pinapadilim ng Firefox ang natitirang pahina, at kumukuha ng isang napakalinaw na frame sa paligid ng sangkap na iyong napili. Sa itaas ng sangkap na iyon, ang teksto na nagsasabing div # 2d6.ii.gt.adP.adO , ay isang pangkat ng mga klase sa CSS, kasama ang isang ID (ang bahagi na nagsisimula sa #). Ito ang tagapili na nakakaapekto sa estilo para sa elementong ito. Kasama sa ilalim ng screen mayroong isang nabigasyon bar na hinahayaan kang ' daanan ang puno ng DOM ', o sa mas simpleng mga salita, pataas at pababa sa hierarchy ng mga elemento na humahantong sa sangkap na iyong napili.



Ang pangalan ng laro dito ay piliin ang elemento na nais mong i-istilo, at gawing hindi masyadong makitid ang pagpipilian na hindi ito makakaapekto sa lahat ng nais mong maapektuhan, o kaya't napakalawak na guguluhin ang iba pang mga bagay.

Nag-click ako sa isang elemento na mas mataas, div.gs , dahil lang sa gusto ko ang pangalan nito (parang isang bagay na hindi magbabago sa lalong madaling panahon, ngunit iyon ay isang kumpletong hula sa aking bahagi). Naaapektuhan nito ang buong lugar ng mensahe. Kapag napili na ang lugar na nais mong i-istilo, i-click ang Istilo na pindutan sa kanang sulok sa ibaba, upang buksan ang Panuntunan tinapay:

Alam ko, nakakatakot sa una. Ngunit dito mo makikita ang iba't ibang mga panuntunan sa CSS na nakakaapekto sa sangkap na iyong napili, at dito ka makakagawa ng iyong sariling pansamantalang mga pagbabago at makita ang epekto nito sa pahina nang real-time, nang hindi na-reload ito. Ngunit ano ang dapat mong baguhin? I-click ang Ari-arian pindutan at alisan ng check Mga istilo ng gumagamit lamang :

Makikita mo rito ang isang kumpletong listahan ng lahat Panuntunan sa CSS. Maaari mong i-scroll pababa ang listahan hanggang sa makita mo ang isang patakaran na may katuturan para sa kung ano ang kailangan mo (laki ng font sa aming kaso), at i-click din ang marka ng tanong sa tabi nito upang magbukas ng isang pahina ng paliwanag. Kaya, ngayon alam namin na nais naming i-tweak ang laki ng font na pag-aari para sa lahat ng mga elemento ng div na may isang klase ng ' gs '(nakasulat sa maikling bilang div.gs ).

Ang natitirang tanong lamang ay kung ano ang nais nating maging halaga nito. Para doon, babalik kami sa pane ng Mga patakaran at magsimulang maglaro:

Ang 40 pixel ay maaaring medyo mabaliw, ngunit nakukuha mo ang pangkalahatang ideya. Maglaro dito, at huwag mag-atubiling magdagdag ng anumang iba pang mga pag-aari, hanggang sa makuha mo ang hitsura na iyong hinahanap. Tiyaking hindi isara ang pahina, dahil ang iyong mga pagbabago ay hindi nai-save kahit saan.

Sine-save ang Iyong Bagong Estilo

Kapag nakuha mo na ang bahaging ito ng site upang magmukhang kagustuhan mo, oras na upang i-save ito. I-click ang Naka-istilo icon sa add-on bar, at piliin Sumulat ng bagong istilo . Nais ng isang naka-istilong malaman sa kung anong mga pahina ang dapat itong ilapat ang bagong estilo - sa aming kaso, piliin ang pangalawang pagpipilian, mail.google.com . Susunod, makikita mo ang dayalogo na ito:

Napunan ko na ito. Malinaw na, pumili ako ng isang pangalan at ilang mga tag para sa estilo. Ngunit ang mga totoong bagay ay nangyayari sa loob ng code: Ang Line 3 ay naroroon na - Naka-istilong ilagay ito sa lugar upang malaman nito sa kung anong mga pahina ang nalalapat ng estilo. Ngunit ang linya 5-7 ay akin. Pag-aralan natin ang mga ito:

Linya 5: div.gs { - Ang bahaging ito ay dapat mong kilalanin. Ito ang sangkap na nagpasya kaming istilo. Ang pagbubukas ng suhay ay nangangahulugang magsusulat kami ngayon ng ilang mga panuntunan sa CSS. Linya 6: laki ng font: 20px! mahalaga; - iyon ang panuntunang nais naming baguhin (laki ng font), na sinusundan ng bagong kahulugan nito (20 pixel), at pagkatapos ay isang mahalagang pahayag, na nangangahulugang susundin ng Firefox ang panuntunang ito kahit na ang isang elemento na malapit sa teksto ay sumusubok na itakda ang laki ng font sa ibang bagay. Linya 7:} - pagsasara ng kahulugan ng estilo.

Susunod, i-click ang I-preview at mamangha sa iyong trabaho:

At sa wakas, sa sandaling makita mong gumagana ito, mag-click Magtipid

Hindi Ito Isang Kumpletong Gabay

Alam kong alam na upang mapanatili ang maikling tutorial na ito sa loob ng mga hangganan ng isang solong post, kinailangan kong gumawa ng maraming mga hakbang at paglukso. Kung ikaw ay nalilito sa daan, mangyaring tanggapin ang aking paghingi ng tawad. Ang CSS ay nakakalito sa una, ngunit hindi ito kumplikado sa sandaling makuha mo ito - at ang pagpapasadya ng mga website nang lokal ay mananatiling isa sa mga pinakamahusay na paraan upang malaman.

Kung nalito ka sa anumang bagay, mangyaring tanungin ako sa ibaba at gagawin ko ang aking makakaya upang makatulong.

kung paano subaybayan ang paggamit ng bandwidth ng bawat aparato sa wifi network
Magbahagi Magbahagi Mag-tweet Email 5 Mga Tip upang Supercharge ang Iyong Mga VirtualBox Linux Machine

Pagod na sa hindi magandang pagganap na inaalok ng mga virtual machine? Narito kung ano ang dapat mong gawin upang mapalakas ang pagganap ng VirtualBox.

Basahin Susunod Mga Kaugnay na Paksa
  • Mga Browser
  • Pag-unlad sa Web
  • Mga Tool sa Webmaster
  • Mozilla Firefox
  • Google Chrome
  • Disenyo ng web
Tungkol sa May-akda Erez Zukerman(288 Mga Artikulo Na-publish) Higit pa Mula kay Erez Zukerman

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe