CSS Kategorisi » Bilgisayar Sorunları ve Çözümleri

CSS Dersleri – 4 || ID Seçiciler (CSS Seçiciler ve Çeşitleri)

Yararlı İnsanlar Topluluğu — Tue, 03 Jun 2014 21:27:51 +0000

Önceki CSS dersleri ‘mizde CSS ‘de seçici nedir, nasıl kullanılır gibi sorulara cevap aradık. Ardından yine aynı yazımızda CSS’ de bulunan Seçici türlerinin ne olduğunu öğrendik ve ilk seçici türü olan Sınıf seçiciyi ayrıntılı bir şekilde anlatmaya çalıştık.

Bu derse geçmeden önce bir önceki yazımızı mutlaka iyi okumalı ve anlamalısınız. Çünkü bir önceki yazımızı bu ve bundan sonraki yazımızın ön şartı olduğunu söyleyebiliriz. İlgili makaleye buradan ulaşabilirsiniz.

CSS Dersleri – 4 || ID Seçiciler Nedir? Nasıl Kullanılır?

Şimdi bu yazımızdaki konumuza dönelim. ID seçiciler yine CSS yapısında en çok kullanılan seçici türlerinden birisidir. Ancak sınıf seçiciden önemli bir farkı bulunur. Sınıf seçiciler hatırlıyorsanız, bir kere tanımlanır ve istediğiniz etikete, istediğiniz html bölümüne uygulanabilir. Ancak ID seçiciler bir kere tanımlanırlar ve sadece bir kere kullanılırlar.

ID Türkçe’ ye kimlik olarak çevrilebilir. Normal hayatta insanların kimliğini düşünün. Bir kişi sadece o kimliğe sahiptir ve o kimlik ona özgüdür. Aynı kimliğe başka bir kişi sahip olamaz.

Aynı şekilde ID seçicilerde böyle düşünülebilir. ID seçici olarak tanımlanan bildirimler, yalnızca bir bölüme uygulanabilirler. Diğer bir konu ise söz dizimindeki farklılıklardır. Sınıf seçicilerde hatırlıyorsanız . (nokta) işareti ile başlamanız gerekiyordu. ID seçicilerde ile . (nokta) yerine # (diyez) işareti kullanılır. Yine aynı şekilde etiketleri arasında bu ID seçiciler yazılıp, etiketleri arasındaki etiketlerde ve istenilen bölümlerde çağrılabilir.

Ancak CSS bildirimlerinin ve tüm CSS kodlarının etiketleri arasında yazılması gerektiğini asla unutmayın. Şimdi bir uygulama üzerinde anlamaya çalışalım. Aşağıda bir ID seçici tanımlıyoruz.

Yukarıda gördüğünüz üzere “logo” adında bir ID seçici tanımladık. Bu seçici ile aslında “logo” bölümünün 100px’ e 75px şeklinde kesin (absolute) bir şekilde sayfada konumlandırılacağı anlamını çıkarabiliriz. Gördüğünüz gibi # (diyez) işareti ile ID tanımlamasına başladık ve Türkçe karakter olmaması şartı ile ID seçiciye bir isim verdik. (logo) Şimdi sıra geldi ID seçiciyi çağırmaya. ID seçiciler çağırırken aynı sınıf seçiciler gibi çağrılacağı bölümün etiketinin parametresi olarak çağrılırlar. Ancak bu kez parametre ismi “class” değil “ID” olmalıdır. Hemen yukarıda tanımladığımız “logo” isimli ID seçiciyi aşağıdaki div için çağıralım.

Yukarıda da gördüğünüz gibi “logo” isimli tanımladığımız ID seçiciyi

etiketinin bir parametresi olarak kullanarak çağırdık. Çağırırken bu kez “ID” anahtar kelimesini yazdığımızı görebiliyorsunuz. Bu kod sayesinde “logo.png” isimli logomuzu sayfanın üst bölümünde 100px soldan, 75px üstten başlayarak eklemesini sağladık. Bu kodları çalıştırdığınızda ekran çıktımız aşağıdaki gibi olacaktır.

Bu örnekteki kaynak dosyayı indirmek için tıklayınız…

CSS dersleri ‘mizin bu bölümünde ID seçicinin ne olduğunu, hangi durumlarda kullanılacağını ve kullanımı ile ilgili söz dizimi kurallarını göstermeye çalıştık. Umarım etkili olmuştur. Bir sonraki dersimizde Etiket (Tag) seçicileri tanıyacağız. Görüşmek üzere.

Not: Makale özgün bir makaledir. Alıntı yapmadan kullanılamaz. @bilgisayar.name
CSS Dersleri – 4 || ID Seçiciler (CSS Seçiciler ve Çeşitleri)

Haber Başlığı CSS Dersleri – 4 || ID Seçiciler (CSS Seçiciler ve Çeşitleri) appeared first on Bilgisayar Sorunları ve Çözümleri.

CSS Dersleri – 3 || Sınıf Seçiciler (CSS Seçiciler ve Çeşitleri)

Yararlı İnsanlar Topluluğu — Sat, 31 May 2014 17:56:23 +0000

Daha önceki CSS dersleri ‘mizde CSS yapısını ve CSS kullanımını görmüştük. Orada da aslında seçicileri kullanmıştık. Şimdi bu dersimizde CSS yapısı içerindeki seçicileri daha detaylı bir şekilde inceleyeceğiz.

Öncelikle seçici nedir tanımlayalım. Seçiciler web sayfasında hangi kısımlarla ilgili stil tanımlanacağını belirlediğiniz bölümdür. Hatırlıyorsanız CSS yapısı aşağıdaki resimdeki gibi birçok bildirimden oluşur. Bildirimler ayarlanacak olan sayfa stilinin özelliklerini belirler. (Örneğin kırmızı renk, kenarlığın kalın olması vb..)

Ancak sayfa bir bütünden ibaret değildir. Web sayfasında bir çok alan bulunur. Örneğin bu alanları bazı bölümlerini kırmızı bazı bölümlerini mavi yapmak isteyebilirsiniz. İşte burada belirttiğimiz sayfanın birbirinden bağımsız bölümlerini seçiciler sayesinde tanımlarsınız.

Yukarıdaki örneği dikkatle inceleyelim. “h1” aslında bir HTML başlık etiketidir. CSS kuralı “h1” etiketi kullanılarak tanımlanmıştır. Bunun anlamı şudur; yazdığınız stil şablonu özellikleri sadece “h1” etiketi için geçerlidir. (Yazı rengini mavi renk yapar.)

CSS Dersleri – 3 || CSS Çeşitleri

CSS ‘de farklı türde birçok seçici vardır. Ancak biz bu dersimizde 3 önemli CSS seçicisinin üzerinde duracağız. Bu CSS türleri; etiket seçici, ID seçicisi ve sınıf seçicisidir. Şimdi bu çeşitleri birer birer inceleyelim.

CSS Sınıf Seçicisi (Class Selectors) – (CSS Dersleri)

Sınıf seçiciler CSS ‘ de en yoğun bir şekilde kullanılan seçici türlerinden biridir. Sınıf seçiciyi sayfa içerisindeki birden fazla öğeye tekrar tekrar uygulayabilirsiniz.

Sınıf seçiciler tanımlanırken . (nokta) ile başlamak zorundadırlar. Tanımlandıktan sonra çağrılırken de çağrılacak olan HTML etiketinin “class” parametresiyle çağrılırlar. Ayrıca seçiciler genellikle etiketi içerisinde ya da ayrı bir still.css dosyasında tanımlanırlar. (Not: CSS kullanım alanları daha sonraki derslerde detaylı bir şekilde anlatılacaktır.) Bir örnek üzerinde daha iyi anlayabiliriz.

Örneğin “sinif1” adında bir bir sınıf seçicisi tanımlayalım ve stil bildirimi olarak da yazı boyutunu 12 pt, yazı rengini de kırmızı olarak ayarlayalım. Aşağıdaki kodu web sayfanızın etiketleri arasında bir bölüme ekleyin.

Yukarıda da gördüğünüz gibi sınıf seçiciler tanımlanırken . (nokta) ile başlıyor. Bildirimlerin yapısını zaten bir önceki dersimizde bahsetmiştik. Şimdi bu sınıf seçiciyi bir HTML bölümünde yani bir HTML etiketinde aktif edelim yani çağıralım.

Örneğin “Web Sitemize Hoşgeldiniz” şeklinde yazılan h1 başlığına bu tanımladığımız stili uygulayalım. Bildiğiniz gibi h1 başlığı varsayılan olarak siyah renklidir ve yaklaşık 2 em (36px) boyutlarındadır. Biz bu stili h1 için uyguladığımızda yazı rengi kırmızı, 12 pt ile yazılmış bir başlığa dönüşecektir.

Bunun için aşağıdaki kodu etiketleri arasında herhangi bir bölüme yazıyoruz;

`Web Sitemize Hoşgeldiniz`

Bu kodun derlenmiş hali aşağıdaki gibidir;

Web Sitemize Hoşgeldiniz

Yukarıda da gördüğünüz gibi dersin başında tanımladığımız “sinif1” isimli sınıf seçicisini h1 başlığı için uyguladık. Bunun için

etiketi içerisinde “class” parametresini kullandık. class=”sinif1″ ile yukarıda etiketleri arasında tanımladığımız stil özelliklerini alarak etiketleri içerisindeki “Web Sitemiz Hoşgeldiniz” metnini kırmızıya ve 12 puntoluk bir stile dönüştürdük.

Sonuç olarak sınıf seçiciler tanımlanırken . (nokta) ile başlarlar ve “class” parametri kullanılarak çağrılırlar. Sayfanın istediğiniz herhangi bir bölümünde istediğiniz kez tanımladığınız bir sınıf seçiciyi çağırıp kullanabilirsiniz. Yazının başında da belirttiğimiz gibi sınıfı seçicicler CSS’ de en çok kullanılan seçici türlerinden birisidir.

Sonraki CSS dersleri ‘mizde ID seçiciyi ve sonrasında etiket seçicileri inceleyeceğiz. Görüşmek üzere.

Not: Makale özgün bir makaledir. Alıntı yapmadan kullanılamaz. @bilgisayar.name
CSS Dersleri – 3 || Sınıf Seçiciler (CSS Seçiciler ve Çeşitleri)

Haber Başlığı CSS Dersleri – 3 || Sınıf Seçiciler (CSS Seçiciler ve Çeşitleri) appeared first on Bilgisayar Sorunları ve Çözümleri.

CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı

Yararlı İnsanlar Topluluğu — Wed, 16 Apr 2014 10:13:30 +0000

CSS Dersleri ‘mizin ilkinde “CSS Nedir Ne işe Yarar?” sorularına cevap arayarak CSS’ i tanımlamaya çalıştık. Bu dersimizde CSS’e artık giriş yapacağız. Öncelikle CSS’ in yapısını ve CSS kullanımını inceleyeceğiz.

CSS sözdizimi aslında çok kolaydır. Öncelikle “CSS SEÇİCİSİ” oluşturulur, ardından bu seçiciye BİLDİRİMLER yazılır. Bildirimlerde kendi içerisinde ÖZELLİK VE DEĞER’ leri barındırılar. Bu bahsi geçen 4 teknik terimi dersin ilk başında çok iyi anlamaya çalışın. Çünkü bundan sonraki CSS dersleri ‘mizin tümünde bu bahsi geçen “seçici, bildirim, özellik, değer” sözcükleri kullanılacaktır. Bu nedenle hem CSS’ i iyi öğrenmek, hem de etkili kullanabilmek için bu kuralları gözardı etmeyin.

CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı

Şimdi CSS’ in yapısını daha detaylı inceleyelim. Bu terimlerin ne anlama geldiğini ayrı başlıklar halinde tanımaya çalışalım.

1) SEÇİCİ :

Seçiciler aslında hangi bölümle ilgili stil tanımlanacağını belirlediğiniz ifadelerdir. Örneğimizde “h1” bir HTML etiketidir. Ve bu mantığa göre CSS kuralımız “h1” etiketi için tanımlanmıştır. Yani sadece yazdığınız stil şablonu özellikleri “h1” etiketini etkiler. CSS ‘de farklı türde seçiciler bulunur. Etiket seçici, ID seçicisi ve Sınıf seçicisi olmak üzere 3 farklı seçici bir sonraki CSS dersleri ‘mizde ayrıntılı bir biçimde anlatılacaktır.

2) BİLDİRİM :

Bildirimler “neyin nasıl değişeceğini” belirlediğimiz ifade dizileridir. Örn: Rengin mavi olması, yazının kalın olması, kenarlığın çift çizgili olması vb. cümlelerin CSS kodu biçiminde düzenlenmesi sonucu bildirimler oluşur. Yukarıdaki resimde örnekte “color:blue;” ifadesi bir bildirimdir. CSS’ de binlerce hatta onbinlerce bildirim yazabilirsiniz. Bir bildirimi yazan kişi diğer bildirimleri de aynı sözdizimi kurallarına uyarak kolay bir şekilde bildirim sayısını arttırıp farklı bildirimler yazabilir. Önemli olan hangi kelimelerin, hangi özellikleri kapsadığını ve bu özelliklere hangi değerlerin hangi kurallarla atanabileceğini bilmekten geçiyor. Bu nedenle CSS bildirimi yazmak CSS’ i öğrenmenin yarısıdır diyebiliriz.

Not1: Tüm bildirimler ” { } ” arasına yazılmak zorundadır. Bu küme parantezleri arasına en az bir adet olmak üzere birçok bildirim yazabilirsiniz. Küme parantezlerini kullanmamak sözdizimi hatasına neden olacağından CSS kodlarının derlenememesine neden olur.

Not2: Bir her bildirimin arasında mutlaka “;” kullanılmalıdır. “;” bir bildirimin bittiğini diğer bildirime başlanacağına işarettir. Eğer “;” ü kullanmazsanız CSS kodlarınız çalışmaz. Bu nedenle bu işaretleri mutlaka kullanmalısınız.

2.1) ÖZELLİK :

Bildirimlerin ana öğesi olan özellikler “neyi değiştireceksiniz” sorusuna karşılık gelir. Örneğin “rengi değiştireceğim” , “kenarlığı değiştireceğim” , “yazının büyüklüğünü değiştireceğim” sorularına cevabınızı CSS kurallarına uyarak kod olarak yazarsanız bir özellik tanımlamışsınız demektir. Örneğimizde “color” yani renk bir özelliktir ve bildirim yapısının ilk elemanıdır. Örnekleri çoğaltacak olursak “font-size”, “border-style” , “position” gibi birçok özellik CSS kurallarında yoğun bir şekilde kullandığımız özelliklere örnektir.

2.2) DEĞER :

Değerler bildirimlerin ana elemanlarından diğer önemli öğesidir ve “nasıl değiştireceksiniz” , “hangi ölçü birimini kullanacaksınız” sorularına cevabına karşılık gelir. CSS kurallarına uyarak bu sorulara cevap yazmışsanız “değer” yazmayı da öğrenmişsiniz demektir. Ancak şunu unutmayın, özellik olmadan değer tanımlanamaz. Bir değerin olması için mutlaka özellik tanımlanması gerekir. Resimdeki örnekte “blue” kelimesi bir değerdir. CSS’ de binlerce hatta onbinlerce değer bulunur. Değer tiplerinin yazım kuralı mutlaka doğru belirtilmelidir.

Not3: Değer tipleri, özelliğe dayalı olarak belirlenir. Örneğin “color” bir renk özelliğidir ve renge yalnızca renk değerleri karşılık gelir. Örneğin renk değerine bir büyüklük uzunluk değeri atamayamazsınız. Hangi özelliklere hangi değerlerin atanabileceği CSS kurallarınca belirlenmiştir. Bu kurallara uymazsanız CSS komutlarınız çalışmaz veya düzgün yorumlanmayabilir. Bunları derslerimizde ayrıntısıyla göreceğiz.

Not4: Özellik ve değer arasında mutlaka “:” işareti kullanılmalıdır. Aksi taktirde CSS kodlarınız çalıştırılamaz. CSS sözdiziminde “:” işareti özelliğin bittiğini değerin başlayacağını belirten işaret olarak tanımlanabilir.

CSS yapısına ve CSS kullanımına cümleler kurarak ve bu cümlelere karşılık gelen CSS kurallarını belirleyerek örnekler yazalım;

Soru: h3 etiketinde yazının boyutunu 16 punto yapan CSS kuralını yazınız.

Cevap: h3 {font-size: 16pt;}

Soru: “renk” isminde bir sınıf seçicisinde yazı renginin turuncu olmasını sağlayan CSS kuralını yazınız.

Cevap: .renk {color: orange;}

Soru: “orta” ismindeki bir ID seçicisinde yazıların yazıldığı alanda ortalanmasını ve yazı tipinin “Verdana” olarak belirlenmesini sağlayan CSS kuralını yazınız.

Cevap: #orta {text-align:center;font-family:Verdana;}

Yukarıdaki 3 örnekte farklı seçici türleri kullandım. Seçicileri bundan sonraki CSS dersleri ‘mizde göreceğiz. Bu nedenle bu bölüme odaklanmayın. Önemli olan bildirimlerdir. Bildirimlerin yazım biçimlerini, özellik ve değer arasındaki “:” işaretini, her bildirimin tamamlanmasından sonra “;” işaretini kullandığıma dikkat edin. Ayrıca seçiciden sonra kullandığım bildirimlerin “{ }” blokları arasında bulunduğunu da mutlaka öğrenin. Bu linkten CSS yapısının sayfanızda yaptığı değişiklikleri “Try it Yourself” butonunu kullanarak test edebilirsiniz.

Bu kurallar basit gibi görünse de en ufak bir hatada CSS kodlarının çalışmamasına neden olur. Bu anlamda bu dersi asla öğrenmeden diğer CSS dersleri ‘ne geçmeyin. Çünkü CSS’ de temeli iyi atmak çok önemlidir. Temeli iyi atarsanız bundan sonra yapacağınız iş kat çıkmaktan ibaret olacaktır, ve bu anlamda kat sayımız CSS’ de çok fazla olacağından enerjinizi sonraki derslere kesinlikle saklayın. Birçok bildirimi üst üste yazarak Web Sayfalarınıza bir görsellik kazandıracaksınız. Yazım şekli aynı bile olsa bu özellikleri değerleri doğru zamanda ve doğru yerde kullanabilmek size profesyonellik kazandıracaktır. Bir sonraki dersimizde görüşmek üzere.

Not: Makale özgün bir makaledir. Alıntı yapmadan kullanılamaz. @bilgisayar.name
CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı

Haber Başlığı CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı appeared first on Bilgisayar Sorunları ve Çözümleri.

CSS Nedir Ne işe Yarar ? CSS Dersleri – 1

Yararlı İnsanlar Topluluğu — Sat, 12 Apr 2014 10:07:03 +0000

Yıllarca web programcılar ve web tasarımcılar farklı zaman dilimleri içerisinde kendi işlerini kolaylaştıran farklı programlama yapılarının üretildiğini gördüler. Ancak bundan tam 17 yıl önce öyle bir programlama yapısıyla tanıştılar ki, bugün gelinen noktayı belki de hayal bile edemezlerdi.

Dünya CSS ile 1996 yılında Håkon Wium Lie ve Bert Bos isimli iki akademisyen tarafından 1996 yılının 17 Aralık’ ında yayınladıkları “Cascading Style Sheets, level 1” adlı makalesiyle tanıştı. Bu aslında gerçekten müthiş bir icattı. Ancak ilk yıllarda çok da fazla kişinin bilmedi bu sistem, ileri ki yıllarda Web Tasarımcıları için vazgeçilmez bir yapı alacaktı. 2005-2006′ dan sonra CSS gerçek anlamda bir çok web programcısı tarafından kullanılmaya başlandı. Günümüzde ise artık bir web programcısının bu yapıyı kullanmaması, öğrenmemesi, hatta CSS olmadan bir web sayfası tasarlaması mümkün görünmüyor. Dünya üzerindeki birçok web sitesinde bir şekilde belli bölümlerinde de olsa CSS dili kullanılmış olduğu görülebilir.

Peki CSS Nedir Ne işe Yarar?

CSS “Cascading Style Sheets” kelimelerinin baş harflerinden kısaltılmıştır. Türkçeye “Basamaklı Stil Şablonları” olarak çevirebiliriz. Kelime anlamından ziyade “Stil Şablonları” tamamen web programcılığında tasarım, renk ve sitenin dış görünüşüyle alakalı olduğunu en başta belirtelim. CSS sitenin grafikleri, renk düzeni, arkaplanın konumu, yazı tipleri, boyutları vb. tüm özelliklerin düzenlendiği web programlama dilidir. Web sitelerinde iki ana bölüm vardır. Birisi içerik yani web sitesinde sunacağınız ya da sunduğunuz bilgiler, diğeri de bu bilgilerin hangi tasarımlarda sunulduğunu belirlediğiniz biçimlendirme kriterleridir. Bu ikisini ayırmak hem programcıyı rahatlatır. İçerikle ilgilenen, tasarımı konusunda düzenleme yapmak zorunda kalmaz. İşte CSS içerik ve tasarımı birbirinden ayırmıştır. Bu içeriği CSS komutları sayesinde istediğiniz gibi biçimlendirebiliyorsunuz. Ancak kodlar içerik ve biçimlendirme olarak sayfa içerisinde CSS sayesinde ayrılmış oluyor.

Ayrıca HTML komutlarının yapamadıklarını CSS komutları ile yapabilirsiniz. HTML ‘de tasarım dilidir, ancak belli kalıpların dışına çıkamazsınız. Ancak CSS’ in bu anlamda sınırı yoktur. Örneğin h1 etiketinin boyutuyla HTML ‘de oynayamazsınız, ancak CSS bu etiketin boyutunu istediğiniz gibi biçimlendirmenizi sağlar.

En önemli özelliklerinden birisi de, binlerce sayfayı aynı anda tek bir CSS sayfası ile biçimlendirebilmenizdir. CSS değil de HTML veya diğer biçimlendirme yöntemlerini seçecek olsanız tüm sayfaları ayrı ayrı biçimlendirmek zorunda kalabilirdiniz. Bu da size hız, zaman ve maliyet açısından ek yük getirecekti. Bu anlamda W3C adını verdiğimiz World Wide Web Corsortium adını verdiğimiz kurumda 1996 yılında Håkon Wium Lie ve Bert Bos’ un yayınladığı makale ile duyurulan bu işaretleme diliyle aslında Web Programlamada bir çığır açılmış oldu.

CSS kullanmanın diğer bir önemli avantajı da arama motorlarının optimizasyonu konusundaki etkileridir. Günümüzde birçok firma Web Sitelerini kendilerini bulundukları lokal çevreye ve dünyaya tanıtmak için dizayn ettirirler. Kitlelere ulaşmak için en önemli kriter google gibi büyük arama motorları tarafından tanınmak ve tanındıktan sonra arama sonuçlarında en üst bölgelerde yer almaktır. İşte bunu sağlamak için birçok kriter mevcuttur. Bunlardan birisi de sadelik, anlaşılabilirliktir. CSS bu anlamda size çok şey katar. Karmaşık yapıların olmadığı, içeriğin koddan ayrıldığı siteleri arama motorları sever. CSS’ de bu yapı üzerine kurulduğu için size bu anlamda çok büyük yarar sağlar.

Bu gün bir Web Programcısı olmak isteyen bir kişinin ilk olarak öğrenmesi gereken bu işaretleme dili aslında diğer programlama dillerine göre de son derece öğrenilmesi basit bir dildir. Çünkü komut satırları karmaşık yapıdan oluşmaz. Tek yapmanız, bildirimleri düzgün kurup, hangi özelliğin hangi durumlarda kullancılacağını öğrenmekten geçer. Bir sonraki CSS dersimizde bu yapıya anlatarak CSS ‘ e giriş yapacağız. Görüşmek üzere.

Not: Makale özgün bir makaledir. Alıntı yapmadan kullanılamaz. @bilgisayar.name
CSS Nedir Ne işe Yarar ? CSS Dersleri – 1

Haber Başlığı CSS Nedir Ne işe Yarar ? CSS Dersleri – 1 appeared first on Bilgisayar Sorunları ve Çözümleri.