Sevgili okuyucular, bunlar CSS Interview Questions konusu ile ilgili görüşmeniz sırasında karşılaşabileceğiniz soruların niteliği hakkında sizi bilgilendirmek için özel olarak tasarlanmıştır. CSS Language. Tecrübelerime göre, iyi mülakatçılar mülakatınız sırasında belirli bir soru sormayı pek planlamazlar, normalde sorular konuyla ilgili bazı temel kavramlarla başlar ve daha sonra daha fazla tartışmaya ve yanıtladığınız şeye dayanarak devam eder:
Sevgiyle CSS olarak anılan Basamaklı Stil Sayfaları, web sayfalarını sunum yapılabilir hale getirme sürecini basitleştirmeyi amaçlayan basit bir tasarım dilidir.
CSS kullanmanın avantajları şunlardır -
CSS saves time- CSS'yi bir kez yazabilir ve ardından aynı sayfayı birden çok HTML sayfasında yeniden kullanabilirsiniz. Her HTML öğesi için bir stil tanımlayabilir ve bunu istediğiniz kadar Web sayfasına uygulayabilirsiniz.
Pages load faster- CSS kullanıyorsanız, her seferinde HTML etiketi nitelikleri yazmanıza gerek yoktur. Sadece bir etiketin CSS kuralını yazın ve bunu o etiketin tüm oluşumlarına uygulayın. Yani daha az kod, daha hızlı indirme süreleri anlamına gelir.
Easy maintenance - Genel bir değişiklik yapmak için stili değiştirmeniz yeterlidir; tüm web sayfalarındaki tüm öğeler otomatik olarak güncellenecektir.
Superior styles to HTML - CSS, HTML'den çok daha geniş bir öznitelik dizisine sahiptir, bu nedenle HTML özniteliklerine kıyasla HTML sayfanıza çok daha iyi bir görünüm verebilirsiniz.
Multiple Device Compatibility- Stil sayfaları, içeriğin birden fazla cihaz türü için optimize edilmesini sağlar. Aynı HTML belgesini kullanarak, bir web sitesinin farklı sürümleri, PDA'lar ve cep telefonları gibi elde taşınan cihazlar veya baskı için sunulabilir.
Global web standards- Artık HTML özellikleri kullanımdan kaldırılıyor ve CSS kullanılması öneriliyor. Bu nedenle, gelecekteki tarayıcılarla uyumlu hale getirmek için tüm HTML sayfalarında CSS kullanmaya başlamak iyi bir fikirdir.
Offline Browsing - CSS, çevrimdışı bir yakalama yardımıyla web uygulamalarını yerel olarak depolayabilir.Bunu kullanarak çevrimdışı web sitelerini görüntüleyebiliriz. Önbellek ayrıca web sitesinin daha hızlı yüklenmesini ve daha iyi bir genel performans sağlar.
Platform Independence - Script tutarlı platform bağımsızlığı sunar ve en son tarayıcıları da destekleyebilir.
Bir stil kuralı üç bölümden oluşur -
Selector- Bir seçici, bir stilin uygulanacağı bir HTML etiketidir. Bu, <h1> veya <table> gibi herhangi bir etiket olabilir.
Property- Özellik, HTML etiketinin bir özniteliğidir. Basitçe söylemek gerekirse, tüm HTML nitelikleri CSS özelliklerine dönüştürülür. Renk, kenarlık vb. Olabilirler.
Value- Değerler mülklere atanır. Örneğin, renk özelliği kırmızı veya # F1F1F1 vb. Değerlere sahip olabilir.
Tür seçici, bir öğe türünün adıyla oldukça basit bir şekilde eşleşir. Tüm 1. seviye başlıklara renk vermek için -
h1 {
color: #36CFFF;
}Belirli bir türdeki öğeleri seçmek yerine, evrensel seçici, herhangi bir öğe türünün adıyla oldukça basit bir şekilde eşleşir -
* {
color: #000000;
}Bu kural, belgemizdeki her öğenin içeriğini siyah hale getirir.
Belirli bir öğeye, yalnızca belirli bir öğenin içindeyken stil kuralı uygulamak istediğinizi varsayalım. Aşağıdaki örnekte verildiği gibi, stil kuralı <em> öğesi için yalnızca <ul> etiketinin içindeyse geçerli olacaktır.
ul em {
color: #000000;
}Stil kurallarını öğelerin sınıf niteliğine göre tanımlayabilirsiniz. Bu sınıfa sahip tüm öğeler, tanımlanan kurala göre biçimlendirilecektir.
.black {
color: #000000;
}Bu kural, belgemizde class özniteliği siyaha ayarlanmış her öğe için içeriği siyah olarak işler.
Biraz daha özel hale getirebilirsiniz. Örneğin -
h1.black {
color: #000000;
}Bu kural, yalnızca class özniteliği siyaha ayarlanmış <h1> öğeleri için içeriği siyah olarak oluşturur.
Stil kurallarını öğelerin id niteliğine göre tanımlayabilirsiniz. Bu kimliğe sahip tüm öğeler, tanımlanan kurala göre biçimlendirilecektir.
#black {
color: #000000;
}Bu kural, belgemizde id özniteliği siyah olarak ayarlanmış her öğe için içeriği siyah olarak işler.
ou biraz daha özel hale getirebilirsiniz. Örneğin -
h1#black {
color: #000000;
}Bu kural, içeriği yalnızca id özniteliği siyah olarak ayarlanmış <h1> öğeler için siyah olarak oluşturur.
Aşağıdaki örneği düşünün -
body > p {
color: #000000;
}Bu kural, <body> öğesinin doğrudan alt öğesi iseler tüm paragrafları siyah hale getirecektir. <div> veya <td> gibi diğer öğelerin içine yerleştirilen diğer paragraflar bu kuralı etkilemeyecektir.
Ayrıca, belirli niteliklere sahip HTML öğelerine de stil uygulayabilirsiniz. Aşağıdaki stil kuralı, bir metin değerine sahip bir type özniteliğine sahip tüm girdi öğeleriyle eşleşecektir -
input[type = "text"] {
color: #000000;
}Bu yöntemin avantajı, <input type = "submit" /> öğesinin etkilenmemesi ve rengin yalnızca istenen metin alanlarına uygulanmasıdır.
p [lang]: lang niteliğine sahip tüm paragraf öğelerini seçer.
p [lang = "fr"] - lang niteliği tam olarak "fr" değerine sahip tüm paragraf öğelerini seçer.
p [lang ~ = "fr"] - lang niteliği "fr" kelimesini içeren tüm paragraf öğelerini seçer.
p [lang | = "en"] - lang özelliği tam olarak "en" olan veya "en-" ile başlayan değerler içeren tüm paragraf öğelerini seçer.
Stilleri HTML belgenizle ilişkilendirmenin dört yolu vardır. En yaygın kullanılan yöntemler satır içi CSS ve Harici CSS'dir.
Embedded CSS - <style> Öğesi: CSS kurallarınızı <style> öğesini kullanarak bir HTML belgesine koyabilirsiniz.
Inline CSS - Stil Özelliği: Stil kurallarını tanımlamak için herhangi bir HTML öğesinin stil niteliğini kullanabilirsiniz.
External CSS - <link> Öğesi: <link> öğesi, HTML belgenize harici bir stil sayfası dosyası eklemek için kullanılabilir.
Imported CSS - @import Kuralı: @import, <link> öğesine benzer bir şekilde harici bir stil sayfasını içe aktarmak için kullanılır.
Herhangi bir Stil Sayfası Kuralını geçersiz kılma kuralı aşağıdadır -
Herhangi bir satır içi stil sayfası en yüksek önceliğe sahiptir. Bu nedenle, <style> ... </style> etiketlerinde tanımlanan herhangi bir kuralı veya herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılar.
<style> ... </style> etiketlerinde tanımlanan herhangi bir kural, herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılar.
Harici stil sayfası dosyasında tanımlanan herhangi bir kural en düşük önceliğe sahiptir ve bu dosyada tanımlanan kurallar yalnızca yukarıdaki iki kural geçerli olmadığında uygulanacaktır.
% - Bir ölçümü, genellikle bir çevreleyen öğe olan başka bir değere göre yüzde olarak tanımlar.
p {font-size: 16pt; line-height: 125%;}cm - Santimetre cinsinden bir ölçümü tanımlar.
div {margin-bottom: 2cm;}em - Em boşluklarındaki bir yazı tipinin yüksekliğinin göreli ölçümü. Bir em birimi belirli bir yazı tipinin boyutuna eşit olduğundan, 12pt'ye bir yazı tipi atarsanız, her "em" birimi 12pt olacaktır; bu nedenle, 2em 24pt olacaktır.
p {letter-spacing: 7em;}ex - Bu değer, bir fontun x yüksekliğine göre bir ölçüm tanımlar. X yüksekliği, fontun küçük harfinin yüksekliğine göre belirlenir.
p {font-size: 24pt; line-height: 3ex;}in - İnç cinsinden bir ölçüm tanımlar.
p {word-spacing: .15in;}mm - Milimetre cinsinden bir ölçümü tanımlar.
p {word-spacing: 15mm;}pc - Picas cinsinden bir ölçüm tanımlar. Bir pika 12 puana eşittir; bu nedenle inç başına 6 pika vardır.
p {font-size: 20pc;}pt - Nokta cinsinden bir ölçüm tanımlar. Bir nokta, bir inçin 1 / 72'si olarak tanımlanır.
body {font-size: 18pt;}px - Ekran pikselleri cinsinden bir ölçüm tanımlar.
p {padding: 25px;}vh - görüntü alanı yüksekliğinin% 1'i.
h2 { font-size: 3.0vh; }vw - görüntü alanı genişliğinin% 1'i.
h1 { font-size: 5.9vw; }vmin 1vw veya 1vh, hangisi daha küçükse.
p { font-size: 2vmin;}Renk değerlerinizi çeşitli formatlarda belirtebilirsiniz. Aşağıdaki tablo tüm olası formatları listeler -
| Biçim | Sözdizimi | Misal |
|---|---|---|
| Hex Kodu | #RRGGBB | p {renk: # FF0000;} |
| Kısa Hex Kodu | #RGB | p {renk: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {renk: rgb (% 50,% 50,% 50);} |
| RGB Mutlak | rgb (rrr, ggg, bbb) | p {renk: rgb (0,0,255);} |
| anahtar kelime | aqua, siyah vb. | p {renk: turkuaz;} |
En güvenli ve bilgisayardan bağımsız renkler olduğu varsayılan 216 renk listesi var. Bu renkler, 000000 hexa kodu ile FFFFFF arasında değişir. Bu renkler güvenlidir çünkü tüm bilgisayarların 256 renk paleti çalıştırırken renkleri doğru şekilde görüntülemesini sağlarlar.
Background-color özelliği, bir öğenin arka plan rengini ayarlamak için kullanılır.
Background-image özelliği, bir elemanın arka plan resmini ayarlamak için kullanılır.
Arka plan tekrar özelliği, bir görüntünün arka planda tekrarlanmasını kontrol etmek için kullanılır.
Background-position özelliği, bir görüntünün arka plandaki konumunu kontrol etmek için kullanılır.
Background-attachment özelliği, bir görüntünün arka planda kaydırılmasını kontrol etmek için kullanılır.
Arka plan özelliği, bir dizi başka arka plan özelliğini belirtmek için bir kısaltma olarak kullanılır.
Font-family özelliği, bir fontun yüzünü değiştirmek için kullanılır.
Font-style özelliği, bir fontu italik veya eğik yapmak için kullanılır.
Font-variant özelliği, küçük büyük harf efekti oluşturmak için kullanılır.
Font-weight özelliği, bir fontun ne kadar koyu veya açık göründüğünü artırmak veya azaltmak için kullanılır.
Font-size özelliği, bir fontun boyutunu artırmak veya azaltmak için kullanılır.
Font özelliği, bir dizi başka font özelliğini belirtmek için kısaltma olarak kullanılır.
Color özelliği, bir metnin rengini ayarlamak için kullanılır.
Direction özelliği, metin yönünü ayarlamak için kullanılır.
Harf aralığı özelliği, bir sözcüğü oluşturan harfler arasına boşluk eklemek veya çıkarmak için kullanılır.
Sözcük aralığı özelliği, bir cümlenin sözcükleri arasına boşluk eklemek veya çıkarmak için kullanılır.
Text-indent özelliği, bir paragrafın metnini girintilemek için kullanılır.
Metin hizalama özelliği, bir belgenin metnini hizalamak için kullanılır.
Metin süsleme özelliği, metnin altını çizmek, üstünü çizmek ve üstünü çizmek için kullanılır.
Metin dönüştürme özelliği, metni büyük harf yapmak veya metni büyük veya küçük harflere dönüştürmek için kullanılır.
Beyaz boşluk özelliği, metnin akışını ve biçimlendirmesini kontrol etmek için kullanılır.
Text-shadow özelliği, metin gölgesini bir metnin etrafına ayarlamak için kullanılır.
Border özelliği, bir görüntü kenarlığının genişliğini ayarlamak için kullanılır.
Height özelliği, bir görüntünün yüksekliğini ayarlamak için kullanılır.
Width özelliği, bir görüntünün genişliğini ayarlamak için kullanılır.
-Moz-opacity özelliği, bir görüntünün opaklığını ayarlamak için kullanılır.
: Bağlantısı, ziyaret edilmemiş köprüleri belirtir.
: Ziyaret edildi, ziyaret edilen köprüleri belirtir.
: Hover, şu anda kullanıcının fare işaretçisinin üzerine geldiği bir öğeyi belirtir.
: Active, kullanıcının o anda tıkladığı bir öğeyi belirtir.
Sınır daraltma, tarayıcının birbirine dokunan bitişik kenarlıkların görünümünü kontrol edip etmeyeceğini veya her hücrenin stilini koruyup korumayacağını belirtir.
Kenarlık aralığı, tablo hücreleri arasında görünmesi gereken genişliği belirtir.
Altyazının yanındaki altyazılar <caption> öğesinde sunulur. Varsayılan olarak, bunlar belgedeki tablonun üzerinde oluşturulur. Tablo başlığının yerleşimini kontrol etmek için başlık tarafı özelliğini kullanırsınız.
Boş hücreler, bir hücre boşsa kenarlığın gösterilip gösterilmeyeceğini belirtir.
Tablo düzeni, tarayıcıların bir sütunun geri kalanı için karşılaştığı ilk genişlik özelliklerini kullanarak tabloyu oluşturmadan önce tüm tabloyu yüklemek zorunda kalmadan tablonun düzenini hızlandırmasını sağlar.
Kenarlık rengi, bir sınırın rengini belirtir.
Kenarlık stili, bir sınırın düz, kesikli çizgi, çift çizgi veya diğer olası değerlerden biri olup olmayacağını belirtir.
Border-width, bir sınırın genişliğini belirtir.
Kenar boşluğu, bir bildirimde kenar boşluğu özelliklerini ayarlamak için bir steno özelliği belirtir.
Alt kenar boşluğu, bir elemanın alt kenar boşluğunu belirtir.
Üst kenar boşluğu, bir öğenin üst kenar boşluğunu belirtir.
Sol kenar boşluğu, bir öğenin sol kenar boşluğunu belirtir.
Kenar-sağ, bir elemanın sağ kenar boşluğunu belirtir.
Liste stili türü, işaretçinin şeklini veya görünümünü kontrol etmenizi sağlar.
Liste stili konumu, ikinci bir çizgiye saran uzun bir noktanın ilk çizgiyle hizalanması mı yoksa işaretleyicinin başlangıcının altında mı başlaması gerektiğini belirtir.
Liste stili görüntü, bir madde işareti veya numara yerine işaretçi için bir görüntü belirtir.
Liste stili, stil özellikleri için kısa yol görevi görür.
İşaretçi uzaklığı, işaretçi ile listedeki metin arasındaki mesafeyi belirtir.
Alt dolgu, bir elemanın alt dolgusunu belirtir.
Padding-top, bir elemanın üst dolgusunu belirtir.
Sol dolgu, bir öğenin sol dolgusunu belirtir.
Dolgu hakkı, bir öğenin sağ dolgusunu belirtir.
Dolgu, tüm dolgu özellikleri için kısayol görevi görür.
CSS'nin cursor özelliği, kullanıcıya gösterilmesi gereken imleç türünü belirlemenize olanak tanır.
auto - İmlecin şekli, üzerinde bulunduğu bağlam alanına bağlıdır. Örneğin, metnin üzerinde 'ben', bağlantı üzerinde 'el' vb.
artı işareti - Artı işareti veya artı işareti.
varsayılan - Bir ok.
işaretçi - İşaret eden bir el (IE 4'te bu değer eldir).
taşı veya metin - 'I' çubuğu.
bekle - Bir kum saati.
yardım - Yardım düğmeleri üzerinden kullanım için ideal bir soru işareti veya balon.
Evet! url'yi imleç görüntü dosyasının kaynağı olarak ayarlayın.
Anahat genişliği özelliği, anahattın genişliğini ayarlamak için kullanılır.
Anahat stili özelliği, anahat için çizgi stilini ayarlamak için kullanılır.
Dış çizgi rengi özelliği, anahattın rengini ayarlamak için kullanılır.
Anahat özelliği, tüm ana hat özelliklerini tek bir ifadede ayarlamak için kullanılır.
Height özelliği, bir kutunun yüksekliğini ayarlamak için kullanılır.
Width özelliği, bir kutunun genişliğini ayarlamak için kullanılır.
Ayrıca konuyla ilgili yaptığınız geçmiş ödevlerinizi gözden geçirebilir ve onlar hakkında kendinizden emin bir şekilde konuşabileceğinizden emin olabilirsiniz. Eğer daha tazeyseniz, görüşmeci çok karmaşık soruları yanıtlamanızı beklemiyor, bunun yerine temel kavramlarınızı çok güçlü hale getirmelisiniz.
İkincisi, birkaç soruya cevap verememeniz gerçekten önemli değil, ancak ne cevaplarsanız cevap vermiş olmanız önemlidir. Bu yüzden görüşmeniz sırasında kendinizden emin olun. Tutorialspoint olarak, iyi bir mülakatçıya sahip olmanız için en iyi şansları ve gelecekteki çabanız için en iyisini diliyoruz. Şerefe :-)