Dekoratif garis bawah CSS-unsur

Teknologi stylesheet memiliki dua fungsi dalam desain HTML-halaman. Pertama, dengan bantuan, ada posisi pembentukan elemen individual dari situs. Kedua, itu membuat unit visual menarik bagi pengguna. Pelaksanaan fungsi kedua terjadi dalam banyak cara. Salah satu dari mereka - menggarisbawahi. CSS menyediakan untuk dekorasi atribut ini text.

Keterangan record atribut

Gunakan text properti dekorasi sederhana. Cukup untuk mendaftar dalam kode file CSS, baris berikut untuk item:

dekorasi text: znachenie_atributa;

Alih-alih "znachenie_atributa» spesifikasi CSS menawarkan sejumlah pilihan:

• menggarisbawahi - line terletak langsung di bawah teks;
• overline - line berjalan dari atas teks;
• none - penghapusan semua efek dekoratif;
• mewarisi - mengadopsi nilai elemen induk.

Di atas adalah tidak semua kemungkinan bentuk rekaman, karena atribut ini menentukan tidak hanya garis bawah CSS, tetapi efek lain, seperti "berkedip" atau teks dicoret.

Contoh hyperlink desain

Pemula dalam desain web dan pemrograman, muncul pertanyaan: mengapa garis bawah dalam teks? Pada awal era teknologi internet metode alokasi pengguna untuk fakta bahwa di depannya adalah hyperlink - teks, dengan mengklik yang akan dilakukan transisi ke halaman baru.

Secara default, properti Hyperlink mengatur garis bawah. Dalam prakteknya, ada masalah untuk menghapus garis dari perangkat tidak aktif dan membuatnya terlihat sebagai pengguna menggerakkan pointer mouse. Berikut adalah contoh kode yang menonaktifkan link garis bawah CSS:

a {text-decoration: none; }

Untuk link aktif menggunakan entri berikut:

a: hover {text-decoration: underline;}

garis bawah dekoratif untuk maju

atribut standar text dekorasi memiliki beberapa keterbatasan:

• garis warna yang berbeda dari warna teks link, adalah mustahil untuk membedakan antara "mewarnai" mereka;
• Hanya garis padat digunakan sebagai garis bawah. CSS tidak melibatkan penggunaan gaya lain dari tanda.

Tapi teknik khusus membantu memotong tampilan klasik dari teks. Dalam kasus pertama, untuk mengatur hyperlink menggunakan tag opsional .

Sebagai contoh: