Basamaklı stil sayfalarını uygulanmadan, form elemanları kullanılan tarayıcıya uygun olarak gösterilecektir. işletim sistemi Varsayılan ayarları. fakat cSS'yi kullanma. Sitenizin tasarımına karşılık gelen formlar oluşturmanıza olanak sağlar.
Karar
Form elemanı stili, diğer HTML öğesi gibi, CSS kullanılarak ayarlanabilir.
İncir. 6.1. Firefoxi Tarayıcısında Varsayılan Form Görünümü
Tarafından resimde İncir. 6.1 Form, Firefox tarayıcısı tarafından Windows XP altında kullanılan varsayılan ayarlara uygun olarak dekore edilmiştir. Türleri, farklı tarayıcılarda farklı platformlar altında görüntülenirken değişecektir. Aşağıda tipik bir formdur:
"http://www.w3.org/1999/xhtml"lang \u003d "en-bize"\u003e
Bu formun görünümü, öğeler için stilleri yazarak değiştirilebilir:
form (sınır: 1px noktalı #aaaaaa; dolgu: 0 .5em;) Form DIV (kenar boşluğu: 1EM;) Giriş (Renk: # 00008B; arka plan rengi: # add8E6; sınır: 1px katı # 00008b;) Seç Genişlik: 100px; Renk: # 00008B; Arka Plan-Renk: # ADD8E6; Sınır: 1px Katı # 00008B;) Textarea (Genişlik: 200px; Yükseklik: 40px; Renk: # 00008B; Arka Plan-Renk: # ADD8E6; Sınır: 1px # 00008b;)
Şimdi form Şekil 2'de gibi görünüyor. 6.2.
Tartışma
Muhtemelen tahmin ederken, HTML öğeleri için stillerin ayar noktası form, Giriş, Textarea ve Select Stil masa dosyasının ilişkili olduğu sayfada bulunan her birinin her birine uygulanacaktır. Alan alanlarının şeklini değiştirmek için, birçok farklı özelliği kullanabiliriz. CSS'yi kullanma Alanın hemen hemen tüm yönlerini yönetebilirsiniz.
:
Konsey
Formlar ve arka plan rengi. Sitenizin ziyaretçilerinin bir kısmı renkleri kötü bir şekilde ayırt edebilir ve bir parça bir ses tarayıcısı kullanabilir. Bu nedenle, renkler asla önemli işlevler gerçekleştirmemelidir - örneğin, "sarı alanların doldurulması gerekmektedir" talimatları tamamlanmalıdır.
Özellik değerini daha ayrıntılı olarak düşünün:
Laboratuvar İşi Numarası 4
Basamaklı stil tabloları (CSS)
işin amacı
Basamaklı tablolar kavramını karşılar stilleri CSS., ayrıca kullanımlarının pratik becerilerini edinmenin yanı sıra.
Teorik bilgi.
Internet Explorer. Size stilinizi sunar, varsayılan olarak adlandırılır. Bu stil beyaz saf bir arka plan, siyah yazı tipi rengi içerir, tüm referansların altı çizili ve mavi, vb. Bütün bunları sevmezseniz? Zaten çeşitli nitelikleri doğrudan nasıl değiştireceğinizi biliyorsunuz. Aynı nesneler aynı olsa bile, sınıfları nasıl uygulanacağını zaten biliyorsunuzdur. Ancak başka bir olasılık var. Belgenin tüm stilini belirtmek için, sözde hiyerarşik stil tabloları, farklı nesnelerin bir dizi özellik olan (Cascade Stil Tabakaları - CSS) kullanılır. Sınıflara benzedikleri bir şey, ancak sınıfın belgenin içinde yaratılması ve uygulanabileceği ve belki de değilse, daha sonra CSS, eğer bağlanırsa, kurulumlar belgedeki tüm nesneleri etkiler.
CSS'ye giriş.
CSS, sınıflara çok benzer, sadece zaten bilinen nesne için stilin içinde tarif edildiği farkla. Görsel bir örnek için, bulunduğunuz odayı şimdi (ofis, salon ...) inceleyin. Elbette, birçok farklı öğeyi göreceksiniz (masa, sandalye, pencere, bilgisayar). Bu nesne nesnelerinin her biri özellikleri vardır ve bu eşyaların bir listesini ve özelliklerini yapmanız gerekir. Belki aşağıdaki gibi bir şey olacaktır:
tablo:
kahverengi renk
Malzeme - Ahşap
bir bilgisayar:
Beyaz renk
Malzeme - Plastik
Amaç - iş için
Tabii ki, başka bir yoldan gidebilirsiniz, ancak yalnızca CSS, nesneler, nesnelerin çıkıntısı yerine ve özellikleri biraz farklı olduğunda tam olarak derleniyor. Örneğin, burada böyle bir belgenin alındığı:
vücut.
{
Arka plan rengi: RGB (255,255,153);
Renk: RGB (51,51,153);
}
H3.
{
Renk: RGB (255,0,0);
Yazı Tipi-Ailesi: Arial, Helvetica;
}
Burada, vücut ve H3 öğesinin tarzının ne olacağını sorulur. Varsayılan olarak belirtilmemiş olan seçenekler.
CSS oluşturmak, özel bir çaba gerektirmez ve bu amaçlar için ve mevcut olmasına rağmen basit bir dizüstü bilgisayarda gerçekleştirilebilir. Özel Programlarİşi kolaylaştırmak ve açıkça gelecekteki belgenin bu stili kullanmanın nasıl görüneceğini açıkça göstermektedir. Diskinizde veya tanıdıklardaki bu tür programları arayın.
2.2.Belgede stil tablosu oluşturma
CSS'yi bağlamanın iki yolu vardır. Birincisi, bir sınıf olarak belgenin başında stil elemanına ayarlamaktır. Bu böyle yapılır (Örnek 1):
Bu belge
stil tablolarını kullanır
Bu örnekte, ekranda iki nesneden oluşan iki satır göreceksiniz: H3 ve H3. Görünüm, Internet Explorer'ın varsayılan tarzının döndüğü. Ancak, nesnede tarzıyla ilgili herhangi bir talimat yapmadık. Dolayısıyla, H3 ve H3 nesnelerinin ne kadar bağdaştırdığınız önemli değil, stilleri her zaman stilist tablosunda belirttiğiniz gibi olacaktır.
2. 3. tarzı masa ayrı dosya
Oluşturduğunuz stilden hoşlanıyorsanız ve tüm belgelerinizde kullanmak istiyorsanız. Veya belgeniz bir setten oluşur Html sayfaları Ve hepsi aynı stile sahip olmalı, belgenin başlangıcında her seferinde stil tablosunun dizelerini girmeniz gerekmez.
CSS'yi web sayfasına bağlamanın ikinci yolu cSS oluşturma. Ayrı bir dosyada ve sayfanın kendisi bu dosyayı ifade eder. Ardından, sayfada yalnızca bir satır ve hala stil olarak yazabilirsiniz. harici dosya. Böyle bir şekilde yararları hakkında konuşmak gerekli olmadığını düşünüyorum.
Öyleyse, ilk önce yukarıdaki kuralların ardından bir tablo oluşturursunuz. Sonra öğeye eklersiniz
Dize stili sayfasını aşağıdakine benzer şekilde etkinleştirmek için:Bağlantı demek ki geçerli sayfa Eleman, REL ve tipi, elemanı stilize bir tablo olarak tanımlamak için bağlanır, ancak HREF dosyanın CSS'nizde olduğu adresi içerir.
Dinamik değişiklik CSS.
Eklentinin adını stilist bir tabloyla, stilin kendisini değiştirerek dinamik olarak değiştirebilirsiniz. İşte bir fonksiyon, bu, arama yaparken, herhangi bir stil zaten uygulanırsa, kaldırır ve yenisini birbirine bağlar.
fonksiyon değişimi_style ()
(eğer (belgesel.stylesheets.href! \u003d null)
document.stylesheets.href \u003d "newstyle.css";
}
Stil tablosu HTML sayfasının içinde tanımlanmışsa, AddRule işlevini (nesne, stil) kullanarak yeni tanımlar ekleyebilirsiniz. Nesnenin bir nesne olduğu yer ve sırasıyla, stilistik kurulumlar. İşte düğmeye tıkladıktan sonra stilize bir tablo değiştirildikten sonra (Örnek 2):
Bu belge stil sayfalarını kullanır
Bu paragraftır. Tarzını değiştirmek için düğmeye tıklayın
Sayfayı böyle bir kodla inceledikten sonra, kurulumun tarz sayfasına ekleyerek stil değişikliklerinin nasıl gerçekleştiğini göreceksiniz.
Sınıflar
Sınıf, metnin sayfada nasıl görünmesi gerektiğini yüklemenin başka bir yoludur. Temel olarak, renk, yazı tipi kalınlığı, boyutu vb. Gibi bir dizi stil tanımlarsınız, ancak belirli bir etiket atamayın. Sınıf böyle görünüyor:
Bu örnek üç sınıf oluşturur: düzenli, süperbu, telif hakkı. Aşağıda, bu sınıfların metin gezinme katmanında nasıl uygulanacağı gösterilmiştir.
Superbig sınıfı
Sınıf Düzenli
Sınıf telif hakkı
Ayrıca sınıf etiketini özel olarak bağlayabilirsiniz. Örneğin:
P.
{
Yazı tipi boyutu: 16pt;
Yazı Tipi Ağırlığı: Kalın;
}
P.Small
(Yazı tipi boyutu: 9pt;
Marj-sol: 5EM;
Marj-sağ: 5EM;
}
Aşağıda sınıfın nasıl uygulanacağı gösterilmiştir