Programlama ne bir aynadır:başlangıçta bir kelime vardı ve yansıyan cevap değildi. Ve çok hızlı bir şekilde "değiştirmek" zorunda kaldım: önce ayna, sonra kelime ... Şu anda basamaklı stil sayfaları iyi, ama geliştiricinin bilinci neden bu kadar uzun süre onlara gitti? CSS, bilgisayar programları çağının başlangıcından beri aynı zaman dizisidir, ancak yalnızca farklı bir bakış açısıyla. Diziler birleştirici hale geldiğinde bile, bu bir devrim yaratmadı.
Site sayfası,belirli bir stil sınıfı veya stil tanımlayıcısı atanabilir. Birincisi bir kez tanımlanabilir ve gerektiği kadar herhangi bir şeye atanabilir, ikincisi belirli bir öğeye aittir.
Stilleri tanımlamak için genel mantık
Gelenek gereği, stil bir CSS dosyasına yerleştirilir, ancakstyle özniteliğinde belirli bir öğeye atanabilir. Stil, JavaScript kullanılarak dinamik olarak oluşturulabilir. Örneğin, CSS kullanarak yazı tipinin rengini, boyutunu, yazı tipini, altındaki arka planı vb. Nasıl tanımlayacağınız gerçekten önemli değildir. Üslubun tanımının yeri, genellikle iki fikir bağlamında önemlidir: ne kadar geç tanımlanırsa, o kadar önceliklidir ve eğer bir öğe üzerinde tanımlanırsa, o zaman tamamen önemlidir! İkincisi, olduğu gibi yazılır, önceliği açıkça tanımlar.
Örneğin belirli bir yazı tipi rengi için bir stil uygulayın.renk değiştirdi, her yerde ve herhangi bir şekilde yapabilirsiniz. Soru, toplu haldeki tüm stillerin sökülmesi sırasında tarayıcının buna nasıl tepki vereceğidir. Buna ne kadar CPU harcayacak?
İdeal olarak, yazı tipi rengi yalnızca bir kez belirtilmelidir - bu bir klasiktir. Birkaç tane daha basit bir açıklama ve daha sonra daha fazlasını düşünmek için ... tabii ki yapabilirsiniz. Modaya uygun ama pratik değil.
Genel mantık örneği
Çok basit: CSS kullanarak yalnızca üç öğe için renk tanımlayarak en az üç uzun vadeli sorun elde edebilirsiniz:
# Ele1, # Ele2, # Ele3 {
POZİSYON: mutlak;
sol: 20 piksel;
üst: 14px;
kırmızı renk;
}
# Ele2, # Ele3 {
sol: 90px; // yatay CSS koordinatını değiştir
Sarı renk; // CSS yazı tipi rengini değiştir
}
# Ele3 {
üst: 114 piksel; // dikey CSS koordinatını değiştir
yeşil renk; // CSS yazı tipi rengini tekrar değiştir
arka plan rengi: açık gri; // CSS metin vurgu rengi değişti, ancak bu # Ele1 ve # Ele2'de mevcut değil; pozisyon da değiştirildi, ancak zaten # Ele2'de değişti ve buradaki ile aynı değil
}
Şimdi, tüm bu üç unsurunbir yerde tanımlanır ve site sahibinin renk temsillerinde bir değişiklik olması durumunda, geliştiricinin yalnızca rengi değil, aynı zamanda sol ve üst kuralları da hatırlaması gerekir ve rengini değiştirmeyi unutmamalısınız. metin seçimi.
Tüm geliştiriciler CSS gereksinimine saygı göstermez: tanımlayıcının stili yalnızca bir öğe içindir ve sınıfın stili birçok etiket içindir, dahası, ikincisi etiketlerde sıfatlar olarak belirtilebilir:
- CSS'de yazı tipi rengini ayarlayın - groundColor sınıfının stili;
- yazı tipi boyutunu belirtin - sınıf boyutu15;
- konumu ayarla - sınıf PlaceUp.
Doğal olarak, tanımlayıcıların kullanımı,özellikle bir biçimlendirme öğesine ait olduklarında, çeşitli kombinasyonlarla boyanmış bir düzine stil sınıfı, yüzden fazla sayfa öğesi daha iyidir. Ancak her şeyin kendi nesnel mantığı vardır.
Geliştiricinin sadece doğru bir şekilde düşünmesi gerekir: HTML'nin yazı tipi rengi CSS, katı bir şekilde tanımlamayı teklif etse bile, o zaman açıklamaların genel yapısının esnekliği onun işidir.
Ortak Mantığı Uygulamanın Beklenen Sonucu
Modern tarayıcılar ile rahatçok sayıda stil dosyası ve boyutları. Ancak, özellikle CSS aracılığıyla, tüm sayfanın rengini tasarlarken, her zaman makul yeterliliği düşünmelisiniz. Tüm stil kurallarının kullanımı "ucuz" değildir. Basit ve kısa bir gösterim: * {renk: beyaz;} - kesinlikle güzel, ancak istisnasız sayfanın tüm öğeleri için geçerlidir.
CSS'nin sahip olduğu tüm kurallar arasında en önemlisi:
- style bir sınıftır ve adı "." ile başlar;
- stil bir tanımlayıcıdır ve adı "#" karakteriyle başlar;
- diğer durumlarda, bu etiketin adı veya özel bir şeydir
Tanımlama stilleri (kalıtım, örtüşen özellikler, öncelikler, konum, düzen vb.) açısından geri kalan fikirler, gerektiği gibi anlamlı ve katı bir şekilde uygulanmalıdır.
Tarayıcı her zaman anlamadıklarını atlayacaktır.açıklama, bu yüzden özel sürprizler olmayacak. Bir şey doğru yerde değilse veya CSS'de yazı tipi rengini ayarlamak mümkün değilse, bir stil hatası vardır.
Beklenmeyen fırsatlar
* {Left: 124px gibi stiller; } veya
ol ol, ol ul, ul ul, ul ol {margin-bottom: 0; }
a img {border: 0; }
Yeni başlayan biri olmak bile zor olsa dageliştiricinin CSS kurallarını olduğu gibi kullanmasını sağlar. Her zaman herhangi bir sitenin geliştirilmesinde, tamamen basit bir CSS sözdizimi bile öngörülemeyen sorunlar ortaya çıkarır. Bununla birlikte, çabalarınızı sözdiziminin doğru kullanımına odaklıyorsanız, ancak buna JavaScript işlevselliği uygularsanız, beklenmedik yeni özellikler, her öğe için tanımlayıcıların monoton bir şekilde oluşturulmasını önlemenize veya stil sınıflarının kullanım çeşitliliğini takip etmenize olanak tanır.
CSS, yalnızca bir sayfaya bir bağlantı etiketi aracılığıyla bağlanan veya bir stil etiketi aracılığıyla buraya eklenen bir stil dosyası değildir. Aynı zamanda anında bir stil yaratmak veya mevcut bir stili değiştirmek için bir fırsattır.
CSS uygulanarak yazı tipi rengi programlı olarak yapılabilir. Boyut ve konumun yanı sıra dolgu. Site, CSS, HTML, PHP'de bilgi uygulama veya JavaScript efektlerini gösterme hedefi değildir.
Bir web kaynağı öncelikle bilgidir,bir şekilde sunuluyor. Bu nedenle, CSS, en iyi dinamik olarak, sayfa hala sunucudayken nasıl biçimlendirebileceğiniz prizmasıyla görüntülenebilir (PHP, o sırada geliştirici değil, ziyaretçinin siteye geldiği anda onunla meşgul. siteyi geliştirirken), belirli bir metin için gerekli stil dosyası, gerçek içerik için veya belirli bir ziyaretçi tarafından görüntülendiğinde sayfa işlemi sırasında anında bir sınıf veya tanımlayıcı stil oluşturun.
Statik dinamik
Her zaman karmaşık JavaScript kodu yazmamalısınız,içeriği dinamik hale getirmek ve tasarımı içeriğe uygun hale getirmek. Bazen mevcut fırsatları doğru kullanmak yeterlidir. Özellikle, başlangıçta statik bir kural olarak CSS kullanarak yazı tipi rengini tanımlayarak, bu kuralı gizleyebilir (gizli) ve diğerini (görünür) oluşturabilirsiniz.
Burada dinamikler bir algoritma gerektirmez:
// web sitesi oturum açma düğmesini vurgulayın
function scfHoş Geldiniz () {
document.getElementById ("scDocxNamePiP") style.visibility = "visible";
}
// sitedeki giriş butonunu gizle
function scfWelcomeOut () {
document.getElementById ("scDocxNamePiP") style.visibility = "gizli";
}
CSS kendi dinamiklerini sunar:sürünen çizgiler, elemanların şeffaflığı, çeşitli kaplamalar seçenekleri, tezahürler, renk solması. CSS'de yazı tipi rengi, stil kuralı sağlanmayacak şekilde bile yapılabilir.
Dinamik içerik görüntüleme
Dogmalar olmasaydı, muhtemelen olmazdı.ilerleme. Savaşacak hiçbir şey yoktu. Hypertext birçok dogmayı dünyaya getirdi. Onlara dikkat etme ve pragmatik ve pratik bir tarzda web siteleri geliştirmeye başlama zamanı.
Başlangıçta bir sayfa (P) vardır, içeririçerik (K), tüm sayfa etiketleri bir stil sayfasında (S) açıklanmıştır. Veritabanından K'yi seçerek sunucuda PHP veya Perl aracılığıyla bir P sayfası oluşturmak yeni değildir. Mevcut stil sayfası S otomatik olarak uygulanacaktır. Bununla birlikte, K değiştirilebilir ve çoğu durumda böyle bir değişiklik, diğer stillere, yani S + 'ya ihtiyaç duyulacaktır.
Örneğin müşteri şunları söyledi:"Kahvaltı için" tarzında haber makaleleri, "Las Vegas" tarzında gecenin koşuşturmacasının açıklamaları ve "ModernTechno" da bilimsel ve teknolojik ilerleme üzerine makaleler tasarlanırsa, Moskova'nın yaşamını anlatan bir web sitesi daha iyi görünecektir. "stil." Ancak bu üç seçenek için S yaparsanız, müşterinin "Haberler", "Tatiller", "İş", "CSS / HTML" ve "Hanım Not" bonusu.
Başka bir yaklaşım daha pratiktir.Makalenin kategorisi ne olursa olsun, içinde her zaman belirli bir renkte renklendirilebilen içerik vardır. Bu noktada oldukça mantıklı bir fikir ortaya çıkıyor: belirli bir K almış olmak, sunucuda yeterli bir S oluşturmak ve tarayıcı P'yi istediğinde, uygun tasarımda gerekli içeriği alacaktır.
JavaScript'ten stil dinamikleri
Çok etkili olsa da minimal çözüm şudur:doğrudan müşterinin tarayıcısında şekillendirme yapın. İlk olarak, sunucuyu kaldırır - bunun için sayfa köprü metni ve stil dosyaları oluşturmak için zaman harcamaya gerek kalmaz.
İkincisi, içeride doğal bir zaman kaybıtarayıcı, sayfanın meşgul olduğu ve aktif olarak ziyaretçiyle bir diyalog sürdürdüğü etkisini yaratacaktır: her halükarda, içeriği toplu olarak algılamaz, bu nedenle bilgilerin tutarlı ve düşünceli görüntülenmesini sevecektir.
Üçüncüsü, geliştiricinin, ziyaretçiye, kendisi için uygun olan tarzda içerik üretme mekanizması sağlamasını sağlar. Bu başka kimsede yok.
Bu fikri uygulamak için uygulamak gerekirSayfa yüklendikten hemen sonra ve çalışma sürecinde eleman stilleri oluşturma mekanizması. Modern bir site, şu veya bu şekilde AJAX'tır. Sayfa ağacının oluşturulması sırasında doğrudan stil oluşumunu gerçekleştirmek zor değildir. İçerik, tasarımıyla uyumlu olduğu için basit, erişilebilir ve etkilidir.
Bu, verilerin sunumunu işlenmesinden ayırmaya yönelik modern eğilimle çelişmez ve gösterim için ayrılan veriler üzerinde gerçekleştirilir.
Aktif bir bileşen olarak CSS
Köprü metni çok şey getirdi, ama sadece birazbiraz doğal bilgi başarıyla resmileştirildi, yüksek kaliteli HTML, XML, CSS belgeleri oluşturmada araçlar ve deneyim ortaya çıktı. Yeni bilgi hacimlerini resmileştirmek ve daha önce yapılanları değiştirmek sorun değildir.
CSS ile ilgili olarak, bu süreç halihazırda aktif hale getirilmektedir.tamamen farklı bir bağlam. Anında öğelerin öğeleri ve stillerini oluşturmanıza olanak tanıyan yerleşik JavaScript araçları böyle bir olasılık anlamına gelmiyordu ve özellikle PHP'nin yaratıcılarının yalnızca HTML sayfalarının oluşumuyla meşgul olduklarına inanıyorlardı.
Hem birinci hem de ikinci yapmanıza izin verirprogramlama stilleri. Bu, bilgi teknolojisi alanında yeni bir yön. Stiller HTML veya XML'den çok daha resmidir, kurallar çok basittir. Tarz, doğası ne olursa olsun her zaman bilgide mevcuttur.
Programcılar her zaman çok daha gayri resmi alanlarda veri tasarımıyla meşgul olurlar, ancak CSS konusu çok basit bir iştir, ancak bir şekilde geliştirme sürecinin görüş alanına girmedi.
Programlama alanındaki dogmalar hakkında
Bir buzdağı gibi, dogma uzun süre saban edemezbilgi alanları. Biriken deneyim sadece HTML ve CSS standartlarına, onlarla çalışma araçlarına, geliştiricilerin bilgisine odaklanmamalıydı.
Basit bir görev, CSS ile bir renk oluşturmaktırfont - mükemmel çözümümü buldum. Kurallar, sözdizimi, mantık ve uygunluk inkar edilemez. Ancak gerçekten çok fazla yazı tipine ihtiyacınız olmasa bile, pratik yapmak için çok fazla renge ihtiyacınız yoktur ve genel olarak, gerçekliğin sanallaştırılması amacıyla, HTML ve CSS'nin birikmiş tüm "gücü" ihtiyaç duyulduğunda, durumsal bilginin yeniden üretilmeye başladığı bir an gelir ve içerikten stillerin doğal eğitimi için deneyim ve araçlar ortaya çıkar.
Bunun nasıl olacağı tam olarak belli olmayabilir, ancak sürecin halihazırda devam etmekte olduğu gerçeği ortada.
