CSS !important Kullanımı
Merhaba Arkadaşlar,
Bu makalede sizlere CSS tanımlamalarında , özellikle de kafamızın karışık olduğu durumlarda iki kere aynı class veya id ‘ ye yapılan tanımlamalarda karışıklık yaşadığımız ” !important ” metodundan bahsedeceğim. Bu küçük kelime bloğunu yazdığımız CSS komutunun sonunda hemen ” ; ” den hemen önce yazarak sayfaya kaç adet css dosyası çağırılırsa çağırılsın her zaman o class veya id ‘ ye important ‘ın belirtildiği css kodunu uygula anlamına gelmektedir. Şimdi bununla ilgili küçük bir uygulama yaparak bu konuyu daha iyi anlayalım.
İlk olarak bir klasör açalım ve içerisine ” index.html ” , ” bir.css ” , ” iki.css ” isimli üç adet sayfa oluşturalım. Uygulamanın iyi anlaşılabilmesi için iki CSS dosyasını da alt alta çağırıyoruz. index.html sayfamızın içerisine bir de ” uyg1 ” class ‘lı div oluşturuyoruz ve kodlarımız şu şekilde bir hal alıyor :
<html>
<head>
<title>BilgiSayaci.Org - !important Kullanımı</title>
<link rel="stylesheet" type="text/css" href="bir.css" />
<link rel="stylesheet" type="text/css" href="iki.css" />
</head>
<body>
<div class="uyg1"></div>
</body>
</html>
Bunu yaptıktan sonra sayfamızı çalıştırdığımızda bembeyaz bir sayfa göreceğiz. Şimdi ilk olarak ” bir.css ” isimli sayfamızı açıyoruz ve div ‘ imizin sayfada görünür halde olması için width , height ve background-color değerlerimizi veriyoruz.
.uyg1{width: 300px; height: 300px; background-color: red}
index sayfamızı şimdi çalıştırdığımızda ise sayfada 300 * 300 boyutlarında kırmızı renkli bir kutu göreceğiz. index sayfamıza ilk olarak bir.css ‘i ve hemen bir alt satırında da iki.css ‘i çağırmıştık. HTML bir sayfanın okuma sıralaması sayfanın en üstünden başlayarak en altına doğru olduğu için bizim iki.css de yazacağımız herhangi bir ” .uyg1 ” kodu direkt olarak bu div ‘e müdahale edecektir. iki.css ‘i açıyoruz ve buna yalnızca div ‘in arka plan rengini değiştirmek için background-color değerini veriyoruz.
.uyg1{background-color: green;}
Gördüğünüz üzere width ve height değerlerini bir.css ‘ ten çeken index sayfamız arkaplan rengini ise iki.css ‘ ten çekmiştir. Bunun nedeni ise daha önce de söylediğim gibi HTML ‘in okuma mantığının en üstten en alta doğru olmasıdır.
Şimdi ise makalenin yazılma sebebi olan ” !important ” ın yazılmasına gelelim. Bunun için bir.css sayfasında yazdığımız background-color kodunun aktif olmasını isteyeceğiz. sayfayı açıyoruz ve kod blogunu şu şekilde değiştirerek kaydediyoruz :
.uyg1{width: 300px; height: 300px; background-color: red !important;}
iki.css içerisindeki kodu kaldırmamamıza rağmen arka plan rengi bir.css ‘ten alınacaktır. Ve böylece işlemimiz de amacına ulaşmış olacaktır.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 24 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar