Css Temelleri ve Douglas JavaScript Robotu - mankenler

Bu projede, Douglas adlı bir HTML robotuna stil eklediniz. Douglas bu sabah robot fabrikasından teslim alındı. JavaScript becerileri olağanüstü; fazla bakıma (her seferinde oynamak için yeni bir değişkene) ihtiyaç duymaz; ve o iyi espriler anlatır!

Tek sorun, bakışlarının biraz sıkıcı olması! Elbette, güzel bir mavi gözü var ve onun "I <3>

Başlamak için web tarayıcınızı açın ve genel gösterge panelinde oturum açın. Daha sonra aşağıdaki adımları izleyin:

1. Bölüm 6: Robot Stil - başlıklı keman bulun ve açmak için başlığı başlatın.

   Ayrıca doğrudan Robot uygulamasına da gidebilirsiniz.

   HTML panelinde HTML ve CSS panelinde bazı CSS bulunan bir ekran görüyorsunuz.

2. Kendi JSFiddle hesabınızdaki kemanın bir kopyasını yapmak için üst menüdeki Çatal'ı tıklayın.

Artık Douglas'a biraz stil vermeye hazırsınız!

JavaScript Robot CSS bölmesindeki ilk üç satığa göz atın.

body {font-family: Arial;}

Bu üç satır bir CSS kuralı oluşturmaktadır. Bir CSS kuralı iki ana bileşenden oluşur:

• Seçici: Seçici, CSS kuralı için hangi elemanın veya öğelerin geçerli olduğunu gösterir. Bu örnekte seçici cesettir.

• Bildirim bloğu: Bildirim bloğu, seçilen öğelerin veya öğelerin nasıl stilleneceğini gösteren bir veya daha fazla CSS bildirimi içeriyor. Bu örnekte, yalnızca bir bildiriminiz var: font-family: Arial;.

CSS seçicileri

Seçici CSS kuralının {önce gelen {} bölümündendir. CSS seçicileri, bir stilin hangi HTML öğelerine uygulanması gerektiğini web tarayıcısına bildirir.

Bir stili uygulamak için bir öğe seçtiğinizde, aynı stili seçilen öğenin içindeki her öğeye de uygular.

CSS seçicileri öğeleri seçmek için çeşitli yöntemler sunar. JavaScript Robotu Douglas'ı ile çalışırken bunlardan üçüne bakın:

• Eleman seçiciler: JavaScript robot CSS panelindeki ilk iki kurala bir göz atın:

  gövde {font-family: Arial;} p {font-size: 1em;}
  

  Bunlar hem öğe seçicilerine örnektir. Eleman seçicileri öğenin adını kullanarak HTML öğelerini seçerler. Bir öğe seçici kullanmak için, seçmek istediğiniz öğenin adını yazın. Bu gibi durumlarda, gövde öğesini (kullanan ve etiketler) ve p öğesini (

  ve

  etiketleri kullanır) seçiyorsunuz.

• Sınıf seçiciler: Şu anda JavaScript Robot CSS bölmesindeki üçüncü CSS kuralı:

  . göz {arka plan rengi: mavi; genişlik:% 20; yükseklik:% 20; border-radius: 50%;}
  

  Sınıf seçici bir nokta ile başlar (.) ve sınıf adında bir HTML özniteliğinin değeri gelir. Bu durumda, class = "eye" olan tüm öğeleri seçiyorsunuz. HTML bölmesine bakarsanız, class = "eye" olan iki öğe olduğunu görebilirsiniz. Bunlar Douglas'ın iki gözünü yapmak için kullanılır.

  Sınıf seçiciler, aynı stili birden fazla öğeye uygulamanız gerektiğinde idealdir. Bu durumda, robotun iki gözü vardır ve iki gözün ortak noktaları vardır (örneğin mavi ve aynı boyuttadır).

• Kimlik seçiciler: Kimlik seçicileri bir karma simge (#) ile başlar ve öğenin ID özniteliğinin değerine dayalı öğeler seçerler. Örneğin, Douglas'ın sol gözü ve sağ gözü ayrı kimlik özelliklerine sahiptir:

  #righteye {position: absolute; sol:% 20; üst:% 20;} #lefteye {position: mutlak; sol:% 60; üst:% 20;}
  

  Kimlik seçiciler, bir HTML belgesinde tek bir öğe seçmeniz gerektiğinde kullanışlıdır.

  Her kimlik özelliği bir belgede benzersiz olmalıdır.

  HTML bölmesine bakarsanız, Douglas'ın sol ve sağ gözlerinin, hem sınıf niteliklerine sahip olmasının yanı sıra hem de benzersiz kimlik özelliklerine sahip olduğunu görebilirsiniz. Bu nitelikler, gözleri Douglas'ın yüzüne ayrı ayrı yerleştirmek için eklendi.

CSS bildirimleri

CSS bildirimleri, CSS seçicilerinden sonra bildirim bloklarına girerler. Bildirimler iki bölümden oluşur:

• Özellik: Bir bildirim mülkiyet kısmı, neyin değiştirilmesi gerektiğini bildirir. Örneğin, bir öğenin rengini, genişliğini veya konumunu değiştirebilirsiniz. Mülkün arkasında iki nokta üst üste (:) bulunur.

• Değer: Değer, mülkün nasıl değiştirileceğini belirtir.

Her bildirim, noktalı virgül (;) ile bitmelidir. Bir bildirim bloğu içinde, işi tamamlamanız için gereken sayıda deklarasyona sahip olabilirsiniz.

Örneğin göz sınıfına sahip elemanlar için bildirim bloğu, dört bildirim içerir:

. göz {arka plan rengi: mavi; genişlik:% 20; yükseklik:% 20; sınır yarıçapı: 50%;}