stİller - weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · sadece html etiketlerine...
TRANSCRIPT
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.
CSS YAZIM KURALLARI
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 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
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 Transformation
Büyük küçük harf dönüşümü için kullanılır.
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
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.
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.
