Css xhtml elemanlarının bir kutu içinde düşündüğünden  , kutunun border yani kenarlık özelliklerini değiştirme imkanı sağlar.

1-border-style(kenarlık için stil tanımlaması)

Bu özellik kenar çizgisinin tipini ayarlamak için kullanılınır.Ayrıca kutu kenar çizgilerini kullanıma açmak için kullanılınır .Bu özelliğe atadığınız değer kutunun 4 kenarı içinde uygulanır.

Burada şuna dikkat edelim bir p elemanı için kenarlık stili yani tipi tanımlaması yaptım çünkü p elemanı css tarafından bir kutu içerisindeymiş gibi varsayılır.

Örnek:

Resimin normal hali aşağıdadır ;

CSS kodlarının media türüne göre yazılması

Media özelliği ile oluşturmuş olduğumuz stil kodlarının hangi ortamda çalışacağını ayarlayabiliyorduk bu durumda CSS kodlarını media özelliğini kullanarak guruplara ayırıp web belgemizin içine yazabiliriz.

@media deyimi ;

İki gurup CSS kodu var @media screen kodları belge tarayıcıda  izlenirken kullanılacak . @media print  içindeki kod gurupları da sayfa yazıcıdan çıktı alınacağı zaman kullanılacak.

CSS dosyalarının media türüne göre  sayfaya dahil edilmesi.

Dışarıdan ithal edilen CSS kodlarını media ile ortama göre gruplandırmak için;

@import url(ana.css) screen;

@import url(yazıcı.css) print ;

Yada <link> elemanı ile

<link rel=”stylesheets” type=”text/css” href=”ana.css” media=”screen” />

<link rel=”stylesheets” type=”text/css” href=”yazıcı.css” media=”print” />

Şeklinde yazmamız mümkün..

CSS YAPISI VE  SYNTAX (SÖZDİZİMİ)

CSS söz dizimi 2 ana kısımda incelenebilir. Seçici , Bildirim Bloğu tabi burada bildirim bloğu içersinde bildirimler vardır.

Seçici : Bir gurup bildirimi(özellikler ve aldıkları değerleri) temsil eden bir addır.Tüm  HTML etiketleri  yada sınıf seçici yada id seçici olabilir.

Bildirim bloğu: Seçici için tüm CSS özellikleri içinde tutan yapıdır. Süslü parantezle açılır ve Bildirimler bittiğinde süslü parantezle kapanır. ” {} ” ,Bunlara bildirim bloğu kapsayıcıları denir. İçerisinde bildirimleri taşır her bildirimden sonra muhakkak ; konmalıdır.

Bildirimler: Bildirim CSS özelliği(property) ve aldığı değerden (value) oluşur. Property ve value arasında  ” : ” karakteri kullanılmalıdır.

Property : value (CSS özelliği : özelliğin aldığı değer )

örneğin ;

Yukarıdaki örnekte seçici ve bildirim bloğu , bildirimler gözükmektedir.

CSS ‘de özellikler ve değerler:

CSS standart olarak size bir çok özellik ve bu özelliklerin alabileceği değerleri sunar.Hangi özelliğe hangi değeri vereceğiniz tamamen tasarımınızla ilgilidir. CSS değerler çift tırnak içine alınmaz.

SEÇİCİLER

Daha öncede söylediğim gibi seçiciler bir gurup özellik ve özelliklerin aldıkları  değerlerin adıdır.Özellik gurupları bu adla temsil edilirler.

1.Etiket (xHTML ) Seçiciler:

Seçici olarak XHtml etiketleri kullanılınır.Var olan tüm etiketler Birer seçici olarak kullanılabilir.XHTML etiketlerinin görevlerini yeniden tanımlamak için kullanıldığı gibi XHTML elemanına ek özellikler katmak içinde kullanılabilir.

Bir XHTML etiketini olan <p> ( paragraf etiketi )  seçici olarak tanımlarsak ve  özellikler eklersek  sayfada kullanılan tüm <p> etiketlerinin içindeki nesnelere bu özellikler uygulanır.

Özet olarak bir XHTML elemanı seçici olarak kullanılırsa   tüm belge boyunca ona atadığınız özellikleri barındırdıkları içeriklere(yazı, resim,tablo) uygularlar.

Burada h2 ve p elemanlarına CSS özellikleri atanmış ve sayfada görüldüğü gibi içinde taşıdıkları nesnelere bu özellikler uygulanmış.

2.Sınıf  Seçicisi  (Class selector)

Sınıf seçicilerini bir XHTML etiketine farklı özellikler eklemek için kullanabiliriz ki bu durumda bu sınıf seçicileri bağımlı sınıf seçicileri olarak adlandırılırlar.

Örnekte dikkat edileceği üzere <p> etiketi sınıf seçici olmadan yapılsaydı yazılan özelliklerden belgedeki  tüm <p> tagları  etkilenecekti ama şimdi p tagı için iki sınıf oluşturuldu ve ayrı ayrı özellikler atandı artık istenilen <p>  etiketlerine  istenilen class atanabilir.

Burada tanımlanan iki sınıfta <p> tagına bağımlı sınıflardır. Bu durumda sayfada sadece <p> tagına bu class’lar atanabilir

Eğer bağımlı bir sınıf seçici oluşturmak  istiyorsak ;

Eğer bağımsız yani tüm imler tarafından kullanılabilecek bir sınıf seçici oluşturmak istersek bu durumda nokta ile başlayıp sınıf seçici adını yazmamız yeterli olacaktır.

Sınıf seçicinin en önemli özelliği tüm HTML elemanları tarafından kullanılabilmeleridir.Yani bağımsız sınıf seçicilerini farklı XHTML imlerine atayabiliriz.

ÖLÇÜLENDİRME

CSS özelliklerine uzunluk değerleri 2 şekilde tanımlanabilir.

Mutlak değerler (absolute values ) ve  göreceli değerler (relative values)

Mutlak uzunluk birimleri:

Mutlak uzunluk birimlerinin değerleri tam ve kesin değerlerdir.Bu değerler herhangi bir nedene bağlı olarak değişmez.

in : inç (1inch=2,54cm) bir uzunluk birimidir.ör: 2,25in

cm : Santimetre ör: 2,33cm

mm: Milimetre ör: 23mm(1 mm 0,1cm eşittir)

Pt : punto baskı birimidir.Genellikle font büyüklüğü tanımlamak için kullanılınır.

1pt: 1/72 inç  örneğin :  16pt

pc : Pika  1 pika 12punto değerine eşittir.Baskıda kullanılan bir ölçü  birimdir.

Göreceli Uzunluk Birimleri:

Göreceli uzunluk birimleri kullanıldığı ortama göre değişir.Yani ölçü birimlerinde ölçülendirme başka bir veriye göre yapılır.Bu durumda verinin özellikleri değiştiğinde göreceli uzunluklarda değişir.

ex : kullanılan fontun  x harfinin yüksekliğine göre ölçülendirme işlemi yapılır.

em : kullanılan fontun M harfinin genişliği

px : piksel yazılımsal olarak ekranı oluşturan en küçük noktadır.Bu durumda uzunluk değerleri px cinsinden verilebilir.Çözünürlüğün değişmesine bağlı olarak px cinsinden verilen uzunluk değerleri de  değişir.

% (yüzde) : Değer atadığımız özelliğe bağlı başkaca bir özelliği yada kapsayıcı elemanın uzunluk değerlerini baz alarak ölçülendirme yapılır .  25%

RENK DEĞERLERİ

Programatik olarak renkleri kodlamamız gereklidir.CSS renk kodlaması için bize farklı seçenekler sunar.

#RRGGBB : Burada ilk 2 basamak  kırmızı(red) diğer 2 basamak yeşil(green) ve son iki basamak mavi(blue) rengini temsil etmektedir.Burada basamaklara girilecek değerler 16 sayı tabanında(hexadecimal) olmalıdır.Girdiğiniz değerlere göre renk yoğunlukları belirlenir.

#RGB :Her renk için (red,gren,blue) bir basamak ayrılmıştır.Yine hexadecimal sayı sistemi kullanılacaktır.

Rgb(R,G,B): Bir rengin kırmızı , yeşil , mavi olmak üzere sayısal değerleri

ör : rgb(204,51,225)  burada bir renk tanımlaması için 0-255 değerleri girilebilir.

Rgb(R%,G%,B%) : Bir rengin karşılığı olan  red, green , blue yüzde değerleri rgb(45%,34%,23%)

Name : renk atama işlemlerinde rengin adını kullanabiliriz.ör: bgcolor: red ;

CSS3 ile beraber gelen özelliklerden bir tanesi RGBA(RGB with alpha channel) yani bir rengi tanımlarken alfa saydamlık değerini de girmemiz mümkün