STİLLER
CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web sayfasını biçimlendirmek için oluşturulmamıştır.
HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek <h1>this is a heading</h1> <p>this is a paragraph.</p> Font, color gibi özellikler HTML 3.2 ye eklenen özelliklerdir. Ama aynı zamanda tasarımcılar için bir kabus olmuştur!!! PEKİ NEDEN? NASIL ÇÖZÜLECEK?
CSS nin GÜCÜ HTML 4.0 ile birlikte CSS geliştirildi. Böylece bütün biçimlendirme özellikleri web sayfasında ayrılarak, farklı bir sayfada tutulabilecekti. CSS ile tek bir dosyada düzenleme yaparak bütün web sayfalarını aynı anda değiştirebilme gücüne sahip oldunuz.
Selector:Biçimlendirmek istediğimiz HTML Etiketi Declaration:Değiştirmek istediğimiz bir özelliği ve değerini ifade etmektedir. Aşağıdaki örnekte H1 etiketinin renk ve font büyüklüğü ayarları gözükmektedir. CSS YAZIM KURALLARI
Her bir Declaration noktalı virgül ile sona erer Declarationlar ifade edilirken süslü parantezler içerisine yazılır. CSS YAZIM KURALLARI
CSS YAZIM KURALLARI CSS leri daha okunabilir forma dönüştürmek için aşağıdaki yazım biçimi kullanılabilir.
CSS YAZIM KURALLARI Kodu açıklamak için sayfaya yorum satırları eklenebilir.
ID &Class Sadece HTML etiketlerine düzenlemek için CSS yazılmaz. CSS nin bir özelliği de ID ve Class olarak isimlendirilen kendi seçicilerinizi yazabilmenizdir. Class, belirli bir elemana bağlı olmayan sınıflar yaratmamızı sağlar. Tek bir sınıfı pek çok farklı elemana uygulayabilirsiniz. ID seçicisi # ile class seçicisi. İle tanımlanır. Class ve id isimleri rakamla başlayamazlar.
ID &Class ID ler ile önemli bir istisna dışında birbirine benzerler. ID ler belirli bir elemanı benzersiz şekilde tanımlayabilmeleri için sayfada tek bir kez kullanılırlar. Benzersiz yapılarından ötürü genellikle script yazmak amacı ile kullanılırlar. Örneğin bir menü oluştururken id lere göre (if id==1 veya id==2) git şunu değiştir. Class lar biraz daha genek anlamda kullanılır. Yazım tekniği olarak bir şey değişmemektedir. Sadece kullanıldığı yerler farklıdır.
ID &Class Yan taraftaki yazım tekniği class ismi center olan bütün paragrafları etkileme demektir. Ve paragraf dışında center classını başka bir etiketle kullanmak istediğinizde buna izin vermeyecektir. Bu class herhangi bir HTML etiketi ile kullanıldığında onu ortalayacaktır.
Stil Çeşitleri Satır içi (Inline) Dahili Stiller (Internal) Harici Stiller (External) Yukarıdaki Stil çeşitlerinde yazım kuralları aynıdır. Aralarındaki fark ise kullanılma biçimidir. Satır içi stillerde özellikler html etiketinin içine yazılır.
Stil Çeşitleri Dahili Stillerde CSS kuralları sayfada <Head> kısmına yazılır. Harici stillerde ise üzerinde çalıştığımız web sayfasının <head> bölümünde stil sayfasına link verilir. Bu ise sayfa ile ilgili görünüm özelliklerini şu konumda bulunan stil sayfasından alabilirsin demektir. Avantajı ise web sayfamız gereksiz kod karabalıklığından kurtulmuş olur.
Stil Çeşitleri
Birden fazla Stil varsa Harici stil sayfasının özellikleri Dahili stil sayfasının özellikleri
BASAMAK SIRASI Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)
CSS BACKGROUND ÖZELLİKLERİ
BACKGROUND COLOR Bu kod bir sayfanın arka plan rengini ayarlamak için kullanılır Bu kodlar ise herhangi bir html etiketinin arka plan rengini ayarlamak için kullanılır. Uygulanan etikete göre farklılık gösterir
BACKGROUND IMAGE Bu kod bir sayfanın arka plan resmini ayarlamak için kullanılır Bu kodlar ise herhangi bir html etiketinin arka plan rengini ayarlamak için kullanılır. Uygulanan etikete göre farklılık gösterir
Metin Biçimlendirme Text Color Text Alignment Text Decoration Text Transformation Text Indentation
Text Color-Alignment Text Color:Metin Rengini değiştirmek için kullanılır. Text Allignment:Bir metnin yatay olarak nasıl hizalanacağını belirlemek için kullanılır.
Text Decoration
Aşağıdaki örnekte bağlantı kurulmuş. Bağlantılarda genellikle çizgi kullanılır. Stil kısmında (a) etiketi için çizgi iptal edilmiş Text Decoration
Büyük küçük harf dönüşümü için kullanılır. Text Transformation
Text Indentation Bir metnin ilk satırının nereden başlayacağını belirler. Bir metnin ilk satır girintisini ayarlamak için kullanılır.
Diğer Metin Özellikleri Letter-spacing:Metinde karakterler arasındaki boşluk miktarını ayarlar. Line-height:Satır yüksekliği. word-spacing:kelimeler arasındaki boşluklar.
FONT Bilgisayarlar yazı tipi ailesi olarak faklı formatlardadır. Bu formatlar aşağıda gösterilmiştir. Fark ne olabilir?
FONT Font-Family, Font Style, Font Size
YAZI BOYUTU Yazı boyutu absolute ve relative olmak üzere ikiye ayrılır. Absolute, belirli bir boyuta ayarlar ve kullanıcının bunu değiştirmesine izin vermez. Relative içinde olduğumuz etikete göre boyutun değişmesini sağlar. Eğer değiştirmek istemezden normalde 16px=1em dir. Tekrar boyutlandırmada problem çıkardığı için bir çok kullanıcı em kullanımını tercih eder.
Font-weight:ince ve Kalın karakterlerin nasıl gösterileceğini belirler. Aşağıda her bir paragrafta harflerin görünümleri ağırlıklarına göre değişmektedir. FONT
Bağlantılar Link normal bağlantı, visited ziyaret edilmiş web sayfaları, hover fare üzerine geldiği zaman, fare ile tıklandığı andaki renk ayarları için kullanılan özelliklerdir. Aşağıdaki sıralamada önemlidir. Link visited, hover, active.
Listeler Aşağıda a,b,c,d isminde 4 tane sınıf oluşturulmuştur. Herbiri de farklı listeleme özelliklerine sahip olmuştur.
list-style-type list-style-position list-style-image
List-Style-Position
TABLOLAR Bu tablo tamamen CSS stilleri kullanılarak gerçekleştirilmiştir.
Tablo Kenarlıkları
Tablo Genişliği ve Yüksekliği
Tablo Hizalama
Tablo Rengi
GELİŞMİŞ STİL ÖZELLİKLERİ
CSS BOX MODEL Bütün biçimlendirme özellikleri bu modeli esas alır. Margin boşluk, border kenarlık, padding doldurmak, content ise içerik anlamına gelir. Hangi HTML etiketini eklerseniz ekleyin bu özellikler hepsinde vardır.
Aynı stillere sahip etiketleri tek bir grup altında toplayabilirsiniz. Aynı özelliklere sahip elemanları arasına virgül koyarak yazabiliriz.
Etiket içinde etiket kullanılabilir. Sağdaki resimde <div> etiketinin içinde <p> etiketi kullanılmış. Katmanda arka plan rengini mavi yapan class kullanılmış. Paragraflardaki metin rengide mavi olduğuna göre katmanlarda kullanacağım paragraflar için ayrı bir metin rengi kullanımı gerekir. Marked class içindeki paragraflar ile kullanılacağı zaman metin rengi beyaz olur.
Yukarıdaki kod bana td etiketlerinin bulunduğu satırın alt class ı ile tanımlandığı zamanki değişiklikleri anlatmaktadır.
Block özelliği taşıyan HTML elemanları satır sonuna sahiptirler. Kendisinden sonraki şeyler yeni bir satırda başlar. Başlıklar, div, p bunlara örnek verilebilir. Inline elemanlar ise satır sonu yapmazlar. Örneğin span, a gibi etiketler buna örnek verilebilir. Bir HTML etiketinin görünümü block yapısından inline veya inline yapısından block görünümüne değiştirilebilir.
Listeler normalde alt alta gözükür. Buda onun block yapısında olduğu gösterir. Yan yana bir liste istiyorsam görünümü inline tipine çevirmem yeter.
Bir paragraf ve metni sarma işlemlerini de CSS ile gerçekleştirebiliriz. Burada dikkat edilmesi gereken kayan HTML elemanlarından sonra gelen ne varsa onun çevresine sarma işlemini gerçekleştirecektir. Bunu istemiyorsak clear özelliğini kullandığımız takdirde bunu iptal edebiliriz.