Yanıtlar:
Sadece jdelStrother'ın w3 özellikleri ve tarayıcı oluşturma hakkında ARTstudio hakkında neler söylediğine eklemek için.
CSS başlamadan önce bildirdiğinizde <body>stillerinizin zaten yüklenmiş olduğu önerilir . Çok hızlı bir şekilde kullanıcılar ekranlarında bir şey görüyor (ör. Arka plan renkleri). Değilse, kullanıcılar CSS kullanıcıya ulaşmadan önce bir süre boş ekran görür.
Ayrıca, stilleri içinde bir yerde bırakırsanız, <body>bildirilen stiller ayrıştırıldığında tarayıcının sayfayı yeniden yüklemesi gerekir (yükleme sırasında yeni ve eski).
linkve stylekapsam (stil) veya nitelik itemprop(link) bildirilmedikçe gövdede görünmemelidir .
stylebir akış elemanıdır ve vücuda yerleştirilebilir.
scopedözellik artık kullanılmıyor.
HTML spesifikasyonunun en son sürümleri artık <style>gövde öğeleri içindeki etikete izin veriyor . https://www.w3.org/TR/html5/dom.html#flow-content
Ayrıca scopedbir styleetiketin önkoşulu olan bodyözellik artık kullanılmıyor.
Bu, styleetiketi istediğiniz her yerde kullanabileceğiniz anlamına gelir ; tarayıcı, sayfa ağacında stilleri daha aşağıya indirdiğinde olası yansıma / yeniden boyama nedeniyle tek sonuç, sayfa performansının düşmesidir.
Eski cevap:
<style>Etiketi içinde izin verilmez <body>w3 özelliklerine göre. (Tabii ki, <div style="color:red">gerekirse satır içi stilleri uygulayabilirsiniz , ancak genellikle stil ve içeriğin zayıf ayrılması olarak kabul edilir)
<style>bir akış elemanıdır ve vücuda (diğer tüm akış elemanları gibi) konabilir.
CSS'yi gövdeye koymak, daha sonra yüklendiği anlamına gelir. Bu, tarayıcının arayüzü daha hızlı çizmeye başlamasına izin veren bir tekniktir (yani, bir engelleme adımını kaldırır). Bu, Akıllı Telefonlardaki kullanıcı deneyimi için önemlidir.
Küçük bir css tutmak için elimden geleni yapıyorum <head>ve geri kalanını altta taşıyorum. Örneğin, bir sayfa JQuery UI CSS kullanıyorsa, onu her zaman <body>JQuery javascript bağlantılarından hemen önce, altına taşıyorum. En azından, Jquery olmayan tüm öğeler zaten çizilebilir.
Kafa (W3C'den Alıntı) için tasarlanmıştır:
"mevcut belge hakkında başlığı, arama motorları için yararlı olabilecek anahtar kelimeler ve belge içeriği olarak değerlendirilmeyen diğer veriler gibi bilgiler "
Bkz . HTML belgesinin Genel yapısı . CSS belge içeriği olmadığından, başında olmalıdır.
Ayrıca her Web geliştiricisi onu orada görmeyi bekleyecek, bu yüzden çalışıyor olsa bile, vücuda koyarak bir şeyleri karıştırmayın!
Vücuda koymanız gereken tek CSS, satır içi CSS'dir , ancak genellikle satır içi stillerden kaçınırım.
Standartlar ( HTML 4.01: stil öğesi ) stil etiketine yalnızca kafa etiketinin içinde izin verildiğini açıkça belirtir. Gövde etiketine stil etiketleri koyarsanız, tarayıcılar mümkünse en iyisini yapmaya çalışır.
Sıkı bir belge türü belirtirseniz, tarayıcının gövdedeki stil etiketini yoksayması mümkündür. Mevcut herhangi bir tarayıcının bunu yapıp yapmadığını bilmiyorum, ancak stil öğesini nereye yerleştirdiğiniz konusunda çok rahat olmak için gelecekteki tüm sürümlere güvenmem.
styleetiketlerinde, scopedöznitelikleri varsa gövdede izin verilir .
Her ne kadar styleetiket vücutta izin verilmez, linketiket böylece sürece harici stil sayfasını gibi, tüm tarayıcılar vardır gerektiğini işlemek ve kullanıldığında düzgün CSS kullanabilirsiniz body.
Kaynak: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
Önceki yanıtlara ek olarak, öğenin içine bir stil kodu bloğu koymak da modern tarayıcılarda çalışır, tarayıcı metin olarak kod oluşturulacağına dair özellikle eski tarayıcılar ile, her zaman bir tehlike varsa (yani hala doğru o yapmaz gerçi) stil bölümü bir CDATA bölümüne dahil edilmedikçe.
Tabii ki, satır içi stiller dışında, öğenin içine yerleştirmenin bir başka yanı da, W3C HTML / XHTML spesifikasyonlarıyla uyuşmadığı için, gövde içindeki herhangi bir sayfanın W3C doğrulayıcıda başarısız olacağıdır. Tüm kodlarınız geçerliyse, beklenmedik ekran sorunlarını gidermek her zaman daha kolaydır, bu da hataları tespit etmeyi kolaylaştırır. Geçersiz bir HTML öğesi, kodda göründüğü yerin ötesinde herhangi bir öğenin oluşturulmasını olumsuz etkileyebilir, bu nedenle, olmaması gereken yerlerde öğeler içeren beklenmedik efektler alabilirsiniz, çünkü bir tarayıcı geçersiz bir öğe bulduğunda, onu nasıl görüntülemesi gerektiği konusunda en iyi tahminde bulunur ve farklı tarayıcılar bunu nasıl görüntüleyecekleri konusunda farklı kararlar verebilir.
İster geçişli ister katı bir doküman türü kullanın, (X) HTML spesifikasyonlarına göre yine de geçersiz olacaktır.
Aslında stilleri vücuda koyarak CSS kullanma amacını yenersiniz. Mesele, içeriği sunumdan (ve işlevden) ayırmak olacaktır. Bu şekilde, stilde yapılan değişiklikler içerikte değil, stil sayfasında yapılabilir. Satır içi stil yöntemini kullandıktan sonra, satır içi stil içeren her sayfanın birer birer değiştirilmesi gerekir. Bir veya üç veya on sayfayı özleyebileceğiniz için can sıkıcı ve riskli.
Bir stil sayfası kullanarak, yalnızca stil sayfasını değiştirmeniz gerekir; değişiklikler, stil sayfasına bağlantı veren her HTML sayfasına otomatik olarak yayılır.
neonble'ın noktası da bir başka harika nedendir; HTML'yi CSS satır içi ekleyerek dağıtırsanız oluşturma sorunu olur. HTML kodunuza istisnalar atmaz. Bunun yerine söner ve en iyi şekilde işler ve devam eder.
Bir stil sayfası kullanarak web standartlarına uymak daha iyi bir web sitesi sağlar. Ve yardıma ihtiyacınız olduğunda, sayfanızdaki şeyler tam olarak istediğiniz şekilde olmadığından, CSS'nizi kafanın aksine kafaya yerleştirmek, kendiniz ve yardım istediğiniz herkes için çok daha iyi sorun giderme sağlar.
İki çelişkili cevap:
Bağlantı etiketindeki MDN sayfasından :
Bir
<link>öğe , body-ok olan bir bağlantı türüne sahip olup olmamasına bağlı olarak<head>veya<body>öğesinde oluşabilir . Örneğin, stil sayfası bağlantı türü gövde-tamamdır ve bu nedenle<link rel="stylesheet">gövdede a'ya izin verilir. Ancak bu en iyi uygulama değildir;<link>elementlerinizi vücut içeriğinizden ayırmak ve onları kafanıza koymak daha mantıklıdır .
CSS'den Kesin Kılavuz (4. Baskı / 2017) sayfa 10
Harici bir stil sayfasını başarıyla yüklemek için, bağlantının başlık elemanının içine yerleştirilmesi gerekir, ancak başka bir öğeye yerleştirilemez.
Ne fark eder ki?
Artıları: Belirli kodları belirli yerlerde uygulamak bazen daha kolay, özellikle kod anında üretiliyorsa (php yoluyla bina oluşturmak ve dinamik olarak boyutlandırılmış bir listenin her biri kendi sınıfına ihtiyaç duyar ... dönüşümler için öğe zamanlamaları gibi).
Eksileri: Biraz daha yavaş, uzak gelecekte bir gün çalışmayabilir.
Genel fikrim: Yapma, zorunda değilsin, ama eğer zorundaysan, üzerinde uykuyu kaybetme.
<style>Vücuda koymak, tüm modern tarayıcılarla iyi çalışır.
Bunu eBay'de kullanıyordum.
Eğer çalışırsa, tekme atmayın.