Cascading Style Sheets ,css,paging,sayfalama,css ile sayfalama,paging with css

Merhaba arkadaşlar bu yazımda css ile ilgili bir paging yani sayfalama örneği yapacağım,
Css Cascading Style Sheets açılımına tekabül eder. Bunuada Stil oluşturmak diye niteleyebiliriz.
Sayfalama , özellikle blog sitelerinde ya da görüntüleme datagrid mantığıyla çalışan interaktif ekranlarda oldukça kullanışa elverişli bir yapı diyebilir.
Css için birden fazla selektör biçimi vardır ,
Element selector ,

H1{
color: White;
}
İd selektör,
#pr{
Color:red;
}

Class selektör
.center {
text-align: center;
color: red;
}

Bunları yaptığımızda .css uzantılı bir dosyanın içinde saklayarak refere edebileceğimiz gibi ,
Html’de head tagları arasında bulunan style tagının içine koyabiliriz

Css ile nasıl sayfalama yapabileceğimize ;

<!– <!DOCTYPE html>
<html>
<head>
<style>
<!– Özet kısmında değinildiği gibi class şeklinde selector’ü kullanıyoruz –>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: canvas;
}
</style>
</head>
<body>

<h2>Temel Sayfalama</h2>
<ul class=”pagination”>
<li><a href=”#”></a></li>
<li><a href=”https://www.oguzaltuntas.com/sp_whoisactive-how-to-use-sp_whoisactive-in-a-loop-using-sp_whoisactive”>1</a></li> <!– href için yönlendirme yapıyorsunuz –>
<li><a class=”active” href=”#”>2</a></li>
<li><a href=”https://www.oguzaltuntas.com/asp-net-login-ekrani-yapimi-simple-user-login-form-example-in-asp-netc/”>3</a></li>
<li><a href=”https://www.oguzaltuntas.com/http-hatasi-403-14-forbidden-web-sunucusu-bu-dizinin-icindekileri-listelemeyecek-sekilde-yapilandirilmis/”>4</a></li>
<li><a href=”https://www.oguzaltuntas.com/briefly-unavailable-for-scheduled-maintenance-error-hatasi-briefly-unavailable-for-scheduled-maintenance-check-back-in-a-minute/”>5</a></li>
<li><a href=”https://www.oguzaltuntas.com/msb3283-cannot-find-wrapper-assembly-for-type-library-microsoft-office-core-verify-that-1-the-com-component-is-registered-correctly-and-2-your-target-platform-is-the-same-as-the-bitness-of-t/”>6</a></li>
<li><a href=”#”>7</a></li>
<li><a href=”#”>»</a></li>
</ul>

</body>
</html> –>

dosyayı .html uzantısında kaydedip çalıştırdığınızda ,

şeklinde çıktı göreceksiniz.

Bir sonraki yazıda görüşmek üzere sağlıcakla.