CSS'i Web Sayfalarına Eklemek | Fatih Hayrioğlu'nun Not Defteri

Trang chủ » Html Den Css çağırma » CSS'i Web Sayfalarına Eklemek | Fatih Hayrioğlu'nun Not Defteri

Có thể bạn quan tâm

1- Kod içinde (In-line)

Direk olarak HTML elementin içine style özelliği kullanılarak uygulamak.

{% highlight html %}

Deneme yazımız{% endhighlight %}

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir.

2- style Elementi kullanılarak

<head> kısmında <style> elementi içinde CSS kodumuzu yazarak uygulamak.

{% highlight html %}

{% endhighlight %}

Birinci yönteme göre avantajı HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.

3- Harici Stil şablonu Kullanımı

Bu metod da CSS kodlarımzı .css uzantılı bir dosyaya kaydederiz. ornek.css

{% highlight css %} p { color: red; }

a { color: blue; } {% endhighlight %}

Daha sonra bu kodu gereken sayfalarımıza uygularız.

{% highlight html %}

{% endhighlight %}

Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenmeyerek bize hız kazandıracaktır.

4- @import ile eklemek

Üçüncü yöntem ile kullanımı benzerdir.

{% highlight html %}

{% endhighlight %}

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenmeyecektir.(Örn: NN4)

@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web tarayıcıları tarafından. Ayrıca css dosyalarımızda @import özelliğini kullanarak devamlı kullandığmız kodları css dosyamıza harici olarak ekleyebilriz böylelikle tekrarlardan kurtulmuş oluruz. (11.10.2006 güncellendi )

@import yöntemi performans sorunları ile tercih edilmemektedir. 19.01.2016 güncellendi

Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metodlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.

Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS'inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfade kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirlmesi gerekmez ve kod yönetimi kolaylaşır.

{% highlight html %}

{% endhighlight %}

Ürünler bölümü için bir css dosyası ekleyelim sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim.

urunler.css

{% highlight css %} @import url(/css/iskelet.css); @import url(/css/fontlar.css); @import url(/css/renkler.css); @import url(/css/urunlereozel.css); {% endhighlight %}

Not: Normal css'de import tercih edilmezken, Sass, Less ve Stylus gibi dinamik CSS yapılarında tercih edilir. Örnek bir kullanım için tıklayınız.

Read more

2025'te Favicon Rehberi: SVG Desteği ile Yeni Dönem

2025'te Favicon Rehberi: SVG Desteği ile Yeni Dönem

Sene olmuş 2025 biz hala favicon ekleme konusunu yazıyoruz. Bu konuyu yazmamın nedeni Apple'ın henüz beta sürümü olan 26 ile birlikte SVG favicon desteğini geliyor oluşu. Bu vesileyle bilgileri tazelemekte fayda var. favicon, web sitelerinin tarayıcının sayfa, sekme ve yerimi kısmında gösterilen küçük simgelerdir. Aslında favori ikon dosyaları

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

Yaşlandıkça böyle ihtiyaçlar doğuyor galiba. Belki ihtiyacı olan olur diye buraya not edeyim. Chrome Dev Tools gibi araçlarda başlangıçtaki görünüm küçük kalabiliyor. Benim için küçük mesela :) Yazı boyutlarını büyütmek için Cmd + +  and  Cmd + - (Windows'ta Cmd yerine Ctrl kullanın). Ancak bu kısayol İngilizce klavye için Türkçe klavyelerde bunu

field-sizing özelliği

field-sizing özelliği

CSS'in yeni özellikleri bazen çığır açan nitelikte (anchor positioning, :has() seçicisi, vb.) olurken bazen yazıma yardımcı kurallar (iç içe yazım, @property) oluyor bazen de genel kullanılan kullanıcı deneyimi arttırıcı özellikleri oluyor. field-size özelliği genel kullanıcı deneyimini arttırıcı bir özellik. field-size özelliği genelde javascript ile çözdüğümüz bir ihtiyacı karşılıyor.

Từ khóa » Html Den Css çağırma