1. Elemanın hem satır içi hem de blok seviyesinde davranmasını sağlamak için hangi css özelliği kullanılır.

display: inline;

2. Bir elemanın sayfadaki diğer elemanların konumlarına göre başlangıç noktasını değiştirmek için hangi css özelliği kullanılır.

position: relative;

3. z-index özelliğinin görevini yazınız.

Üst üste gelen elemanlardan hangisinin en üstte görüneceğini sağlar.

4. Renk kodlarında # işaretinden sonra yazılan ilk iki basamak hangi rengi temsil eder.

Kırmızı

5. RGB fonksiyonunda her parametreler en az ve en çok hangi değeri alır.

En az 0, en çok 255 değerini alır.

6. Kutu modelini oluşturan dört özellik nedir? Yazınız.

Padding, margin, border, content (içerik)

7. CSS ekleme yöntemleri nelerdir?

Satır içi, sayfa içi, sayfa dışı

8. Çocuk seçici ile torun seçici arasındaki fark nedir?

Çocuk seçici, belirtilen elemanın bir alt seviyesinde bulunan tüm elemanlar arasından eşleşenleri seçer. Torun seçici ise belirtilen elemanın kapsadığı tüm elemanlar arasından eşleşenleri seçer.

9. CSS ölçü birimlerinden göreceli olanlar hangileridir?

% (Yüzde), em, vw (Ekran Genişliği), vh (Ekran Yüksekliği)

10. Bootstrap kenarlık sınıfı kullanarak bir resme üç farklı kenarlık ekleyen uygulamayı yapınız.

<img src="resim1.jpg" class="rounded">
<img src="resim2.jpg" class="rounded-circle">
<img src="resim3.jpg" class="img-thumbnail">

11. id değeri "okul" olan bir elementin genişliğini 800, yüksekliğini 600, arkaplan rengini yeşil yapan css kodlarını yazınız.

#okul {
   width: 800px;
   height: 600px;
   background-color: #eee;
     }

12. Tarayıcı ekranında bir elementin yatayda ortalanması için hangi css özelliği kullanılır.

margin: auto;

13. Elementin içinde yazılı metnin yatayda ve düşeyde ortalanması için hangi css özellikleri kullanılır.

text-align: center;
line-height: 50px;

14. <div style="width:50px; height:50px"></div>

Yukarıda yer alan kutunun chrome tarayıcı ekranında daire şeklinde görünmesini sağlamak için hangi css özelliği kullanılır.

border-radius: 50%;

15. Elemanlara css özelliklerini vermek için kullanılan temel seçicileri yazınız.

Etiket seçici, id seçici, class seçici

16. <div class="ogr1" style="width:50px; height:50px">

Yukarıda verilen elementin tarayıcı ekranında sağ altte yer alması için gerekli css özelliklerini yazınız.

.ogr1 {
    right: 0;
    bottom: 0;
    position: absolute;
     }

17. Etiket içinde yer alan metne ait metnin rengini mavi, stilini kalın ve italik, büyüklüğünü 20 yapan css özelliklerini yazınız.

color: blue;
font-weight: bold;
font-style: italic;
font-size: 20px;

18. Tarayıcıda kaydırma çubuğu aşağıya doğru inmesine rağmen etiketin üstten 20, soldan 50 konumda sabit bir şekilde kalmasını sağlayan css özelliklerini yazınız.

left: 50px;
top: 20px;
positiın: fixed;

19. Javascript kodlarını sayfa içinde yazmak için hamgi blok kullanılır.

<script>  </script>

20. innerHTML() deyimi ne işe yarar.

Seçili elemanlara yeni içerik veya HTML kodu eklemek için kullanılır.

21. Paralelkenarın alanını ve çevresini bulan uygulamayı yapınız.

function Hesapla() {
    // Değişkenleri tanımla
    var a, b, h;
    var alan, cevre;

    // Değerleri al
    a = parseFloat(document.getElementById("a").value);
    b = parseFloat(document.getElementById("b").value);
    h = parseFloat(document.getElementById("h").value);

    // İşlemleri yap
    alan = a * h;
    cevre = 2 * (a + b);

    // Sonucu görüntüle
    document.getElementById("sonuc").innerHTML = 
"Paralelkenarın<br /> Alanı    = " + alan + "<br />
Çevresi = " + cevre;
}

22. Girilen doğum tarihine göre "Merhaba ............, şimdi ........ yaşındasınız" mesajını görüntüleyen uygulamayı yapınız.

function YasHesabi() {
    // Değişkenleri tanımla
    var ad;
    var dt;
    var tarih, simdi;
    var yas;

    // Değerleri al
    ad = document.getElementById("ad").value;
    dt = document.getElementById("dt").value;
    tarih = new Date(dt);
    simdi = new Date();

    // İşlemleri yap
    yas = simdi.getFullYear() - tarih.getFullYear();

    // Sonucu görüntüle
    document.getElementById("sonuc").innerHTML = 
"Merhaha " + ad + ", şimdi " + yas + " yaşındasınız.";
}

23. Tarayıcı ekranının arkaplan rengini button yardımıyla kırmızı, mavi ya da yeşil yapan uygulamayı yapınız.

<h1>Arka Plan Rengini Değiştirin</h1>

<button onclick="renk('red')">Kırmızı</button>
<button onclick="renk('blue')">Mavi</button>
<button onclick="renk('green')">Yeşil</button>

<script>
    function renk(color) {
        document.body.style.backgroundColor = color;
    }
</script>

24. Radiobutton yardımıyla listelenen mevsimlerden biri seçildiğinde o mevsime ait resmi gösteren uygulamayı yapınız.

function Goster(mevsim) {
    // Değişkenleri tanımla
    var img, imageSrc;

    // Değerleri gir
    img = document.getElementById('resim');

    // İşlemi yap
    imageSrc = '';
    if (mevsim === 1) {
        imageSrc = 'images/resim1.jpg';
    } else if (mevsim === 2) {
        imageSrc = 'images/resim2.jpg';
    } else if (mevsim === 3) {
        imageSrc = 'images/resim3.jpg';
    } else if (mevsim === 4) {
        imageSrc = 'images/resim4.jpg';
    }

    // Sonucu görüntüle
    img.src = imageSrc;
    img.style.display = 'block';
}

25. Ekranda gösterilen resmi onay kutusunu kullanarak gösterip gizleyen uygulamayı yapınız.

function Goster() {
    var onay = document.getElementById('img');
    var resim = document.getElementById('resim');

    if (onay.checked) {
        resim.style.display = 'block';
    } else {
        resim.style.display = 'none';
    }
}