İçeriğe atla

CSS

Kontrol Edilmiş
Cascading Style Sheets
İlk çıkışı17 Aralık 1996
GeliştiriciHåkon Wium Lie, Bert Bos, World Wide Web Consortium
Olağan dosya uzantıları.css
Web sitesiw3.org/Style/CSS/

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.

Örnek CSS kodu

<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 dosyası harici CSS dosyasına referans verebilir.
<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 dosyası iç stil türünde CSS içerebilir.
<html>
<head>
  <style>
    div {
      color: red;
    }
   </style>
</head>
<body>
  <div>Bu yazı kırmızıdır.</div>
</body>
</html>
  • JavaScript yoluyla HTML dosyasına CSS eklenebilir.
<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>
  • Etiketler ile beraber CSS içerebilir.
<html>
<body>
    <div style="color: red;">Bu yazının rengi kırmızıdır.</div>
</body>
</html>

Dış bağlantılar


İlgili Araştırma Makaleleri

<span class="mw-page-title-main">JavaScript</span> programlama dili

JavaScript, HTML ve CSS ile birlikte World Wide Web'in temel teknolojilerinden biri olan programlama dilidir. Web sitelerinin %97'sinden fazlası, web sayfası hareketleri için istemci tarafında JavaScript kullanırlar ve kullanılan kodlar genellikle üçüncü taraf kitaplıkları içerir. Tüm büyük web tarayıcılarında, kaynak kodunu kullanıcıların cihazlarında yürütebilmek için özel bir JavaScript motoru bulunur.

<span class="mw-page-title-main">Web renkleri</span>

Web renkleri, web sayfası tasarımında kullanılan ve izlenen sayfanın görünümünü düzenlemeye yarayan renklerdir.

Webmaster, web sitesi geliştiren kişi anlamında kullanılan bir terimdir. İngilizcedeki master kelimesi bu terimde uzman anlamında kullanılmaktadır. Webmaster'lar, yazılım, grafik, animasyon, sunucu taraflı işlemler vb görevlerde uzman olan kişilerin oluşturduğu ekipte koordinasyon sağlama görevi alabilirler.

<span class="mw-page-title-main">Web sayfası</span> World Wide Web ve web tarayıcıları aracılığıyla doğrudan görüntülenebilen tek belge

Web sayfası, World Wide Web için hazırlanan ve web tarayıcısı kullanılarak görüntülenebilen dokümanlardır. Web sayfaları çoğunlukla HTML formatında kodlanır, CSS, betik, görsel ve diğer yardımcı kaynaklardan yararlanılarak son görünümüne sahip olur ve işlevsellik kazanır. Birden fazla web sayfasının bir araya gelmesi ile ortaya çıkan web sitesi ile karıştırılmamalıdır. Günlük konuşma dilinde internet sayfası terimi de çoğunlukla web sitesi anlamında kullanılmaktadır.

ASP.NET, Microsoft tarafından geliştirilmiş olan bir açık kaynak Web uygulama gelişimi teknolojisidir. Dinamik Web sayfaları, Web uygulamaları ve XML tabanlı Web hizmetleri geliştirilmesine olanak sağlar. Aynı işletme tarafından geliştirilen .NET çatısı'nın yazılım iskeleti parçası ve artık işletmece desteklenmeyen ASP teknolojisinin devamını teşkil etmiştir.

<span class="mw-page-title-main">Acid2</span>

Acid2, web tarayıcılarının mevcut standartlara uygunluğunu tespit eden bir testtir. Test bir url ile ulaşılan, standart ya da yakında standart olacak tüm web tarayıcısı özelliklerinin bir arada kullanıldığı bir html sayfası ile uygulanır. Eğer tarayıcının tüm özellikleri standartlara uygun üretilmiş ise "gülen bir adam yüzü"nün sayfada doğru şekilde belirmesiyle testten onay alınır. Yüz resmindeki kırmızı noktalar ve dağılmalar web tarayıcısında standart dışı ya da eksik özelliklerin bulunduğunu gösterir.

Web grafik tasarımı, grafik tasarım alanı ile yakın ilişkili bir konu olmakla birlikte kendi içinde ayrı bir dal olarak da geniş bir alanı kapsayan bir kavramdır.

AJAX, İnternet sayfalarında JavaScript ve XMLHttpRequest kullanımı ile etkileşimli uygulamalar yaratan tekniğin adıdır.

DTD, belge sözdizimi kurallarını tanımlayan işaretleme kuralları kümesidir.

<span class="mw-page-title-main">Document Object Model</span>

Document Object Model, "DOM", "Belge Nesnesi Modeli" anlamlarına da gelmektedir. İnternet tarayıcıları girilen internet sitesini bir belge, bu belge (sayfa) içerisinde bulunan tüm elemanları da nesne olarak kabul eder. Buna göre resim, yazı, form gibi tüm elemanlar nesnedir. İşte DOM sayfa içindeki herhangi bir nesnenin özelliğine müdahale edebilmemize, nesne özelliklerini değiştirebilmemize olanak sağlar. Bunu yapabilmek için de JavaScript gibi bazı script dilleri kullanmamız gerekir.

<span class="mw-page-title-main">HTML</span> işaretleme ve web programlama dili

Hiper Metin İşaretleme Dili web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir.

Microformat, İnternet'teki bilgilerin bilgisayar tarafından da anlaşılabilmesi amacı ile belirli bilgilerin üzerinde önceden anlaşılan yapılar aracılığı ile işaretlenmesi için kullanılan bir biçimdir. XHTML üzerine kurulmuş olan bu

Smarty, PHP ile yazılmış bir şablon motorudur. Özellikle web geliştirirken tasarım ve yazılım süreçlerinin birbirinden bağımsız hale getirilmesini sağlayan bir araç olarak tanınmaktadır.

vCard elektronik kartvizit için bir dosya biçimi standarttır. vCard sıklıkla e-posta iletilerine bağlı, ancak World Wide Web veya anlık mesajlaşma gibi diğer yollarla değiştirilebilir. Onlar isim ve adres bilgilerini, telefon numaraları, e-posta adresleri, URL'ler, logolar, fotoğraflar ve ses klipleri içerebilir.

<span class="mw-page-title-main">React</span> Kullacı arayüzleri oluşturmak için kullanılan JavaScript kütüphanesi

React, kullanıcı arayüzü oluşturmaya yarayan açık kaynak kodlu bir javascript kütüphanesidir. Facebook önderliğinde bir geliştirici grubu tarafından geliştirilmekte olan React, Model-View-Controller prensibine uygun olarak oluşturulmuştur. React ile single-page olarak adlandırılan sayfalar geliştirilebileceği gibi React-Native ile mobil uygulamalar da geliştirilebilir.

<span class="mw-page-title-main">Google Sites</span> Web sayfası oluşturma aracı

Google Siteler, Google tarafından sunulan Google Apps üretkenlik paketinin bir parçası olarak, yapılandırılmış bir viki ve Web sayfası oluşturma aracıdır. Google Sitelerin amacı herkesin bir ekip odaklı bir site oluşturmak mümkün olabilmesi ve birden fazla kişinin iş birliği ve dosyalarınızı paylaşabilmesidir.

<span class="mw-page-title-main">TextEdit (yazılım)</span>

TextEdit, ilk olarak NeXT'in NextStep ve OpenStep'te bulunan, basit, açık kaynaklı bir kelime işlemci ve metin düzenleyicidir. Apple 'nin NeXT'i satın almasından bu yana MacOS ile dağıtılıyor ve Linux gibi diğer Unix benzeri işletim sistemleri için bir GNUstep uygulaması olarak mevcuttur. Apple Advanced Typography tarafından desteklenmektedir ve birçok gelişmiş tipografi özelliğine sahiptir.

<span class="mw-page-title-main">Vue.js</span>

Vue.js kullanıcı arayüzleri ve tek sayfa uygulamalar inşa etmek için kullanılan açık kaynak Javascript iskeleti. 2013 yılında geliştirilmeye başlanan framework'ün güncel versiyonu 3.2'dir.

HTTP/2 Server Push, HTTP/2 uyumlu bir sunucunun kaynakları, istemci talep etmeden önce HTTP/2 uyumlu bir istemciye göndermesine izin verir. Çoğunlukla, kaynakları önceden yüklemede yardımcı olabilecek bir performans tekniğidir.

<span class="mw-page-title-main">Web şablon sistemi</span>

Web yayıncılığı'ndaki web şablon sistemi, web tasarımcılarının ve geliştiricilerin, bir aramanın sonuçları gibi özel web sayfa'larını otomatik oluşturmak için web şablonları ile çalışmasına olanak tanır. Bu, dinamik öğeleri web isteği parametrelerine dayalı olarak tanımlarken statik web sayfası öğelerini yeniden kullanır. Web şablonları statik içeriği destekleyerek temel yapı ve görünüm sağlar. Geliştiriciler içerik yönetim sistemlerinden, Web uygulama iskeletlerinden ve HTML düzenleyicilerinden şablonları kullanabilir.