CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ"

Si̇mge Ilkin
5 yıl önce
İzleme sayısı:

1 CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ

2 2 CSS, açılımı Cascading Style Sheet olan ve dilimize Stil şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir. Stil şablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır. Diğer bir deyişle sayfamızın içeriğinin biçimlendirilme işleminin yapıldığı kısımdır.

3 3 HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle World Wide Web Consortium (W3C, Dünya Çapında Ağ Birliği) tarafından oluşturulmuştur; İçerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir dosya ile biçimlendirme olanağı tanımaktadır. Bu, web sayfalarımıza esneklik bize ise hız kazandırır. Tablosuz tasarımın daha da önem kazandığı günümüzde CSS kullanımı olmazsa olmazlardandır.

4 4 CSS söz dizimi «Seçici» ve «Bildirim» olarak iki ana bölümden oluşur. Bildirim ise içinde özellik ve değer olarak iki kısma ayrılır.

5 5 Seçici olarak tüm HTML etiketlerini kullanabileceğimiz gibi ileride göreceğimiz ID (kimlik) ve Class (sınıf) seçicilerini de kullanabiliriz. Bildirim bloğu süslü parantez ile açılır ve kapanır. Bildirimler arasında ; (noktalı virgül) kullanılır. Her Bildirim, "Özellik" ve "Değer" içerir. Özellik ve değer arası : (iki nokta üst üste) ile ayrılır. Özellik, değiştirilmek istenen stil özniteliğidir. Örnek; color, font-size vb. Değer ise stil özniteliklerine verilen değerlerdir. Örnek; blue, 14px vb.

6 6 Seçiciler Class (Sınıf) ID Tag (etiket) seçiciler olmak üzere üçe ayrılır.

7 7 Sınıf (Class) Seçici Sınıf seçicileri birden fazla ögeye uygulanabilir ve birden fazla kullanılabilir. Örneğin önemli adında bir sınıf seçicisi oluşturalım, özellik olarak da yazının renginin kırmızı ve kalın olmasını sağlayalım;.onemli{ color:#f00; font-weight:bold;

8 8 Sınıf seçici olarak belirlediğimiz ismin önüne. (nokta) koymamız gerekmektedir. Bu ismi herhangi bir ögenin class özniteliğine atayarak stili uygulamış oluruz. Örneğimiz için.onemli sınıf (class) seçicisi aşağıdaki gibi olacaktır. Bu stilimizi sayfamızda h1 ve p etiketlerine uygulayalım..onemli{ color:#f00; font-weight:bold;

9 9 Kod: <html> <head> <title>css Ogreniyorum</title> <style type="text/css">.onemli { color:#f00; font-weight:bold; </style> </head> <body> <p class="onemli">nigde Omer Halisdemir University</p> <h1 class="onemli">nigde Omer Halisdemir University</h1> </body> </html>

10 10 ID Seçici Sınıf (class) seçicilerini birden fazla ögeye atayarak kullanabiliyorduk; ID seçiciler ise yalnız bir ögeye atanır ve bir kez kullanılırlar. Örneğin haber_baslik adında bir stil oluşturalım, özellik olarak da yazı renginin mavi ve ortalı olmasını sağlayalım; #haber_baslik { text-align:center; color:blue;

11 11 Kod: <html> <head> <style type="text/css"> #haber_baslik { text-align:center; color:blue; </style> </head> <body> <p id="haber_baslik">bilisim Teknolojileri Alani</p> <p>bu paragraf stilimizden etkilenmez</p> </body> </html>

12 12 Not: Gerek sınıf (class) seçici olsun, gerekse ID seçici olsun isim verirken Türkçe karakter kullanılmamalı İsimlendirme rakamla başlamamalıdır.

13 13 Etiket (Tag) Seçici Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. Bir başka deyişle etiketleri kendi isteğimize göre uyarlarız. Örneğin sayfamızdaki tüm karakterlerin boyutunun 20px olmasını istiyorsak; body {font-size:40px;

14 14 Kod: <html> <head> <style type="text/css"> body {font-size:40px; </style> </head> <body> <p>bilisim Teknolojileri Alani</p> </body> </html>

15 15 Bir başka örnek olarak sayfamızdaki paragraflarda yazı büyüklüğünün 16px, yazı tipinin Arial ve kalın olmasını sağlamamak için, stilimiz aşağıdaki şekilde oluşturulur. Kod: <html> <head> <style type="text/css"> p { font-family: Arial; font-size:16px; font-weight:bold </style> </head> <body> <p>bilisim Teknolojileri Alani</p> </body> </html>

16 16 CSS, HTML öğelerine 3 şekilde eklenebilir: Satır içi - HTML öğelerinde style özniteliğini kullanarak, Dahili - <head> bölümünde bir <style> öğesi kullanarak, Harici - Harici bir CSS dosyası kullanarak.

17 17 Satır içi CSS Etiket içinde stil kullanımı olarak da adlandırılır. Bu kullanım şeklinde CSS direkt etiketin style özniteliği kullanılarak uygulanır. Bu örnek, <h1> öğesinin metin rengini mavi olarak ayarlar: <h1 style="color:blue;">this is a Blue Heading</h1>

18 18 p etiketine, etiket içinde uygulanmak üzere yazı rengini kırmızı ve ortaya hizalı yapalım; Kod: <html> <head> <title>css Ogreniyorum</title> </head> <body> <p style="color:red;text-align:center;">bilisim Teknolojileri Alani</p> </body> </html>

19 19 Dahili CSS Global stil kullanımı olarak da adlandırılır. Bir dahili CSS, bir HTML sayfasının <head> bölümünde, bir <style> öğesinde tanımlanır: Kısmende olsa HTML ve CSS kodumuzu birbirinden ayırmış oluruz. Global (dahili) olarak yerleştirdiğimiz CSS kodumuz sadece bu sayfayı etkileyecektir. Başka bir sayfada h1 ve p etiketi normal görevini yapacaktır. <head> <style> body {background-color: powderblue; h1 {color: blue; p {color: red; </style> </head>

20 20 h3 etiketine uygulanmak üzere yazı rengini kırmızı, yazı büyüklüğünü 12pt ve sola hizalı yapalım; Kod: <html> <head> <title>css Ogreniyorum</title> <style type="text/css"> h3 { color:red; text-align:left; font-size:12pt; </style> </head> <body> <h3>duyurular</h3> </body> </html>

21 21 Bir önceki örnekte; Global kullanım alanına sahip olan stil şablonumuzda seçici olarak etiket seçici kullanıldığını görmekteyiz. Şimdi de kullanım yerine müdahale etmeden seçici tipini değiştirelim. Seçicimizi, istediğimiz başlıkların stilini değiştirmeye yönelik bir stil şablonu olarak tasarladığımız için aynı sayfada birden çok kez kullanılma olasılığı yüksektir. Bu sebeple ID seçici değil de sınıf (class) seçici seçmemiz gerekmektedir.

22 22 Kod: <html> <head> <title>css Ogreniyorum</title> <style type="text/css">.baslik { color:red; text-align:left; font-size:12pt; </style> </head> <body> <h3 class="baslik">duyurular</h3> </body> </html>

23 23 Harici CSS Harici bir stil sayfası kullanmak için HTML sayfasının <head> bölümüne bir bağlantı eklenmesi gerekir: <head> <link rel="stylesheet" href="styles.css"> </head> İşte "styles.css" nin görünüşü: body { background-color: powderblue; h1 { color: blue; p { color: red;

24 24 CSS Fontları: kullanılacak metin rengini, fontunu ve boyutunu tanımlar: color: blue; font-family: verdana; font-size: 300%; CSS Kenarlık: bir HTML öğesinin etrafındaki bir kenarlığı tanımlar: border: 1px solid powderblue; CSS Dolgusu: metin ile kenarlık arasında bir dolgu (boşluk) tanımlar: padding: 30px;

25 25 CSS Marjı: sınırın dışında bir kenar boşluğu (boşluk) tanımlar: margin: 50px; id özniteliği: Özel öğeye bir id özniteliği ekleyin: <p id="p01">i am different</p> öğe için bir stil tanımlayın: #p01 { color: blue;

26 CSS ile Tablo Düzenleme 26 <html> <head> <style> table, th, td { border: 1px solid red; border-collapse: collapse; </style> </head> <body> <table style="width:50%"> <tr> <th>firstname</th> <th>lastname</th> <th>age</th> </tr> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table> </body> </html>

27 CSS ile Tablo Düzenleme 27 <html> <head> <style> table, th, td { border: 2px solid black; border-collapse: collapse; td { padding: 15px; </style> </head> <body> <table style="width:50%"> <tr> <th>firstname</th> <th>lastname</th> <th>age</th> </tr> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table> </body> </html>

28 CSS ile Tablo Düzenleme 28 <style> table, th, td { border: 1px solid black; border-collapse: collapse; td { padding: 5px; background-color:gold; color:blue; th { text-align: center; background-color:red; color:gold; </style>

29 Renkler 29 RGB Değeri rgb (kırmızı, yeşil, mavi)

30 RENKLER 30 HEX Değeri # rrggbb

31 Renkler 31 HSL Değeri hsl (ton, doygunluk, hafiflik)

32 Renkler 32 HSL Değeri hsl (ton, doygunluk, hafiflik)

33 Renkler 33 RGBA Değeri rgba(red, green, blue, alpha) Alpha, saydamlık özelliği katar. Örneğin arkadaki resim görünebilir.

34 Renkler 34 HSLA Değeri hsla(hue, saturation, lightness, alpha)

Benzer belgeler

CSS. 1. CSS nin Yapısı Sınıf (Class) Seçicisi

CSS. 1. CSS nin Yapısı Sınıf (Class) Seçicisi CSS CSS, açılımı (Cascading Style Sheet) olan ve dilimize Stil Şablonları olarak yerleşen bir işaretleme dilidir. Stil Şablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek