Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir.
İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.
Bir Web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün Web sayfalarında ortak olarak kullanılabilir. Böylece sayfaların hafızadaki boyutu epey küçüldüğü gibi güncelleme yapmak da kolaylaşır.
CSS kodları, HTML kodlarının içine yazılabildiği gibi harici bir CSS
dosyası oluşturularak da işlem yaptırılabilir. Türüne göre <BODY>
veya
<HEAD>
bölümlerinde yer alabilirler. Ayrıca
<link rel="stylesheet" type="text/css" href="style.css" /> koduyla CSS
dosyası çalışma sayfasına eklenebilir. Onları ayrı dosyada veya
dosyalarda saklamak, onları değişik HTML sayfalarınca kullanılmasını
sağlar, aynı sayfanın değişik aygıtlara göre formatlandırılmasını
kolaylaştırır, sunumla yapıyı ayırarak değişiklik yapılmasını
ekonomikleştirir.
<html>refreshed with css
<head>perfect customizations css
css maintenance custom
<style> w3.org/Style/CSS/
#WikipediaBox{
width:250px;
height:300px;
border:solid 2px;w3.org/Style
}
.WikipediaLogo{
background:url("http://upload.wikimedia.org/wikipedia/commons/e/e6/Wikipedia-logo-tr.png");
}
</style>
</head>
<body>
<div id="WikipediaBox">
<div class="WikipediaLogo"></div>
</div>
</body>
</html>
CSS kodlarının, HTML dosyasına eklenmesi temelde dört farklı şekilde yapılabilir.
<html>
<head>
<link rel="stylesheet" type="text/css" href="dosya.css">
</head>
<body>
<div>Eğer dosya.css sunucuda bulunuyorsa, HTML'in sunumunda kullanılacaktır.</div>
</body>
</html>
<html>
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>Bu yazı kırmızıdır.</div>
</body>
</html>
<html>
<head>
<script>
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "div { color: red; }";
document.body.appendChild(css);
</script>
</head>
<body>
<div>Bu yazı kırmızıdır.</div>
</body>
</html>
<html>
<body>
<div style="color: red;">Bu yazı kırmızıdır.</div>
</body>
</html>
Orijinal kaynak: css. Creative Commons Atıf-BenzerPaylaşım Lisansı ile paylaşılmıştır.
Ne Demek sitesindeki bilgiler kullanıcılar vasıtasıyla veya otomatik oluşturulmuştur. Buradaki bilgilerin doğru olduğu garanti edilmez. Düzeltilmesi gereken bilgi olduğunu düşünüyorsanız bizimle iletişime geçiniz. Her türlü görüş, destek ve önerileriniz için iletisim@nedemek.page