top 30 popular css interview questions
Yanıtlarla En Popüler CSS Mülakat Sorularının Listesi:
CSS Hemen hemen tüm temel ve ileri CSS kategorilerini kapsayan sorular örneklerle açıklanmıştır.
CSS, Web geliştirmenin en temel özelliklerinden biridir. Web sayfalarının görünümünü tanımlayabileceğimiz bir dildir.
Bu nedenle, CSS'nin tüm temel ve gelişmiş bölümlerinin kapsanması önemlidir. İyi bir web geliştiricisi olmak ve web geliştirici röportajını başarıyla kırmak için CSS öğrenmeniz gerekiyor.
Sık Sorulan CSS Mülakat Soruları
Aşağıda, kolay anlamanız için en sık sorulan CSS mülakat sorularının ve basit terimlerle cevaplarının listesi verilmiştir.
Hadi başlayalım!!
S # 1) CSS nedir?
Cevap: CSS, bir HTML web sayfasının stilini özetler. Bir HTML web sayfasının davranışını belirleyebileceğimiz bir dildir. HTML içeriğinin ekranda nasıl gösterileceğini açıklar.
CSS, birkaç HTML web sayfasının düzenini kontrol eder. CSS, Basamaklı Stil Sayfası olarak adlandırılır.
S # 2) CSS'nin mevcut sürümünde kullanılan tüm modülleri adlandırın.
Cevap: CSS'de aşağıda belirtildiği gibi birkaç modül vardır:
- Seçiciler
- Kutu Modeli
- Arka Planlar ve Kenarlıklar
- Metin Efektleri
- 2D / 3D Dönüşümler
- Animasyonlar
- Çoklu Sütun Düzeni
- Kullanıcı arayüzü.
S # 3) CSS2 ve CSS3 arasında ayrım yapın.
Cevap: CSS2 ve CSS3 arasındaki farklar aşağıdaki gibidir:
- CSS3, modül adı verilen iki farklı bölüme ayrılmıştır. Oysa BB2'de her şey, içindeki tüm bilgilerle birlikte tek bir belgeye girer.
- CSS3 modülleri hemen hemen her tarayıcıda desteklenir ve diğer taraftan CSS ve CSS2 modülleri her tarayıcıda desteklenmez.
- CSS3'te, Border-radius veya box-shadow, flexbox gibi birçok grafikle ilgili özelliğin tanıtıldığını göreceğiz.
- CSS3'te, bir kullanıcı, arka plan görüntüsü, arka plan konumu ve arka plan tekrar stilleri gibi özellikleri kullanarak bir web sayfasındaki birden çok arka plan görüntüsünü hassaslaştırabilir.
S # 4) Farklı CSS türlerinden alıntı yapın.
Cevap: Aşağıda belirtildiği gibi üç tür CSS vardır:
- Harici: Bunlar ayrı dosyalar halinde yazılmıştır.
- İç: Bunlar, web sayfası kodu belgesinin üst kısmında belirtilmiştir.
- Çizgide: Bunlar metnin hemen yanında yazılır.
S # 5) Harici stil sayfası neden kullanışlıdır?
Cevap: Dış stil sayfası, tüm stil kodlarını tek bir dosyaya yazdığımız için çok kullanışlıdır ve yalnızca bu harici stil sayfası dosyasının bağlantısına başvurarak her yerde kullanılabilir.
Dolayısıyla, bu harici dosyada herhangi bir değişiklik yaparsak, değişiklikler web sayfasında da gözlemlenebilir. Böylelikle çok kullanışlı olduğunu ve daha büyük dosyalar üzerinde çalışırken işinizi kolaylaştırdığını söyleyebiliriz.
S # 6) Gömülü bir stil sayfasının kullanımları nelerdir ?
Cevap: Gömülü stil sayfası bize stilleri bir HTML belgesinde tek bir yerde tanımlama ayrıcalığı verir.
Bir web sayfasının birden çok etiket türünde kullanmak için gömülü bir stil sayfası kullanarak birden çok sınıf oluşturabiliriz ve ayrıca bilgileri içe aktarmak için fazladan indirme gerekmez.
Misal:
p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } a:hover { color: LimeGreen; text-decoration: none; } Embedded style sheet gives us the privilege to define styles at one place in a HTML document. We can generate multiple classes using embedded style sheet to use on multiple tag types a web page and also there is no extra downloading required importing the information.
S # 7) CSS seçici nasıl kullanılır?
Cevap: CSS seçiciyi kullanarak, stil vermek istediğimiz içeriği seçebiliriz, böylece stil sayfası ile HTML dosyaları arasında bir köprü olduğunu söyleyebiliriz.
CSS seçici için sözdizimi, kimliklerinde, sınıflarında, türlerinde vb. Oluşturulan HTML öğelerini 'seçmektir'.
S # 8) Ara doldurma kavramını açıklayın.
Cevap: Ara doldurma, ikinci görüntü olarak gelişen ilk görüntünün görünümünü elde etmek için iki görüntü arasında ara kareler oluşturduğumuz işlemdir.
Esas olarak animasyon oluşturmak için kullanılır.
S # 9) CSS resim komut dosyalarını tanımlayın.
Cevap: CSS görüntü komut dosyaları, tek bir görüntünün içine yerleştirilmiş bir görüntü grubudur. Birden çok görüntüyü tek bir web sayfasına yansıtırken sunucuya yükleme süresini ve istek sayısını azaltır.
S # 10) Duyarlı web tasarımı terimini açıklayın.
Cevap: Ekranın boyutu, web sayfasının farklı cihazlarda taşınabilirliği vb. Gibi çeşitli bileşenlere dayanan kullanıcı faaliyetlerine ve koşullarına göre bir web sayfası tasarlayıp geliştirdiğimiz bir yöntemdir. Kullanılarak yapılır. farklı esnek düzenler ve ızgaralar.
S # 11) CSS sayaçları nedir?
Cevap: CSS sayaçları, denetçinin değişkenin kaç kez kullanıldığını izlediği CSS kuralları ile artırılabilen değişkenlerdir.
S # 12) CSS özgüllüğü nedir?
Cevap: CSS özgüllüğü, bir öğe için hangi stil bildiriminin kullanılması gerektiğine karar veren bir puan veya derecedir. (*) bu evrensel seçici düşük özgüllüğe sahipken, kimlik seçiciler yüksek özgüllüğe sahiptir.
CSS'de, seçicinin özgüllük düzeyini yetkilendiren dört kategori vardır.
- Satır içi stil
- Kimlikler
- Sınıflar, Nitelikler ve sözde sınıflar.
- Öğeler ve sözde öğeler.
S # 13) Özgüllüğü nasıl hesaplayabiliriz?
Cevap: Özgünlüğü hesaplamak için 0 ile başlayacağız, sonra her bir kimlik için 1000 eklemeliyiz ve özniteliklere, sınıflara veya sözde sınıflara her öğe adı veya sözde öğe ile 10 eklemeliyiz ve daha sonra bunlara 1 eklemeliyiz. .
Misal:
h2 #content h2 heading
S # 14) CSS kullanarak nasıl yuvarlak bir köşe oluşturabiliriz?
Cevap: “Border-radius” özelliğini kullanarak yuvarlatılmış bir köşe yapabiliriz. Bu özelliği herhangi bir öğeye uygulayabiliriz.
Misal:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
S # 15) Bir HTML öğesine nasıl kenarlık resimleri ekleyeceksiniz?
Cevap: CSS “border-image” özelliğini kullanarak görüntüyü bir elemanın yanında border-image olarak kullanılacak şekilde ayarlayabiliriz.
Misal:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }S # 16) CSS'de degradeler nedir?
Cevap: İki veya ikiden fazla belirtilen renk arasında yumuşak bir dönüşüm görüntülemenizi sağlayan bir CSS özelliğidir.
CSS'de bulunan iki tür degradeler vardır. Onlar:
- Doğrusal Gradyan
- Radyal Gradyan
S # 17) CSS flexbox nedir?
Cevap: CSS'nin herhangi bir float veya konumlandırma özelliğini kullanmadan esnek, duyarlı bir mizanpaj yapısı tasarlamanıza olanak tanır. CSS flexbox'ı kullanmak için başlangıçta bir flex container tanımlamanız gerekir.
Misal:
.flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; } 1 2 3 Example of flex box.
S # 18) Flexbox'ın tüm özelliklerini yazın.
Cevap: HTML web sayfasında kullanılan flexbox'ın birkaç özelliği vardır.
Onlar:
- esnek yön
- esnek sarma
- esnek akış
- haklı içerik
- hizalama öğeleri
- hizalama içeriği
S # 19) Tüm web sayfasına dikey olarak yayılan bir bölümde görüntü dikey olarak nasıl hizalanır?
Cevap: Bu sözdizimi verticle-align: middle öğesi kullanılarak yapılabilir ve hatta iki metin yayılımını başka bir yayılma alanıyla birleştirebiliriz ve bundan sonra, verticle-align: middle in content #icon kullanmalıyız.
S # 20) Dolgu ve kenar boşluğu arasındaki fark nedir?
Cevap: CSS'de kenar boşluğu, elemanların etrafında boşluk oluşturabileceğimiz özelliktir. Dış tanımlı sınırlara bile alan yaratabiliriz.
CSS'de aşağıdaki gibi margin özelliğimiz var:
- kenar boşluğu
- sağ kenar boşluğu
- kenar boşluğu
- Kenar boşluğu sol
Margin özelliği, aşağıda gösterildiği gibi bazı tanımlanmış değerlere sahiptir.
- Oto - Bu özellik tarayıcısını kullanmak marjı hesaplar.
- Uzunluk - Kenar boşluğu değerlerini px, pt, cm vb. Olarak ayarlar.
- % - Öğenin% genişliğini ayarlar.
- Devral - Bu özellik ile margin özelliğini ana elemandan devralabiliriz.
CSS'de dolgu, bir öğenin içeriğinin yanı sıra bilinen herhangi bir kenarlığın içinde boşluk oluşturmamızı sağlayan özelliktir.
CSS dolgusu da şu özelliklere sahiptir:
- Üst dolgu
- Sağ dolgu
- Alt dolgu
- Sol dolgu
Doldurmada negatif değerlere izin verilmez.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }S # 21) Kutu Modelinin CSS'de kullanımı nedir?
Cevap: CSS'de kutu modeli, tüm HTML öğelerini birbirine bağlayan bir kutudur ve kenar boşlukları, sınır, dolgu ve gerçek içerik gibi özellikleri içerir.
Bir kutu modeli kullanarak, elemanların her tarafına sınırları ekleme yetkisini elde edeceğiz ve elemanlar arasındaki boşluğu da tanımlayabiliriz.
S # 22) Web sayfasına nasıl simge ekleyebiliriz?
Cevap: Font-awesome gibi bir simge kitaplığı kullanarak HTML web sayfasına simgeler ekleyebiliriz.
Verilen simge sınıfının adını herhangi bir satır içi HTML öğesine eklemeliyiz. ( veya). Simge kitaplıklarındaki simgeler, CSS ile özelleştirilebilen ölçeklenebilir vektörlerdir.
S # 23) CSS sözde sınıfı nedir?
Cevap: Bir HTML öğesinin özel bir durumunu tanımlamak için kullanılan bir sınıftır.
Bu sınıf, bir kullanıcı onu gözetlediğinde bir öğenin stilini belirleyerek kullanılabilir ve ayrıca odağı aldığında bir HTML öğesine stil verebilir.
selector:pseudo-class { property:value; }S # 24) CSS'deki sözde öğeler kavramını açıklayın.
Cevap: Bir elemanın verilen kısımlarını biçimlendirmek için kullanılan bir CSS özelliğidir.
Örneğin ,bir HTML öğesinin ilk harfini veya satırını biçimlendirebiliriz.
selector::pseudo-element { property:value; }S # 25) CSS opaklığı nedir?
Cevap: Bir öğenin şeffaflığını detaylandıran özelliktir.
Bu özellik sayesinde 0.0-1.0 arası değerleri alabilen görüntüyü şeffaflaştırabiliriz. Değer daha düşükse, görüntü daha şeffaftır. Tarayıcının IE8 ve önceki sürümleri 0-100 arası değerleri alabilir.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}S # 26) CSS'de kullanılan tüm konum durumlarını yazın.
Cevap: CSS'de, aşağıda belirtildiği gibi dört konum durumu vardır:
- Statik (varsayılan)
- Akraba
- Sabit
- Mutlak
S # 27) CSS'de gezinme çubukları nedir?
Cevap: Gezinme çubuklarını kullanarak sıradan bir HTML sayfasını kullanıcıya özel ve daha dinamik bir web sayfasına dönüştürebiliriz. Temel olarak, bir bağlantı listesidir, dolayısıyla
- ve
- öğeler mükemmel bir anlam ifade ediyor.
ul { list-style-type: none; margin: 0; padding: 0; }S # 28) CSS'de göreli ve mutlak arasındaki farklar nelerdir?
Cevap: Göreli ve mutlak arasındaki temel fark, CSS'de aynı etiket için 'göreli' nin kullanılmasıdır ve bu, sol: 10px yazarsak, bu durumda dolgu solda 10px'e kayacağı, mutlak ise non- statik ebeveyn.
Yani, sola 10px yazarsak, sonuç ana elemanın sol kenarından 10px uzakta olacaktır.
S # 29) CSS'de kullanılan 'önemli' açıklamaları tanımlayın.
Cevap: Önemli beyanlar, normal beyandan daha önemli olan beyanname olarak tanımlanır.
Bu bildirimler yürütülürken daha az önem taşıyan bildirimi geçersiz kılar.
Örneğin, Önemli bir bildirimi olan iki kullanıcı varsa, bu durumda bildirimlerden biri başka bir kullanıcının bildirimini geçersiz kılacaktır.
Örneğin:
Gövde {arka plan: # FF00FF! Önemli; renk: mavi}tutulması c ++ için nasıl yapılandırılır
Bu bedende arka planın ağırlığı renkten daha fazladır.
S # 30) Basamaklı sıra içinde kullanılabilecek farklı basamaklama yöntemlerini tanımlayın.
Cevap: Basamaklı düzen, diğer birçok farklı sıralama yöntemine izin veren bir sıralama yöntemidir:
a) Menşe göre sırala: Aşağıdaki gibi tanımlanmış alternatif bir yol sağlayabilecek bazı kurallar vardır:
- Belirli bir sağlayıcının stil sayfasının normal ağırlığı, kullanıcının stil sayfasının artan ağırlığı tarafından geçersiz kılınır.
- Belirli bir kullanıcının stil sayfası kuralları, sağlayıcının stil sayfasının normal genişliği tarafından geçersiz kılınır.
b) Seçicinin özgünlüğüne göre sıralayın: Daha özel seçici, daha özel seçici tarafından geçersiz kılınır.
Örneğin , Bir bağlamsal seçici, daha spesifik olan ID seçiciye kıyasla daha az spesifiktir ve bu bağlamsal seçici ile ID seçici tarafından geçersiz kılınır.
c) Belirtilen sıraya göre sırala: Bu, iki seçici aynı ağırlıkta olduğunda ve geçersiz kılma için görülebilecek olan spesifikasyon dışındaki diğer özellikler senaryoda ortaya çıkar.
Misal:
Satır içi stil için stil özniteliği kullanılırsa, diğer tüm stillerin geçersiz kılınmış olduğu görülecektir.
Ayrıca, bağlantı öğesi harici stil için kullanılıyorsa, içe aktarılan stili geçersiz kılar.
S # 31) Satır içi ve blok eleman arasında ayrım yapın.
Cevap: Satır içi öğesinin genişliği ve yüksekliği ayarlayacak bir öğesi yoktur ve ayrıca satır sonu yoktur.
Misal: em, güçlü vb.
Blok öğesi özellikleri:
- Satır sonu var.
- Genişliği bir kap ayarlayarak tanımlarlar ve ayrıca yüksekliği ayarlamaya izin verirler.
- Satır içi öğede oluşan bir öğe de içerebilir.
Misal:
genişlik ve yükseklik
maksimum genişlik ve maksimum yükseklik
min-genişlik ve min-yükseklik
hi (i = 1-6) - başlık öğesi
p- Paragraf öğesi.S # 32) CSS'de kalıtım kavramı nasıl uygulanır?
Cevap: Kalıtım, alt sınıfın kendi üst sınıfının özelliklerini miras alacağı bir kavramdır. Birçok dilde kullanılan bir kavramdır ve aynı özelliği yeniden tanımlamanın kolay yoludur.
CSS'de üst seviyeden alt seviyeye kadar hiyerarşiyi tanımlamak için kullanılır. Devralınan özellikler, çocuk aynı adı kullanıyorsa, çocukların sınıfı tarafından geçersiz kılınabilir.
Misal:
Gövde {font-size: 15pt;}
Ve alt sınıfta başka bir tanım tanımlanıyor
Gövde {font-size: 15pt;}
H1 {yazı tipi boyutu: 18pt;}Tüm paragraf metni, özellik kullanılarak görüntülenecek ve metni yalnızca font 18 ile gösterecek olan H1 stili dışında gövdede tanımlanacaktır.
S # 33) Kimlik ve sınıf arasında ayrım yapın.
Cevap: Hem ID hem de sınıf HTML'de kullanılmıştır ve değeri CSS'den atar.
Lütfen aşağıdaki farklılıkları bulun:
- Kimlik, belirli bir öğeye benzersiz bir şekilde bir ad atayan bir öğe türüdür, oysa sınıf, tüm blok için kullanılabilecek belirli bir özellik kümesine sahip bir öğeye sahiptir.
- Kimlik bir öğe olarak kullanılabilir çünkü onu benzersiz bir şekilde tanımlayabilir, oysa sınıf aynı zamanda öğeleri engellemek için tanımlanır ve kullanıldığı her yerde çok fazla etiket uygular.
- ID, özelliklerini belirli bir öğeye kullanma kısıtlaması sağlarken, sınıfta miras belirli bir öğeye veya gruba uygulanır.
Sonuç
Bu röportaj soru ve cevap listesi, daha taze ve deneyim seviyesi için Web geliştirici röportajını kırmanıza yardımcı olacaktır. Bunlar röportajda sık sorulan sorulardır.
Bu makalenin, bir Web geliştiricisi için CSS ile ilgili herhangi bir röportajın çözülmesine ve yüzleşmesine yardımcı olacağını umuyoruz.
Önerilen okuma = >> Web Geliştiricisi Röportaj Soruları ve Cevapları
Hepinize başarılar dileriz !!
Önerilen Kaynaklar