HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek"

Transkript

1 STİLLER

2

3

4 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.

5 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?

6 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.

7 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

8 Her bir Declaration noktalı virgül ile sona erer Declarationlar ifade edilirken süslü parantezler içerisine yazılır. CSS YAZIM KURALLARI

9 CSS YAZIM KURALLARI CSS leri daha okunabilir forma dönüştürmek için aşağıdaki yazım biçimi kullanılabilir.

10 CSS YAZIM KURALLARI Kodu açıklamak için sayfaya yorum satırları eklenebilir.

11 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.

12 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.

13 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.

14

15

16

17 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.

18 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.

19 Stil Çeşitleri

20 Birden fazla Stil varsa Harici stil sayfasının özellikleri Dahili stil sayfasının özellikleri

21 BASAMAK SIRASI Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)

22 CSS BACKGROUND ÖZELLİKLERİ

23 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

24 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

25 Metin Biçimlendirme Text Color Text Alignment Text Decoration Text Transformation Text Indentation

26 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.

27 Text Decoration

28 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

29 Büyük küçük harf dönüşümü için kullanılır. Text Transformation

30 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.

31 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.

32 FONT Bilgisayarlar yazı tipi ailesi olarak faklı formatlardadır. Bu formatlar aşağıda gösterilmiştir. Fark ne olabilir?

33 FONT Font-Family, Font Style, Font Size

34 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.

35 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

36 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.

37 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.

38

39 list-style-type list-style-position list-style-image

40 List-Style-Position

41 TABLOLAR Bu tablo tamamen CSS stilleri kullanılarak gerçekleştirilmiştir.

42 Tablo Kenarlıkları

43 Tablo Genişliği ve Yüksekliği

44 Tablo Hizalama

45

46 Tablo Rengi

47 GELİŞMİŞ STİL ÖZELLİKLERİ

48 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.

49 Aynı stillere sahip etiketleri tek bir grup altında toplayabilirsiniz. Aynı özelliklere sahip elemanları arasına virgül koyarak yazabiliriz.

50 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.

51 Yukarıdaki kod bana td etiketlerinin bulunduğu satırın alt class ı ile tanımlandığı zamanki değişiklikleri anlatmaktadır.

52

53 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.

54 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.

55 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.

56

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder. Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI CSS BACKGROUND ÖZELLİKLERİ background-color Zeminin rengini belirler. #color Renk adı. transparent Zeminin saydam olmasını sağlar. background-image Zemine

Detaylı

DIV KAVRAMI