Home-theater-designers![Cara Memperbaiki Gangguan Kecil di Web Dengan Bergaya [Firefox & Chrome]](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
Pereka web mempunyai pekerjaan yang hampir mustahil. Mereka perlu menghasilkan satu reka bentuk yang menyenangkan semua orang. Apabila bercakap mengenai perkhidmatan seperti Gmail, yang digunakan oleh berjuta-juta orang di seluruh dunia, anda benar-benar boleh melepaskan bahagian 'hampir' - tidak mungkin. Walaupun reka bentuk semula disukai oleh kebanyakan orang, akan selalu ada pengguna yang sangat tidak menyukai penampilan baru.
Kadang-kadang ada cukup banyak pengguna ini untuk memaksa syarikat untuk mundur, seperti yang dilakukan Google baru-baru ini dengan butang ikon Gmail. Tetapi bagaimana jika ada sesuatu yang anda sungguh benci, dan syarikat tidak mengubahnya semula? Adakah anda terjebak dengannya selama-lamanya? Terima kasih kepada gaya pengguna, anda boleh menyelesaikan masalah tersebut sendiri.
Memperkenalkan Bergaya
Stylish adalah tambahan percuma yang tersedia untuk kedua-duanya Firefox dan Chrome , dan ini membolehkan anda melakukan sesuatu yang cukup ajaib - menerapkan gaya anda sendiri ke elemen halaman web. Walaupun anda bukan pembangun web dan anda tidak pernah menulis sedikit CSS dalam hidup anda, ini jauh lebih mudah daripada kedengarannya. Anda boleh menggunakan Stylish untuk mengubah laman web sepenuhnya (seperti yang akan saya tunjukkan pada bahagian seterusnya), tetapi yang lebih penting lagi, anda boleh menggunakan Stylish untuk memperbaiki gangguan kecil dalam beberapa minit.
Sebagai contoh, saya menghadapi masalah dengan saiz fon lalai di Gmail. Antaramuka baik - saya tidak mahu memperbesar (Ctrl +) dengan penyemak imbas saya, kerana itu akan meningkatkan saiz semua elemen antara muka dan benar-benar jelek. Saya hanya mahukan cara untuk menjadikan fon mesej sedikit lebih besar.
Dengan Bergaya, sungguh mudah, dan saya akan menunjukkan caranya. Tetapi sebelum kita melihat cara membuat gaya pengguna anda sendiri, mari kita bincangkan tentang memanfaatkan kerja orang lain.
PenggunaStyles.org
Sekiranya ada sesuatu yang mengganggu saraf anda, sangat mungkin anda tidak bersendirian. PenggunaStyles.org adalah laman web yang membolehkan pengguna berkongsi gaya yang mereka buat. Di atas anda dapat melihat gaya ( Tambahkan label ke ikon bar alat ) disyorkan oleh pengulas MakeUseOf RandyN untuk membalas kisah kami mengenai butang ikon Gmail. Gaya ini membolehkan anda menyimpan ikon, tetapi menambahkan label teks - sesuatu yang tidak akan dibolehkan oleh Google.
UserStyles.org hebat, tetapi tidak sempurna. Sebilangan reka bentuk cuba dilakukan terlalu banyak (mengubah penampilan laman web sepenuhnya), dan beberapa reka bentuk untuk laman web versi lama dan kini rosak. Sekiranya anda berusaha memperbaiki sesuatu yang kecil dan tidak dapat mencarinya di UserStyles.org, mungkin tindakan terbaik anda adalah melakukannya sendiri.
Membuat Gaya Pengguna Sederhana Anda Sendiri
Untuk membuat gaya pengguna anda sendiri, pertama-tama anda perlu mengetahui elemen halaman yang ingin anda ubah, dan kemudian perubahan apa yang ingin anda buat. Jadi, untuk memulakan, klik kanan apa sahaja yang anda mahu ubah, dan pilih Periksa Elemen . Anda mesti melihat sesuatu seperti ini:
Firefox menggelapkan seluruh halaman, dan melukis bingkai yang sangat jelas di sekitar elemen yang telah anda pilih. Di atas elemen itu, teks yang mengatakan div # 2d6.ii.gt.adP.adO , adalah sekumpulan kelas CSS, bersama dengan satu ID (bahagian yang bermula dengan #). Pemilih inilah yang mempengaruhi gaya untuk elemen ini. Di bahagian bawah skrin terdapat bar navigasi yang membolehkan anda ' melintasi pokok DOM ', atau dengan kata yang lebih sederhana, naik dan turun dalam hierarki elemen yang menuju ke elemen yang anda pilih.
Nama permainan di sini adalah untuk memilih elemen yang ingin anda gayakan, dan membuat pemilihannya tidak begitu sempit sehingga tidak akan mempengaruhi semua yang ingin anda kesan, atau begitu luas sehingga akan mengacaukan perkara lain.
Saya mengklik satu elemen lebih tinggi, div.gs , hanya kerana saya suka namanya (nampaknya sesuatu yang tidak akan berubah terlalu cepat, tetapi itu adalah tekaan lengkap dari pihak saya). Ia mempengaruhi keseluruhan kawasan mesej. Setelah kawasan yang anda ingin gayakan dipilih, klik Gaya butang di sudut kanan bawah, untuk membuka Peraturan roti:
Saya tahu, ini menakutkan pada mulanya. Tetapi di sinilah anda melihat peraturan CSS yang berbeza yang mempengaruhi elemen yang anda pilih, dan di sinilah anda dapat membuat pengubahsuaian sementara anda sendiri dan melihat kesannya pada halaman dalam masa nyata, tanpa memuatkannya semula. Tetapi apa yang harus anda ubah? Klik Hartanah butang dan hapus centang Hanya gaya pengguna :
Di sini anda dapat melihat senarai lengkap semua Peraturan CSS. Anda boleh menatal ke bawah senarai sehingga anda menemui peraturan yang masuk akal untuk apa yang anda perlukan (ukuran fon dalam kes kami), dan bahkan mengklik tanda tanya di sebelahnya untuk membuka halaman penjelasan. Jadi, sekarang kita tahu bahawa kita ingin mengubah sifat saiz fon untuk semua elemen div yang mempunyai kelas ' gs '(ditulis dalam singkatan sebagai div.gs ).
Satu-satunya persoalan yang tinggal adalah apa yang kita mahukan nilainya. Untuk itu, kami kembali ke panel Peraturan dan mula bermain-main:
40 piksel mungkin agak gila, tetapi anda mendapat idea umum. Main-main dengan ini, dan jangan ragu untuk menambah sifat lain, sehingga anda mendapat penampilan yang anda inginkan. Pastikan tidak menutup halaman, kerana perubahan anda adalah tidak disimpan di mana sahaja.
Menyimpan Gaya Baru Anda
Sebaik sahaja anda mendapat bahagian laman web ini seperti yang anda mahukan, inilah masanya untuk menyimpannya. Klik Bergaya ikon di bar tambah, dan pilih Tulis gaya baru . Bergaya kemudian ingin tahu di halaman mana yang harus menerapkan gaya baru - dalam kes kami, pilih pilihan kedua, mel.google.com . Seterusnya, anda akan melihat dialog ini:
Saya sudah mengisinya. Jelas, saya memilih nama dan beberapa tanda untuk gaya. Tetapi perkara sebenar berlaku dalam kod: Baris 3 sudah ada - Bergaya meletakkannya di tempat sehingga dapat mengetahui pada halaman apa gaya itu berlaku. Tetapi baris 5-7 adalah milik saya. Mari kita analisisnya:
Baris 5: div.gs { - bahagian ini yang harus anda kenali. Inilah elemen yang telah kami putuskan untuk digayakan. Pendakap pembuka bermaksud kita sekarang akan menulis beberapa peraturan CSS. Garis 6: saiz fon: 20px! penting; - itulah peraturan yang ingin kita ubah (ukuran font), diikuti dengan definisi barunya (20 piksel), dan kemudian dengan pernyataan penting! Yang bermaksud Firefox akan mematuhi peraturan ini walaupun elemen yang lebih dekat dengan teks cuba ditetapkan saiz fon untuk sesuatu yang berbeza.Laris 7:} - menutup definisi gaya.
Seterusnya, klik Pratonton dan kagumi karya anda:
Dan akhirnya, setelah anda melihat bahawa ia berfungsi, klik Jimat.
Ini Bukan Panduan Lengkap
Saya sedia maklum bahawa untuk memastikan tutorial pendek ini berada dalam batas satu siaran, saya harus membuat beberapa lompatan dan lompatan. Sekiranya anda keliru di sepanjang jalan, terimalah permintaan maaf saya. CSS pada mulanya sukar, tetapi tidak begitu rumit setelah anda mengetahui - dan menyesuaikan laman web secara tempatan tetap menjadi salah satu kaedah terbaik untuk belajar.
Sekiranya anda keliru dengan apa-apa, sila tanya saya di bawah dan saya akan berusaha sedaya upaya.
cara menjalankan permainan windows 98 di windows 10Berkongsi Berkongsi Tweet E-mel 5 Petua untuk Meningkatkan Mesin Linux VirtualBox Anda
Bosan dengan prestasi buruk yang ditawarkan oleh mesin maya? Inilah yang harus anda lakukan untuk meningkatkan prestasi VirtualBox anda.
Baca Seterusnya Topik-topik yang berkaitan- Penyemak Imbas
- Pembangunan Web
- Alat Webmaster
- Mozilla Firefox
- Google Chrome
- Reka Bentuk Web
Langgan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan