CSS Dersleri – Bilişim & Programlama
CSS Dersleri

CSS Dersleri

CSS, bir HTML belgesinin stilini tanımlayan bir dildir.

CSS, HTML öğelerinin nasıl gösterilmesi gerektiğini açıklar.

Bu eğitim, temelden ileri seviyeye kadar size CSS öğretecektir.

CSS Nedir

Web teknolojilerinde oldukça fazla öneme sahip olan CSS  (Cascading Style Sheets) Basamaklı Stil Sayfaları olarak dile çevirebiliriz. Web sayfalarını görünürlük açısından iyileştirme sürecini kolaylaştırmak için tasarlanmış basit bir tasarım dilidir.

CSS, HTML öğelerinin ekran üzerinde nasıl görüntüleneceğini açıklar. Bir HTML belgesinin sunumu üzerinde oldukça güçlü bir kontrol mekanizması sağlar. CSS, bir web sayfasının görünüm bölümünü işlemektedir. CSS, web sayfalarınız için farklı cihazlar ve ekran boyutları için tasarım, yerleşim düzeni ve gösterim varyasyonları da dahil olmak üzere stilleri tanımlamak için kullanılır.

CSS kullanarak, örneğin metnin rengini, fontların stilini, paragraflar arasındaki boşluğu, sütunların boyutlarını, kullanılan arka plan görüntülerini veya renkleri, mizanpaj tasarımlarını, farklı cihazlar ve ekran boyutları için farklı tasarımları oluşturma kontrol edebilme, animasyonlar oluşturma gibi ve daha bir çok etkileri yaratabilirsiniz.

CSS kullanımının size kazandıracağı bir takım avantajlar mevcuttur;

  • CSS zaman kazandırır : CSS ‘i bir kez yazabilir ve birden fazla HTML sayfasında tekrar kullanabilirsiniz. Her bir HTML öğesi için bir stil tanımlayabilir ve istediğiniz kadar çok Web sayfasına uygulayabilirsiniz.
  • Sayfalar daha hızlı yüklenir : CSS kullanıyorsanız, her seferinde HTML etiketi nitelikleri yazmanız gerekmez. Bir etiketin tek bir CSS kuralını yazıp o etiketin tüm tekrarlarına uygulayın. Dolayısıyla, bu daha az kod daha hızlı indirme süreleri anlamına gelir.
  • Kolay bakım : Geniş çaplı bir değişiklik yapmak için tek bir stili değiştirmeniz yeterlidir. Sitenizin içinde yeralan tüm web sayfalarındaki bulunan tüm öğeler otomatik olarak güncellenir.
  • HTML’e üstün stiller : CSS HTML’den çok daha geniş bir nitelik dizisine sahiptir, böylece HTML niteliklerine kıyasla HTML sayfanıza daha iyi bir görünüm verebilirsiniz.
  • Çoklu Cihaz Uyumluluğu : Stil sayfaları, içeriğin birden fazla cihaz türü için optimize edilmesini sağlar. Aynı HTML belgesini kullanarak, web sitesinin farklı versiyonları, PDA’lar ve cep telefonları, tablet gibi taşınabilir cihazlar için veya daha farklı ebat ve farklı çözünürlüğe sahip monitörler için sunulabilir.
  • Global web standartları– Web standartlarını belirleyen World Wide Web Konsorsiyumu (W3C) artık HTML nitelikleri kullanımdan çıkarttı. Bunların yerine CSS’in kullanılması önerildi. Bu yüzden gelecekteki tarayıcılara uyumlu hale getirmek için CSS’i tüm HTML sayfalarında kullanmaya başlamak her zaman iyi bir fikirdir.
  • Çevrimdışı Çalışma : CSS, çevrimdışı olarak web uygulamaları ile beraber tarayıcınız tarafından yerel olarak depolanabilir. Bunu kullanarak, çevrimdışı web sitelerini görebilirsiniz. Aynı zamanda önbellek yardımı ile web sitesinin daha hızlı yüklenmesini ve daha iyi bir genel performans elde etmenizi sağlayacaktır.
  • Platform Bağımsızlığı : Komut dosyası tutarlı bir platform bağımsızlığı sunar ve en yeni tarayıcıları da destekleyebilir. CSS ‘e giren yeni bir özellik popüle olan tüm tarayıcılar tarafından hemen destek görür.

CSS öğrenmek ve anlamak kolaydır…


CSS Söz Dizimi

CSS ‘in bir tasarım dili olduğundan oldukça basit bir söz dizimine sahiptir. CSS, içeriğin farklı bölümlerinin nasıl sunulması gerektiğini tanımlayan bir dizi kural olarak düzenlenmiştir. Tamamen tarayıcınız tarafından yorumlanmaktadır. CSS, tarayıcı tarafından yorumlanan ve belgenizdeki ilgili öğelere uygulanan stil kuralı üç temel bölümden oluşmaktadır.

  • Seçici(Selector)- Seçici, bir stilin uygulanacağı bir HTML etiketi ifade eder. Bu, <h1> veya <p> gibi herhangi bir etiket olabilir.
  • Özellik(Property) , HTML etiketinin nitelik özelliğidir. Basitçe söylemek gerekirse, tüm HTML öznitelikleri CSS özelliklerine dönüştürülür. Örneğin genişlik, renk, font gibi…
  • Değer– Değerler, özelliklere atanır. Örneğin, renk özelliği, kırmızı veya # F1F1F1 Değerlere sahip olabilir .

Gerçek CSS kodu aşağıda gösterilen türde bir söz dizimine (syntax) sahiptir:

Yukarıdaki örnek söz diziminde sayfada bulunan <p> etiketli tüm metinlerin yazı fontu “Arial” tipi olarak tasarlanmıştır.


Web Sayfasına CSS Nasıl Eklenir?

HTML sayfalarınıza CSS eklemenin birkaç farklı yolu vardır. Yani, HTML dökümanınıza CSS bildirimlerini nasıl enjekte etmeniz gerektiği ile ilgili yolları ele alacağız. Her birinin kendi avantajları ve dezavantajları vardır. Doğru yöntemi veya yöntemlerin kombinasyonunu seçmek, yapmanız gereken iş miktarını azaltabileceği gibi, ziyaretçilerin sayfalarınıza erişiminde hafif bir hız kazandıracağı için de önemlidir.

Stilleri HTML belgenize ilişkilendirmenin üç yolu vardır. Bunlar;

  • Satıriçi Stil (Inline style)
  • Dahili Stil Sayfası (Internal style sheet)
  • Harici Stil Sayfası (External style sheet)
  • İçe Aktarılan Stil Sayfası (Imported style sheet)

1- Satıriçi Stil

Stil kurallarını tanımlamak için herhangi bir HTML öğesinin style niteliğini kullanabilirsiniz . Bu kurallar yalnızca o öğeye uygulanır.

Genel Söz Dizimi;

Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Tek bir öğe için benzersiz bir stil uygulamak için satır içi stil kullanılabilir. Ancak satıriçi kullanımı, CSS ‘in sunduğu tüm avantajları neredeyse ortadan kaldırmak anlamına gelir. Muhtemelen aynı kodu tekrar tekrar yazmanızı gerektirecek durumlar ortaya çıkarabilir. Ayrıca kodunuzu okumayı zorlaştıracaktır. Bu açıdan değerlendirildiğinde kullanımı pek tavsiye edilmez!

2 – Dahili Stil Sayfası

Dahili Stil yönteminde, CSS bildirimleriniz ayrı bir dosyada bulunmaz, bunun yerine HTML belgesinin üst kısmına eklenir. CSS kurallarınızı <style> öğesini kullanarak bir HTML belgesine yerleştirebilirsiniz. Bu etiket <head> … </ head> etiketlerinin içine yerleştirilir. Bu söz dizimi kullanılarak tanımlanan kurallar, dokümanda bulunan tüm öğelere uygulanır.

Genel Sözdizimi;

index.html

Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Dahili stil kullanımı, CSS’i sitenizin her sayfasına eklemek zorunda olduğunuz için ideal değildir. Genellikle tek bir sayfa eşsiz bir stile sahip olması gerektiği durumlarda dahili bir stil sayfası kullanılabilir.

3 – Harici Stil Sayfası (External Style Sheet)

CSS’yi dahil etmek için en popüler yöntemlerden biridir. Bu yöntem ile tüm CSS bildirimlerinizi harici bir dosyaya (genelde bir .css uzantılı dosya) yazdıktan sonra HTML belgenizin başlığında <head>…</head> etiketleri arasına <link> etiketi ile bağlantısı (ilişkilendirilmesi) aşağıdaki gibi yapılır.

<link> etiketi href niteliği ile birlikte, bağlanmak istediğiniz dosya için bir url yolu bildirmenizi ister. rel niteliği ile bağlanılacak linkin siteyle ilişkisi belirtilir. type niteliği dosyanın kaynağı hakkında tarayıcılara bilgi vermek için kullanılırken, media niteliğine atanan “all” değeri tüm cihazlar için geçerli olacak bir bağlantı bildirimini sağlamaktadır. Söz konusu .css uzantılı stil dosyası herhangi bir metin editöründe yazılabilir.

Gerekirse birden fazla stil sayfasına bağlanabilirsiniz. Bunu yapmak için her stil sayfası için ayrı bir bağlantı etiketi eklemelisiniz.

Örneğin;

Örnek bir CSS dosyasının içeriğine bir göz atalım.

stil.css

index.html


(Not: Burada stil.css dosyasının, index.html ile aynı dizinde bulunduğu varsayılmıştır. Aksi takdirde, URL’yi buna uygun olarak değiştirmeniz gerekir.)
Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Bağlı stil sayfalarını kullanmanın faydaları, tüm kurallarımızı tek bir dosyaya yazabilmemizin ardından bu dosyayı istediğimiz sayıda HTML belgesine bağlayabilmemizdir. Sonra tek bir dosyada değişiklikler yapabilir ve bu değişiklikleri tüm HTML dosyalarımızda gerçekleştiğini görebiliriz. Aynı CSS dosyanızı farklı web projelerinizde tekrar kullanabilirsiniz. Son kullanıcı için bir yararı da hız. Dış stil sayfası ilk kez indirildiğinde tarayıcı kendi önbelleğinde bir kopyasını saklayacaktır. Sonra diğer sayfaları ziyaret ettiğinizde tarayıcınız CSS kurallarının yeraldığı bu dosyayı tekrar indirmeyecektir. Diğer bir başka avantajı ise HTML bildirimleriniz ile stil bildirimlerinizin dosya olarak birbirinden ayrılmasıdır. Böylece .html uzantılı dosyalarınızda web sayfanızın mantıksal tasarımını ve içeriğini ön plana çıkarabilir, biçimlemeye yönelik bildirimlerinizi .css dosyalarınızda kontrol edebilirsiniz.

 4- İçe Aktarılan Stil Sayfası

İçe aktarılan CSS ile bir CSS dosyasındaki kuralları, başka bir CSS dosyasındaki kurallarla birleştirebiliriz. Bunu yapmak için, stil sayfamızda @import anahtar kelimesini kullanıyoruz . @import, harici bir stil sayfasını <link> öğesine benzer şekilde içe aktarmak için kullanılır. İşte @import kuralının genel sözdizimi;

Bu satır CSS dosyasına herhangi bir kural bildiriminden önce en üste eklenmelidir.

Bir örnek inceleyelim. Burada, stil.css, daha sonra HTML dokümanına bağlanacak olan tema.css’in içine aktarılır.

stil.css

tema.css

İçe aktarma, CSS’nin HTML sayfalarımıza nasıl uygulandığına dair daha hassas kontrol elde etmek için yararlı olabilir.  Web projelerinde büyük olasılıkla tüm sayfalarda genel stillerin uygulanmasını isteriz. Ancak bazı durumlarda projenin belirli bölümlerinin kendi özel stil düzenine sahip olması gerekebilir. Bunu yapmanın en iyi yolu, CSS dosyasını parçalara bölmek olacaktır. Genel olarak tüm ana stilleri içeren bir dosya oluşturduktan sonra, söz konusu belirli bölümler için özel CSS kurallar tanımlayan diğer stil dosyaları yaratılır. Ardından ana stil dosyası, bölümler için oluşturulan alt stil dosyalarına dahil edilerek sonunda bu bölüm stil dosyaları ilgili HTML sayfalarına bağlanabilir.

Sonuç olarak

En iyi yaklaşım genellikle Harici bir stil sayfasıdır. Tüm kuralları tek bir yerde tutmak iş yükümüzü azaltır (kaç tane sayfamız olursa olsun) ve son kullanıcı için indirme süresini biraz azaltacaktır. Sitemizin farklı bölümleri ile biraz daha farklı gösterilmesini istiyorsanız, içe aktarılan stil sayfaları da eklenmelidir.Harici Stil Sayfaları ile çalışmanız size CSS’in tüm gücünü kullanmanıza olanak verecektir. Birden fazla özel stile sahip projelerde ise İçe Aktarma yöntemini kullanarak CSS dosyalarını parçalamak projelerinizde çok fazla esneklik kazandıracaktır.

Tek bir sayfamız varsa (ve bunun değişmeyeceğini biliyoruz) Dahili olması daha iyi bir yol olabilir. Kullanıcı için iki yerine bir dosya indirmek biraz daha etkili olacaktır.

Satır İçi Stil yaklaşımından mümkün olduğunca kaçınılmalıdır.


CSS Kuralları

CSS Kuralları Geçersiz Kılma

Web uygulamalarımızı oluştururken bazı durumlarda yazdığımız CSS bildirimlerinin görevini yerine getirmediği görülür. Bunun bazı temel nedenleri vardır. Bu nedenleri ve yol açabilecek sorunları iyi bilmeden CSS uygulamak bazen sizi dolaylı yollara sürükleyebilir. Böylece stil kodlarınızda gittikçe artan bir karmaşıklık göze çarpar. Şimdi bu nedenleri inceleyelim;

Bir HTML öğesi için birden fazla stil belirtildiğinde hangi stil kullanılacak?

Stillerin sahip oldukları bir öncelik vardır.

  1. Satır içi stil (bir HTML öğesinin içinde)
    Dolayısıyla, satır içi stil (belirli bir HTML öğesinin içinde) en yüksek önceliğe sahiptir; yani, <head> etiketinde tanımlanan bir stili veya bir harici stil sayfasında veya bir tarayıcı varsayılan değerini geçersiz kılacaktır.
  2. Dahili Stil sayfaları (baş bölümünde)
    İkinci önceliğe sahip Dahili Satil Sayfaları <Style> … </ style> etiketlerinde tanımlanan kurallardır. Herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılacaktır.
  3. Harici Stil Sayfaları
    Harici stil sayfası dosyasında tanımlanan tüm kurallar en düşük önceliğe sahiptir ve bu dosyada tanımlanan kurallar yalnızca yukarıdaki iki kural geçerli olmadığında uygulanır.
  4. Tarayıcı varsayılan
    İlgili HTML öğesine herhangi bir stil bildirimi yok ise tarayıcı varsayılan stili geçerli tutulacaktır.

 

Tarayıcılarla Uyumlu Çalışma

CSS her geçen gün sürekli olarak güncellenmektedir. Dolaysıyla yeni çıkan özelliklere tarayıcıların cevap vermesi aynı hızda olamayabiliyor. CSS’in bazı özelliklerini hala desteklemeyen birçok tarayıcı var. Dolayısıyla, Katıştırılmış CSS’mizi bir HTML belgesine yazarken hangi tarayıcılarda geçerli olduğu, yada geçerli kılmak için nasıl bir söz dizimine sahip olması gerektiğine dikkat ederek yazmakta yarar var.  Bazen tarayıcıların yazdığınız CSS’i farklı yorumlayabilirler. Bu da web sayfalarınızın farklı tarayıcılarda farklı görünmesine yol açacaktır. Biz her zaman siteleri her ortamda aynı stilde kalmasını arzularız. Ama durum her zaman böyle olmayabilir. Bu sorunsalı aşmanın en kolay yollarından biride farklı tarayıcılar için farklı CSS bildirimlerinde bulunmaktır. Bu konuyu ileri konularımızda tekrar ele alacağız.

CSS Yorum Satırları

Çoğu zaman, stil sayfası bloklarınıza ek açıklamalar koymanız gerekebilir. Bu nedenle, stil sayfasındaki herhangi bir bölümü yorum satırı yapmak çok kolaydır. Basitçe // kullanabilirsiniz.

Çok satırlı blokları C ve C ++ programlama dillerinde yaptığınız gibi benzer şekilde yorumlamak için / * …. * / kullanabilirsiniz.


CSS Seçicileri (Selectors)

Bu bölümde tüm seçicileri kapsamayacağız (bu çok uzun ve kafa karıştırıcı olacaktır). Bunun yerine, daha kullanışlı seçicilerden bazılarını inceleyeceğiz ve diğerlerinden kolayca keşfedebileceğiniz ve öğrenebileceğiniz bir temel oluşturacağız. CSS seçicileri, HTML öğelerini öğe adı, kimliği, sınıfı, özniteliği ve daha fazlasına dayanarak “bulmak” (veya seçmek) için kullanılır.

Seçicilerin Kullanımını örneklerle inceleyelim;

1 . Eleman Seçici (Element Selector)

Eleman seçici, HTML etiket adına dayalı tüm öğeleri seçer. Seçici olarak CSS bildiriminde etiket ismi vermek yeterli olacaktır.

Örnek;

Örneğimizde sayfanın gövdesi olan <body> öğesi arkaplanı sarı renkte, başlık olarak verilen <h1> öğesi yeşil renginde ve ortalanmış metin olarak tasarlanırken, tüm <p> öğeleri ise kırmızı renkli ortalanmış ve 24px boyutunda olacaktır. Dikkat edecek olursanız tüm <p> öğeleri bu stilden etkilenmiştir. Uygulamayı test ettiğinizde aşağıdaki gibi bir görünüm elde edilecektir.

2-Kimlik Seçicisi (Id Selector)

Seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id özniteliğini kullanır. Bir öğenin kimliği, bir sayfada benzersiz olmalıdır, dolayısıyla kimliği seçici, benzersiz bir öğe seçmek için kullanılır!

Kimliği, harfler, rakamlar, altçizgiler ve çizgilerle belirtilebilir. Nesneyi temsil ettiğini kolayca tanımlayabilmeniz için açıklayıcı bir şey olarak adlandırmanız en iyisidir. Bir sayfada istediğiniz kadar çok sayıda kimliği olabilir. Sayfadaki herhangi bir etikete bir kimlik uygulayabilirsiniz.

CSS ile belirli bir kimliği olan bir öğeyi seçmek için, öğenin kimliğinden önce (#) karakteri kullanmalısınız.

Yukarıdaki stil kuralı, id = “icerik” olan HTML öğesine uygulanacaktır:

3-Sınıf Seçicisi (Class Selector)

HTML’deki  bir id niteliği kullanarak tek bir öğeye atıf yapabilmenin dışında aynı anda birden çok öğeye class niteliği ile bir CSS kuralını uygulamak mümkün.  Stil kurallarını öğelerin sınıf özniteliğine göre tanımlayabilir, bu sınıfa sahip tüm öğeler, tanımlanan CSS kuralına göre biçimlendirebilirsiniz. Tek bir sınıf, aynı sayfada farklı etiketler türlerine de uygulanabilir. Dikkat edilmesi gereken husus, uygulanmak istenen HTML öğelerine aynı sınıf ismini vermektir. Diğer bir husus ise belli bir sınıfa sahip öğeleri seçmek için, nokta (.) karakteri kullanarak bunu sınıfın adıyla yazın.

Yukarıdaki örnekte, class = “center” olan tüm HTML öğeleri kırmızı ve orta hizalı olacaktır.

Sınıf seçiciler belkide en çok kullanılan seçici şeklidir. Farklı kullanımlarıda mümkün olmaktadır. Örneğin;

Ayrıca, yalnızca belirli HTML öğelerinin bir sınıften etkilenmesi gerektiğini de belirleyebilirsiniz.

Yukarıdaki örnekte, yalnızca class = “center” olan <p> öğeleri ortalanacaktır.

HTML öğeleri aynı zamanda birden fazla sınıfa da başvurabilir.

Yukarıdaki örnekte <p> öğesi, class = “center” ve class = “large” biçiminde olacaktır;

4- Seçicileri Gruplama (Grouping Selectors)

Aynı tarz tanımlarına sahip öğeleriniz varsa, kodu en aza indirgemek için seçicileri gruplandırmak daha iyi olacaktır. Seçicileri gruplamak için, her seçiciyi bir virgül ile ayırın ve ortak CSS bildirimlerini yazın. Örneğin;

Yukarıdaki gibi bir durumda ortak CSS bildirimlerini ait seçicileri gruplamak iyi bir yol olacaktır.

5- Torun Seçici (descendant selector)

Belirtilen bir öğenin altında bulunan tüm alt öğeleri seçmeniz için kullanılan bir yöntemdir. Seçiciden hemen sonra altındaki öğeleri temsilen kullanacağınız ikinci seçici ile aralarında bir boşluk (space) bırakmak yeterlidir.

Örnek

Aşağıdaki örnek, <div> öğelerindeki tüm alt <p> öğelerini seçer.

5- Çocuk Seçici (child selector)

Belirtilen bir öğenin bir alt seviyesinde bulunan tüm öğeleri seçmeniz için kullanılan bir yöntemdir. İki seçici arasında “>” işareti kullanılır.

Örnek

Aşağıdaki örnek, <div> öğelerinin hemen altında bulunan tüm <p> öğelerini seçer.

5- Komşu Seçici (adjacent sibling selector)

Kendinden hemen sonra gelen ilk öğeyi seçmek için kullanılır. Seçiciler arası “+” işareti kullanılır.

Örnek

Aşağıdaki örnek, <div> öğelerinin hemen sonrasına yerleştirilen tüm <p> öğelerini seçer.

5- Kardeş Seçici (general sibling selector)

Kendinden sonra gelen tüm öğeleri seçmek için kullanılır. Seçiciler arası “~” işareti kullanılır.

Örnek


CSS Renkleri

Bir web sayfasının görünümüyle oynayacaksanız, doğru yapmanız gereken en önemli işlerden biri renktir. Metni, arka planı, sınırını ve daha fazlasını içeren web sitemizin, renklerini değiştirebiliriz. Doğru renk düzenini elde etmek sayfalarımızın görünümünü önemli ölçüde etkileyebilir. Çeşitli biçimlerde renk değerlerinizi belirtebilirsiniz. Renkler;

  • Önceden Tanımlı Renk Adları
  • RGB
  • HEX
  • HSL
  • RGBA
  • HSLA

değerleri kullanılarak belirtilir.

1-HTML ile bir renk, önceden tanımlanmış adı kullanarak belirtilebilir;

HTML’de isimlendirilmiş 140 civarında renk tanımı vardır. Bu renklerden birini kullanmak için tanım adını vermeniz yeterlidir.

Yukarıdaki örnekte <h1> etiketlerinin background-color özelliğine renklerin adlarının uygulandığını görebilirsiniz.

2-RGB Değerleri ile Çalışmak

HTML’de, bir renk aşağıdaki formülü kullanarak bir RGB değeri olarak belirtilebilir:

rgb ( kırmızı, yeşil , mavi )

Her parametre (kırmızı, yeşil ve mavi) 0 ile 255 arasındaki rengin yoğunluğunu tanımlar. Örneğin rgb (255, 0, 0) kırmızı olarak görüntülenir, çünkü kırmızı en yüksek değerine (255), diğerleri 0’a ayarlanmıştır. Siyah rengi görüntülemek için, tüm renk parametrelerinin rgb (0, 0, 0) olarak ayarlanması gerekir. Beyaz rengi görüntülemek için, tüm renk parametrelerinin 255 olarak ayarlanması gerekir: rgb (255, 255, 255)

Yukarıdaki örnekte farklı RGB değerleri ile renk gösterimi yapılmıştır.

3-HEXADECIMAL (Onaltılık) Sayı Olarak Renk Değerleri

Onaltılık, bir rengin 6 basamaklı bir temsilidir.

rrggbb

Her onaltılık kodu ‘#’ işareti ile birlikte belirtilmelidir.

İlk iki rakam (RR) kırmızı bir değeri temsil eder, sonraki ikisi yeşil bir değerdir (GG) ve sonuncusu mavi değerdir (BB).

Her renk birimi 00 ile ff arasındaki onaltılık değerler olabilir.(ondalık 0-255 ile aynıdır).

Örneğin, kırmızı, en yüksek değerine (ff) ve diğerleri en düşük değere (00) ayarlandığından # ff0000 kırmızı olarak görüntülenir.

Onaltılık bir değer, Adobe Photoshop, Jasc Paintshop Pro gibi herhangi bir grafik yazılımından veya hatta Gelişmiş Paint Fırça kullanılarak alınabilir.

Yukarıdaki örneğimizde onaltılık (hexadecimal) değerler kullanılarak çeşitli renk gösterimi yapılmıştır.

4-HSL Değeri Kullanımı

Renkleri temsil etmenin başka bir yolu da HSL‘dir.

hsl ( ton , doygunluk , hafiflik )

Ton, renk çarkı üzerinde bir dereceye kadar baz rengi belirtir. Kırmızı 0 °, yeşil 120 °, mavi 240 ° ve nihayetinde yine 360 ​​° döndürür.

Ardından , rengin ne kadar canlı olduğu Doygunluğu belirtiyoruz . Tam canlılık 100 ve donuk veya gri olan 0 arasında bir değere sahiptir.
Son olarak Parlaklık veya açıklık belirtiyoruz. Siyaha eğilimli olan 0 ile beyaza eğilimli olan 100 arasında bir değere sahiptir.

Yukarıdaki örnekte HSL değerleri üzerinden farklı renk gösterimi yapılmıştır.

5-RGBA Değeri

RGBA renk değerleri, RGB değerinin yanı sıra bir rengin opaklığını (şeffaflığı) belirleyen bir alfa kanalının eklenmesiyle belirtilir. Bir RGBA renk değeri aşağıdaki şekilde tanımlanır:

rgba ( kırmızı, yeşil , mavi, alfa )

Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasındaki bir sayıdır:

Yukarıdaki örnekte RGBA değerleri kullanılarak farklı renk gösterimi yapılmıştır.

6-HSLA Değeri

HSLA renk değerleri, HSL değerine sahip bir rengin opaklığını belirleyen bir alfa kanalı ile birlikte belirtilir. Bir HSLA renk değeri aşağıdaki şekilde tanımlanır:

hsla ( ton, doygunluk , açıklık, alfa )

Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasındaki bir sayıdır.

Yukarıdaki örnekte HSLA değerleri kullanılarak farklı renk gösterimi yapılmıştır.

 


CSS Arka Plan Background Kullanımı

HTML öğelerinin arka plan efektlerini tanımlamak için CSS Arka plan özeliklerinden faydalanabilirsiniz. Şimdi bu özelliklerin neler olduğuna ve nasıl kullanıldıklarına bakalım;

1-background-color

background-color özelliği bir HTML öğesinin arka plan rengini belirlemenizi sağlar.

Yukarıdaki örnekte sayfanızın tüm arka plan rengini aqua yapmanızı sağlar.

CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirlenir.

  • geçerli bir renk adı – “red” gibi
  • bir Hex değeri – “# ff0000” gibi
  • bir RGB değeri – “rgb (255,0,0)” gibi

CSS ile Renkler üzerine daha fazla bilgi almak için CSS Renkler başlıklı konuda inceleme yapabilirsiniz.

Örnek ;

Yukarıdaki örnekte HTML belgesi içinde bulunan <h1> <div> <p> öğelerinin arkaplan renkleri farklı renk gösterim şekilleri kullanılarak tanımlanmıştır.

2-background-image

background-image özelliği bir HTML öğesinin arka plan resmini tayin etmenizi sağlar. Varsayılan olarak, resim tüm elemanı kapsayacak şekilde tekrarlanır.

Bir sayfanın arka plan resmi aşağıdaki şekilde ayarlayabilirsiniz.

Not :   “resim.jpg” dosyası, sayfa ile aynı dizinde olduğu varsayılarak url() yolu yazılmıştır.

Örnek;

Sayfa tasarımlarında arka plan resmi kullanmak her zaman iyi bir bikir olmayabilir. Bir arka plan resmi kullanırken, metni rahatsız etmeyen bir görüntü kullanmanız tavsiye edilir.

3-background-repeat : repeat-x , repeat-y ,no-repeat

background-image özelliği ile tanımladığınız arka plan resmi resmin büyüklüğü ile orantılı olarak yatayda ve dikeyde tekrarlanarak tüm zemini dolduracaktır. Ancak tekrarlama sürecini sadece yatay (repeat-x), sadece dikey(repeat-y) veya tekrarsız(no-repeat) bir şekilde yapılmasını isteyebilirsiniz.

repeat-x kullanımına dair bir örnek;

repeat-y kullanımına dair bir örnek;

no-repeat kullanımına dair bir örnek;


background-position

Arka plan resmini sayfanızın belirli bir konumuna veya merkezine yerleştirebilirsiniz. Bunun için background-position özelliğine konumlandırmak istediğiniz yeri belirtmeniz yeterli olacaktır.

background-position özelliğinin alabileceği değerler;

Örnek;

Yukarıdaki örneğimizde arka plan resmi sağ-üst köşeye yerleşmesi sağlanmıştır.

background-attachment

Sayfa içeriğiniz ne kadar uzun olursa olsun arka plan resmini sabitlemek istiyorsanız background-attachment özelliğine, sayfanın geri kalanıyla birlikte kaydırma yapmayacağınızı belirtmek için fixed değeri ile birlikte kullanabilirsiniz.

background

Kodu kısaltmak için, tek bir bildirimde tüm arka plan özelliklerini belirtmek de mümkündür. Buna, kısaltılmış bildirim denir.

background özelliği kısaltılmış bir bildirim özelliğidir. Kısaltmayı kullanırken sıralamanız şöyle olmalıdır.

Özellik değerlerinden birinin eksik olduğu durumda, diğerleri bu sırada olduğu sürece herhangi bir sorun oluşturmaz.

Örnek

background-size

CSS3 ile birlikte gelen background-size özelliği arka plan görüntülerinin boyutunu belirlemenizi sağlar. CSS3’ten önce, bir arka plan resminin boyutu, resmin gerçek boyutuydu. Bir arka plan resmini tam ekran yapabilmek için farklı tekniklerden faydalanıyorduk. Ancak CSS3, arka plan görüntülerini farklı bağlamlarda yeniden kullanmamızı sağlıyor.

Boyutlar, uzunluklar, yüzdeler veya iki anahtar kelimeden birini kullanarak belirtilebilir: içerme veya kapak.

Örnek;

Aşağıdaki örnek, bir arka plan resmini orijinal resminkinden çok daha küçük boyuta getirir (pikselleri kullanarak):

Örnek;

Tam ekran arka plan resmi yapabilirsiniz.

Bunun için background-size özelliğine “cover” değeri atamanız yeterlidir.


 

CSS Kenarlık Ekleme

Her HTML elementin sahip olduğu bir kenarlığı (Border) mevcuttur. Siz onu biçimlendirmediğiniz sürece görülmez.

CSS Border özelliği, bir HTML öğesinin kenarlık stilini, genişliğini ve rengini belirtmenizi sağlar.

border-style Özelliği

border-style özelliği kenar çizgisinin dolgu stilini belirlemenizi sağlar. Aşağıda bu özellikler kısaca gösterilmiştir.

  • dotted – Noktalı çizgiye sahip kenarlığı tanımlar
  • dashed – Kesik çizgili kenarlığı tanımlar
  • solid – Düz bir sınır tanımlar
  • double – Çift çizgili kenarlığı tanımlar
  • groove –  Oluklu bir kenarlığı tanımlar. Etkisi kenar renk değerine bağlıdır.
  • ridge – 3 boyutlu etkiye sahip düzleştirilmiş bir sınır tanımlar. Etkisi kenar renk değerine bağlıdır.
  • inset – 3 boyutlu etkiye sahip iç bükey kenar çizgisi tanımlar. Etkisi kenar renk değerine bağlıdır.
  • outset – 3 boyutlu etkiye sahip dış bükey kenar çizgisi tanımlar. Etkisi kenar renk değerine bağlıdır.
  • none – Herhangi bir kenar tanımlamaz
  • hidden – Gizli bir kenarlığı tanımlar

Örnek bir uygulama;

Aşağıda <p> etiketine uygulanmış farklı kenar stillerini görebileceğiniz bir örnek uygulama gösterilmiştir.

Ayrı ayrı kenarlara farklı stillerde uygulayabilirsiniz.

Peki, işler nasıl işliyor:

Eğer border-style özelliğine dört değer birden verilirse;

  • üst kenar “solid”
  • sağ kenarlık “dashed”
  • alt sınır “dotted”
  • sol sınır “groove” olarak tayin edilir.

Eğer border-style özelliğine üç değer verilirse;

  • üst kenar “solid”
  • sağ ve sol kenarlar”dashed”
  • alt kenar “groove”

Eğer border-style özellik iki değer verilirse;

  • üst ve alt sınırlar “solid”
  • sağ ve sol kenarlıklar “groove”

Eğer border-style özellik bir değeri varsa;

  • dört kenarın hepsi “solid”

şeklinde stil tayin edilmiş kabul edilir. Bu durum border-width ve border-color için de geçerlidir.

border-width Özelliği

border-width özelliği kenar çizgisinin kalınlığını (genişliğini) belirlemenizi sağlar. Çizgi kalınlığını (px, pt, cm, em vb…) türünden ölçülerle ifade edebilirsiniz. Tek değer vermeniz durumunda tüm çevre çizgi kalınlığını ifade etmiş olursunuz. Ayrı çizgi kalınlığı için 4 ayrı değerde verebilirsiniz. Bu durumda vermiş olduğunuz ölçüler sırayla üst, sağ, alt ve sol kenar taraflarının ölçüleri olacak şekilde tayin edilmiş olacaktır.

Aşağıda border-width CSS özelliğinin kullanımını inceleyebilirsiniz.

border-color Özelliği

border-color özelliği kenarların rengini tayin eder.

CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirleyebilirsiniz.

  • geçerli bir renk adı – “red” gibi
  • bir Hex değeri – “# ff0000” gibi
  • bir RGB değeri – “rgb (255,0,0)” gibi

Örnek;

border Özelliği

Yukarıdaki örneklerden de görebileceğiniz gibi, kenarlar ile uğraşırken göz önüne alınması gereken birçok özellik vardır. Kodu kısaltmak için, tek bir “border” özelliğinde tüm bireysel kenarlık özelliklerini toplamakta mümkündür.

border özelliği sırayla ;

  • border-width
  • border-style
  • border-color özelikleri için bir kestirme niteliktir

Örnek;

Örnek;

Ayrıca, tek taraf için tüm bireysel kenarlık özelliklerini belirtebilirsiniz;

Örnek;

border-radius Özelliği

border-radius özelliği kenarları yuvarlatmak için kullanılır.

Örnek;

Aşağıdaki örnekte <p> elementine uygulanmış birbirinden farklı değerler ile köşeleri yuvarlatılmış kenar stilleri görebilirsiniz.


CSS Margin Kullanımı

CSS margin özellikleri ile HTML öğesine ait kenarların (border) dışından başlayarak elemanın çevresinde boşluk oluşturmak için kullanılır. Bu sayede margin kullanımı ile HTML öğelerinizin birbirleri ile aralarında oluşacak olan dış boşlukları ve aralarındaki mesafeleri tayin edebilirsiniz.

Örnek;

Aşağıdaki örneğimizde bir <div> öğesinin dış boşluğu 90 piksel olarak tayin edilmiştir.

CSS, aynı zamanda bir öğenin her bir kenarına ait özel margin değeri belirlemek için alt özelliklere sahiptir;

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Tüm margin özelliklerinde aşağıdaki türden değerler verilebilir;

  • auto – tarayıcı marjı hesaplar
  • bir değer – px, pt, cm vb. cinsinden bir kenar boşluğu belirtir.
  • % – içeren öğenin genişliğinin yüzdesi cinsinden bir kenar boşluğu belirtir
  • inherit – kenar boşluğunun üst öğeden devralınması gerektiğini belirtir.

Not: margin özelliğinde Negatif değerlere izin verilir.

Örnek;

Aşağıdaki örnek, bir <p> öğesinin dört kenarının tümünde farklı kenar boşlukları ayarlamaktadır:

margin özelliği

Kodu kısaltmak için bir margin özelliğinde tüm kenar boşluklarını belirlemek mümkündür.

margin özelliği sırayla aşağıdaki bireysel margin özellikleri için bir kestirme nitelik olarak kullanılmaktadır.

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

margin özelliğinin kullanımına bir bakalım;

Eğer margin özelliğine dört değer birden verilirse;

  • üst kenar boşluğu 35 pikseldir
  • sağ kenar boşluğu 50 pikseldir
  • alt kenar boşluğu 75 pikseldir
  • sol kenar boşluğu 100 pikseldir.

Eğer margin özelliğine üç değer verilirse;

  • üst kenar boşluğu 25 pikseldir
  • sağ ve sol kenar boşlukları 50 pikseldir
  • alt kenar boşluğu 75 pikseldir

Eğer margin özelliğinde iki değer varsa;

  • üst ve alt kenar boşlukları 25 pikseldir
  • sağ ve sol kenar boşlukları 50 pikseldir

Eğer margin özelliği tek bir değer ise;

  • dört kenar boşluğu da 25 pikseldir

auto değeri

margin değeri olarak auto verilmesi, HTML öğesinin kendini kapsayan elementin sınırları içinde yatay olarak orta kısımda hizalanmasını sağlayacaktır. Uygulanan HTML elemanı, belirtilen genişliğini alacak ve kalan alan sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir;

Örnek;

 

inherit değeri

margin değerine atanabilecek değerlerden biride “inherit” tir. Bu değerin anlamı devralmadır. Değerin atandığı HTML öğesini kapsayan öğenin özellik değerini alması gerektiğini belirtir.

Örnek;

Aşağıdaki örneğimizde <p> etiketinin sol dış boşluğu onu kapsayan <div> bloğu ile aynı değerde olacaktır.

margin Özelliğinin Çalışmadığı Durumlar

Üst üste gelmesini istediğimiz her iki HTML öğelerinin üst ve alt kenar boşluklarına margin atanabilir. Böyle durumlarda iki öğenin toplam margin değeri kadar boşluk bırakması beklenirken durum böyle olmaz. Bu gibi senaryolarda iki öğenin arasındaki boşluk margin değeri en yüksek olana eşitlenir. Bir örnekle inceleyelim;

Yukarıdaki örneğimizde <h1> öğesine 50px <h2> öğesine ise 20px margin dış boşluk verilmiştir. Hesaplamalara göre <h1> başlığı ile <h2> başlığı arasında toplam (50px+20px) 70 piksel boşluk olması beklenirken, ekran çıktısında aradaki boşluğun 50 piksel olduğu görülür.

Bu durum yalnızca alt ve üst boşluklarda meydana gelmektedir, sol ve sağ kenar boşluklarında gerçekleşmez!


 

Yorum yap

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d blogcu bunu beğendi: