NTERNET PROGRAMCILII 1 r Gr Canan ASLANYREK CSS

İNTERNET PROGRAMCILIĞI 1 Öğr. Gör. Canan ASLANYÜREK

CSS Nedir? Web teknolojilerinde oldukça fazla öneme sahip olan CSS (Cascading Style Sheets) Basamaklı Stil Sayfaları Web sayfalarını görünürlük açısından iyileştirme sürecini kolaylaştırmak için tasarlanmış basit bir tasarım dilidir. CSS, HTML öğelerinin ekran üzerinde nasıl görüntüleneceğini açıklar. Bir HTML belgesinin sunumu üzerinde oldukça güçlü bir kontrol mekanizması sağlar. CSS, bir web sayfasının görünüm bölümünü işlemektedir. CSS, web sayfalarınız için farklı cihazlar ve ekran boyutları için tasarım, yerleşim düzeni ve gösterim varyasyonları da dahil olmak üzere stilleri tanımlamak için kullanılır.

CSS Nedir? CSS kullanımının size kazandıracağı bir takım avantajlar mevcuttur; CSS zaman kazandırır : CSS ‘i bir kez yazabilir ve birden fazla HTML sayfasında tekrar kullanabilirsiniz. Her bir HTML öğesi için bir stil tanımlayabilir ve istediğiniz kadar çok Web sayfasına uygulayabilirsiniz. Sayfalar daha hızlı yüklenir : CSS kullanıyorsanız, her seferinde HTML etiketi nitelikleri yazmanız gerekmez. Bir etiketin tek bir CSS kuralını yazıp o etiketin tüm tekrarlarına uygulayın. Dolayısıyla, bu daha az kod daha hızlı indirme süreleri anlamına gelir. Kolay bakım : Geniş çaplı bir değişiklik yapmak için tek bir stili değiştirmeniz yeterlidir. Sitenizin içinde yer alan tüm web sayfalarındaki bulunan tüm öğeler otomatik olarak güncellenir.

CSS Nedir? HTML’e üstün stiller : CSS HTML’den çok daha geniş bir nitelik dizisine sahiptir, böylece HTML niteliklerine kıyasla HTML sayfanıza daha iyi bir görünüm verebilirsiniz. Çoklu Cihaz Uyumluluğu : Stil sayfaları, içeriğin birden fazla cihaz türü için optimize edilmesini sağlar. Aynı HTML belgesini kullanarak, web sitesinin farklı versiyonları, cep telefonları, tablet gibi taşınabilir cihazlar için veya daha farklı ebat ve farklı çözünürlüğe sahip monitörler için sunulabilir. Global web standartları: Web standartlarını belirleyen World Wide Web Konsorsiyumu (W 3 C) artık HTML nitelikleri kullanımdan çıkarttı. Bunların yerine CSS’in kullanılması önerildi. Bu yüzden gelecekteki tarayıcılara uyumlu hale getirmek için CSS’i tüm HTML sayfalarında kullanmaya başlamak her zaman iyi bir fikirdir.

CSS Nedir? Çevrimdışı Çalışma : CSS, çevrimdışı olarak web uygulamaları ile beraber tarayıcınız tarafından yerel olarak depolanabilir. Bunu kullanarak, çevrimdışı web sitelerini görebilirsiniz. Aynı zamanda önbellek yardımı ile web sitesinin daha hızlı yüklenmesini ve daha iyi bir genel performans elde etmenizi sağlayacaktır. Platform Bağımsızlığı : Komut dosyası tutarlı bir platform bağımsızlığı sunar ve en yeni tarayıcıları da destekleyebilir. CSS ‘e giren yeni bir özellik popüler olan tüm tarayıcılar tarafından hemen destek görür.

CSS Söz Dizimi CSS, içeriğin farklı bölümlerinin nasıl sunulması gerektiğini tanımlayan bir dizi kural olarak düzenlenmiştir. Tamamen tarayıcınız tarafından yorumlanmaktadır. CSS, tarayıcı tarafından yorumlanan ve belgenizdeki ilgili öğelere uygulanan stil kuralı üç temel bölümden oluşmaktadır. Seçici(Selector): Seçici, bir stilin uygulanacağı bir HTML etiketi ifade eder. Bu, <h 1> veya <p> gibi herhangi bir etiket olabilir. Özellik(Property): HTML etiketinin nitelik özelliğidir. Basitçe söylemek gerekirse, tüm HTML öznitelikleri CSS özelliklerine dönüştürülür. Örneğin genişlik, renk, font gibi…

CSS Kullanımı HTML sayfalarınıza CSS eklemenin birkaç farklı yolu vardır. Yani, HTML dökümanınıza CSS bildirimlerini nasıl enjekte etmeniz gerektiği ile ilgili yolları ele alacağız. Her birinin kendi avantajları ve dezavantajları vardır. Doğru yöntemi veya yöntemlerin kombinasyonunu seçmek, yapmanız gereken iş miktarını azaltabileceği gibi, ziyaretçilerin sayfalarınıza erişiminde hafif bir hız kazandıracağı için de önemlidir Stilleri HTML belgenize ilişkilendirmenin üç yolu vardır. Bunlar;

CSS Kullanımı Satıriçi Stil (Inline style): Stil kurallarını tanımlamak için herhangi bir HTML öğesinin style niteliğini kullanabilirsiniz. Bu kurallar yalnızca o öğeye uygulanır. <html> <head> <title>CSS Dersleri</title> </head> <body style="background-color: aqua; "> <h 1 style="color: maroon; margin-left: 40 px; ">Dahili Stil Sayfası</h 1> <p style="padding-left : 20 px; font-size : 18 px; color : brown; ">Bu bir paragraftır. </p> </body> </html>

CSS Kullanımı Tek bir öğe için benzersiz bir stil uygulamak için satır içi stil kullanılabilir. Ancak satıriçi kullanımı, CSS ‘in sunduğu tüm avantajları neredeyse ortadan kaldırmak anlamına gelir. Muhtemelen aynı kodu tekrar yazmanızı gerektirecek durumlar ortaya çıkarabilir. Ayrıca kodunuzu okumayı zorlaştıracaktır. Bu açıdan değerlendirildiğinde kullanımı pek tavsiye edilmez!

CSS Kullanımı Dahili Stil Sayfası: Dahili Stil yönteminde, CSS bildirimleriniz ayrı bir dosyada bulunmaz, bunun yerine HTML belgesinin üst kısmına eklenir. CSS kurallarınızı <style> öğesini kullanarak bir HTML belgesine yerleştirebilirsiniz. Bu etiket <head> … </ head> etiketlerinin içine yerleştirilir. Bu söz dizimi kullanılarak tanımlanan kurallar, dokümanda bulunan tüm öğelere uygulanır.

CSS Kullanımı <!DOCTYPE html> <head> <title>CSS Dersleri</title> <meta charset="utf-8"> <style> body { background-color: aqua; } h 1 { color: maroon; margin-left: 40 px; } </style> </head> <body> <h 1>Dahili Stil Sayfası</h 1> <p>Bu bir paragraftır. </p> </body> </html>

CSS Kullanımı Dahili stil kullanımı, CSS’i sitenizin her sayfasına eklemek zorunda olduğunuz için ideal değildir. Genellikle tek bir sayfa eşsiz bir stile sahip olması gerektiği durumlarda dahili bir stil sayfası kullanılabilir. Harici Stil Sayfası (External Style Sheet) : CSS’yi dahil etmek için en popüler yöntemlerden biridir. Bu yöntem ile tüm CSS bildirimlerinizi harici bir dosyaya (genelde bir. css uzantılı dosya) yazdıktan sonra HTML belgenizin başlığında <head>…</head> etiketleri arasına <link> etiketi ile bağlantısı (ilişkilendirilmesi) aşağıdaki gibi yapılır.

CSS Kullanımı <html> <head> <link href="stil. css" rel="stylesheet" type="text/css" media="all"> </head> <body> </html> <link> etiketi href niteliği ile birlikte, bağlanmak istediğiniz dosya için bir url yolu bildirmenizi ister.

CSS Kullanımı Rel niteliği ile bağlanılacak linkin siteyle ilişkisi belirtilir type niteliği dosyanın kaynağı hakkında tarayıcılara bilgi vermek için kullanılırken, media niteliğine atanan “all” değeri tüm cihazlar için geçerli olacak bir bağlantı bildirimini sağlamaktadır. Söz konusu. css uzantılı stil dosyası herhangi bir metin editöründe yazılabilir. Gerekirse birden fazla stil sayfasına bağlanabilirsiniz. Bunu yapmak için her stil sayfası için ayrı bir bağlantı etiketi eklemelisiniz.

CSS Kullanımı stil. css body { background-color : aqua; } h 1 { text-decoration : underline; color : #4583 c 2; } p{ padding-left : 20 px; font-size : 18 px; color : brown; }

CSS Kullanımı İndex. html <html> <head> <link href="stil. css" rel="stylesheet"> </head> <body> <h 1>Harici Stil Sayfaları</h 1> <p>Bilgi Yönetimi Bölümü İnternet Programcılığı 1 Dersi. </p> </body> </html> (Not: Burada stil. css dosyasının, index. html ile aynı dizinde bulunduğu varsayılmıştır. Aksi takdirde, URL’yi buna uygun olarak değiştirmeniz gerekir. )

CSS Kullanımı Bağlı stil sayfalarını kullanmanın faydaları, tüm kurallarımızı tek bir dosyaya yazabilmemizin ardından bu dosyayı istediğimiz sayıda HTML belgesine bağlayabilmemizdir. Sonra tek bir dosyada değişiklikler yapabilir ve bu değişiklikleri tüm HTML dosyalarımızda gerçekleştiğini görebiliriz. Aynı CSS dosyanızı farklı web projelerinizde tekrar kullanabilirsiniz. Son kullanıcı için bir yararı da hız. Dış stil sayfası ilk kez indirildiğinde tarayıcı kendi önbelleğinde bir kopyasını saklayacaktır. Sonra diğer sayfaları ziyaret ettiğinizde tarayıcınız CSS kurallarının yer aldığı bu dosyayı tekrar indirmeyecektir.

CSS Kullanımı Diğer bir başka avantajı ise HTML bildirimleriniz ile stil bildirimlerinizin dosya olarak birbirinden ayrılmasıdır Böylece. html uzantılı dosyalarınızda web sayfanızın mantıksal tasarımını ve içeriğini ön plana çıkarabilir, biçimlemeye yönelik bildirimlerinizi. css dosyalarınızda kontrol edebilirsiniz.

CSS Kullanımı İçe Aktarılan Stil Sayfası: İçe aktarılan CSS ile bir CSS dosyasındaki kuralları, başka bir CSS dosyasındaki kurallarla birleştirebiliriz. Bunu yapmak için, stil sayfamızda @import anahtar kelimesini kullanıyoruz. @import, harici bir stil sayfasını <link> öğesine benzer şekilde içe aktarmak için kullanılır İşte @import kuralının genel sözdizimi; @import url ("stil. css") media-types;

CSS Kullanımı Bu satır CSS dosyasına herhangi bir kural bildiriminden önce en üste eklenmelidir. Bir örnek inceleyelim. Burada, stil. css, daha sonra HTML dokümanına bağlanacak olan tema. css’in içine aktarılır. Stil. css h 1 { text-decoration: underline; } p{ padding-left: 20 px; font-size: 18 px; }

CSS Kullanımı Tema. css @import url("stil. css"); h 2 { color: #4583 c 2; } İçe aktarma, CSS’nin HTML sayfalarımıza nasıl uygulandığına dair daha hassas kontrol elde etmek için yararlı olabilir. Web projelerinde büyük olasılıkla tüm sayfalarda genel stillerin uygulanmasını isteriz. Ancak bazı durumlarda projenin belirli bölümlerinin kendi özel stil düzenine sahip olması gerekebilir.

CSS Kullanımı Bunu yapmanın en iyi yolu, CSS dosyasını parçalara bölmek olacaktır. Genel olarak tüm ana stilleri içeren bir dosya oluşturduktan sonra, söz konusu belirli bölümler için özel CSS kurallar tanımlayan diğer stil dosyaları yaratılır. Ardından ana stil dosyası, bölümler için oluşturulan alt stil dosyalarına dahil edilerek sonunda bu bölüm stil dosyaları ilgili HTML sayfalarına bağlanabilir.

CSS Kullanımı Sonuç olarak, en iyi yaklaşım genellikle Harici bir stil sayfasıdır. Kuralları tek bir yerde tutmak iş yükümüzü azaltır (kaç tane sayfamız olursa olsun) ve son kullanıcı için indirme süresini biraz azaltacaktır Harici Stil Sayfaları ile çalışmanız size CSS’in tüm gücünü kullanmanıza olanak verecektir.

CSS Tarayıcı Uyumluluğu CSS her geçen gün sürekli olarak güncellenmektedir. Dolaysıyla yeni çıkan özelliklere tarayıcıların cevap vermesi aynı hızda olamayabiliyor. CSS’in bazı özelliklerini hala desteklemeyen birçok tarayıcı var. Dolayısıyla, CSS’mizi bir HTML belgesine yazarken hangi tarayıcılarda geçerli olduğu, yada geçerli kılmak için nasıl bir söz dizimine sahip olması gerektiğine dikkat ederek yazmakta yarar var. Bazen tarayıcıların yazdığınız CSS’i farklı yorumlayabilirler. Bu da web sayfalarınızın farklı tarayıcılarda farklı görünmesine yol açacaktır.

CSS Yorum Satırları Çoğu zaman, stil sayfası bloklarınıza ek açıklamalar koymanız gerekebilir. Bu nedenle, stil sayfasındaki herhangi bir bölümü yorum satırı yapmak çok kolaydır. Basitçe // kullanabilirsiniz. Çok satırlı blokları C ve C ++ programlama dillerinde yaptığınız gibi benzer şekilde yorumlamak için / * …. * / kullanabilirsiniz.

CSS Seçicileri CSS seçicileri, HTML öğelerini öğe adı, kimliği, sınıfı, özniteliği ve daha fazlasına dayanarak “bulmak” (veya seçmek) için kullanılır. Eleman Seçici (Element Selector) Eleman seçici, HTML etiket adına dayalı tüm öğeleri seçer. Seçici olarak CSS bildiriminde etiket ismi vermek yeterli olacaktır.

Eleman Seçici <html> </style> <head> </head> <style> <body> body{ background-color: yellow; <h 1>CSS Eleman Seçici</h 1> <p>CSS Dersleri</p> </body> } h 1{ text-align: center; color : green; } p{ text-align: center; font-size: 24 px; color: red; } </html>

Kimlik Seçicisi (Id Selector) Bir öğenin kimliği, bir sayfada benzersiz olmalıdır, dolayısıyla kimliği seçici, benzersiz bir öğe seçmek için kullanılır. Kimliği, harfler, rakamlar, altçizgiler ve çizgilerle belirtilebilir. Nesneyi temsil ettiğini kolayca tanımlayabilmeniz için açıklayıcı bir şey olarak adlandırmanız en iyisidir. Bir sayfada istediğiniz kadar çok sayıda kimliği olabilir. Sayfadaki herhangi bir etikete bir kimlik uygulayabilirsiniz. CSS ile belirli bir kimliği olan bir öğeyi seçmek için, öğenin kimliğinden önce (#) karakteri kullanmalısınız.

Kimlik Seçicisi (Id Selector) <html> <head> kimliklendirilmiş içerik</p> <style> #icerik { <p>Bu birinci paragraf içeriğidir. </p> <p>Bu ikinci paragraf içeriğidir. </p> </body> </html> text-align: center; color: red; background-color: yellow; } </style> </head> <body> <p id="icerik">ID ile

Sınıf Seçicisi (Class Selector) HTML’deki bir id niteliği kullanarak tek bir öğeye atıf yapabilmenin dışında aynı anda birden çok öğeye class niteliği ile bir CSS kuralını uygulamak mümkün. Stil kurallarını öğelerin sınıf özniteliğine göre tanımlayabilir, bu sınıfa sahip tüm öğeler, tanımlanan CSS kuralına göre biçimlendirebilirsiniz. Tek bir sınıf, aynı sayfada farklı etiketler türlerine de uygulanabilir. Dikkat edilmesi gereken husus, uygulanmak istenen HTML öğelerine aynı sınıf ismini vermektir. Diğer bir husus ise belli bir sınıfa sahip öğeleri seçmek için, nokta (. ) karakteri kullanarak bunu sınıfın adıyla yazın.

Sınıf Seçicisi (Class Selector) <!DOCTYPE html> <body> <html> <head> <style> <h 1 class="center">Kırmızı ve ortalanmış bir başlıktır</h 1> . center { <p class="center">Kırmızı ve ortalanmış bir paragraftır. </p> <p>Bu bir paragraftır. </p> text-align: center; color: red; } </style> </body> </head> </html>

Sınıf Seçicisi (Class Selector) Sınıf seçiciler belkide en çok kullanılan seçici şeklidir. Farklı kullanımlarıda mümkün olmaktadır. Örneğin; Ayrıca, yalnızca belirli HTML öğelerinin bir sınıften etkilenmesi gerektiğini de belirleyebilirsiniz.

Sınıf Seçicisi (Class Selector) <!DOCTYPE html> <body> <html> <head> <style> <h 1 class="center">Bu başlık stil kuralından etkilenmeyecektir. </h 1> p. center { <p class="center">Bu paragraf kırmızı ve ortaya hizalı olacaktır. </p> </body> </html> text-align: center; color: red; } </style> </head>

<!DOCTYPE html> <body> <html> <head> <h 1 class="center">Bu başlığa stil uygulanmamıştır</h 1> <style> <p class="center">Bu paragraf kırmızı ve ortaya hizalanmıştır</p> <p class="center large">Bu paragraf kırmızı, ortaya hizalanmış ve büyük bir fonta sahiptir. </p> </body> </html> p. center { text-align: center; color: red; } p. large { font-size: 300%; } </style> </head>

Seçicileri Gruplama (Grouping Selectors) Aynı tarz tanımlarına sahip öğeleriniz varsa, kodu en aza indirgemek için seçicileri gruplandırmak daha iyi olacaktır. Seçicileri gruplamak için, her seçiciyi bir virgül ile ayırın ve ortak CSS bildirimlerini yazın.

Seçicileri Gruplama (Grouping Selectors) h 1 { h 1, h 2, p { text-align: center; color: red; } h 2 { text-align: center; color: red; } p{ text-align: center; color: red; } }

CSS Renkleri Bir web sayfasının görünümüyle oynayacaksanız, doğru yapmanız gereken en önemli işlerden biri renktir. Metni, arka planı, sınırını ve daha fazlasını içeren web sitemizin, renklerini değiştirebiliriz Doğru renk düzenini elde etmek sayfalarımızın görünümünü önemli ölçüde etkileyebilir.

CSS Renkleri HTML ile bir renk, önceden tanımlanmış adı kullanarak belirtilebilir; <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <h 1 style="background-color: Tomato; ">Tomato</h 1> <h 1 style="background-color: Orange; ">Orange</h 1> <h 1 style="background-color: Dodger. Blue; ">Dodger. Blue</h 1> <h 1 style="background-color: Gray; ">Gray</h 1> <h 1 style="background-color: Slate. Blue; ">Slate. Blue</h 1> <h 1 style="background-color: Violet; ">Violet</h 1> <h 1 style="background-color: Light. Gray; ">Light. Gray</h 1> </body> </html>

CSS Renkleri HEXADECIMAL (Onaltılık) Sayı Olarak Renk Değerleri <!DOCTYPE html> <head> </head> <body> <h 1 style="background-color: #ff 0000; ">#ff 0000</h 1> <h 1 style="background-color: #0000 ff; ">#0000 ff</h 1> <h 1 style="background-color: #3 cb 371; ">#3 cb 371</h 1> <h 1 style="background-color: #ee 82 ee; ">#ee 82 ee</h 1> <h 1 style="background-color: #ffa 500; ">#ffa 500</h 1> <h 1 style="background-color: #6 a 5 acd; ">#6 a 5 acd</h 1> </body> </html>

background-color özelliği bir HTML öğesinin arka plan rengini belirlemenizi sağlar. CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirlenir. geçerli bir renk adı – “red” gibi bir Hex değeri – “# ff 0000” gibi bir RGB değeri – “rgb (255, 0, 0)” gibi

Uygulama <!DOCTYPE html> <head> <style> h 1 { background-color: aqua; } div { background-color: rgb(100, 150, 100); } p{ background-color: #FFFF 00; } </style> </head> <body> <h 1>CSS Arka Plan Renkleri Belirleme</h 1> <div> Bu bir div elementidir. <p>Bu bir paragraf metindir. </p> div elementi bu noktadan sonra devam etmektedir. </div> </body> </html>

background-image özelliği bir HTML öğesinin arka plan resmini tayin etmenizi sağlar. Varsayılan olarak, resim tüm elemanı kapsayacak şekilde tekrarlanır. body { background-image: url("resim. jpg"); } "resim. jpg” dosyası, sayfa ile aynı dizinde olduğu varsayılarak url() yolu yazılmıştır

Uygulama <!DOCTYPE html> <head> <style> <h 1>CSS Arka Plan Resmi</h 1> body { backgroundimage: url("kus. png"); <p>Bilgi Yönetimi Bölümü İnternet Programcılığı Dersi</p> </body> </html> } </style> </head> <body>