WP Themes Tutorial #10: Hex Codes dan Styling Links
Dari WP Theme Lesson #10: Hex Codes and Styling Links oleh Small Potato diterjemahkan oleh Mochammad Kurniawan.
Ikuti dari awal Tutorial Membuat Themes WordPress Theme dari awal.
- Dari pengantar pengenalan CSS kita akan banyak belajar mewarnai dan mempelajari lebih lanjut tentang kode hex. Warna properti, diikuti oleh heksadesimal (heksa), kode adalah untuk mewarnai teks (kata). Misalnya body (color: # 000000;) berarti semua teks (kata) dalam badan halaman Anda akan hitam.
Latar belakang properti, diikuti dengan kode hex, untuk mewarnai sesuatu yang bukan teks. Misalnya, body (background: # ffffff;) berarti putih latar belakang untuk body.
- Heksadesimal Codes
- Diawali dengan tanda pound (#) masing-masing memiliki kode hex enam digit. Orang-orang dari berbagai nomor # ffffff (putih) ke # 000000 (hitam).
- # Ffffff, # eeeeee, # dddddd, # CCCCCC, # bbbbbb, # aaaaaa, # 999999, # 888888, # 777777, # 666666, # 555555, # 444444, # 333333. # 222222, # 111111
- Dua angka pertama mewakili warna merah, ketiga dan keempat mewakili hijau, dan yang terakhir mewakili dua warna biru. # ff0000 adalah merah. # 550000 adalah merah gelap. # 220000 adalah merah yang sangat gelap. # 00ff00 adalah hijau. # 0000FF adalah biru. Tunggu, tidak ada kuning warna primer? Hex kode yang kuning? # ffff00 adalah kuning. # ff00ff adalah violet.
Langkah 1:
Ketik kode berikut di bawah tubuh {} selector:
[css]
a:link, a:visited{
text-decoration: underline;
color: #336699;
}[/css]
- Untuk apakah semua itu? Anda membuat Anda yakin semua link yang digarisbawahi (text-decoration:underline;) dan biru (color:#336699;). Ini berbeda dari bayangan biru dan biru itu karena dua digit terakhir (mewakili biru) adalah angka tertinggi.
- a:link untuk styling link. Bila Anda ingin mengubah kata menjadi sebuah link, apa yang anda gunakan? Tag <a> dan </a>, dengan itu, dalam a:link.
- a: visited untuk mengubah link yang telah diklik (dikunjungi halaman), dengan itu. Dikunjungi dalam a:visited.
- Sebagai pengganti:
[css]a:link{
text-decoration: underline;
color: #336699;
}[/css]dan
[css]a:visited{
text-decoration: underline;
color: #336699;
}[/css] - Anda bisa menggunakan koma untuk memisahkan a:link dan a:visited ketika mengaplikasikan text decoration:underline; dan color: #336699; untuk memilih keduanya.
Langkah 2:
Ketik kode berikut di bawah a:link, a:visited{ }
[css]
a:hover{
text-decoration: none;
}[/css]
Untuk apakah itu? Anda memastikan bahwa link garis bawah bahwa garis bawah link hilang ketika anda mengarahkan kursor melewati sebuah link, dengan demikian, hover pada a:hover.
Jika anda tidak ingin untuk menggarisbawahi secara default dan garis bawah ketika anda melewati lalu berpindah pada text-decoration: value for a:link and a:hover.
Jika anda ingin mengubah warna pada hover dan menambah color: dan apap pun hex code yang anda inginkan.Sebagai contoh
[css]
a:hover{
text-decoration: none;
color: #ff0000;
}[/css]
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
[...] #6e Membuat widget Sidebar #7 Footer #8 Bagaimana memvalidasi #9 Style.css dan Perkenalan CSS #10 hex Codes dan Styling Links #11 Lebar dan Floats #12 Post Formatting and Macam-macam #13 Styling Sidebar #14 Footer dan Membagi [...]