--- title: CSS Nedir? slug: Learn/CSS/First_steps/What_is_CSS tags: - Beginner - CSS - CSS Giriş - Introduction to CSS - Learn - Modules - Modüller - Ogrenim - Ozellikler - Sozdizimi - Specifications - Syntax translation_of: Learn/CSS/First_steps/What_is_CSS original_slug: Öğren/CSS/Ilk_adimlar/CSS_Nedir ---
{{Glossary("CSS")}}(Basamaklı Stil Sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, ancak arka planda nasıl çalışır? Bu makale, basit bir sözdizimi örneğiyle CSS'in ne olduğunu açıklar ve ayrıca dil hakkında ki bazı temel terimleri ele alır.
Ön Koşullar: | Gerekli yazılımların kurulumu dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; Dosyalarla çalışma dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, HTML'ye Giriş konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısın. |
---|---|
Amaç: | CSS'in ne olduğunu öğrenmek |
HTML'ye Giriş kısmında HTML'nin ne olduğu ve belgeleri oluşturmak için nasıl kullanıldığını ele aldık. Oluşturulan bu belgeler bir web tarayacısından okunabilir olacaktır. Başlıklar normal metinden daha büyük görünecek, parafraflar yeni bir satıra bölünecek ve aralarında boşluk olacaktır. Bağlantılar, onları diğer metinlerden ayırmak için renkli ve altı çizilmiş olacaktır. Sayfa üzerinde ki gördüğün farklılıklar, sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile sayfanın okunabilir olması için HTML'ye tarayıcının uyguladığı varsayılan stillerdir.
Ancak, tüm web siteleri böyle görünseydi web gerçekten sıkıcı bir yer olurdu. CSS kullanarak, HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğin tasarımı kullanarak sayfanı oluşturabilirisin.
Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izle.
{{EmbedYouTube("spK_S0HfzFw")}}
Daha öncede bahsettiğimiz gibi, CSS belgelerin kullanıcılara nasıl sunulacağını, nasıl biçimlendirileceğini, nasıl yerleştirileceklerini vb. gibi şeyleri belirleyen bir dildir.
Bir belge genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — HTML en yaygın biçimlendirme dilidir, ancak SVG veya XML gibi başka biçimlendirme dilleriyle de karşılaşabilirsin.
Bir dökümanı bir kullanıcıya sunmak, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. Tarayıcılar, sevdiğim Firefox, Chrome veya Edge, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.
Note: Tarayıcıya bazen {{Glossary("User agent","kullanıcı aracı")}} denir ve bu temelde bir bilgisayar sistemi içerisindeki bir kişiyi temsil eden bir bilgisayar programı anlamına gelir. Tarayıcılar, CSS hakkında konuşurken aklımıza gelen ana kullanıcı arayüzüdür, fakat sadece bunlar değildir. Kullanılabilir başka kullanıcı aracıları da vardır - HTML ve CSS belgelerini yazdırılabilen PDF'lere dönüştüren programlar gibi.
CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların rengi ve boyutunu değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; tek bir metin sütununu bir düzene dönüştürmek. Animasyon gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.
CSS kural tabanlı bir dildir — web sayfandaki belirli öğelere veya öğe gruplarına uygulanmasını istediğin stilleri belirleyen kurallar tanımlarsın. Örn; "Sayfamdaki ana başlığın büyük ve kırmızı bir metin olarak gösterilmesini istiyorum".
Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:
h1 { color: red; font-size: 5em; }
Kural, bir öğe {{Glossary("CSS Selector", "seçici")}} ile başlar. Bu, biçimlendireceğimiz HTML öğesini seçer. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi {{htmlelement("h1")}} belirtiyoruz.
Daha sonra bir dizi süslü parantezimiz { }
var. Bunların içinde, nitelik ve değer çifti biçimini alan bir veya daha fazla beyan olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.
İlk önce niteliğimiz ve niteliğe atayacağımız değerimiz var. CSS {{Glossary("property/CSS","niteliğinin")}} kendisine bağlı olarak, atayabileceğin farklı değerlere sahip olabilir. Örneğimizde, çeşitli renk değeri alabilen color
niteliğine sahibiz. Ayrıca font-size
niteliğinede sahibiz. Bu nitelik, çeşitli boyut birimlerini değer olarak alabilir. Fakat color
niteliğine biri uzunluk birimi atamana izin verilmez.
Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.
h1 { color: red; font-size: 5em; } p { color: black; }
Bazı değerleri hızlı bir şekilde öğrendiğini, bazılarını ise araştırman gerektiğini göreceksin. MDN'deki nitelik referans sayfaları, unuttuğun da veya bir değer olarak başka neleri kullanabileceğini bilmek istediğinde, nitelikler ve değerleri hakkında bulabileceğin kapsamlı bilgiler sunar.
Not: MDN CSS referans'da listelenen tüm CSS niteliklerinin açıklama sayfalarına bağlantılar bulabilirsin. Alternatif olarak, bir CSS niteliği hakkında daha fazla bilgi edinmen gerektiğinde, favori arama motorun da "mdn css-feature-name" diye aramaya alışmalısın. Örn; "mdn color" ve "mdn font-size"!
CSS kullanarak stil verebilceğin pek çok şey olduğundan, dil modüllere bölünmüştür. MDN'yi keşfederken bu modüllere atıfta bulunacağımızı göreceksin ve belge sayfalarının çoğu belirli bir modül için düzenlenmiştir. Örn; ne için kullanıldığı ve alabileceği farklı nitelikleri görebilmek için Arka Palanlar ve Kenarlıklar modüllerine MDN refaransından bakabilirsin. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksın (aşağıya bak).
Bu aşamada CSS'in nasıl yapılandırıldığı konusunda çok fazla endişelenmene gerek yok, ayrıca bir niteleğin diğer öğelerde de kullanılabildiğinin farkındaysan bu aradığın bilgiye ulaşmanı kolaylaştırabilir, bir öğe için öğrendiğin nitelik bigileri, kullanılabildiği diğer öğe içinde aynı kural düzenine sahiptir.
Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak background-color
ve border-color
nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsin. Haklısında!
Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), Standardizasyon konsorsiyumları ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} veya {{glossary("Khronos")}} gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.
CSS'de farklı değildir — W3C içindeki CSS Working Group adı verilen bir grup tarafından geliştirilmiştir. Bu grup; tarayıcı sağlayıcılarının, CSS ile ilgilenen diğer şirketlerin temsilcileri ve bağımsız olarak hareket eden, davetli uzmanlar olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.
Yeni bir CSS özelliği, CSS Working Group tarafından belirlenir veya geliştirilir. Bu yenilik için bir tarayıcı bir yeteğene sahip olmak istemiş olabilir, web tasaraımcıları ve geliştiricileri bir nitelik isteğinde bulunmuş olabilirler veya çalışma grubunun kendisi bir gereksinim olduğunu düşünmüş olabilir. Bunlar gibi durumlarda organizasyondan yeni CSS niteliği için çalışma başlatır ve yeni niteliğin eski web sitelerini bozacak bir şekilde tanımlama yapılmaması için grub çok çalışmaktadır. 2000 yılında yayınlanan ve o zamanki sınırlı CSS niteliklerini kullanan bir web sayfası bugün hala kullanılabiliyor olması gerekir.
CSS'e yeni başlayan biri olarak, CSS niteliklerini ezici bulman olasıdır. Bir çok deneyimli geliştirici, MDN belgelerine veya diğer eğitimlere başvurmayı tercih eder. Bu sayede, her zaman bir kaynak bulabileceğini bildiğinde, kullandığın CSS'i, tarayıcı desteğini(aşağıya bakın) ve nitelikler arasındaki ilişkiyi anlamak için zaman harcamaya değer.
CSS belirlendikten sonra, sadece bir veya daha fazla tarayıcı tarafından desteklenmiş ise web sayfalarının geliştirilmesinde kullanılabilir. Bu, CSS dosyamızdaki talimatın ekrana çıktısı alınabilecek bir kurala dönüştürmek için desteklendiği anlamına gelir. CSS Nasıl Çalışır dersinde bu sürece daha fazla bakacağız. Tüm tarayıcıların bir niteliği aynı anda uygulaması alışılmadık bir durumdur ve bu nedenle genellikle bazı tarayıcılarda CSS'in bir kısmını kullanıp, bir kısmını da kullanamayacağız. Bu nedenle, tarayıcıların CSS'in hangi niteliklerini desteklediğini kontrol etmek faydalıdır. MDN'deki her nitelik sayfasında, ilgilendiğimiz niteliğin desteklenme durumunu görebilir ve onun her tarayıcıda çalışıp çalışmayacağını anlayabiliriz.
Aşağıda, CSS font-family
niteliği için destek tablosu yer almaktadır.
{{Compat("css.properties.font-family")}}
Artık CSS'in ne olduğunu biraz anladığına göre, CSS'i kendin yazmaya başlabileceğin CSS ile Başlarken bölümüne geçebiliriz.
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}