Html ile oluşturulmuş bir sayfada kullanıcının fare ya da klavye yardımıyla seçmiş olduğu metni vurgulamak amacıyla ::selection seçicisi kullanılır. Bu sayede seçilen metnin vurgusu istenilen şekilde ayarlanabilir. Örneğimizde kullanıcı tarafından seçilen metnin arka planı ve yazı renginin değiştirilmesini sağlayacağız.
Html dosyamızda basit bir metin oluşturalım.
|
1 2 3 4 5 6 7 |
<body> <p id="ornek">Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz. Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. </p> </body> |
Css kodlarımız:
|
1 2 3 4 5 6 7 8 |
#ornek::selection{ color:white; font-weight: bold; font-size:2em; background: purple; } |
Sonuç olarak seçilen metnin arkaplanı mor ve yazı renginin beyaz olarak vurgulanması sağlanacaktır.
kodlarımızın tamamını not defterine kopyalayarak html olarak kaydedip çalıştırabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html> <head> <title>www.yazilimkodlama.com</title> <meta charset="utf-8"> <style> #ornek::selection{ color:white; font-weight: bold; font-size:2em; background: purple; } </style> </head> <body> <p id="ornek">Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz. Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. </p> </body> </html> |
