Tautan teks bisa dikatakan sebagai elemen halaman yang paling umum di halaman web. Gaya tautan teks default digarisbawahi. Tampilan yang tidak berubah ini mungkin membuat banyak teman ingin mengubahnya agar sesuai dengan halaman secara keseluruhan telah banyak digunakan, keinginan tersebut kini dapat diwujudkan dengan sangat mudah. Hari ini saya akan memperkenalkan kepada Anda cara menggunakan style sheet untuk membuat efek tautan teks berwarna. Saya akan memperkenalkannya kepada semua orang di bab dasar, lanjutan, dan lanjutan. Semua efek gaya tautan akan diselesaikan di editor gaya Dreamweaver. Silakan merujuk ke pengantar sebelumnya untuk penggunaan editor gaya di Dreamweaver. Efek penelusuran gaya tautan seperti yang ditunjukkan di bawah ini; untuk penelusuran halaman tertentu, silakan lihat di sini
1. Persiapan
Pertama-tama kita akan membuat gaya tautan dasar, dan gaya lain akan menambahkan kelas Kelas khusus berdasarkan ini.
1. Tekan Shift+F11 untuk membuka panel gaya dan klik tombol Gaya Baru, seperti yang ditunjukkan pada Gambar 1;
2. Pilih Gunakan Pemilih CSS pada opsi Tipe untuk membuat gaya tautan default, seperti yang ditunjukkan pada Gambar 2;
3. Seperti yang ditunjukkan pada Gambar 3, atur gaya tautan default tanpa garis bawah, font ke Dinasti Song 9pt, dan tidak ada warna lain, dll. Nanti kita akan mengaturnya secara terpisah untuk setiap Kelas.
4. Tentukan gaya kelas Kelas. Masing-masing gaya kami di bawah mendefinisikan kelas terpisah dan menugaskannya ke teks tautan. Langkah-langkahnya sebagai berikut: Klik Tambah untuk membuka panel gaya definisi baru, pilih Jadikan Gaya Kustom (kelas) untuk menentukan kelas gaya Anda sendiri. Seperti yang ditunjukkan pada Gambar 4;
5. Tambahkan kelas gaya ke teks tautan. Pilih teks link di Dreamweaver, pilih label pada bilah pilihan label cepat di bagian bawah jendela, klik kanan label, dan pilih Set Class untuk menetapkan gaya khusus ke teks link, seperti yang ditunjukkan pada Gambar 5;
6. Cara untuk gaya teks tautan lainnya sama, dan saya tidak akan memperkenalkannya lagi nanti. Pada tutorial kali ini sobat dapat membuat link style sendiri untuk menentukan status hover. Saya tidak akan memperkenalkannya lagi, cukup masukkan [.t1:hover] secara langsung ketika diminta untuk menentukan definisi.
2. Gaya tautan utama
Kami akan menyelesaikan bagian efek tautan ini sepenuhnya di kategori Tipe editor gaya. Saya tidak akan menjelaskan secara detail tentang cara membuat dan mengaturnya. Saya hanya akan menunjukkan kepada Anda diagram panel yang telah selesai dan memberikan pengenalan singkat.
1. Tautan biasa. Seperti yang ditunjukkan pada Gambar 6;
Tautan biasa diatur di item pertama Ketik dalam kategori kategori editor gaya. Warna menentukan warna font tautan, dan Dekorasi menentukan gaya garis bawah tautan, yang dibagi ke dalam kategori berikut:
garis bawah: garis bawah garis atas: garis atas garis tembus: coretan kedip: garis berkedip tidak ada: tidak ada garis bawah
Beberapa gaya tautan lain di bagian ini dicapai dengan mengubah kombinasi guratan.
2. Tidak ada link yang digarisbawahi, seperti terlihat pada Gambar 7;
3. Tautan yang digarisbawahi ganda, seperti yang ditunjukkan pada Gambar 8;
4. Tautan yang dicoret, seperti yang ditunjukkan pada Gambar 9;
3. Gaya tautan tingkat lanjut
Selanjutnya, saya akan memperkenalkan metode definisi gaya tautan alternatif. Metode ini terutama menggunakan atribut Perbatasan di lembar gaya untuk menggantikan garis bawah tautan biasa. Karena Perbatasan memiliki lebih banyak parameter kontrol dan gaya, beberapa fungsi khusus dapat diterapkan. Mari kita lihat panel di bawah ini, seperti yang ditunjukkan pada Gambar 10;
Opsi Perbatasan mencakup tiga bagian: Lebar (lebar garis), Warna (warna garis), dan Gaya (tipe garis), dan setiap bagian dapat mengatur parameter berbeda untuk batas yang berbeda.
Kita perlu mengingatkan semua orang bahwa ada kondisi yang diperlukan untuk menggunakan metode ini untuk menentukan gaya tautan: atribut Kotak dalam gaya harus ditentukan, seperti yang ditunjukkan pada Gambar 11;
Hal ini karena Border adalah elemen blok dalam gaya, dan kita harus mendefinisikan elemen blok terlebih dahulu sebelum Border dapat berfungsi. Kita hanya perlu menentukan opsi Lebar atau Tinggi dalam Kotak secara sewenang-wenang. Anda dapat mencoba nilai spesifik untuk melihat efeknya. Saya telah menetapkan Tinggi sebagai 0 di sini. Mari kita lihat efek apa yang bisa dicapai.
1. Gaya tautan alternatif. Pengaturannya seperti pada Gambar 12;
2. Sesuaikan warna garis bawah. Kita dapat menentukan warna berbeda untuk garis bawah dan teks. Ini adalah efek yang tidak mungkin dicapai dengan teks tautan biasa selama warna Perbatasan dan warna teks ditentukan berbeda, seperti yang ditunjukkan pada Gambar 13;
3. Sesuaikan jarak garis bawah. Kita dapat mengatur jarak garis semacam ini dalam kategori Kotak dengan mengubah nilai Padding. Dalam contoh ini, kita mengatur Padding—Bawah menjadi 5pix, seperti yang ditunjukkan pada Gambar 14;
4. Sesuaikan panjang dan perataan coretan. Selanjutnya, kita juga dapat secara akurat menentukan panjang dan perataan garis. Buka kategori Kotak dan atur Lebar menjadi 200, seperti yang ditunjukkan pada Gambar 15, atur Perataan Teks pada kategori Blok ke Tengah, yang merupakan perataan tengah, seperti yang ditunjukkan pada Gambar 16;
5. Sesuaikan efek garis bawah ganda. Ubah Style di Border untuk mengubah tampilan garis bawah. Atur Style menjadi Double dan Bottom menjadi 3pix untuk mendapatkan efek garis bawah ganda. Seperti yang ditunjukkan pada Gambar 17;
4. Gaya tautan tingkat lanjut
Dengan menggabungkan teknik yang diperkenalkan di atas, kita juga dapat membuat gaya tautan teks yang lebih kompleks. Di bawah ini kami memperkenalkan tiga contoh.
1. Tentukan tautan blok. Pertama tambahkan warna latar belakang pada link, seperti yang ditunjukkan pada Gambar 18;
Kemudian tambahkan empat batas pada tautan teks untuk mendapatkan tautan teks blok datar, seperti yang ditunjukkan pada Gambar 19;
2. Tentukan tautan teks seperti tombol. Ubah gaya perbatasan dan tentukan Border-Style sebagai awal, seperti yang ditunjukkan pada Gambar 20;
Tentukan opsi Lebar dan Tinggi dalam Kotak untuk menentukan lebar dan tinggi tombol. Tentukan Padding sebagai 2pix untuk membuat jarak 2pix antara teks tautan dan tombol, seperti yang ditunjukkan pada Gambar 21;
3. Tentukan tautan teks efek khusus. Style sheet CSS juga berisi sekumpulan filter efek khusus. Kita dapat menggabungkan filter dengan parameter sebelumnya untuk membuat gaya tautan khusus. Dalam contoh ini saya membuat link teks menggunakan filter Blur, dengan efek border. Seperti yang ditunjukkan pada Gambar 22;
4. Tentukan efek peralihan latar belakang statis. Contoh ini adalah untuk mencapai efek peralihan latar belakang dengan mengatur gambar latar belakang yang berbeda untuk keadaan normal dan keadaan melayang pada teks tautan. Lihat gambar di bawah ini:
5. Efek peralihan latar belakang dinamis. Efek ini pada dasarnya sama dengan contoh di atas, hanya saja latar belakang gambar Gif dinamis ditentukan dalam keadaan Hover. Dan gambar ini memerlukan sedikit keahlian, yaitu mengatur loop menjadi satu kali, menambahkan bingkai di akhir, dan mengatur waktu bingkai ke nilai yang lebih besar, misalnya 10.000. Hal ini memungkinkan animasi dijalankan pada satu sisi dan kemudian berhenti. Untuk meningkatkan kecepatan eksekusi efek, kita juga perlu menambahkan perilaku Preload /doc/webpage/images/images di Dreamweaver. Ini memerlukan pembukaan panel perilaku dan menambahkan perilaku Preload /doc/webpage/images/images, seperti yang ditunjukkan pada gambar:
Kita dapat melakukan pramuat keempat gambar yang diperlukan untuk dua gaya tautan terakhir, seperti yang ditunjukkan di bawah ini:
5. Ringkasan
Saya akan memperkenalkan begitu banyak gaya tautan, dan bersamaan dengan mengatur status hover teks tautan, Anda dapat mencapai efek yang sangat indah. Silakan lihat di sini untuk penelusuran halaman tertentu. Saya harap teman-teman dapat membuat lebih banyak teks tautan berdasarkan di atas ide. gaya. Ingat, style sheet seperti gunung es dengan harta karun dalam produksi halaman web. Saat ini kami hanya menemukan sebagian kecil dari gunung es tersebut yang menunggu untuk Anda temukan.