Tüm Üyelere ve Ziyaretçilere Forumda İyi Vakit Geçirmelerini Dileriz.
Tüm Paylaşımlarla, İsteklerinizle , Sorularınızla Daima Yanınızdayız.

CSS Nedir? CSS Hakkında Tüm Bilgiler

Konu Sahibi: Morningstar, Kategori: CSS, 0 Yorum, 242 Okunma
BU KONUYU DEĞERLENDİR
  • Derecelendirme: 3/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Görüntüleyenler: 1 Ziyaretçi
Yönetici
Yönetici
*******
348
Mesajlar
347
Konular
0
Rep Puanı
09-04-2020, Saat: 21:48 (Son Düzenleme: 09-04-2020, Saat: 21:53, Düzenleyen: Morningstar.)
#1
CSS Nedir? CSS Hakkında Tüm Bilgiler

CSS Nedir?
Ortaya çıktığı 1996 yılından bu zamana kadar sürekli geliştirilen Cascading Style Sheets olarak adlandırılan CSS, Türkçe karşılığı olarak ise Stil Şablon adıyla isimlendirilmiştir. Web tasarımı yapanların hayatını kolaylaştıran ve sürekli güncellemelerle, yoğun olarak kullanılan bir programdır. Bu sistem site bünyesindeki her sayfa için daha geniş bir seçenek havuzu içerisinde evrensel şablonlar hazırlama imkanı vermektedir. Bilindiği gibi HTML , metin biçimlendirme konusunda sitenin birçok farklı noktası adına çok fazla seçenek olanağı sunmaktadır. CSS programı ise bu seçeneği daha üst düzey, geniş bir çapa taşıyarak, daha fazla fırsat olanakları ile sunmaktadır.

[Resim: css1.png]

Başka bir açıdan, örnek olarak her hangi bir harfi ele alacak olursak bu harfin; büyüklüğünü, fontunu ya da rengini gibi daha birçok farklı özelliğini ayrıntılı bir şekilde değiştirme olanağı sunmaktadır. CSS dediğimiz bu sistemin en dikkat çeken noktası ise kendine has bir biçimde esnek kullanım olanaklarıdır. Bu durumun en büyük ayrıcalıklarından biri ise güncelleme sırasında birçok site sayfasında yapılacak olan tüm değişikliklerle ayrı ayrı uğraşılmasına gerek yoktur. Genel açıdan bakıldığı zaman bir web sayfası içindeki bütün sayfalar adına daha fazla font ya da renk değişim ihtiyacına gerek duyulmaz. Bu durumda CSS’nin buradaki temel işlevi, bütün bu işlemleri her bir sayfada tek tek işlemekten ziyade, web sayfaları üzerinde bir kez yapabilmek mümkündür.

CSS Hakkında Tüm Bilgiler

CSS Ne İşe Yarar?
Sitelerin alt yapısını hazırlamış olan, arka planında belirli kod dizilimleri mevcuttur. Örneğin menüler, reklam alanları, başlıklar, alt başlıklar, içerikler ve bunun gibi unsurlardan hepsini bir nesne olarak düşündüğümüz zaman, siz başlıkta yazılması gerekenleri diğer kodlar aracılığı ile yazabilirsiniz ama başlığın fontu, rengi, sayfa içerisindeki yerleşim konumu gibi görsel detayları CSS kodlaması ile yapabilirsiniz. Özellikle geliştiriciler tarafından CSS’nin en çok tavsiye edilmesinin nedeni fazla sayıda sayfanın birbirinden bağımsız olarak düzenlenmiş bir CSS dosyasına bağlanabiliyor olması özelliğidir. Sadece fontlar da değil, menülerin üzerine gelindiğinde menünün renginde değişme meydana gelmesi yada alt menü açılması gibi işlemleri de CSS ile yapabilmek mümkündür. Ayrıca istediğiniz farklı bir bölümün üzerine tıkladığınızda sayfanın yapmasını istediklerinizi yine CSS ile düzenlemek mümkündür.

[Resim: css2.jpg]

Bunların yanında CSS formatı, anlaşılması ve öğrenilme aşamasında çok bir zorluğa sahip olmayan bir dil yapısına sahiptir. Eğer bir noktada CSS kullanılacak ise o zaman HTML bilgisinin temellerine mutlaka sahip olmanız gerekir. CSS kod yazımında, pek çok kodlama sistemlerinde de olduğu gibi İngiliz alfabesi ve İngilizce kullanılmaktadır. Bu durumda ise kod yazılımı içerisine eklenecek olan İngilizce kelimeleri bilmek son derece yeterli olacaktır.

Web Sitesine CSS Ekleme
Oluşturacağınız web sayfasına CSS stilleri eklemek istiyorsanız bunu yapabilmek içi üç farklı yola başvurabilirsiniz. CSS'nin dahil olduğu kuralları çerçevesinde, HTML belgesinin bölümüne ekleyebilir, bütün CSS kurallarının bulunduğu başka bir .css dosyasına bağlantı izni verebilir veya web sitenizde genel kuralları uygulamak için genel CSS'i kullanabilirsiniz.

[Resim: css3.png]

Harici CSS Ekleme
Harici bir .css dosyasına bağlamak, CSS eklemenin en çok tercih edilen yöntemidir. Yapılan değişiklikler web sitesine global olarak yansıtılmaktadır. Bu işlemin yapılabilmesi için CSS dosyasıyla bağlantı kurularak sayfanın bölümüne yerleştirilmesi yeterlidir. Bu konuda style.css bütün stil kurallarını içermektedir.

Genel CSS Ekleme
Belirlenmiş olan web sayfasının yine bölümüne genel CSS kodu yerleştirilmesi ile yapılır. Bu yöntemde genel CSS sadece eklenmiş olduğu sayfada aktif olarak çalışır. CSS stillerinin bu şekilde yerleştirilmiş olması ile sayfa her yüklendiğinde tekrar yüklenecek ve sayfanın yüklenmesi süresinde uzamalara sebep olacaktır.

Yerel CSS Ekleme
Belirli bir HTML etiketi oluşturmak için yerel CSS kullanılır. Bu konuda style özelliği, belirli bir HTML etiketini stillemek amacıyla kullanılmaktadır. Bu seçenekte her HTML unsurunun tek tek stillendirilmesi gerektiği bilinmelidir. CSS dosyalarına erişim izni olmadığı zamanlarda veya sadece tek bir öge için stil uygulamak zorunda kaldığınız durumlarda, yerel CSS özelliğinde bir HTML sayfası oluşturulabilir.

CSS ile Sayfa İçeriği Yerleştirme
CSS sahip olduğu kuralları açısından üç faklı kısımdan oluşmaktadır. Bu bölümlerin kendi içinde tanımlama ve seçici olarak iki adet kısım bulunmaktadır. Tanımlama bu noktada, bir değer ve bir özellikten oluşmaktadır. Başka bir deyişle sayfada, seçici HTML adına, kimliği ya da ismi olmaktadır. Özellik bakımından bakıldığında ise standart olarak eklenmiş bazı değerler kullanılmaktadır. Bu belirlenmiş değerler arasında, bunların özellik olarak kendi değerleri bulunmaktadır ve bu özellikler 120 kadar olmaktadır. CSS kodları yazıldıktan sonra ise geriye rastgele bir sayfa içine ekleme yapmak kalmaktadır. Bu işlemden sonra ise bütün HTML ögelerini etkilemek mümkün olmaktadır. CSS kod sistemi bitirildiği zaman ise web sitesi üzerinde tüm sayfanın içeriği çok kolay bir şekilde değiştirme yapılabilmekte ve kullanılabilmektedir.

[Resim: css4.jpg]

CSS'nin Temel Özellikleri
Background-color CSS dilinde arka plan rengi anlamına gelmektedir. Bulunduğu seçicinin arka plan rengini değiştirmek amacıyla kullanılır. Varsayılan değeri  renksizdir. Kodları yazarken Visual Studio programında bulunan intellisense özelliğinden faydalanabilir ve daha hızlı yazma imkanı sağlayabilirsiniz. Font-family CSS dilinde, font ailesi anlamına gelmektedir. Web sayfasını kullanacak olan kullanıcıya göstermek için yararlanacağımız fontları buraya yazarız. Otomatik olarak varsayılan tercihi tarayıcı tarafından belirlenir. Font-size, font büyüklüğü anlamına gelmektedir ve fontların küçük ya da büyük olması belirlenir. Font-weight ise font ağırlığı anlamına gelmektedir ve kullanılan fontların kalın ya da normal ayarının yapılmasını belirler. Bold ise bu noktada kalın anlamına gelmektedir.

Bunlardan farklı olarak temel özellikleri içesinde kullanabileceğiniz farklı özelliklerde mevcuttur. Bunlar; link özellikleri, liste özellikleri, katman özellikleri, text özellikleri, imleç özellikleri, zemin özellikleri, tablo özellikleri, ve kaydırma çubuğu özellikleridir. Kaydırma çubuğu özelliği sadece Internet Explorer için geçerlidir.

CSS'de Görüntüleme ve Görünürlük Özelliği
Display özelliği, unsurların nasıl ve ne şekilde görüntüleneceğini belirlerken, visibility özelliği de bir elemanın görünür mü yoksa gizli mi kalacağını belirlemektedir.

Bir ögeyi ya display özelliğini “none” yaparak ya da visibility özelliğini “hidden” yaparak gizleme özelliği gerçekleştirilmesi sağlanır. Bunlarla beraber bu iki metot değişik sonuçlar üretir. Visibility: hidden ataması yapıldığında elemanı gizler ama bununla beraber o öge sayfada aynı yeri kaplar. Ögenin gizlenmesi sağlanacaktır ancak hala genel çerçevede yer almaya devam edecektir. Display: none bir ögeyi gizler ve herhangi bir boşluk ayırma işlemi gerçekleştirmez. Öge gizlenecek ve web sayfası o öge orada yokmuş gibi görüntülenecektir.

Bir block ögesi, kullanılabileceği bütün yatay genişliği kullanabilen, yapısal olarak kendisinden önce ve sonra bir satır sonu bulunduran ögedir. Bir inline ögesi ise gerekli olduğu kadar genişleyebilen bir ögedir. Bu ögede ise diğer kullanılan ögelerden farklı olarak satır sonu zorunluluğu da bulunmamaktadır.

CSS'de Kutu Modeli Kullanılması
Birer kutu olarak düşünülebilen Bütün CSS elemanları, CSS'de tasarım ve düzenden bahsedildiği zaman tam olarak "Kutu Modeli" tanımı kullanılır. CSS Kutu Modeli sırasında HTML bileşenlerinin etrafını sarmakta olan ve border, margin, padding ve content ile oluşan elemanlardan meydana gelmiştir. Bahsettiğimiz CSS Kutu Modeli, bize elemanların çevresine bir sınır ekleme ya da elemanlar arasında bir boşluk oluşturma fırsatını sağlamaktadır.
[Resim: imza.png]



[-]
Etiket
tüm nedir? css hakkında bilgiler

Hızlı Menü: