İnternette gezinirken bazı web sitelerinin neden görsel olarak diğerlerinden farklı olduğunu merak etmiş olabilirsiniz. Basamaklı Stil Sayfaları veya CSS, her türden web sitesinin görsel bileşenlerini oluşturmak için kullanılan dildir. HTML gibi biçimlendirme dillerinde oluşturulan öğelerin stili, Basamaklı Stil Sayfaları dili kullanılarak oluşturulur. Web sitesinin içeriğini estetik sunumundan ayırır. Dolgu ve kenar boşluğu, web öğelerine CSS'de daha fazla alan sağlar, ancak farklı etkileri vardır. HTML bir sitenin çerçevesi olarak hizmet ettiğinden ve Basamaklı Stil Sayfaları tüm bir web sitesinin tüm estetiğini ele aldığından, HTML ve Basamaklı Stil Sayfaları arasında yakın bir ilişki vardır.
CSS Nedir?
CSS adı verilen bir programlama dili, web sitesi tasarımına yardımcı olur. Renkler, yazı tipi stilleri ve boşluk gibi tasarım bileşenlerinin eklenmesine uygulanır.
Basamaklı Stil Sayfaları ile tasarım ve içerik ayrılır, bu da içeriği değiştirmeden tasarımın değiştirilmesini kolaylaştırır. Bunu, web sitenizin nasıl görünmesi ve çalışması gerektiğini açıklayan bir dizi yönerge olarak düşünün. Bu nedenle, bir web sitesini ziyaret ettiğinizde farklı yazı tipi stilleri, renk şemaları veya düzenleri fark ederseniz, bunun nedeni muhtemelen CSS'dir.
Biçimlendirme dili CSS, web sayfalarınızın nasıl görüneceğini belirlemekten sorumludur. Web sitenizdeki öğelerin tonlarını, yazı tiplerini ve tasarımlarını düzenler.
Bu stil sayfası dilini kullanarak web sitenize efektler veya animasyonlar da ekleyebilirsiniz. Tıklama düğmesi efektleri, döndürücüler veya yükleyiciler ve animasyonlu arka planlar gibi birkaç Basamaklı Stil Sayfası animasyonunu göstermek için bundan yararlanabilirsiniz.
Web siteniz, CSS içermeyen düz bir HTML sayfasından başka bir şeye benzemeyecektir.
CSS Nasıl Çalışır?
CSS'nin temellerini anlamak için öncelikle çağdaş HTML hakkında temel bir anlayışa sahip olmalısınız. Sayfalar, web tasarımcıları tarafından "kutu modeli" kullanılarak düzenlenir. Bir Web sayfası, her biri ayrı bir öğe içeren çok sayıda kutudan oluşur. Bu kutular üst üste istiflenir.
Örneğin, bir sayfanın başlığı, her biri logo, gezinme, sosyal medya düğmeleri, alışveriş sepeti düğmeleri vb. gibi bir başlığı oluşturan bileşenlerden birini içeren daha küçük kutulara bölünmüş bir kutudan oluşur. Basamaklı Stil Sayfalarını kullanarak stilleri "başlık" kutusuna uygular.
Basamaklı stil sayfalarının “basamaklı” bileşeni bu noktada devreye girer. Başlığın yazı tipi stilleri, başlığı oluşturan tüm öğelere basamaklı bir şekilde uygulanır. Gezinme, bağlantılar ve harekete geçirici mesaj düğmelerinin tümü mor renkte, Arial yazı stilinde ve on beş punto yüksekliğinde olacaktır.
Basamaklı Stil Sayfaları, bir dizi kural tarafından yönetilen basit, İngilizce tabanlı bir sözdizimine sahiptir. Daha önce de belirttiğimiz gibi, stil öğelerinin hiçbir zaman HTML ile kullanılması amaçlanmamıştır; sadece sayfanın işaretlemesi yapıldı. Yalnızca içeriğin bir özetini sağlamak için tasarlanmıştır.
Seçici, dikkati stil vermek istediğiniz HTML öğelerine yönlendirir. Noktalı virgüller, bildirim bloğu içindeki bildirimlerin ayrılmasını belirtmek için kullanılır.
İki nokta üst üste, CSS özelliğinin adını her bildirimdeki değerinden ayırır. Basamaklı Stil Sayfaları bildirimleri her zaman noktalı virgülle kapatılır ve bildirimleri içeren bloklar kaşlı ayraçlar içine alınır.
CSS Türleri
1 numara. Dahili Basamaklı Stil Sayfaları
HTML belgenizin head> bölümüne style> etiketini eklemeden dahili veya gömülü CSS kullanamazsınız. Bu Basamaklı Stil Sayfası, tek bir sayfaya stil vermenin pratik bir yoludur. Ancak, bu stili çok sayıda sayfa için kullanmak zaman alır çünkü web sitenizin her sayfasına CSS kuralları eklemeniz gerekir.
Bu CSS stillerini uygulama yöntemi, bir web sitesi her yenilendiğinde ek yükleme yapılmasına neden olur. Ayrıca, tek bir sayfada yer aldığından, aynı Basamaklı Stil Sayfalarını farklı sayfalarda kullanamazsınız. Yine de bunun avantajları var. Her şey tek bir sayfada olduğunda şablon önizleme için daha kolay paylaşılabilir.
Kod yalnızca bir HTML dosyasına ekleneceğinden ve bu stil sayfası sınıf ve kimlik seçicileri desteklediğinden, herhangi bir ek dosya yüklemeye gerek yoktur. HTML dosyası kodu içeriyorsa, sayfa büyüyebilir ve yüklenmesi daha uzun sürebilir.
2 numara. Dış Yöntem
Harici CSS ile, web sitenizin sayfalarını, cihazınızda Notepad++ gibi herhangi bir metin düzenleyici kullanılarak oluşturulan bir.css dosyasına bağlayabilirsiniz. Büyük bir web sitesi, bu CSS türü kullanılarak daha etkili bir şekilde tasarlanabilir. Bir single.css dosyasında değişiklik yaparak sitenizin tamamı bir kerede değiştirilebilir.
Bu en pratik olanı olabilir. Her şey için bir external.css dosyası kullanılır. Bu, her sayfaya ayrı ayrı stil uygulayabileceğiniz ve ardından Basamaklı Stil Sayfalarını seçtiğiniz herhangi bir sayfaya uygulayabileceğiniz anlamına gelir. Dış stil ayrıca yüklemeyi hızlandırabilir.
HTML dosyalarınız daha net bir yapıya sahip olacak ve CSS kodu ayrı bir belgede olduğu için daha küçük olacaktır. Same.css dosyası çok sayıda sayfaya uygulanabilir. Ancak, harici CSS yüklenene kadar Sayfalarınızla ilgili oluşturma sorunları ortaya çıkabilir.
Birden çok CSS dosyası yüklerseniz veya bunlara bağlantı verirseniz web sitenizin indirilmesini yavaşlatabilir. Bu, sunumunuzun ve içeriğinizin ayrı tutulması gerektiği fikrine bağlıdır. Harici CSS kullanırken stiliniz, stil sayfası olarak da bilinen farklı bir Basamaklı Stil Sayfaları dosyasında olacaktır. Kullanmak istiyorsanız, her HTML sayfası harici bir stil sayfasına bağlantı içermelidir.
3 numara. CSS'nin Satır İçi Stili
Belirli bir HTML öğesi, satır içi CSS kullanılarak biçimlendirilir. Bu CSS stilini kullanmak için her HTML etiketine style özniteliği eklenmiş olmalıdır; seçiciler gerekli değildir.
Her HTML etiketinin stilinin ayrı ayrı olması gerektiğinden, bu Basamaklı Stil Sayfaları türü önerilmez. Yalnızca satır içi CSS kullanıyorsanız, web sitenizin bakımı çok zor olabilir.
Ancak HTML'nin satır içi CSS'sinin yardımcı olabileceği bazı durumlar vardır. Örneğin, stilleri tek bir öğeye uygulamanız gerektiğinde ve CSS dosyalarına erişiminiz olmadığında.
Yalnızca style> etiketine sahip belirli öğeler satır içi desteği destekler. Her bileşenin stilize edilmesi gerektiğinden, CSS'yi işlemenin en verimli veya hızlı yolu olmayabilir. Ancak, yararlı olabilir. Basamaklı Stil Sayfaları dosyalarına erişiminiz olmayabilir veya yalnızca bir öğede yapılan değişikliklerin hızlı bir önizlemesine ihtiyacınız olabilir.
Satır içi CSS kullanarak Basamaklı Stil Sayfaları stillerini doğrudan HTML öğelerine gömebilirsiniz. CSS kurallarının bir HTML sayfasına eklenmesi basit ve hızlıdır. Bu, güncellemeleri test etmek veya önizlemek ve web sitenizde hızlı düzeltmeler yapmak için kullanışlı hale getirir.
Harici stilde olduğu gibi ayrı bir belge oluşturup yüklemek yerine, yapmanıza gerek yoktur. Her öğeye Basamaklı Stil Sayfaları kuralları eklenerek HTML yapısı daha zor ve zaman alıcı hale getirilir. Sayfanızın boyutu ve indirme süresi, birden çok öğenin biçimlendirilmesinden etkilenebilir.
CSS'nin Önemi
Bir web tasarımcısının araç cephaneliği, en güçlü silahlarından biri olan CSS'yi içerir. Bununla birlikte, bir web sitesinin tonunu ve kullanıcı arayüzünü temelden değiştirme gücüne sahipsiniz. Ek olarak, Basamaklı Stil Sayfaları aşağıdaki avantajlara sahiptir:
1 numara. İçerik ve Sunum Ayrımı
CSS'nin en önemli faydalarından biri, içerik ve sunum arasındaki ayrımdır. Web sayfaları içeriklerinden bağımsız olarak şekillendirilebildiğinden, CSS ile web sitesi bakımı ve değişiklikleri daha basit hale getirilir. Web sitenizi ziyaret eden herkese nasıl göründüğünü kontrol eden merkezi bir stil sayfası oluşturmak için CSS'yi kullanarak web sitenizin genel görünümünü ve verdiği hissi kolayca değiştirebilirsiniz.
2 numara. Web Sitelerinin Daha İyi Erişilebilirliği
Basamaklı Stil Sayfalarını kullanmak, web sitelerini daha erişilebilir hale getirir, bu da başka bir avantajdır. CSS sayesinde, engelli kullanıcılar için yazı tipi boyutlarını, renkleri ve kontrast düzeylerini değiştirme yeteneği çok önemlidir. Örneğin görme engelli kullanıcıların, okumayı kolaylaştırmak için metnin yazı tipi boyutunu veya rengini değiştirmesi gerekebilir. CSS, programcılar tarafından daha kapsayıcı ve daha geniş bir kitleye ulaşabilen web siteleri oluşturmak için kullanılabilir.
#3. Daha İyi Kullanıcı Deneyimi
Basamaklı Stil Sayfalarının web tasarımcıları tarafından kullanılması, görsel olarak çarpıcı ve dikkat çekici web sayfaları üretmelerini sağlar. Animasyonlar, geçişler ve fareyle üzerine gelme efektleri, kullanıcı etkileşimini iyileştirmek için CSS ile web sitelerinde uygulanabilecek tasarım seçeneklerinden sadece birkaçıdır. nişan. CSS, biçimlendirmeyi daha kullanıcı dostu hale getirir ve web sayfalarının estetiğini geliştirir. Kullanıcı deneyimi, düğmeleri stratejik olarak yerleştirerek ve metni düzenleyerek iyileştirilir.
#4. Mobil Uyumluluk
Mobil cihazların artan kullanımı, mobil yanıt verebilirliği web geliştirmenin çok önemli bir bileşeni haline getirdi. Basamaklı Stil Sayfaları, tasarımcıların çeşitli ekran boyutlarında çalışan esnek ve uyarlanabilir düzenler oluşturmasına olanak tanır.
CSS, geliştiriciler tarafından web sitelerinin akıllı telefon ile masaüstü bilgisayar arasında ekran boyutuna sahip herhangi bir cihazda kullanılabilir ve erişilebilir olmasını garanti etmek için kullanılabilir.
# 5. Daha Yüksek Geliştirme Hızı
CSS ile, çok sayıda sayfaya belirli biçimlendirme yönergeleri ve stilleri uygulamak için tek bir kod parçası kullanabilirsiniz. Birkaç web sitesi sayfası aynı basamaklı stil sayfasını kullanabilir. Örneğin, ürün sayfalarınız varsa ve hepsinin aynı şekilde biçimlendirilmesini, stilini değiştirmesini ve aynı hissi vermesini istiyorsanız, yalnızca bir sayfa için Basamaklı Stil Sayfaları kuralları yazmanız gerekir. Bu, tüm ürün sayfalarınızı kapsayacaktır.
#6. Basit Format Değişiklikleri
CSS ile belirli bir sayfa grubunun biçimini değiştirmek kolaydır. Her sayfayı düzeltmek gerekli değildir. İlgili CSS stil sayfasında değişiklik yaptığınızda, o stil sayfasını kullanan tüm sayfalar otomatik olarak güncellenecektir.
#7. Daha Hızlı Sayfa Hızı
Daha yavaş sayfa hızı, daha fazla kodun sonucudur. Ve CSS, daha az kod yazmayı mümkün kılar. Bir CSS kuralı, CSS kullanılarak bir HTML belgesindeki belirli bir etiketin tüm örneklerine uygulanabilir.
# 8. Daha Az Kodlama
Web sitesi geliştiricileri, CSS'yi kullanarak aynı stili bir web sitesindeki çok sayıda sayfaya ve sayfa öğelerine uygulayarak çok fazla zaman kazandırabilir ve hata olasılığını azaltabilir. Tüm sitenin stilini değiştirmek için yalnızca az miktarda kod gerekir.
# 9. Ekstra Şekillendirme Seçenekleri
CSS, ilk HTML stil sisteminin izin verdiğinin ötesine geçen birçok özelliğe sahiptir. Net bir vizyon, CSS bilgisi ve biraz sabırla bir web sitesini tam olarak tercihlerinize göre değiştirebilirsiniz.
Dolgu ve Kenar Boşluğu Arasındaki Fark Nedir?
CSS dolgusu ve kenar boşluğunun birbirinden farklı olmasının birincil yolu, birinin bir öğenin içeriği ile kenarlığı arasındaki boşluğu doldurması, diğerinin ise bir öğenin sınırı ile ondan sonraki öğe arasındaki boşluğu doldurmasıdır. CSS Dolgusu ve kenar boşluğu, sırasıyla öğelerin içine ve arasına boşluk eklemek için çalışır. İkisi arasındaki fark, CSS kullanılarak değiştirilebilir ve farkı bilmek, iyi bir düzen tasarımı için çok önemlidir.
CSS'de dolgu, bir kabın içeriği ile kenarlık arasındaki boşluğa atıfta bulunur; aksine, kenar boşluğu bir kabın kenarlığı etrafındaki alanı tanımlar.
CSS özellik dolgusunu yalnızca kenarlıklı öğeler kullanabilir. Kenarlığı ile içeriği arasında bir öğenin içeriği için boşluk oluşturur. Bu nedenle, kenarlıkları olmayan öğelerin dolgudan etkilenmediğini unutmayın.
Elemanların sınırları arasındaki alan kenar boşluğu olarak bilinir. Kenar boşluğu, dolgudan farklı olarak, kenarlık varlığından bağımsız olarak bir öğeyi değiştirir. Kenar boşluğu şeffaflığı ayrıca, özelleştirilebilir dolgu ve kenarlık arka planları yerine web sitesinin temasının arka plan renginin görüntülenmesini mümkün kılar.
CSS Marjı Nedir?
Marjin özelliği, her web öğesinin üstünde yer alır. Alternatif olarak, elemanın etrafında yer açar. Üst, sağ, alt ve sol olmak üzere dört kenar boşluğunun her biri özelliği oluşturur.
Kenar boşluğu, uzunluk, yüzde ve devralma değerleri dahil olmak üzere dolgu ile aynı yapılandırma seçeneklerine sahiptir. Ayrıca, şunları teşvik eder:
Otomatik: Tarayıcı, hangi kenar boşluğu değerinin kullanılmasının uygun olduğunu belirleyecektir. Genellikle web öğesini merkez alır. Negatif değerler, öğeleri çevreleyen bileşenlerine yaklaştırır.
CSS'de Kenar Boşlukları: Nasıl Eklenir?
- Bir WordPress kenar boşluğunda bir resim öğesi vermek istiyorsanız, aşağıdaki talimatları uygulamanız yeterlidir.
- WordPress Dashboard'u açın ve Görünüm altında Özelleştir'i tıklayın.
- Düzenlenmesi gereken gönderiyi seçin. Yan menüden Ek CSS sekmesini seçin ve tıklayın.
- Resim öğesi için kenar boşluğu değerini girin.
- Tüm değişiklikleri kaydedin.
Kenar Boşluklarını ve Dolguyu Kullanmayla İlgili İpuçları
Kenar boşlukları veya dolgu ile belirli içerik öğeleri daha iyi görünebilir ve daha iyi çalışabilir. Bu nedenle, ikisi arasında karar verirken bunu aklınızda bulundurun. Aşağıdaki ek tavsiyeler size yardımcı olabilir:
- Duyarlı bir ızgara oluştururken, bir sütun içindeki alan miktarını artırmak için kenar boşlukları yerine dolgu kullanın.
- Bir web sayfasında daha küçük bir ekranda dikey olarak yığınlanacak birkaç sütun varsa, bu sütunlarda dolgu kullanın.
- Gerektiğinde metin, resim ve kapsayıcı öğeleri arasında bir boşluk oluşturmak için kenar boşluğu özelliklerini kullanın.
- Öğeler arasında eşit boşluk bırakmak için önce alt kenar boşluklarını ekleyin.
- Bir sütunun içine yerleştirildiğinde kapsayıcıya bir alt kenar boşluğu eklenmelidir. İçerik daha küçük ekranlarda dikey olarak istiflendiğinde daha fazla alan eklenecektir.
- Düğme stilini etkileyen dolgu yerine, düğmelerin etrafında boşluk oluşturmak için kenar boşluklarını kullanın.
- Etkileşimli öğelere sahip olduğunuzda çevresinde boşluk oluşturmak için kenar boşluklarını kullanın.
CSS Nedir ve Neden Kullanılır?
Basamaklı Stil Sayfası, bir web sitesinin stilini tanımlamak için HTML ile birlikte çalışan bir programlama dilidir. Bir web tarayıcısına, belirli bir web sitesinin nasıl görüntüleneceği konusunda CSS tarafından talimat verilebilir. Mümkün olmadığından yeni sayfa öğeleri eklemek için değil, HTML öğelerine stil vermek için kullanılır.
HTML ve CSS Arasındaki Fark Nedir?
Bildiğimiz ve sevdiğimiz web sayfaları, HTML ve CSS kombinasyonu kullanılarak oluşturuldu. Bu farklı dillerin hizmet ettiği çeşitli amaçları anlamak çok önemlidir çünkü öyledirler.
Metin, bağlantılar, resimler ve videolar gibi web sayfası içerikleri HTML (Hypertext Markup Language) tarafından belirlenir. Bir sayfadaki "şeyler" bir HTML dosyasında listelenir, ancak bu "şeylerin" bir tarayıcıda nasıl göründüğü belirtilmez. Buna karşılık, artık bildiğimiz gibi CSS, bu öğelerin nasıl stillendirildiğini yönetir. CSS, HTML içeriğinin kullanıcılara tasarımcıların amaçladığı gibi görüntülenmesini sağlar.
HTML, bir Programlama dili belgelere açıklama eklemek için kullanılır, statik web siteleri oluşturmak için kullanılır. Öte yandan, CSS, HTML gibi bir biçimlendirme dilinde çeşitli dosyaların ve sayfa öğelerinin görsel kimliğini ve genel tasarımını tanımlamak için kullanılan bir stil sayfası dilidir.
Yeni Başlayanlar İçin CSS Nedir?
Çoğu durumda, stil dili standartları olarak CSS ve HTML (web sayfalarının içeriğini tanımlamak için kullanılan dil) birlikte kullanılır. CSS Basamaklı Stil Sayfaları anlamına gelir. Stil kuralları, gerçek CSS belgesi hakkında "stil sayfaları" olarak adlandırılan "basamaklı" olarak bilinen bir işlemle sayfa öğelerine uygulanır.
Üç CSS Türü Nedir?
Satır içi, dahili ve harici CSS, üç farklı CSS türüdür.
CSS Önemli mi?
İçeriği tasarımdan ayıran HTML, kullanıcıların web sayfalarının nasıl sunulduğunu ve düzenlendiğini kolayca kontrol etmelerini sağlayan çok yararlı bir araçtır. CSS yazı tiplerini, metni, renkleri, arka planları, kenar boşluklarını ve düzeni düzenler.
CSS Öğrenmek Neden Zor?
CSS'deki yüksek düzeydeki tekniklik, onu anlaşılması en basit dil olmaktan çıkarır. Web uygulamaları için geliştirilmiş CSS için tam teşekküllü programlama ortamı, bir kullanıcı arabirimi gereksinimi nedeniyle karmaşıklığı artırır. CSS zorludur çünkü özellikleri sıklıkla beklenmedik şekillerde etkileşime girer. Çünkü bunu yaptığınızda, asla basitçe bunlardan birini ayarlamazsınız, açıklaması bu. Aslında hiç değiştirmediğiniz varsayılan ayarlar da dahil olmak üzere bir düzine başka faktör, bu tek faktörle birleşir, ondan seker ve onunla çelişir.
CSS'yi Kendi Başınıza Öğrenebilir misiniz?
Öğrenilmesi en basit diller CSS'dir. Temel kuralları ve sözdizimi basit olduğu için (HTML'ye zaten aşina iseniz) sadece bir günlük eğitimden sonra web sayfalarını tasarlamaya başlayabilirsiniz. Daha karmaşık özelliklerini öğrenmek daha uzun sürse de, bir kez öğrendiğinizde aynı yönergeler geçerli olmaya devam eder. Ortalama bir öğrencinin CSS (ve HTML - pratikte eşanlamlı oldukları için) hakkında çalışma bilgisi geliştirmesi yaklaşık yedi ila sekiz ay sürmelidir. İlk yılın sonunda özgüveniniz artmış olacak.
Sonuç
Bir web sitesinin ön yüzü üzerinde çalışırken, internetteki hemen hemen her web sitesinde bulunacağından, CSS araç kutunuzda bulunması gereken harika bir araçtır. Web geliştirme öğreticiler boldur ve dil ve nasıl çalıştığı hakkında daha fazla bilgi edinmenize yardımcı olabilirler. Dolgu ve kenar boşluğu, web öğelerine CSS'de daha fazla alan sağlar, ancak farklı etkileri vardır. Dolgu, bir öğenin içeriği ile kenarlığı arasındaki alandır.
Ancak kenar boşluğu, öğenin en dıştaki alanını kaplar. Yeni başlayanlar, bir web sitesi tasarlarken hangi mülkün kullanılacağına karar vermekte zorlanabilirler. Ama etrafta dolaşıp bir şeyler denedikçe, onlarla daha rahat olacaksınız.
İlgili Makaleler
- WEB TASARIM KURSLARI: 2023 En İyi Web Tasarım Kursları ve Sertifikaları
- DUYARLI WEB TASARIMI: Ne Anlama Geliyor ve Nasıl Kullanmalısınız?
- WEB GELİŞTİRİCİSİ: Görevler, Beceriler, Maaş, Kurslar ve Yazılım
- WEB SİTESİ EDİTÖRÜ: Bilmeniz Gereken Her Şey
Referanslar
