Bir tarayıcı geliştiricisi kullanarak CSS nasıl uygulanır
Sitenizi küçük bir CSS ile düzenlemenin yollarını mı arıyorsunuz? Bunu yapmanın çeşitli yolları var. Bu kılavuzda, bir tarayıcı geliştiricisi kullanarak CSS’yi nasıl uygulayacağınızı ve yapabileceğiniz bazı şeyler örnekleri göstereceğiz. Uygulamalar veya web siteleri geliştirirken, geliştiriciler çalışmalarını yapmalarına yardımcı olan çeşitli araçlar kullanırlar. En popüler olanlardan biri bir tarayıcı geliştirici aracıdır. Onsuz, bir web sitesinde çalışmak çok daha karmaşık olacaktır. Çoğu tarayıcı kendi varsayılan geliştiricilerini sağlar. Çoğu benzerdir, ancak birkaç farklı seçeneğe sahiptir. Kullanıcıların yaklaşık% 66’sının Chrome kullandığı göz önüne alındığında, bu kılavuzda,
Chrome geliştirici. Bu, performansı ve çeşitli özellikleri nedeniyle tarayıcıdan en eksiksiz ve belirgin olanlardan biridir.Bir tarayıcı geliştiricisi kullanarak CSS uygulamanın yolunu girmeden önce, her şeyden önce Chrome geliştiricisini ve onunla neler yapabileceğinizi tanıyalım. Not: Burada bazı kavramları açıklayacağız, ancak bu kılavuzu takip etmek için CSS ve bunun nasıl çalıştığı hakkında temel bir anlayışa sahip olmanızı öneririz. İlk Chrome geliştiricisi, Chrome’da bir araç açmanız gerekir. Bunun için 3 seçenek var:
Anahtar kelimenizden F12 tuşuna basın
Sağ -Ekranın herhangi bir yerine tıklayın ve inceleyin seçin
Kullanıcınızın Avatarının sağındaki üç nokta simgesine basın ve başka bir araç> Geliştirici Araçları’nı açın
Üç seçenekten biri böyle görünecek Devtools’u açacak. Geliştirme aracınız biraz farklı görünebilir, ancak öğeler aynı olacaktır. Gördüğünüz gibi, birkaç sekme var, HTML web sitesi çıktısını gösteren öğe sekmesinde olduğunuzdan emin olun. Aracın, Devtools’u açtığınızda tarayıcıdaki etkin sekme olan geçerli pencere hakkında tüm bilgileri alacağını unutmayın. Geliştirici aracının birkaç penceresini aynı anda açabilirsiniz, her biri tarayıcıdaki farklı bir sekmeden bilgileri görüntüler. Bir tarayıcı geliştiricisinde HTML öğeleri nasıl bulunur Araçtaki öğelere daha yakından bakarsanız, öğelerin çoğunu tıklayarak açabileceğinizi göreceksiniz. Buna ek olarak, imlecleri üste yönlendirdiğinizde ön uçta vurgulanır. Farklı öğelere bakarak HTML üst öğesini görebilirsiniz. Her öğeyi tek bir tıklamayla açarak HTML yapısına dalabilirsiniz. Çoğu sitede, HTML kodu yeterince uzundur, bu nedenle belirli öğeleri bulmanız gerekiyorsa sıkıcı olabilir. Ayrıca, aradığınız öğeler büyük HTML üst öğeleri listesinde çok yuva yapıyorsa. Ancak, belirli unsurları bulmanın çok daha kolay bir yolu vardır. Belirli öğeleri bulma Analiz etmek istediğiniz öğelere sağ tıklayın ve denetlemeyi seçin.
Müfettiş açık olduğunda, eleman seçilecek ve Devtools’ta vurgulanacaktır. Yukarıdaki ekran görüntülerinde görebileceğiniz gibi, logoya tıkladık, bu nedenle geliştiricideki öğeleri kontrol ettiğimizde logo görüntüsü seçildi ve vurgulandı. Bu, tam HTML kaynak kodundaki öğelerin derinliğini anlamamıza yardımcı olur. Şimdi bir geliştirici kullanarak belirli bir öğeyi nasıl seçeceğinizi bildikten sonra, daha ileri gidip biraz özel CSS ekleyelim. CSS komut dosyalarını doğrudan düzenleme Dev araç penceresinin sağ tarafına bakarsanız, seçtiğiniz öğelere uygulanan tüm CSS kurallarının miras tarafından sıralandığını görürsünüz. Kalıtım, CSS işlevselliğini tanımlayan ana CSS kavramlarından biridir. Ne olduğunu tam olarak anlamıyorsanız endişelenmeyin, bir sonraki bölümde açıklayacağız. Dev aracına kendi CSS kurallarınızı uygulamak için, öğe stilinin beyanından hemen sonra yazmanız veya yapıştırmanız gerekir: Bu durumda, örneğimizi takiben, daha önce seçtiğimiz genişliği, arka plan rengini ve logo sınırlarını değiştirdik. Komut dosyasını, element ambalajında yapmak yerine yan taraftaki CSS kurallarından birine ekleyebilirsiniz.
Tarayıcı geliştirici cihazınızdaki CSS mirası, CSS kodunuzu bunlardan birine uygulayabiliyorsanız ve fark yoksa, tüm CSS kurallarına sahip olmanın anlamının ne olduğunu merak edebilir. Daha önce de belirtildiği gibi, hepsi, mirasa göre sıralanan seçilen öğelere uygulanan CSS kurallarıdır. Kalıtım kavramı, CSS’nin HTML belgelerine nasıl uygulandığını açıklar. Temel olarak, bu, belirli bir öğenin özelliği için belirlenen bir değer olmadığında ne olacağını kontrol eder. Aşağıdaki ekran görüntülerine daha yakından bakarsanız, yandaki tüm CSS seçmenlerinin aynı öğeyi hedeflediğini göreceksiniz: Ana bölümde seçtiğiniz unsurlar. Uygulanacak olan aynı öğeye iki veya daha fazla kural uygularsanız daha özel. Bu, tanımsız mülk için geçerli olan kalıtım davranışını devre dışı bırakacaktır. Yukarıdaki ekran görüntüsünde, öğesinin arka plan rengi özelliği aşağıdaki kurallarla verilmiştir: Body.Custom-Background {
Renkler: #d8d7e2;
} Bu, için geçerli olan diğer tüm kurallara olur, çünkü. Özel sırt sınıfını içeren daha özel seçmenleri vardır. CSS mirası hakkında daha fazla bilgi edinmek istiyorsanız, bu belgeleri görebilirsiniz.
Artık öğeleri daha iyi anladığınıza göre, bir tarayıcı geliştiricisi kullanarak CSS’yi nasıl uygulayabileceğinizi görelim. Bir geliştirici ile çalıştıktan sonra bir tarayıcı geliştiricisi kullanarak CSS komut dosyasını nasıl uygular ve CSS komut dosyasını yazdıktan sonra, CSS kodunu geliştiriciden kopyalamanız ve web sitenizin CSS dosyasına eklemeniz gerekir. Bu bölümde size adım adım nasıl yapılacağını göstereceğiz. 1) İlk CSS seçmenini alın, seçmen almalısınız. Geliştirici aracını açın ve vurgulanacak şekilde düzenlemek istediğiniz HTML öğesini tıklayın. Ardından, öğelerin öne çıkan özelliklerine sağ tıklayın ve COPLE> CSS seçicisine gidin. 2) Yukarıdaki ekran görüntüsündeki seçmenleri geliştirin, panoya kopyaladığımız CSS seçmenleri şunlardır :. Marka Sitesi> Div: Nth-Child (1) > Span: nth-child (1)> IMG Bazı durumlarda, bu seçmen çalışmayabilir, bu nedenle daha spesifik hale getirmek için düzeltmeniz gerekir. Örneğin, çok daha spesifik olan ve bir öncekine ulaşacak aşağıdaki seçmenleri kullanabilirsiniz: Div.site-Branding> div.site-logo> span.custom-logo-link> img.custom-logo 3) CSS Kurallar Seçmenleri ayarladıktan ve çalıştığını onayladıktan sonra, ihtiyacınız olan beyanı geliştirme aracının sağ tarafından kopyalayın.
Bunu yapmak için, geliştirme aracına eklediğiniz CSS kurallarını doğru tıklayın ve kuralları kopyalayın.
4) CSS kodunuzu web sitenize ekleyin Son adım, seçmenleri ve beyanları birleştirerek web sitesi stil dosyasına bir tarayıcı geliştiricisi kullanarak yaptığınız özel bir CSS kodu eklemektir. Hazırlığınıza bağlı olarak sitenize özel CSS eklemenin birkaç yolu olabilir. Birçok eklenti ve tema kendi CSS Editör kutusunu sağlar ve ayrıca CSS tema dosyasına doğrudan komut dosyaları ekleyebilirsiniz. Bazı farklı seçeneklere bakalım. 4.1) Tema ayarından ek CSS düzenleyicisi kullanarak CSS uygulamak için doğrudan yöntemin temasını ayarlamak için Ek CSS Düzenleyicisi. Bu, özel CSS eklemek için varsayılan olarak WordPress tarafından sağlanan seçenektir ve tüm web sitelerinde bulunur. Sitenize CSS kodu eklemek için, gösterge tablounuzda görünüm> Özelleştir> Ek CSS. CSS kurallarınızı düzenleyiciye yapıştırın ve Publish tuşuna basın. Bu yöntemin avantajı, ek araçlara ihtiyacınız olmaması ve kodu doğrudan yayınlamadan önce görebilmenizdir.4.2) Çocuk temasından CSS dosyaları çocuğun temasını kullanırsanız, stile özel bir komut dosyası ekleyebilirsiniz. CSS dosyası. Çok fazla CSS kodunuz varsa bu iyi bir seçimdir. Bunu yapmak için Style.css dosyasını alt temadan açın ve CSS kurallarınızı oraya yapıştırın. Çocuğunuzun temasına bağlı olarak, dosyanın farklı bir adı olabilir veya başka birkaç dosya olabilir. Ancak, dosyanın .css uzantısına sahip olduğundan ve doğru dosyayı düzenlediğinizden emin olun. WordPress dosyalarını çocuğunuzun temasından düzenlemenin bir başka alternatifi de, WordPress kontrol panelindeki görünüm sekmesinin altındaki tema düzenleyicisini kullanmaktır.
Buraya eklediğiniz CSS komut dosyası, temaların ayarlanmasına eklemekle aynı şekilde çalışacaktır, ancak biraz daha iyi bir performansa sahip olabilir. Önceki bölümdeki tarayıcı geliştiricisindeki CSS dosyasını kontrol edin, CSS komut dosyasının WordPress sitenize nasıl ekleneceğini açıkladık. Tahmin edebileceğiniz gibi, geliştirici cihazında gördüğünüz tüm CSS kuralları CSS dosyasından gelir. Bu dosyalar web sitesi tarafından dinamik olarak oluşturulabilir, sunucudan veya istemci tarayıcı önbellek dosyasından yüklenebilir. Daha yakından bakarsanız, CSS kurallarını içeren dosya adının kurallardan hemen sonra, geliştirici aracının CSS tarafında görüntülendiğini göreceksiniz. Dosya adını (style.css) tıklarsanız Olduğunuz dev stil editörü tüm etkin CSS dosyalarını ve içeriğini görecektir.
Divi menüsünü CSS olarak nasıl ayarlarsınız Woocommerce Shop sayfasını PHP ve CSS ile nasıl düzenlenir
