Stil Etiketini CSS Stil Sayfalarının Dışında Ne Zaman ve Neden Kullanmalı?

Yayınlanan: 2017-10-29

Stil etiketleri, web geliştirmenin oldukça ilginç bir parçasıdır. Demek istediğim, bunlar mevcut web'in nasıl çalıştığı konusunda temel ve temeldir, ancak çoğu zaman sitenizin gerçek stili, temalar, eklentiler ve ziyaretçilerinizin gördüğü günlük görünüm için çok sayıda CSS stil sayfasını içe aktarmaktan ve kullanmaktan gelir.

Ancak, web sitesi oluşturmanın eski günlerinde, web sitesinin tam gövdesinde stil etiketlerini kullanabilirdiniz ve sorun olmazdı. Hepsi olmasa da, sayfanın CSS'sinin çoğu sayfanın kendisine giderdi ve o zamanlar… her şey yolundaydı. Günümüzde bununla ilgili elbette sorunlar var – sayfa yükleme hızı ve yürütme emirleri gibi ve web teknolojileri ne kadar olgunlaşırsa, stil etiketlerini tek başlarına kullanmak o kadar az sıklıkla istersiniz.

Ancak, bunları kullanmak isteyeceğiniz zamanlar vardır. Bazen, iş akışınızı geliştirirken, diğer örnekler, örneğin mobil optimizasyon veya harika stiller aracılığıyla dikkatlerini belirli bir öğeye çekme gibi, kullanıcılarınızın hayatlarını gerçekten daha iyi hale getirir.

Tipik Stil Sayfası Kullanımı

Bugün hemen hemen her web sitesinde, stilin şu şekilde uygulandığını göreceksiniz:

<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />

Divi kullanan bir Elegant Themes üyesiyseniz (olmalısınız!), bu, bu pasajı aldığım tam stil sayfasını çağırır:

/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

Şimdi, teoride, size yazma herhangi bir sayfanın başlığında stil etiketinde bu koyabilirim. Kesinlikle işe yarar, ancak bu kokuşmuş kodlama ve stil etiketlerinin ne işe yaradığını hiç de değil.

Stil Etiketleri, Modern Kullanım

Elbette web sitenizde bunun gibi CSS stil sayfaları var. Onları kullanacaksın. Custom.css ve stylesheet.css dosyanız var ve muhtemelen bundan çok daha fazlası. Sitenizin tam olarak nasıl görünmesi gerektiğini anladınız ve bundan memnunsunuz.

Öyleyse neden stil etiketlerine ihtiyacınız var?

Çünkü stil sayfaları büyük resim çözümleridir. Stil etiketi, küçük ölçekli bir çözümdür.

E-Tablolar, nitty-cesur bireysel öğeler ve özel vurgularla değil, sitenizin daha büyük görünümünü ele alır. Bazen, tek seferlik bir kod parçasını bir stil sayfasına atmaya değdiğinden daha fazla iştir.

İşte o zaman stil etiketleri gerçekten kullanışlı hale gelir. Ayrıca, bazen belirli cihazlar veya kullanım durumları için tek bir öğede ince ayar yapmanız veya belirli bir stil seçimi yapmanız gerekir. İşte o zaman stil etiketleri modern web geliştirmede gerçekten parlar.

Bir Elemanın Tek Bir Örneği

Muhtemelen sitenizde stil etiketlerini kullanmanızın ana nedeni, sayfanızda tek, tek seferlik bir öğeyle uğraşıyor olmanızdır. Stili, o öğenin kimliğine eklenmiş harici bir CSS dosyasına dahil etmek (varsa çok az geri dönüş için) çok fazla güçlük olabilir. Ancak yapabileceğiniz şey, öğeye bir stil etiketi atmak ve gününüze devam etmektir.

Örneğin, özel bir yazı tipine ihtiyaç duyan bir kenar çubuğu widget'ınız varsa , onu bir div'e koyabilir, div'e bir CSS kimliği verebilir ve ardından {font-family: “Exo” gibi basit bir şey eklemek için e-tablonuza gidebilirsiniz. , Arial, sans-serif;} , ama bu çok fazla sorun.

Daha iyi seçenek, basitçe bunu yapmak olur mu?

<div style="font-family: "Exo", Arial, sans-serif;" />

Bada-bing, bada-boom, işiniz bitti ve bu widget şimdi öne çıkıyor çünkü o özel stili alan tek şey o. (Ve evet, yeni ve farklı bir yazı tipi kullanmanın tasarımınızın geri kalanıyla büyük olasılıkla çakıştığının farkındayım. Ama bu bir örnek.)

Basit Bir Sayfa

Bazen sitenizde çok basit, tek seferlik bir sayfanız olur. Bir açılış sayfası veya bir sıkıştırma sayfası olabilir. Muhtemelen buradaki stilinizde birkaç ince ayara ihtiyacınız var, ancak bu sayfaya ve yalnızca bu sayfaya başvurmak için onlara ihtiyacınız var.

Böylece, yeni bir stil sayfası oluşturup onu bağlamaktan daha hızlı ve daha kolay bir şekilde işlerinizi halletmek için stil ile birlikte sıklıkla kötülenen !important etiketini kullanabilirsiniz. Bu yöntem, çok fazla yeni CSS'niz yoksa en iyi şekilde kullanılır, çünkü bunun gibi çok sayıda CSS yüklemek sayfa yüklemesini yavaşlatabilir. Ama sen bunu zaten biliyorsun.

Bununla birlikte, bunun gibi basit bir şey, kullanıcılarınızın bağlantılarını çok fazla zorlamaz ve dürüst olmak gerekirse, bir stil sayfasına eklemeye değmez. (Adil olmak gerekirse, bu CSS iğrenç ve herhangi bir siteye eklemeye değmez. Tee hee!)

<style>
h2, h3, h4 {
  font-family: "Exo", Arial, sans-serif!important; 
  text-align: right; 
	font-size: 2rem; 
	color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important; 
  font-size: 1.2rem; 
	color: red; 
	background: #000;}
	</style>

Ancak buradaki nokta, HTML 5'in web sitenizin başına stil etiketleri ekleyerek mevcut stil sayfalarını değiştirebilmeniz için harika olmasıdır. Bu örnekte !important etiketleri kesinlikle gerekli olmasa da (nadiren gerekli), bu, belki de sizin gibi çok fazla etiket spagettisine (veya diğer geliştiriciler) sadece bu tek sayfa için geçerli oldukları için sitede çalışmaya başlarlar.

Çoklu Görüntü Alanı Boyutları

Medya sorguları arkadaşınızdır. Onlara tamamen aşina değilseniz, o zaman onları okumanızı şiddetle tavsiye ederim. Temel olarak, belirli CSS'lerin etkili olması için hangi parametrelerin karşılanması gerektiğini bildirebilirsiniz. Yine de çoğunlukla, sitelerinizin farklı cihazlarda çalıştığından emin olmak için bunu kullanacaksınız. Site genelinde yanıt vermeye ihtiyaç duyduğunuzda, bu bir stil sayfasına girecektir.

Ancak yine, mobilde (veya daha küçük veya daha büyük masaüstü çözünürlüklerinde) farklı görünmeniz veya hiç görünmemeniz gereken tek bir sayfanız veya öğeniz varsa, bunu başlıktaki stil etiketleriyle yapabilirsiniz.

<style>
@media (max-width: 767px) {

.white_text {
    color: #ffffff;
}

.blue_text {
    color: #cbe1f3;
}

.white_background {
    background-color: #ffffff;
}

.blue_background {
    background-color: #003663;
}

#email_form_a {
  display:none;
}
</style>

Stilin' ve Profilin'

CSS, web geliştirmenin o kadar önemli bir parçası ki, artık neredeyse herkesin bilmesi ve kullanması gereken bir şey. Ve CSS'yi bilmekten daha fazlası, erişiminiz olan nüanslı araçları ne zaman kullanacağınızı bilmektir.

Bu nedenle, stil sayfalarıyla sınırlı olduğunuzu düşünmeyin. Elbette, harikalar ve kullanışlılar ve tüm web'i daha güzel bir yer haline getiriyorlar, ancak yine de basit stil etiketlerinden faydalanabilir ve sitelerinize biraz daha pop kazandırabilirsiniz.

Peki stil etiketlerini .css stil sayfalarınızın dışında nasıl kullanıyorsunuz? İnsanlara hangi içgörüleri verebilirsiniz?

Creative Thoughts / Shutterstock.com'dan makale küçük resmi