Ücretsiz Web Yöneticisinin Bloguna Hoş Geldiniz! Geçen sefer size nasıl kontrol edeceğinizi anlatmıştım ve bugün web sayfalarını doğrulama konusuna devam etmeyi öneriyorum. Basamaklı Stil Sayfalarına (CSS) göz atın ve HTML belgeleri genel kabul görmüş İnternet standartlarına uyum için stil sayfaları ile.
CSS stili dil, İnternette teknoloji standartları geliştiren ve uygulayan bir kuruluş olan World Wide Web Consortium (W3C) tarafından geliştirilmiştir.
CSS (İngilizce'den. Basamaklı Stil Sayfaları - basamaklı stil sayfaları), bir biçimlendirme dili kullanarak bir belgenin görünümünü tanımlamak için tasarlanmış resmi bir dildir.
Stil kontrolü için çok faydalı hizmet W3C Konsorsiyumu tarafından sunulmaktadır. CSS Doğrulama Hizmetinin ana sayfasına gidelim ve CSS'nin geçerliliğini kontrol edelim.
Geleneksel olarak, blogumu iyi bir örnek olarak kontrol edeceğim. Bağlantıyı takip ediyoruz, şuna benzeyen yeni bir pencere açılıyor:
Burada bizi hoş bir sürpriz bekliyor, her şey Rusça! Ek olarak, mevcut 20'den fazla dil arasından başka bir dil seçme imkanı vardır. Sayfa, bir kontrol seçeneği seçmeyi öneren sekmeler içerir:
- URI ile kontrol edin - sadece sayfa adresini belirtin;
- Yüklenen dosyayı kontrol edin - yerel bir CSS dosyası seçmeniz gerekir;
- Yazılan metni kontrol edin - doğruluğunu kontrol etmek için CSS kodunu girmeniz gerekir.
Ek özellikler, gelişmiş tarama parametreleri belirlemenizi sağlar. İşte her birinin kısa bir özeti:
- Profil - belirli bir platformdaki tüm özellikleri ve uygulama olanaklarını listeler. Varsayılan seçim, en sık kullanılan CSS3 seviye 3 standardını takip eder.
- Uyarılar - raporların ayrıntılarını ayarlama: uyarı göstermeden tüm veya en önemli uyarılar, düzenli rapor. Hizmet iki tür mesaj verebilir: hatalar ve uyarılar. Kontrol edilen CSS tavsiyeye uymuyorsa, bu bir hatadır. Uyarılar, spesifikasyon sorunlarına özgü olmadıkları için hatalardan farklıdır.
- Ortam - stillerin nerede uygulanacağını belirtin, örneğin taşınabilir cihaz, ekran, TV veya yazdırılacak sayfa. Tüm stil ortamlarını test etmeniz önerilir.
- Sağlayıcı uzantıları - varsayılanın bırakılması istenir, yalnızca hataları veya yalnızca uyarıları görüntülemek mümkündür. Tarayıcı satıcıları bazen deneysel CSS özelliklerini uygular, bunları desteklemek için önekler kullanılır: -moz- (Firefox için), -webkit- (Chrome için), -ms- (için Internet Explorer), -o- (Opera için) ve diğerleri.
URL adresini belirtiyorum, yapılandır Ekstra seçenekler kontrol edin ve başlamak için "Kontrol Et" düğmesine tıklayın. Yaşasın! CSS doğrulama sonucu: hata bulunamadı!
Maalesef, bilinmeyen bir satıcı uzantısıyla ilgili uyarılardan kaçınamadık. Sorun değil, CSS doğrulayıcı ücretsiz, güvenilir ve kullanışlı bir yardımcı programdır, ancak diğerleri gibi yazılım kusurları olabilir.
Ana şey, stillerin hata içermemesi ve büyük olasılıkla sağlayıcı uzantılarının spesifikasyona dahil edilmemesi ve uyarılara neden olması, ancak tarayıcının verileri doğru şekilde işlemesidir.
Uyarı listesinin, bilinmeyen özelliğin bulunduğu satır numarasını içerdiğine dikkat edin. Hatalar bulunursa, özelliği ve sorunun açıklamasını içeren bir tablo görürsünüz. Örneğin, böyle bir kontrol sonucu ana sayfa Yandex:
Aşağıda doğru kontrol edilen CSS hakkında bilgiler bulunmaktadır. Kopyalamak ve sitenizde kullanmak için acele etmeyin! Evet, doğru CSS'nin verilen sürümünde, kullanımı uyarılara neden olan hiçbir hata ve özellik yoktur, kod %100 tam kontrolü geçecektir. Ancak etki bu özelliklerin kaldırılmasıyla elde edilir, bu nedenle site görüntüleme sorunları yaşayabilir veya beklentiler gerçeğe uymayabilir.
Bu hizmet W3C sunucusunda barındırılır ve korunur, ancak aynı zamanda resmi bir CSS doğrulama aracı değildir.
İsteğe bağlı olarak, birleşik doğrulayıcıyı kullanın - HTML ve CSS doğrulayıcılarını ve diğer faydalı araçları tek bir sayfada birleştirerek tüm belgeyi doğrular.
Web siteleri geliştirirken, en son basamaklı stil sayfası spesifikasyonlarına ve referanslarına bakın. CSS doğrulayıcıyı kullanmanızı ve sitenizi kontrol etmenizi, sonuçları yorumlarda paylaşmanızı öneririm!
Bir sayfanın bağlantısı kullanılarak veya yalnızca yüklenen bir dosya veya kopyalanan metin olarak belirtilen html kodunu kontrol eder. Düzeltmek için öneriler içeren bir yorum listesi sağlar.
http://validator.w3.org/
Css doğrulama (css doğrulayıcı)
Ayrı bir dosyada bulunan bir belgedeki veya stil sayfasındaki stilleri kontrol eder.
http://jigsaw.w3.org/css-validator/
RSS ve Atom beslemelerini kontrol etme
RSS ve Atom beslemelerinin düzgün çalışıp çalışmadığını kontrol eder.
http://validator.w3.org/feed/
Bir web sayfasında yazım denetimi yapın
Belirli bir URL sayfasındaki hataları vurgular.
http://webmaster.yandex.ru/spellcheck.xml
Test penceresine kopyalanan metindeki hataları gösterir.
http://api.yandex.ru/speller/
Bir web sayfasının yapısını kontrol etme
Web sayfasının yapısını gösterir. Html5 belgelerini kontrol etmek için uygundur. Kiril alfabesini (:.
http://gsnedders.html5.org/outliner/
İçeriğin benzersiz olup olmadığını kontrol etme
V ücretsiz sürüm metnin sayfanızla kısmen çakışmasıyla internette 10 sayfaya kadar gösterir.
http://www.copyscape.com
Forma girilen metnin benzersizliğini kontrol eder. Ücretsiz sürümde sonuçları beklemek mümkündür.
http://www.miratools.ru/Promo.aspx
Hem girilen metnin hem de belirtilen URL'deki metnin benzersizliğini kontrol eder, benzersizlik düzeyini yüzde olarak gösterir. Kendi doğrulama algoritmasına sahiptir.
http://content-watch.ru
Metin yazarı değiş tokuşlarından gelen içeriğin benzersizliğini kontrol etmek için masaüstü programları. Uzun süre çalışırlar, ancak yüksek kalitededirler. Etxt'in üç sürümü var işletim sistemleri: Mac, Linux ve Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/
Benzer içeriğe ve benzer iç yapıya sahip siteleri gösterir.
http://benzersiteler.com
cms sitesini kontrol etme
En ünlü cms işaretlerini kontrol eder.
http://2ip.ru/cms/
Farklı kullanıcı grupları için web sitesi kullanılabilirlik kontrolü
Mobil cihazlardan erişilebilirliği kontrol etme
ile bir sayfayı görüntüleme yeteneğini değerlendirir. mobil cihazlar ve notların ve hataların bir listesini görüntüler.
http://validator.w3.org/mobile/
Google'dan telefonlar için sitenin kullanılabilirliğini kontrol etme.
https://www.google.com/webmasters/tools/mobile-friendly/
Mobil cihazlarda site yükleme hızını gösterir.
https://testmysite.withgoogle.com/intl/ru-ru
Site öykünücüsü ile çıkış cep telefonu... Seçilen modelin gözünden siteyi gösterir.
http://www.mobilephoneemulator.com/
Engelliler için erişilebilirlik kontrolü
Görme engelliler için sayfayı kontrol etme hizmeti. Çevrimiçi olarak ve Firefox için bir eklenti olarak mevcuttur.
http://wave.webaim.org/
Bir tarayıcının gözünden site içeriğine göz atmak
Arama dizin oluşturucusunun gördüğüne yakın site metnini gösterir.
http://www.seo-browser.com/
Win32 sistemleri için vaşak metin tarayıcısının dağıtımı. Kullanmadan önce, lynx ile dizinin yolunu belirterek lynx.bat dosyasını düzenlemeniz gerekir.
http://www.fdisk.com/doslynx/lynxport.htm
Tüm işaretlemeleri kaldırır ve sayfa metnini, meta ve başlık etiketlerini, harici ve dahili bağlantıların sayısını gösterir. Google'da bir sayfanın önizlemesini gösterir.
http://www.browseo.net
Sitenin bağlantı yapısını kontrol etme
Kırık linkleri kontrol etme
URL'ler için giden bağlantıların bir listesini gösterir ve yanıtlarını kontrol eder. Özyinelemeli olarak kontrol edebilir, yani bir belgeden diğerine kendi başına geçebilir.
http://validator.w3.org/checklink
Bozuk bağlantıları kontrol etmek için ücretsiz bir araç. Çalışmak için bilgisayarınıza yüklemeniz gerekir. Siteyi tekrar tekrar tarar, raporlar yapar, site haritası oluşturmak için faydalı olabilir.
http://home.snafu.de/tilman/xenulink.html
Bağlantıları ve sayfa başlıklarını kontrol etme
Ücretsiz sürümde 500'e kadar web sitesi sayfasını tarar. Dış ve iç bağlantıların sayısını kontrol eder. Taranan sayfalarla ilgili bilgileri görüntüler: yuvalama, yanıt kodları, başlıklar, meta bilgiler ve başlıklar.
http://www.screamingfrog.co.uk/seo-spider/
Dahili sayfaların bağlantı yapısını ve ağırlığını kontrol etme
Program siteyi tarar, bir iç bağlantı matrisi oluşturur, belirtilen URL'den harici (gelen) bağlantılar ekler ve bu verilere dayanarak sitenin dahili sayfa ağırlıklarını hesaplar. Program, site sayfalarının URL'lerinin listesi için harici (giden) bağlantılar bulmak için kullanılabilir.
Sunucu yanıt kodlarını kontrol etme, arama robotlarıyla site görünürlüğü, site teknik özellikleri
HTTP başlıklarını ve sunucu yanıtını kontrol etme, robotlar için sayfa görünürlüğü
Sunucu yanıt kodlarını kontrol eder, verilerinin bayt cinsinden boyutuna bağlı olarak sayfa yükleme hızını tahmin eder, dahili ve Dış bağlantılar sayfa için, bir tarayıcının gözünden sayfanın içeriği.
http://urivalet.com/
Sunucu yanıt kodlarını kontrol eder. Yönlendirmeleri (yanıt kodları 301, 302), Last-Modified başlığını vb. kontrol etmenizi sağlar.
http://www.rexswain.com/httpview.html
Sayfa yüklendiğinde aktarılan verilerin miktarını ve içeriğini gösterir.
http://www.websiteoptimization.com/services/analyze/
Yönlendirmeleri, kurallı özniteliğin kullanımını, meta etiketleri, site güvenliğinin bazı yönlerini kontrol eder. Sayfa yüklemeyi iyileştirmek için öneriler sunar.
http://www.seositecheckup.com
Etki alanı ve IP adresi bilgilerini kontrol etme
Etki alanı kayıt merkezi WHOIS hizmeti RU merkezi. Dünya çapındaki IP adresleri ve etki alanları hakkında bilgi sağlar. Bazen donuyor.
https://www.nic.ru/whois/?wi=1
RosNIIROS'tan (RIPN) Whois hizmeti. RU bölgesindeki etki alanları ve RIPE veritabanından (Avrupa) IP adresleri için bilgi sağlar.
http://www.ripn.net:8080/nic/whois/
Etki alanının nerede barındırıldığını belirler ve ayrıca sitenin IP adresini gösterir.
http://www.whoishhostingthis.com
E-posta göndermek için IP adresinin kara listede olup olmadığını kontrol edin.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/
Bir etki alanı için MX kayıtları kontrol ediliyor. Etki alanı için SMTP sunucusunu kontrol etme. Posta için kara listelerdeki IP'yi kontrol etme.
https://mxtoolbox.com/
Amerika Birleşik Devletleri'ndeki tescilli ticari markaların veritabanında arama yapın.
http://tmsearch.uspto.gov/
robots.txt dosyalarını kontrol etme
Yandex robotu tarafından indeksleme için site sayfalarının kullanılabilirliğini kontrol eder.
http://webmaster.yandex.ru/robots.xml
robots.txt dosyasının doğruluğunu kontrol eder.
https://www.websiteplanet.com/webtools/robots-txt
Site denetimi
Web sitesi kullanılabilirliği izleme. Minimum doğrulama seçenekleriyle bir siteye ücretsiz olarak bağlanmayı mümkün kılar.
http://www.siteuptime.com
Web sitesi yükleme hızını kontrol etme. E-postaya bir rapor gönderir. Site kullanılabilirliğini izlemek için ücretli hizmetlere sahiptir.
http://webo.in
Site sayfalarının yüklenme hızının kontrol edilmesi.
http://www.iwebtool.com/speed_test
Sitenin arama motorları tarafından indekslenmesi ve görüntülenmesinin kontrol edilmesi
Arama motorlarında site görünürlüğü
Hizmet gösteriliyor anahtar kelimeler zaman içinde Google'ın İLK 20'sinde (ilk yirmi) yer alan bir site için. Arama ve reklam trafiği verileri.
http://www.semrush.com/
TOP50 yandex ve Google'da konum. Sitenin başlıkları ve ana sayfanın PR'ları, önemli dizinlerdeki varlığı, yüksek frekanslı talepler için en üstte görünürlük.
http://pr-cy.ru/
Sitedeki yasakları ve güven seviyesini kontrol etme
Sitenin güvenini kontrol etmek. Yandex'e olan güveni ölçtüğünü iddia eden bir hizmet (zaten kimse kontrol edemez :).
http://xtool.ru/
Google'dan Panda ve Penguen filtrelerinin yerleştirilmesini kontrol etme. Servis, sitenin Panda ve Penguin güncelleme tarihlerinde çöküp çökmediğini görsel olarak belirlemenizi sağlar.
http://feinternational.com/website-penalty-indicator/
Site sayfalarının Sayfa Sıralamasının kontrol edilmesi (URL'yi araca kopyalarken, son harfi silip yeniden yazmanız gerekir).
http://www.prchecker.net/
Site geliştirme geçmişinin kontrol edilmesi
Site geliştirme geçmişini gösterir ve eski sayfaların ekran görüntülerini görmenizi sağlar.
http://www.archive.org/web/web.php
TOP Google'daki site konumlarının geçmişi (anahtar ifadeler, sayfalar, başlıklar), PR göstergeleri, CY, Alexa Sıralaması, popüler siteler için geri bağlantı sayısı.
http://SavedHistory.com
Siteleri kontrol etmek için SEO eklentileri
SEO Doctor bir Firefox eklentisidir. Sayfadaki bağlantıları gösterir ve çeşitli SEO hizmetlerine kullanıcı dostu bir arayüz sağlar.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/
SeoQuake bir Firefox eklentisidir. Sitenin en önemli özelliklerini gösterir: TCI, PR, geri bağlantılar, Alexa Rank. Hem Google hem de Yandex ile çalışır. Rakipleri hızlı bir şekilde analiz etme yeteneği sağlar.
http://www.seoquake.com/
IEContextHTML, Internet Explorer için bir eklentidir. Yandex ve Google'daki bağlantıların indekslenmesini kontrol eder, harici ve dahili bağlantıların bir listesini gösterir, web sayfalarından veri aktarmanıza olanak tanır.
Konuma bağlı olarak arama terimlerinde site görünürlüğü
Rusça olanlar da dahil olmak üzere güncellenmiş ücretsiz proxy sunucuları listesi.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/
Kendinizi üç ülkeden tanıtabilme özelliğine sahip anonim ücretsiz proxy. Google arama ile çalışır.
https://hide.me/en/proxy
öykünücüler Google arama arama parametrelerini belirterek farklı ülkelerde.
http://searchlatte.com/
http://isearchfrom.com/
Yandex ve Google'daki pozisyonları kontrol etme
Hizmet, sitenin konumunu Yandex'de bölgelere göre derinlemesine kontrol etmeyi (500'e kadar) mümkün kılar.
Ağ sitesi analizi, geri bağlantı kontrolü
Backlink analizi
Sitenin bağlantı kütlesini analiz eder, çeşitli kriterlere göre dilimler oluşturur: bağlantı türü, bağlantı metni, sayfalar. Geri bağlantıların ağırlığını gösterir. Hizmet yalnızca kayıtlı kullanıcılar tarafından kullanılabilir.
http://ahrefs.com
Siteye geri bağlantıların varlığını kontrol etme
Önerilen URL listesinde (100 sayfaya kadar) siteye verilen geri bağlantıları kontrol eder.
http://webmasters.ru/tools/tracker
Bir sitenin sosyal medyadaki popülerliğini kontrol etme
PlusOneChecker
Google+'daki beğeni sayısını (artı bir) gösterir. Kontrol edilen URL'lerin listesini hemen girebilirsiniz.
http://www.plusonechecker.net/
Facebook Grafik API Gezgini
SharedCount
Twitter, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs'de popülerlik gösterir.
http://sharedcount.com
Harika Sosyal
Twitter, Google+, Facebook, Delicious, StumbleUpon'da sitenin ilk sayfasının popülerliğini gösterir. Rus siteleri için veriler bazen yanlıştır.
http://www.coolsocial.net
Sosyal-Popülerlik
Sosyal Tarama Analizi
Siteyi tarar ve büyük yabancıların "Paylaşımları" raporlarını oluşturur. sosyal ağlar bu sayfalar için. Kullanıcıları bir Twitter hesabıyla kaydeder. Raporlar ertesi gün görülebilir.
https://socialcrawlytics.com
Siteyi virüslere karşı kontrol etme
Dr.Web
Belirtilen URL'yi şüpheli kod için kontrol eder, yüklenen komut dosyalarını ve tarama sonuçlarını gösterir.
http://vms.drweb.com/online/
Virüs Toplamı
30 tarayıcı ile URL'leri virüslere karşı kontrol eder.
https://www.virustotal.com/#url
alarm
Siteyi virüslerden korumak için sistem. Günlük site dosyalarını tarar ve değişiklikleri hakkında e-posta ile bir rapor gönderir.
2016-12-29
Düğmeleri canlandırıyoruz ve siteyi HTML ve CSS kodunun geçerliliği için kontrol ediyoruz
Merhaba sevgili ziyaretçi!
Bugün, oluşturulmuş bir web sayfası örneğini kullanarak, sitenin geçerliliğini, yani HTML ve CSS dillerinin yerleşik özelliklerine uygunluğu nasıl kontrol edebileceğinizi ele alacağız.
Ek olarak, kontrol etmeden önce, kenar çubuğu düğmelerini "animasyon" ile ilgili bölümde CSS stil sayfasında bazı revizyonlar yapacağız, burada statik düğmelerden etkileşimli olanları değiştireceğiz. dış görünüş durumuna bağlı olarak - pasif, aktif ve basılı.
- Düğmeleri üç boyutlu yapmak
- Düğmeleri etkileşimli hale getirme
- doğrulamaya ihtiyacınız var mı
- HTML kodu nasıl doğrulanır
- CSS kodu nasıl doğrulanır
- Site kaynak dosyaları
Düğmeleri üç boyutlu yapmak
Bir önceki makalede, ana içerik alanını ana sayfanın düzenine uyacak şekilde şekillendirdik. Ayrıca, üzerinde şu an kenar çubuğu, statik olan ve köşeleri yuvarlatılmış normal düz kahverengi bir dikdörtgene benzeyen düğmeler içerir.
Aşağıda, bu tür düğmelere sahip bir kenar çubuğunun bir pasajı bulunmaktadır.
Düğmeleri "canlandırmak" için, önce CSS stilleri yardımıyla onlara biraz hacim verelim. Bunu da daha önce rotator, arama ve abonelik bloklarının tasarımında kullanılan lineer gradyan özelliğini kullanarak yapacağız.
Doğrusal gradyan değerleri aşağıdaki gibi tanımlanır:
1. Renklerin tonları, düğmenin ana renginden daha koyu bir renkle başlayarak aşağıdan yukarıya doğru ayarlanır. Degradenin başında hangi rengin kullanılacağını belirlemek için aracını kullanın. grafik düzenleyici, bu durumda photoshop.
Bunun için de belgeyi aç tasarım düzeni, "Renk paletini" seçmeniz, imleci düğmenin gerekli alanı üzerine getirmeniz, ana rengi tanımlamanız ve ardından aynı kahverengi gölgenin daha koyu bir rengini seçmek için "Renk paleti" araçlarını kullanmanız gerekir. Bizim durumumuzda "653939" değerinde bir renk alalım. Bunun nasıl yapılabileceği aşağıdaki ekran görüntüsünde açıkça gösterilmektedir.
2. Ardından, başlangıçtaki daha koyu rengin ana renge geçeceği degradenin durma konumunu tanımlayın. Stop pozisyonumuzu yaklaşık olarak ortaya yerleştireceğiz. Aynı zamanda, daha doygun bir renk elde etmek için durma konumunu biraz yukarı taşıyacağız ve değerini, örneğin yüksekliğin %70'ini tanımlayacağız.
3. Degradeye özellik atamak için yapılacak son şey, üstteki düğmeleri renklendirecek temel renkten daha açık bir renk tanımlamaktır. Bu, degradenin ilk rengini tanımlarken olduğu gibi yapılır. Bu durumda bu rengin değerini "b88686" olarak alacağız.
3. Elde edilen verilere dayanarak, daha önce oluşturulmuş olana doğrusal bir gradyan ekleyin. CSS özellikleri düğmeler.
giriş: {
boy uzunluğu : 30 piksel;
kenar boşluğu-alt : 10 piksel;
sınır yarıçapı : 5 piksel;
arka fon : # a76d6d;
Metin hizalama : merkez;
yazı tipi ağırlığı : gözü pek;
renk : #fff;
batmadan yüzmek : sağ;
arka plan görüntüsü
Ekstrem renkler belirlenirken, %0 ve %100 değerlerinde buna gerek olmadığı için burada durma konumlarının belirtilmediği belirtilebilir.
Şimdi tarayıcımızı yenileyelim ve sonucu görelim.
Gördüğünüz gibi, düğmeler hafif bir şişkinlik kazandı. Şimdi onları "canlandırmaya" başlayabilirsiniz.
Düğmeleri etkileşimli hale getirme
Butonlarla tam olarak çalışabilmeleri için onları interaktif hale getireceğiz, bu da onların üç ana durumunu görsel olarak yansıtacak, pasif (buton devrededir). orijinal durum), aktif (imleç düğmenin üzerindedir) ve basılı (imleç üzerine gelindiğinde fare düğmesi basılı tutulur).
Ve bunu gölge ve kenarlık özelliklerinin bir kombinasyonunu kullanarak yapacağız. Bu tekniğin özü, farklı kenarlardan gölge ve kenarlıkların rengini değiştirerek, düğmelerin durumundaki değişikliğin bir taklidini elde edebilmenizdir.
Öncelikle bunu pasif durum için yapalım ve butonlar yüzeyin üzerine çıkacak şekilde resmetmeye çalışalım.
Kenarlıkların ve gölgelerin renklerini önceki durumlarda olduğu gibi seçeceğiz.
Uygun eklemelerden sonra CSS kodu formu alacaktır.
giriş: {
boy uzunluğu : 30 piksel;
kenar boşluğu-alt : 10 piksel;
sınır yarıçapı : 5 piksel;
arka fon : # a76d6d;
Metin hizalama : merkez;
yazı tipi ağırlığı : gözü pek;
renk : #fff;
batmadan yüzmek : sağ;
arka plan görüntüsü : doğrusal gradyan (üste, # 653939, # a76d6d %50, # b88686);
kutu-gölge : 2px 2px 4px 0px # 422a2a;
sınır genişliği : 2 piksel;
sınır tarzı : sağlam;
sınır rengi : #ddbebe # 241616 # 241616 #ddbebe;
Burada sınırların, kalınlığı belirleyen özelliklerin bir kombinasyonu ile temsil edildiği not edilebilir (değer ile sınır-genişlik). 2 piksel), dört kenarın her birinde düz bir kenarlık ve renkler (kenarlık rengi) belirten bir değere sahip bir stil (kenarlık stili).
Tarayıcıyı güncelleyelim ve şimdi butonların nasıl görüneceğini görelim.
Gördüğünüz gibi, bu durumda düğmeler yükseltilmiş gibi görünüyor.
Şimdi butonları basılı bir durum gibi göstermeye çalışalım. Bunu yapmak için gölgeyi kaldıracağız ve kenarlıkların rengini değiştireceğiz. Bu durumda, aktif duruma karşılık gelen özel bir sözde sınıf seçici kullanacağız: vurgulu.
Düğmelerin aktif durumu için CSS aşağıdaki gibi görünecektir.
giriş: üzerine gelmek {
kutu-gölge : Yok;
sınır rengi : # a76d6d # a76d6d # a76d6d # a76d6d;
Bu durumda bordürlerin rengini tekrar değiştirip bir gölge ekleyeceğiz, sadece bu durumda dahili ve ofsetsiz olacak. Sözde sınıf seçici de şu şekilde değişecektir: basılan duruma karşılık gelen aktif.
Basılan durum için CSS kodu aşağıdaki gibi olacaktır.
giriş: aktif {
kutu-gölge : 0px 0px 7px 2px # 422a2a iç metin;
sınır rengi : # 777 #fff #fff #777;
"Ara" düğmesi, duruma bağlı olarak görünümünü nasıl değiştirdiğini açıkça görebileceğiniz karşılaştırma için aşağıda gösterilmiştir.
Şekil 8 Pasif durum
Burası ana sayfanın düzenini bitirdiğimiz ve tasarım düzenine uygun bir forma getirdiğimiz yer. Ve şimdi, daha önce her aşamada olduğu gibi, çapraz uygunluk için kontrol etmelidirler. farklı tarayıcılar... Ancak bundan önce, kodun durumu bir dereceye kadar çapraz tutarlılığı etkileyebileceğinden, doğrulama için sayfayı kontrol edelim. Bu nedenle, şimdi bu çok gerekli işlemi gerçekleştireceğiz.
doğrulamaya ihtiyacınız var mı
Doğrulama, kodun belirlenmiş standartlara göre doğrulanmasıdır. HTML ve CSS kodunun doğruluğu için doğrulama arasında ayrım yapın. Aynı zamanda, bir durumda HTML kodunun, diğerinde CSS kodunun kontrol edildiği açıktır.
Muhtemelen, birçoğu doğrulamanın gerekli olup olmadığı sorusunu garip bulacaktır. Ancak İnternet'e bakarsanız, geçerli kodun isteğe bağlı olduğuna, bunun bir zaman kaybı olduğuna inanan birçok kişi olduğunu görebilirsiniz, çünkü tarayıcılar her türlü hatanın varlığında bile iyi çalışır.
Elbette çoğu durumda siteler geçersiz kod üzerinde iyi çalışabilir, ancak bu gibi durumlarda çapraz tutarlılık garanti edilemez. Sonuçta, programlama dillerinin kendileri için standartlar var, ancak tarayıcıların hataları aynı şekilde düzelttiği gerçeği için, elbette böyle bir standart yoktur ve olamaz. Ve bu nedenle, farklı tarayıcılar hataları farklı şekillerde işleyebilir ve bu da sayfaların farklı görüntülenmesine neden olabilir.
Ve genel olarak, bazı insanların neden "bunu yapacak" ilkesine göre işlerine karşı bu kadar mecazi bir tutuma sahip oldukları açık değildir. Bu nedenle, birisi kodun geçerliliğini kontrol etmesi gerekmediğine inanıyorsa, bu onun hakkıdır ve tam tersine ikna olması pek mümkün değildir ve buna gerek yoktur.
Şimdi doğrudan kodların geçerliliğini kontrol etmeye geçelim, önce HTML, sonra CSS.
HTML kodu nasıl doğrulanır
Aslında, kod doğrulama kontrolünün kendisi, şimdi görüldüğü gibi oldukça basittir. Ancak, hataların ortadan kaldırılması genellikle belirli bir zaman alır. Elbette, kod birkaç satırdan oluşuyorsa, burada zorluklar ortaya çıkabilir. Ancak, yüzlerce ve binlerce varsa, çok çalışmanız gerekebilir, hepsi kodun ne kadar iyi derlendiğine bağlıdır. Bu nedenle, bunu ortak bir çapraz tutarlılık kontrolü ile daha sık yapmak daha iyidir.
Burada geçerliliği kontrol etmenin en basit ve en yaygın varyantını ele alacağız - bu, tarayıcı geliştiricilerinin desteğiyle web sayfalarının kodları için özellikler geliştiren "W3C Konsorsiyumu" sitesinin kullanımıdır.
HTML kodunu kontrol etmek için https://validator.w3.org/ bağlantısını takip edin, burada kontrol edilen sayfanın adresini girmek için bir alan içeren bir sayfa açılacaktır.
ekran görüntüsü 51
"Check" butonuna tıkladıktan sonra kontrol sonucunu alıyoruz.
Bu durumda, HTML kodu geçerlidir, ancak lang özniteliğinin değerle birlikte kullanılması tavsiye edilir. "ru", sayfa Rusça kullandığından.
Lang özniteliği, tarayıcıların kullanılan dile bağlı olarak tırnak işaretleri gibi belirli karakterleri doğru bir şekilde görüntülemesine izin vermek için tasarlanmıştır. Bu nedenle, HTML koduna dahil etmemiz gereksiz olmayacaktır. Ve hadi yapalım html etiketi bu özelliğin tüm belge üzerinde etkili olabilmesi için.
Bu eklentinin nasıl yapılacağı aşağıdaki tabloda gösterilmiştir.
"ru" >
. . .
Ve şimdi ikinci bir kontrol yaparsak, kodun hiçbir yorum yapmadan tamamen geçerli hale geldiğini görebiliriz.
Bu şekilde internette yayınlanan bir dosyayı kontrol ettik. Ancak sayfa henüz ağda yayınlanmadığında, geçerliliğini başka yollarla kontrol edebilirsiniz; bu, dosyayı gözat düğmesini kullanarak yüklemek veya HTML kodunu doğrudan kopyalamak için formu kullanmaktır.
Ekran görüntüsü, web sayfası kodu doğrulama için doğrudan forma kopyalandığında son seçeneği gösterir.
Kontrolü yaptıktan sonra benzer bir sonuç alıyoruz ve kontrol edilen kod burada da gösterilecek. Hataların bulunması durumunda, aramayı basitleştirmek için vurgulanacaktır, bu da onları ortadan kaldırma işini büyük ölçüde basitleştirir.
CSS kodu nasıl doğrulanır
HTML doğrulama kontrolünü ele aldık. CSS kod doğrulaması tam olarak aynı sırada gerçekleşir. Yalnızca bu durumda, böyle bir durumda http://jigsaw.w3.org/css-validator/ adresinde bulunan başka bir doğrulayıcı sayfası kullanmanız gerekir.
Açalım ve önceki seferki gibi kontrol edilen sayfanın adresini girelim ve ardından "Kontrol Et" butonuna basalım.
Bu kontrolün sonucu ekran görüntüsünde gösterilir.
Görüldüğü gibi CSS kodumuz spesifikasyonla hatasız olarak tamamen uyumludur, bu da iyi bir sonuçtur.
Bu durum için diğer doğrulama yöntemlerinin sırası, HTML kodu için benzer kontrollerle tamamen örtüşmektedir. Bu nedenle, burada kendimizi tekrar etmeyeceğiz ve doğrulama kontrollerinin değerlendirmesini burada sonlandıracağız.
Bundan sonra, sayfamızı çapraz eşleştirme için kontrol edeceğiz ve tüm tarayıcılarda aynı şekilde görüntülendiğinden emin olacağız, bu sitenin ana sayfasının düzenini tamamlayacaktır.
Ve bununla Yeni Yıl tatillerinden hemen sonra ilgileneceğiz.
Ve sonuç olarak, herkese Mutlu Yıllar dileyebilirsiniz! Ve size sağlık, sevgi, neşe, refah ve elbette, büyük başarıİnternette başarılı çalışma olasılığı için kendi sitenizi oluştururken!
Site kaynak dosyaları
Bu yazıda yapılan güncellemelerin bulunduğu sitenin kaynak dosyaları ekteki dosyadan indirilebilir. Ek materyaller.
Bu koleksiyon harika bir koleksiyon içeriyor çevrimiçi hizmetler CSS kodlarıyla çalışma hakkında. Tüm bu hizmetler, web geliştiricisinin hayatını çok daha kolay hale getirir. Onların yardımıyla site için bir CSS ızgarası oluşturabilir, kodu hatalara karşı kontrol edebilir, kodu farklı tarayıcılar için uyarlayabilir, Photoshop katmanının stillerine göre CSS stilleri oluşturabilir, arka plan ve degradeler için desen kodlarını alabilir, sıkıştırabilirsiniz. Site yükleme hızını artırmak için CSS. Yazı tipleri ve görsel sunumlarıyla çalışma konusunda uzmanlaşmış birçok hizmet vardır.
1Kb CSS Izgarası
Sadece üç parametre ile bir CSS ızgarası da oluşturulur. Ayrıca genişlik piksel cinsinden belirtilir. 
Izgara Tasarımcısı
Daha karmaşık hizmet. Çeşitli parametrelerle özelleştirilebilir CSS ızgarası. İkinci blok, sütunlarda görüntülenecek metni oluşturur. Sonuç olarak elimizde hazır bir CSS ve HTML şablonu var. 
CSS Lint
Hatalar için sitenizin kodunu kontrol etme hizmeti. 
Primer CSS
HTML kodunu iletişim kutusuna yapıştırarak, CSS'de belirtilen tüm belirtilen sınıfların ve kimliklerin bir listesini alabilirsiniz. 
ÖnekMyCSS
Kaynak CSS kodunu girerseniz, çıktıda farklı tarayıcılar için uyarlanmış kodu alabilirsiniz. 
Modernizr
Bu hizmet, bir JavaScript kitaplığı indirmeyi ve yüklemeyi teklif eder. açık kaynak Bu, bir web sitesi oluştururken size bir şekilde yardımcı olacaktır. Daha kesin olarak söyleyemem, çünkü kendim denemedim ne olduğunu. 
Katman Stilleri
Çok yardımcı hizmet. Photoshop, programın katman stili iletişim kutusundaki ayarlara bağlı olarak bir CSS kodu oluşturur. 
ColorZilla'dan Ultimate CSS Gradyan Oluşturucu
Aralarından seçim yapabileceğiniz çok sayıda gradyan vardır ve bunların CSS kodları farklı tarayıcılar için uyarlanmıştır. 
Sprite kutusu
Tek bir resimden hızlı ve kolay bir şekilde sınıflar ve tanımlayıcılar oluşturmanıza olanak tanır 
Otomatik CSS satır içi
Posta listelerinde kullanılmak üzere tüm yerel stilleri otomatik olarak satır içi CSS'ye dönüştürür. 
daktilo
Farklı yazı tiplerinin yazımını karşılaştırmanıza ve seçilen yazım stilinin CSS kodunu almanıza olanak tanır. 
Web Yazı Tipi Birleştirici
Hizmet, başlıklarda, alt başlıklarda ve gövde metninde farklı yazı tipi kombinasyonlarının nasıl görüneceğini görsel olarak görmenizi sağlar.
İnternetteki tüm sitelerin sayfaları, standartlaştırılmış HTML kurallarına göre yazılmış özel bir kodla biçimlendirilir.
geçerlilik nedir?
Doğrulama, yerleşik normlara uygunluk kontrolüdür ve web yöneticileri tarafından kullanılan bağlamda - sayfa kodunun doğruluğu: sözdizimi hataları, yuvalama etiketleri vb. Her şey "doğru" yapılırsa, sayfa kodu yanlış nitelikler içermemelidir, yapılar ve hatalar. Site doğrulama, düzeltilmesi gereken kusurları belirlemenizi sağlar.
Sitenin geçerliliği, kodun mevcut HTML standartlarına uygunluğudur.
Bir web sayfasının kodunda açıklama veya hata olup olmadığını hem çevrimiçi hem de İnternet erişimi olmadan ve çevrimdışı programları kullanarak öğrenebilirsiniz.
Kod doğrulayıcılar nelerdir
Kod doğrulayıcı, modern standartlara uygunluk açısından sayfaların HTML kodunu ve CSS kodunu kontrol edebileceğiniz bir programdır. Yanlış öğeleri bulur ve düzeltir, konumlarına işaret eder ve tam olarak neyin yanlış biçimlendirildiğini formüle eder.
Geçerli bir düzenin ana "işaretleri"
Geçerli düzen, tüm İnternet için teknoloji standartları geliştiren W3C'nin (World Wide Web Consortium) gereksinimlerine tam olarak uyan kodu içerir.
Site sayfalarındaki kod doğruysa, tüm tarayıcılarda site doğru şekilde görüntülenir (ve çarpık değil).
SERP'de haksız yere düşürme şüphesi yoktur ve indeksten atılan sayfalar yoktur.
Örnek. Varsayalım, etiketler yanlışsa