stİller - weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · sadece html etiketlerine...
TRANSCRIPT
![Page 1: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/1.jpg)
STİLLER
![Page 2: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/2.jpg)
![Page 3: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/3.jpg)
![Page 4: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/4.jpg)
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.
![Page 5: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/5.jpg)
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 ?
![Page 6: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/6.jpg)
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.
![Page 7: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/7.jpg)
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.
![Page 8: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/8.jpg)
CSS YAZIM KURALLARI
Her bir Declaration noktalı virgül ile sona erer
Declarationlar ifade edilirken süslü parantezler içerisine yazılır.
![Page 9: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/9.jpg)
CSS YAZIM KURALLARI CSS leri daha okunabilir forma dönüştürmek için
aşağıdaki yazım biçimi kullanılabilir.
![Page 10: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/10.jpg)
CSS YAZIM KURALLARI
Kodu açıklamak için sayfaya yorum satırları eklenebilir.
![Page 11: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/11.jpg)
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.
![Page 12: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/12.jpg)
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.
![Page 13: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/13.jpg)
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.
![Page 14: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/14.jpg)
![Page 15: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/15.jpg)
![Page 16: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/16.jpg)
![Page 17: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/17.jpg)
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.
![Page 18: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/18.jpg)
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.
![Page 19: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/19.jpg)
Stil Çeşitleri
![Page 20: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/20.jpg)
Birden fazla Stil varsa Harici stil sayfasının özellikleri
Dahili stil sayfasının özellikleri
![Page 21: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/21.jpg)
BASAMAK SIRASI
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
![Page 22: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/22.jpg)
CSS BACKGROUND
ÖZELLİKLERİ
![Page 23: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/23.jpg)
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
![Page 24: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/24.jpg)
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
![Page 25: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/25.jpg)
Metin Biçimlendirme
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Indentation
![Page 26: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/26.jpg)
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.
![Page 27: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/27.jpg)
Text Decoration
![Page 28: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/28.jpg)
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ş
![Page 29: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/29.jpg)
Text Transformation
Büyük küçük harf dönüşümü için kullanılır.
![Page 30: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/30.jpg)
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.
![Page 31: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/31.jpg)
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.
![Page 32: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/32.jpg)
FONT Bilgisayarlar yazı tipi ailesi olarak faklı
formatlardadır. Bu formatlar aşağıda
gösterilmiştir. Fark ne olabilir?
![Page 33: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/33.jpg)
FONT Font-Family, Font Style, Font Size
![Page 34: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/34.jpg)
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.
![Page 35: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/35.jpg)
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.
![Page 36: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/36.jpg)
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.
![Page 37: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/37.jpg)
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.
![Page 38: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/38.jpg)
![Page 39: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/39.jpg)
list-style-type
list-style-position
list-style-image
![Page 40: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/40.jpg)
List-Style-Position
![Page 41: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/41.jpg)
TABLOLAR Bu tablo tamamen CSS stilleri kullanılarak
gerçekleştirilmiştir.
![Page 42: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/42.jpg)
Tablo Kenarlıkları
![Page 43: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/43.jpg)
Tablo Genişliği ve Yüksekliği
![Page 44: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/44.jpg)
Tablo Hizalama
![Page 45: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/45.jpg)
![Page 46: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/46.jpg)
Tablo Rengi
![Page 47: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/47.jpg)
GELİŞMİŞ STİL
ÖZELLİKLERİ
![Page 48: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/48.jpg)
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.
![Page 49: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/49.jpg)
Aynı stillere sahip etiketleri tek bir grup altında toplayabilirsiniz. Aynı özelliklere sahip elemanları arasına virgül koyarak yazabiliriz.
![Page 50: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/50.jpg)
• 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.
![Page 51: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/51.jpg)
Yukarıdaki kod bana td etiketlerinin bulunduğu satırın alt class’ı ile tanımlandığı zamanki değişiklikleri anlatmaktadır.
![Page 52: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/52.jpg)
![Page 53: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/53.jpg)
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.
![Page 54: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/54.jpg)
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.
![Page 55: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/55.jpg)
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.
![Page 56: STİLLER - Weeblyadobedreamweavercs5ibkrts.weebly.com/uploads/1/1/1/... · Sadece HTML etiketlerine düzenlemek için SS ... Avantajı ise web sayfamız gereksiz kod karabalıklığından](https://reader033.vdocuments.pub/reader033/viewer/2022050417/5f8ce0df95d0570b474d5f2b/html5/thumbnails/56.jpg)