CSS(CASCADING STYLE SHEETS)

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "CSS(CASCADING STYLE SHEETS)"

Transkript

1 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 nesnelerin biçimsel özelliklerini düzenleriz.örneğin bir yazının rengini,boyutunu ve farklı bir çok özelliğini css yazarak yönetebiliriz.sayfamızdaki görünüm tutarlılığını sağlarız.bir çok sayfada benzer görünümler olsun istediğimizde nesneleri tek tek biçimlendirmek yerine birkez css stilleri yazıp o stilleri ilgili nesnelere atamamız yeterli olacaktır. CSS KULLANMANIN FAYDALARI? CSS kullanarak sayfamızdaki görünümleri daha smart bir hale getiririz.böylelikle internet kullanıcısına tutarlı ve daha düzenli bir web sayfası sunmuş oluruz.web sayfalarında tasarımla birlikte bu tasarımın doğru şekilde internet ortamına aktarılması ve çalışması CSS kodları yardımı ile olacaktır. CSS YAZIM ŞEKİLLERİ 1.Html Kodu içinde style tagı ile nesneye ekleyerek kullanabiliriz. 2.Head Tagı arasına css klaslarını ve seçicilerini yazarak kullanabiliriz. 3.Dışarıdan bir css dökümanını html sayfamıza <link> elementi ile ekleyebiliriz. EN ÇOK TERCİH EDİLEN YÖNTEM 3.YÖNTEMDİR SEBEBİ: Html Koduna dışarıdan bir dosya ile css dokümanı ekleyerek kodu daha düzenli ve daha anlaşılır bir hale getiririz.html Kodu ne kadar uzun ve karışıksa sayfada o kadar yavaş açılır

2 Büyük projelerde her bir satır ciddi önem taşır. Ayrıca performansta da ciddi faydaları vardır.sayfanın yüklenme hızı artar. HTML DOSYASINA CSS DOSYASI EKLEME? Html kodumuzun head etiketleri arasına; <head> <link rel="stylesheet" type="text/css" href="ornek.css"> </head> kodunu ekleyerek dışarıdan bir css dosyasını html sayfamıza ekleyebiliriz.görüldüğü gibi link elementi ile dışarıdan bir css dökümanını dökümanın bulunduğu adresi "href" kodu ile ekledik.artık bu html dosyamız için geçerli stilleri ornek.css dosyası içerisine yazabiliriz. CSS KOD YAPISI Css temel olarak seçicilerden oluşan bir sitiller bütünüdür.seçiciler yardımı ile hani elemente biçimlendirme atayacağımızı denetleyebiliriz.genel olarak tüm htm elementleri birer seçicidir. Örn:"body,h1,a,p,ol,ul," elementleri CSS içerisinde doğal birer seçicidir. SEÇİCİLER(SELECTORS): Html içerisindeki seçicileri kullanabildiğimiz gibi kendi seçicilerimizi de oluşturabiliriz.kendi seçicilerimizi oluştururken dikkat etmemiz gereken ilk durum oluşturacağımız seçicinin kullanım durumudur. SINIF SEÇİCİLERİ(CLASS): Eğer seçimizi oluşturup biçimlendirmelerini atadıktan sonra bu seçicimizi birden fazla nesne için kullanacaksak bu seçiciyi bir sınıf(class) olarak tanımlamamız gerekir.sınıf (Class) seçicileri bir kez tanımlandıktan sonra birden fazla elemente atanabilir. Sınıf seçicilerini(class) şu şekilde tanımlarız: ".ornek { " ornek adında bir sınıf tanımladık. ID SEÇİCİLERİ 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. ID seçicileri şu şekilde tanımlarız: " #ornek { " ornek adında bir id seçici tanımladı bu seçiciyi yalnızca bir elemente bir kez kullanmalıyız. HTML ELEMENTLERİNİ BİÇİMLENDİRME

3 BODY ELEMENTİ:Body elementi sayfanın genel yapısının yani gövdesinin bulunduğu alandır.bu element içerisinde sayfanın genelinde yani heryerinde görebileceğimiz biçimlendirmeleri yazabiliriz. BODY ELEMENTİ İÇİNDE YAPABİLCEĞMİZ BİÇİMLENDİRMELER: bacground-color:arka Plan rengini belirleriz background-image:arka Plan resmi ekleyebiliriz. background-repeat:eklediğimiz arkaplan resminin tekrar edip etmeyeceğini yada "x" yönündemi "y" yönündemi tekrar edeceğini denetleriz. background-attachment:arkaplanın sabit kalmasını sadece içeriğin hareket etmesini sağlayabiliriz. YUKARIDAKİ KODLARI TEK TEK YAZABİLDİĞİMİZ GİBİ TEK SATIRDADA YAZABİLİRİZ! "background:url(../images/bg-image.jpg) no-repeat #FFF right bottom fixed;" MARGIN VE PADDING DEĞERLERİ:Margin ve padding değerleri ile sayfamızın ve içerisindeki nesnelerin boşluklarını veya kendi aralarındaki boşluklarını denetleyebiliriz. Margin:Kenar Dıs Boslugu,Nesnenin dış kenara olan uzaklığı, Padding:Kenar iç boslugu,nesnenin iç kenarına olan boşluğu olarak adlandırılabilir. MARGIN VE PADING KULLANIMI: "margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px;" şeklinde yazılabildiği gibi, "margin: 0px 0px 0px 0px;" yada "margin:0px" şekillerinde de yazılabilir. Padding değeride yine aynı şekillerde yazılabilir.örn: "padding:0px" gibi. TEXT ELEMENTLERİNİ BİÇİMLENDİRME: CSS kodları yardımı ile metin nesnelerimizi de yine çeşitli stillerde biçimlendirebiliriz TEXT ELEMENTLERİ İÇİN YAPABİLCEĞMİZ BİÇİMLENDİRMELER: text-decoration:underline;yazıya alt çizgi vermek için kullanılır. text-decoration:none; yazıdaki alt çizgiyi kaldırmak için kullanılır. color:yazı rengini verdiğmiz bölüm. text-align:yazının yönünü berittiğimiz alandır.text-align için kullanabileceğimiz değerler:"left, right, center, justify" text-transform:lowercase veya uppercase değerleri verebiliriz.text nesnemizin büyük küçük harf olma durumunu denetleriz. text-indent: belirtilen piksel değeri kadar metin nesnemiz içeri girecektir. örnk "text-indent:10px;" FONT ELEMENTİ İLE METİN BİÇİMLENDİRME: Metinsel ifadelerimizin yazı tipi yazı büyüklüğü rengi ve kalınlığı gibi değerleri yönettiğimiz stilleridir. Font aşağıdaki gibi çeşitli özellikleri belirtir: font-family:yazı tipini ve yazı tipinin dahil olduğu font ailesini belirleriz.buarada amaç belirttiğimiz fontu veya o aileden herhangi bir font değerinin alınmasını sağlamaktır. Örnek:"font-family:"Comic sans MS", Helvetica, sans-serif;"

4 font-size:0.875em; veya font-size:12px;:yazının boyutunu belirlediğimiz bölümdür.burada dikkat ederseniz piksel değerinin dışında birde em değeri kullanılmıştır em değerini tüm tarayıcılar tanıyabilir dolayısıyla px değeri yerine em değeri vermek daha doğru olacaktır. Piksel ve em arasındaki rakamsal ilişki ise 16px = 1em şeklindedir. font-style:normal:yazının eğik (italik) veya normal sitilde görünmesini denetleriz. font-weight:bold; Yazının kalınlık ve incelik durumunu denetleyebildiğimiz alandır.piksel olarak ayarlayabildiğimiz gibi bold,bolder,normal,light gibi değerlerde verebiliriz. LINK ELEMENTLERİNİ (a) BİÇİMLENDİRME: Bildiğimiz gibi linkler Html yazımında "a" olarak adlandırılır.daha öncede belirtildiği gibi linkler yani a elementi css için de bir seçici olarak çalışır ve a elementinin çeşitli durumları ve özellikleri vardır. Bu durumlar: a:link: Ziyaret edilmemiş link a:visited:ziyaret edilmiş olan link durumu a:hover:mause ile üzerine gelinmiş olan link durumu a:active: mause ile tıklandığı anki link durumu Yukarıdaki yazım şekli ile sayfamızdaki linkleri biçimlendirebiliriz.yazacağımız bu kodlar sayfamızdaki tüm linkler için geçerli olacaktır.aynı sayfa içerisinde birbirinden farklı link görünümleri oluşturmak istersek bunun için bir class nesnesi tanımlamalı ve bu nesnemizi linklere atamalıyız örnek olarak; a.kirmizi{ font-family:verdana, Geneva, sans-serif; font-weight:bold; font-style:normal; font-size:12px; a.kirmizi:link{text-decoration:none; color:#f00; a.kirmizi:visited{text-decoration:underline; a.kirmizi:hover{background-color:#000; color:#fff; a.kirmizi:active{background-color:#609; color:#fff; Yukarıda görüldüğü gibi a nesnesi içerisinde bir class tanımladık ve bu klas içerisindeki linklerin durumlarını biçimlendirdik. LİSTE ELEMENTLERİNİ (ol,ul) BİÇİMLENDİRME: ol,ve ul elementleri html sayfalarda sıralı ve sırasız listeler oluşturmak için kullandığımız elementlerdir.aynı şekilde ol ve ul elementler ide CSS için doğal birer seçicidir. CSS'de sıralı ve sırasız listeleri yatay ve dikey menuler yapmak için kullanırız. ul:sırasız listeler,ol:sıralı listeler olarak adlandırılır. Örnek: ul li{font-family:verdana, Geneva, sans-serif; font-size:0.75em; color:#900; ol li{font-family:verdana, Geneva, sans-serif; font-size:0.75em; color:#333; Kodunu yazdığımızda sayfamızdaki tüm sıralı ve sırasız liste nesnelerini biçimlendirmiş olduk.görüldüğü gibi font,size ve color özelliklerini de belirtilen şekillerde kullandık. list-style-type:liste nesnesinin tipini belirler.

5 background:liste nesnesinin arka plan resmini belirler. list-style-image:sıralı listelere ikonlar eklemek için kullanılır. Listeleri kullanarak bir menu yapmak istersek sıralı listelere "list-style-image" özelliği ile çeşitli ikonlar atayabilir ve resimli menuler oluşturabiliriz.bunun için aşağıdaki kodu yazmamız ve listemiz yanında görünmesini istediğimiz resmin adresini vermemiz yeterlidir.örnek: Örnek: ol{list-style-image:url(../images/ _tick-circle.png); LİSTELERE ARKA PLAN RESMİ UYGULAMA: Liste nesnelerine bir arka plan resmi vererek te menu görünümü oluşturabiliriz. ul nesnesinin li öğesine aşağıdaki kodu yazarak bir arka plan resmi atayabiliriz. ul li{ width:201px; height::31px; background:url(../images/link.jpg) no-repeat; LİSTELER İLE DİKEY MENU YAPMA: Listeleri kullanarak dikey bir menu yapabiliriz.bunun için oluşturduğumuz listenin nesnelerini yatay konuma yerleştirmemiz lazım.ol ve ul nesneleri dikey olarak sıralanan listelerdir.bu listeleri yatay hale getirmek için "FLOAT" yüzdürme özelliğini kullanırız.listenir her bir öğresini float ettirdiğimiz zaman bir liste menusu yerleştikten sonra gelen menu öğesi artık float özelliğinde olduğu için alt satıra değilde diğer nesnenin yanına gelecektir.kulanımı için aşağıdaki örneği inceleyiniz. ul{ list-style-type:none; margin:0px; padding:0px; Listemizi tanımladıktan sonra liste öğelerimizide tanımlayıp biçimlendiriyoruz. ul li{ font-family:tahoma, Geneva, sans-serif; font-size:0.75em; witdh:100px; height:24px; background-color:#ccc; text-align:center; line-height:24px; float:left;

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ı

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ı

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin Özellikleri Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile

Detaylı

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ı

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ı

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ı

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 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ı

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ı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

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ı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

Detaylı

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet

Detaylı

CSS ile yazıcı çıktı işlemleri

CSS ile yazıcı çıktı işlemleri CSS ile yazıcı çıktı işlemleri Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların

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ı

DIV KAVRAMI