Sejak penemuan bahasa markup hypertext, HTML, konsep tata letak dan tata letak dokumen web telah berubah secara dramatis. Dengan dukungan hampir lengkap dari browser populer untuk standar CSS dan CSS2 cascading style sheet, telah menjadi mungkin untuk mempengaruhi hampir semua aspek dari presentasi visual dokumen. Misalnya, Anda dapat membuat latar belakang tautan berwarna, diisi dengan beberapa gambar, dan juga berubah tergantung pada tindakan pengguna.
Diperlukan
- - kemampuan untuk mengedit teks dokumen atau teks lembar gaya dokumen;
- - editor teks yang memungkinkan Anda menyimpan dokumen dalam penyandian asli.
instruksi
Langkah 1
Buat latar belakang tautan secara seragam diisi dengan warna acak dengan menambahkan informasi gaya sebaris ke elemen A. Tambahkan gaya ke atribut elemen A yang sesuai dengan tautan yang latar belakangnya ingin Anda ubah. Dalam konten atribut gaya, tempatkan properti CSS warna latar belakang dengan nilai yang diberikan, yang merupakan pengidentifikasi yang benar untuk warna latar belakang. Misalnya, mungkin terlihat seperti ini:
teks tautan
Langkah 2
Tentukan latar belakang tautan di lembar gaya eksternal atau yang disematkan di dokumen Anda. Dalam lembar gaya yang sesuai, tambahkan seperangkat aturan yang ditangani oleh pemilih dengan tingkat kekhususan yang dapat diterima. Pada ruleset, masukkan properti background-color dengan cara yang sama seperti pada langkah sebelumnya. Pilih spesifisitas pemilih berdasarkan aturan cascading CSS2 dan cakupan yang diinginkan. Jadi, jika Anda perlu mengatur warna hanya satu tautan, masuk akal untuk menggunakan pemilih ID, jika ada beberapa tautan seperti itu, lebih baik menggunakan pemilih atribut berdasarkan nilai kelas.
Misalnya, untuk menyetel latar belakang hijau untuk tautan tertentu dalam dokumen, Anda dapat menambahkan seperangkat aturan ke lembar gaya:
#ID_HIJAU
{
warna-latar belakang: # 00FF00;
}
Anda juga harus menyetel atribut ID dari elemen A yang sesuai dengan tautan yang diinginkan ke ID_GREEN:
teks tautan
Langkah 3
Isi latar belakang tautan dengan gambar. Ikuti metode yang dijelaskan dalam langkah satu dan dua, tetapi alih-alih properti CSS warna latar, gunakan gambar latar. Sebagai contoh:
teks tautan
Jika perlu, tambahkan properti background-repeat ke aturan CSS yang ditetapkan untuk menentukan opsi untuk menduplikasi gambar latar belakang secara horizontal dan vertikal.
Langkah 4
Buat latar belakang tautan berubah saat Anda mengarahkan kursor ke atasnya atau saat fokus berpindah. Tambahkan kumpulan aturan ke lembar gaya dokumen eksternal atau yang disematkan yang menentukan latar belakang tautan atau grup tautan dalam status berbeda. Gunakan ID dan pemilih atribut dalam hubungannya dengan pseudo-class dinamis: hover,: active, dan: focus. Misalnya, agar latar belakang tautan dengan nilai atribut ID ID_DYNAMIC_BACKGROUND menjadi merah dalam keadaan tidak aktif dan hijau dalam keadaan berada di bawah kursor mouse, kumpulan aturan berikut harus ditambahkan ke lembar gaya:
#ID_DYNAMIC_BACKGROUND
{
warna latar: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: arahkan kursor
{
warna-latar belakang: # 00FF00;
}
Anda dapat melakukan hal yang sama untuk membuat latar belakang dengan gambar yang berubah secara dinamis.
