CSS i Web Sayfalarına Eklemek

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "CSS i Web Sayfalarına Eklemek"

Transkript

1 CSS i Web Sayfalarına Eklemek CSS in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value) XML de Seçiciler HTML elementleri dışında yeni oluşturulan elementlerde olabilir. div color: #ff0000; background: yellow Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır. Tüm HTML elementleri potansiyel Seçicilerdir. Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ; noktalı virgül kullanılır. Özellik ve değerler birbirinden : iki nokta üstüste ile ayrılır. h1 font: medium Arial; şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel / kullanımı vardır örnek aşağıda: h1 font: medium/120% Arial; CSS i Web Sayfalarına Eklemek 1

2 Burada / Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği) Gruplama Yukarıda hep bir Seçici yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir. img, p, div, h3 font-family: Arial; Not CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır, " * " ile gösterilir. * color: red; tüm elementleri kırmızı yapar. Bir anlamda gruplama yapar. Ayrıntılı bilgi için W3 Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için, virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar. Bildirim lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz. p, h3 font-family: Arial; font-size:2; font-weight: bold; Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız. Sınıf Seçicisi(Class Selector) Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz p.sagadaya text-align: right p.ortala text-align: center Bu Seçicileri sayfamızda uygulamak için; <p class="sagadaya">aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p> <p class="ortala">yukarıdaki bilgiyi dikkatlice okumalısınız</p> Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;.ortala text-align: center Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz. <span class="ortala"> Burada birşeyler yazar </span> <p class="ortala">burada da başka bişeyler yazar</p> Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır. Örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod; <p class="onemli uyari">ülkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu eydana gelmektedir.</p>.onemli font-weight: bold;.uyari font-style: italic; CSS i Web Sayfalarına Eklemek 2

3 .onemli.uyari background: silver; onemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class= onemli uyari olarak atama yaparken CSS Seçicisinde.onemli.uyari şeklinde yazıyoruz. Id Seçecileri Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir. #mavi background:blue; #kirmizi background:red; <p id="mavi">bu yazının arkafon rengi mavi</p> <p id="kirmizi">bu yazının arkafon rengi kırmızı</p> Class mı? Id mi? Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız. Bu kodumuzu daha kullanışlı ve temiz yapacaktır. Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır; p.onemlibilgi font-weight: bold; ve kullanımıda; <p class="onemlibilgi">uygulama olmaz.</p> Yukarıdaki kod uygulanmayacaktır çünkü B bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir. CSS de yorum eklemek çok kolaydır. /* Genel Stiller */ body font-size: 67.5%; /* genel font tanımı */ /* Birden fazla satır içeren kodları bu şekilde kullanabilriz. */ Alt Eleman İçin Kullanımı #menu1 li background-color:#ff0066;.menu2 li background-color:#cc0066 <ul id="menu1"> <li> Menu 1 </li> <li> Menu 2 </li> <li> Menu 3 </li> <li> Menu 4 </li> </ul> <ul class="menu1"> <li> Menu 1 </li> <li> Menu 2 </li> <li> Menu 3 </li> <li> Menu 4 </li> </ul> 1- Kod içinde (In-line) CSS i Web Sayfalarına Eklemek 3

4 Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak. <div style="color:red">deneme yazımız</div> Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir. 2- style Elementi kullanılarak kısmında <style> elementi içinde CSS kodumuzu yazarak uygulamak <title>css i Uygulamak </title> div color:red; Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır. 3- Harici Stil şablonu Kullanımı Bu metod da CSS kodlarımzı.css uzantılı bir dosyaya kaydederiz. ornek.css p color: red; a color: blue; Daha sonra bu kodu gereken sayfalarımıza uygularız <link rel="stylesheet" type="text/css" href="ornek.css" /> Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır. ile eklemek üncü yöntem ile kullanımı "ornek.css"; Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir.(örn: ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web tarayıcıları tarafından. Ayrıca css özelliğini kullanarak devamlı kullandığmız kodları css dosyamıza harici olarak ekleyebilriz böylelikle tekrarlardan kurtulmuş oluruz. ( güncellendi ) Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metodlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir. CSS i Web Sayfalarına Eklemek 4

5 Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfade kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirlmesi gerekmez ve kod yönetimi "urunler.css"; Ürünler bölümü için bir css dosyası ekleyelim sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim. url(/css/urunlereozel.css); Kaynak CSS i Web Sayfalarına Eklemek 5

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

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ı

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

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek 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

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

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ı

HTML Bloklar. CSS Display özelliği

HTML Bloklar. CSS Display özelliği HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün

Detaylı

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5 Stil Oluşturmak/CSS 2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden

Detaylı

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri Puseduo Class Örnekleri Cssin html içerisinde kullanım şekilleri, puseduo class örnekleri CSS Stillerini HTML içerisine bağlama Css yapacağımız stilleri Html içerisinde 3 farklı şekilde bağlayabiliriz.

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda

Detaylı

CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU

CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU CSS Anlatımları #1 Hazırlayan Oğuzhan CABBAROĞLU Önsöz İnternetteki çeşitli kaynaklardan, birikimlerimizden bir araya getirdiğimiz CSS Anlatımları serimizin başlangıç yazısı Css e Giriş ile takipçilerimize

Detaylı

DIV KAVRAMI