Saya hanya dapat berbicara dengan akrab dengan Firefox, karena itulah browser utama saya. Saya akan mencoba untuk menjaga hal-hal umum di sini untuk memenuhi permintaan Anda 'ajari aku untuk menangkap ikan'. Untuk itu, saya akan memasukkan 2 contoh, milik Anda dan contoh lain yang memiliki lebih banyak pelajaran di dunia nyata. Pertama, kita akan mendapatkan beberapa alat untuk membuat pembuatan CSS pengguna lebih mudah.
- Perbarui ke Firefox terbaru. Beberapa versi terbaru memiliki perluasan alat pengawas situs web, jadi Anda menginginkannya.
- Opsional: Instal ekstensi Firebug yang memberi Anda alat pengawas situs yang jauh lebih kuat. (secara pribadi, saya tidak menggunakan Firebug untuk membuat CSS pengguna, tetapi saya menyertakan disebutkan di sini untuk kelengkapan)
- Instal ekstensi Bergaya . Ini adalah ekstensi CSS-sentris pengguna yang sangat menyederhanakan pembuatan CSS pengguna.
Nah, untuk benar-benar menulis sesuatu. Anda harus memiliki keakraban dasar dengan HTML dan CSS sebelum melanjutkan. W3Schools memiliki tutorial yang layak tersedia untuk membiasakan diri dengan struktur dasar dan sintaksis HTML dan CSS . Demi jawaban ini, saya akan menyertakan informasi yang cukup untuk mudah-mudahan membantu seorang pemula yang cukup untuk mendapatkan contoh yang dicapai.
- Arahkan ke halaman. (dalam kasus Anda, /unix// )
- Klik kanan pada elemen yang ingin Anda manipulasi. (cukup banyak di mana saja pada halaman untuk kasus ini, karena latar belakang mempengaruhi seluruh halaman)
- Pilih 'Periksa Elemen' dari menu pop-up. Ini menggunakan alat inspeksi terintegrasi Firefox, saya tidak akan membahas Firebug di sini, tetapi memiliki panel dan fitur yang serupa.
- Ini membuka panel di bagian bawah dan samping jendela Firefox. Di bagian bawah, Anda melihat HTML. Di sebelah kanan, Anda melihat aturan CSS untuk elemen halaman yang dipilih (yang akan menjadi hal yang Anda klik kanan). Di bagian bawah, klik di sekitar pada berbagai elemen untuk menavigasi. Halaman ini disusun menjadi pohon elemen, dan Anda dapat menutup atau memperluas setiap node di pohon. Saat Anda mengklik elemen, elemen yang dipilih akan disorot pada halaman itu sendiri.
- Secara umum, pada titik ini, Anda ingin memeriksa elemen yang ingin Anda manipulasi, bersama dengan elemen induknya (item yang mengandung elemen itu di pohon). Identifikasi elemen yang harus Anda manipulasi. Misalnya, jika Anda mengacaukan jawaban di halaman ini, Anda akan mulai dengan elemen <p> yang berisi teks jawaban, tetapi Anda ingin memasukkan semua hal di sekitar teks, seperti bagian atas / turun panah suara, informasi poster, tautan bagikan / edit / panji, dll. Jadi Anda menavigasi beberapa level ke tag <div> yang memiliki id "answer - ####" dan kelas dari "menjawab", karena itu adalah elemen yang berisi semua elemen ganti jendela dari sebuah jawaban. Klik di atasnya, dan Anda akan melihat bagian halaman web itu disorot. (Dalam hal ini, latar belakang halaman akan berada di dekat bagian atas, di dalam tag <body> . Gulir ke atas ke atas HTML, dan klik tag <body>.)
- Selanjutnya, Anda perlu mengidentifikasi properti CSS dari elemen ini yang ingin Anda manipulasi. Lihatlah CSS di sebelah kanan, dan temukan properti yang ingin Anda ubah. Secara pribadi, saya cukup baru untuk CSS, jadi pada titik ini, saya akan sering google 'css' + nama properti untuk mempelajari lebih lanjut tentang properti dan bagaimana perilakunya. Melanjutkan contoh saya di mana kita melihat jawaban SE, katakanlah kita ingin mengubah margin di sekitar jawaban. File all.css memiliki properti margin diatur ke 0px, tetapi jelas ada margin di sekitar elemen-elemen ini. Beberapa googling mengajarkan saya untuk mencari properti padding, karena itu juga dapat mempengaruhi margin di sekitar item. Benar saja, ada dua sifat yang terkait dengan bantalan yang ditetapkan pada jawaban, bantalan-bawah dan bantalan-atas. (untuk masalah spesifik Anda, Anda mencari gambar latar belakang, jadi cari 'latar belakang' di properti CSS. Anda akan melihat properti 'latar belakang' di dekat bagian atas. Ini berlaku untuk elemen tubuh laman itu. Googling " properti latar belakang css " untuk mempelajari cara kerja properti itu, menunjukkan kepada Anda bahwa properti itu dapat berisi warna atau URL ke gambar, bersama dengan berbagai pengubah. Setelah menavigasi sedikit untuk menggali cara kerja properti gambar latar , kami melihat beberapa informasi yang berguna, nilai default 'tidak ada' . Kami ingin mengembalikan gambar latar belakang ke nilai default, jadi kami akan memerlukan informasi itu.)
Sekarang kita menggunakan Stylish. Alternatif tanpa Gaya adalah mengedit file yang Anda posting dalam jawaban Anda. Stylish memungkinkan kita untuk dengan mudah mengelola banyak CSS pengguna situs. Stylish menambahkan ikon kecil ke jendela Firefox Anda, klik di atasnya lalu pergi "Tulis gaya baru" -> "Untuk" (situs ini) .com ". Berikan gaya Nama dan opsional beberapa tag. Kemudian Anda akan dapat untuk membedakan gaya ini sebagai yang berlaku untuk Superuser.com atau Stackexchange.com dll. Jendela ini memberi kami templat yang memungkinkan kami mengubah CSS hanya untuk domain ini. Jika Anda perlu mengubah CSS untuk URL tertentu, Anda dapat melakukan itu atau Anda juga bisa mendapatkan gaya kosong jika Anda ingin menulis CSS yang berlaku untuk semua situs, cukup pilih entri yang sesuai dari menu Stylish. Untuk contoh modifikasi jawaban saya, Anda
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
}
Apa pun yang dimasukkan ke dalam blok @ -moz-document hanya akan berlaku untuk domain yang ada di dalam tanda kurung. Lihat item tebal di atas. Untuk mengubah padding untuk jawaban, Anda memperbarui kotak teks menjadi seperti ini:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
.answer {
padding-bottom:0px;
padding-top:0px;
}
}
Untuk memecah ini untuk orang-orang yang tidak tahu CSS, pertama-tama kita memilih kelas (ergo a "." Berlaku di awal. Jika kita memilih dengan ID, kita akan menempatkan "#" di sana.) Jawaban (jadi 'jawab'). Lalu kami membuka blok dengan kurung kurawal untuk mencantumkan properti dari item yang dipilih yang akan kami ubah. Pertama-tama kita mengubah padding-bottom dan mengaturnya ke 0 piksel . Kemudian kami melakukan hal yang sama untuk padding-top . Setiap properti dan nilai diakhiri dengan titik koma. Lalu kami menutup blok dengan kurung kurawal. (dalam contoh unix Anda, Anda akan melakukan ini:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none;
}
}
Di sini Anda sedang mengerjakan domain unix.stackexchange.com. Kami memilih elemen "body" (ketika memilih elemen HTML juga merupakan pemilih CSS, tidak perlu #s atau .s di sini). Kami sedang mengatur latar belakang tidak ada.)
- Saya menarik perhatian Anda ke tombol di bagian bawah jendela pengeditan gaya. "Pratinjau" akan memberlakukan perubahan yang Anda ketikkan, sehingga Anda dapat melihatnya beraksi. "Simpan" akan menyimpan perubahan. "Batal" sangat jelas. Untuk hampir semua perubahan CSS pengguna yang Anda lakukan, Anda ingin mengklik Pratinjau untuk melihat apakah perubahan itu berfungsi seperti yang Anda inginkan. Dalam kedua contoh, Anda akan melihat bahwa itu tidak berhasil. Ada alasan penting untuk ini, yang sekarang saya bahas.
CSS memiliki hierarki prioritas tertentu untuk menentukan cara menangani CSS pengguna vs. penulis CSS vs. browser CSS. Biasanya, kami memiliki CSS untuk halaman yang ditulis oleh penulis halaman, dan itu akan berisi aturan untuk banyak elemen di halaman itu. Ketika aturan tidak didefinisikan oleh penulis, tetapi ada di CSS pengguna Anda, maka browser Anda akan menggunakannya. Jika tak satu pun dari mereka memiliki CSS yang ditetapkan untuk elemen itu, maka browser menggunakan aturan CSS defaultnya sendiri pada elemen itu. Jadi ada hierarki bobot di sini, penulis> pengguna> peramban. Jika sesuatu didefinisikan dalam ketiganya, maka CSS dengan bobot lebih tinggi akan menang dan CSS-nya mulai berlaku. Ada cara untuk mendapatkan CSS berbobot lebih rendah untuk mengesampingkan CSS berbobot lebih tinggi, dan itu dengan menetapkannya penting. Anda melakukan ini dengan memasukkan "! Penting"
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none !important;
}
}
Sekarang klik Preview lagi, dan Anda akan melihat bahwa CSS pengguna Anda berfungsi. Klik Simpan dan nikmati.
Jika Anda menggunakan Chrome, inspektur bawaannya sudah sangat bagus. Ada juga ekstensi yang bergaya . Anda memasukkan modifikasi CSS sedikit berbeda: pilih "Kelola gaya terinstal" lalu klik "Tulis gaya baru", masukkan situs atau pola URL untuk menerapkan pos di bawah kotak kode, dan masukkan hanya CSS khusus domain di " kotak kode ", mis
body {
background:none !important;
}
Anda melakukan apa yang akan Anda lakukan jika Anda meletakkan di situs
lalu tambahkan
sebelum
}. Berikut adalah sedikit detail tentang penggunaan non-pengguna css yang masih menjelaskannya untuk Anda gunakan.sumber