CSS paneli, animasyonlu öğeler için keyframes kuralları dahil, seçtiğiniz herhangi bir öğeye ait tanımlı stil kurallarını gösterir. CSS panelinin Stiller sekmesini kullanarak öğe sınıfının stillerini düzenleyebilir, satır içi stil ekleyebilir ve yeni stil kuralları oluşturabilirsiniz.
Bir öğenin CSS özelliklerinin listesini görmek için Hesaplanan sekmesine geçin.
Dokümanınızda yeni bir stil kuralı oluşturmak için:
- Yeni stil kuralını uygulamak istediğiniz bir öğeyi seçin.
- CSS panelinin alt kısmındaki Kural ekle
düğmesini tıklayın.
- Google Web Designer, düzenleyebileceğiniz bir benzersiz sınıf seçici oluşturur. Bir sınıf seçici girerseniz Web Designer söz konusu sınıfı seçili öğeye ekler.
- Yeni kuralın açıklaması için parantezlerin arasında Özellik ekle'yi tıklayıp bir CSS özelliği ve değer girin (ör.,
width: 209px;). - Kural tam olarak tanımlanana kadar yeni özellik/değer çiftleri eklemeye devam edin.
düğmesini tıklayın.Bir öğeye satır içi stil eklemek için:
- Bir öğe seçin.
- CSS panelinde satır içi stil blokundaki Özellik ekle düğmesini tıklayın.
- Öğenin stilini değiştirmek için özellik/değer çiftleri ekleyin.
Bir stili değiştirmek için:
- Dokümanınızdaki bir öğeyi seçin. CSS panelinde öğeyle ilişkilendirilen stil kuralları gösterilir.
- Değiştirmek için bir özelliği veya değeri tıklayın. Bir özelliği silmek için özellik adını temizleyin.
Bir özelliği açma/kapatma
- Özellik adının yanındaki onay kutusunu tıklayın. Onay kutusunun işareti kaldırıldığında, tarayıcı önizlemesi ve yayınlanan dosyalar söz konusu özelliği içermez.
- Özelliği yeniden etkinleştirmek için onay kutusunu tekrar tıklayın.
Animasyon için animasyon karesi kuralları
CSS panelinde, CSS ile yapılmış animasyonlu öğeler için animasyon karesi kuraları (@keyframes anahtar sözcüğüyle) gösterilir.
Bir öğe için yeni animasyon karesi kuralı oluşturmak için:
- Animasyon içermeyen bir öğe seçin.
- CSS panelinin alt kısmındaki Animasyon karesi kuralı ekle
düğmesini tıklayın. Google Web Designer, başlangıç ve bitiş animasyon karelerini ekler (%0 ve %100); animasyon süresini varsayılan olarak 1 saniye olacak şekilde ayarlar.
- Bir animasyon karesine animasyonlu özellik eklemek için Özellik ekle'yi tıklayın ve CSS özelliği ile değeri girin.
- Kural tam olarak tanımlanana kadar yeni özellik/değer çiftleri eklemeye devam edin.
Animasyon karesi eklemek için:
- Animasyonlu bir öğe seçin.
- CSS panelinde, mevcut animasyon kareleri arasında Animasyon karesi ekle'yi tıklayın.
- Web Designer, eklenen animasyon karesini baştaki ve sondaki animasyon karelerinin arasında ortaya gelecek şekilde ayarlar. Animasyon karesinin zamanlamasını değiştirmek için yüzdeyi tıklayın.
- Animasyonlu özellikler, başındaki ve sonundaki animasyon karelerinden ara değer olarak elde edilir. Yeni animasyon karesi için özellikler ekleyin, düzenleyin veya silin.
Mevcut animasyonun bitiş noktasından sonraya animasyon karesi ekleyemezsiniz. Bunun yerine zaman çizelgesini kullanın.