Stilin HTML'de neden doğrudan yapılmaması gerektiğini açıklama

ItamarG3 08/29/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Kısa süre önce nin html'den bu siteye göre kullanımdan kaldırıldığını fark ettim. Yığın Taşması hakkındaki bu cevaptan , çerçeve değiştirme CSS'den yapılır. Değişikliğe verilen açıklama html'in belge yapısı ile ilgili olduğunu ve bu düzen ve animasyon ve stilin CSS'den yapılması gerektiğidir.

Bu beni düşündürdü:

Bir html etiketinin style özniteliğini ayarlama ile öğrencilerin CSS ve HTML'ye katılma konusundaki anlayışlarını arttırmak için yararlı CSS kullanarak yapmanın arasındaki farkı açıkça öğretmek ister misiniz?

Daraltmak için, açıkça öğretmenin öğrencilerin web sayfalarını nasıl daha kolay stil yapabileceğini gösteren örnekler veya açıklamalar arıyorum. Tercihen bir açıklama.

"Açıkça öğretmek" demek istediğim, aslında ".CSS ile şekillendirme" veya benzeri bir başlık ile ders vermek.

İhtiyaç duyulması halinde bazı bağlam:

Öğrenciler temel web tasarımını öğreneceklerdir: HTML, JavaScript (çok basit), JSP ve SQL. Bunları 1 yıl boyunca öğrenirler ve yıl sonunda bir web sitesine sahip olurlar (hangi derece alıyorlar). CSS hakkındaki bir dersin sonuçta daha iyi görünen web sitelerine neden olup olamayacağını merak ediyorum.

5 Comments
3 Puppy 07/30/2017
Buradaki temel sorun, stilin doğrudan HTML'de yapılmaması gerektiğini ve CSS kullanmanın daha iyi olduğunu varsayıyor olmanız. Bu şeylerden hiçbiri doğru değil.
ItamarG3 07/31/2017
@Puppy de, sorunun bir parçası da ayrı ayrı öğretmem mi gerekiyor. Bunu yapmazsam, stil sayfalarını kullanmazlar. Ancak herhangi bir web sitesinin herhangi bir yeri aslında html'deki tüm css kodlarını hardcodes eder mi? Every div , style özelliklerinde bir dağ dağına sahip mi?
1 David Spence 07/31/2017
Bu site css'i ayrı tutmanın gücünü gösterir. Csszengarden.com - Aynı yapı, farklı css stil sayfası.
ItamarG3 07/31/2017
@DavidSpence hoştur. Kesinlikle şunu kullanacağım
1 no comprende 07/31/2017
Ne yaparsanız yap, onlara HTML'yi Regex ile ayrıştırma konusunda bu kadar SO defteri gösterme . Onlara kabuslar verebilirim!

12 Answers


richard 07/30/2017.

Birkaç stil sayfası üretme fikrinden ve öğrencilerin HTML'ye uyguladıklarından hoşlanıyorum. Daha sonra ayrı stil sayfalarına sahip olma gücünü görebilirler.

Daha sonra stil sayfalarını düzenlemeye başlarlar ve bir küçük değişikliğin gücü her bir başlığı veya her paragrafı değiştirebileceklerini görebilirler.

Geçmişte, alt kısımda bir dizi düğme bulunan bir HTML dosyası yazmıştım. Bu düğmeler farklı bir CSS dosyasının yüklenmesini tetikler. Bu çok basit bir JavaScriptdi.

Ayrı tutulmaları gerekiyorsa cevap vermek

Stil ve içeriği ayrı tutmak, W3 ve diğerleri tarafından önerilir. Endişelerin ayrılması ve tek sorumluluk uygular. Yazılım tasarımında hem çok önemli kalıplar.

Cevaplamak için, ayrı CSS dosyaları için bir ders vermelisiniz.

Evet. Bunları ayrı tutmak önemlidir, öyleyse öğrencilere onları ayrı tutmalarını öğretmelisin. Onu HTML ile karıştırmak için öğretmeyin, zamandan tasarruf edin (Öğretmek zorunda kalmayacağınızdan bu iki kez zamandan kazanacaktır).


Bunu yalnızca bir ya da iki kişiyle yaptım (bir sınıf değil).

5 comments
ItamarG3 07/30/2017
Bu ikinci paragraf özellikle faydalıdır. Ancak bu, satır içi html style nitelikleri yerine bir css stil sayfası nasıl ve niçin yazması gerektiğini öğretmek için gerçekten bir ders vermeliyim mi diye cevap vermiyor.
richard 07/30/2017
If'e kısmi bir cevap ekledi ve neden ona bir ders vermeye çalıştım.
1 Buffy 07/30/2017
Öğretmenin öğretilmesinin herkesin vaktini boşa harcamak olduğunu kabul ediyorum. Kötü alışkanlıklar inşa edilmeden ve güçlendirilmeden önce yanılgılarını yakalamak en iyisidir.
1 richard 07/30/2017
@tim, bu sadece bir yük optimisation . Kavramsallık hala ayrı kalmalıdır. Ancak Google aynı dosyayı koymak diyor. Her bir biti ayrı ayrı biçimlendirmeniz gerektiğini söylemiyorlar. Css dosyasındaki nesneleri alıp html'nin <style> bölümüne eklemelisin diyorlar.
1 Darren 07/31/2017
Öğrencilere kodlarını etkileyen çeşitli stil sayfaları vermek yerine, bunun tersini de deneyeceğim. Onlara satır içi stilleri HTML olarak öğrettikten sonra onlara bir CSS belgesine dayanan ve stilleri için kendi stil sayfalarını yapmalarını isteyen bir sayfa verin (satır içi HTML'yi kullanarak öğrendikleri teknikleri kullanarak - sadece stilleri etiketleme meselesini kullanın) Ve onları bir araya getirerek). Ardından, sınıftaki herkes kendi stil sayfalarını ortak bir test konusuyla (karşılaştığınız kitapta) karşılaştırabilir ve olasılıklarını görebilir.

Buffy 07/30/2017.

Yalnızca basit ve geçici olan ve gelecekte asla değişmeyecek bir sayfa oluşturmak istiyorsanız ve yalnızca bir tür cihazda görülebilecekse, şüphesiz, stili doğrudan html'ye yerleştirin. Bir cevap almak için tek bir cihazda bir kez çalıştırılacak bir program yazarken aynı, daha sonra program geçersiz olur. O halde, dikkatli bir şekilde kodlamaya gerek yoktur. "Çabuk ve kirli" böyle şeyler için çalışıyor.

However işler değişir ve web sayfaları, ekran boyutları değişen, hatta renk modelleri olan cihazlarda görüntülenir. Ve gelecekte, henüz bulunmayan cihazlarda görülebilirler.

Öyleyse, önemli ve kalıcı olan ve gelecekte de korunması gereken siteleri oluşturmak isterseniz, CSS kullanın. Muhtemelen önemli bir C programını main , ancak en azından aynı olması gereken ama tekrar kullanılan şeyleri çarpıtacaktır. Basit C programlamasında bunun için fonksiyonları çarpıtmaktayız. HTML'de şekillendirmeyi etkileriz. Daha derin bir düzeyde, sunucu tarafı da verilerin çoğunu vb. Faktörlere neden olur. Bu, aynı kalması gereken şeyleri, aynı kalmayı ve diğer düzeylerden bağımsız olarak bir tasarım seviyesini değiştirmemizi sağlar.

Bu tam olarak aynı şey değil, ancak Google'ın ön sayfasının temel koduna bakın. Bunları bir arada tutmak ve korumak için neyi kullandıklarını bilmiyorum, ancak bunun bir metin editörü olduğundan şüpheliyim. Sayfa düzeninin inanılmaz derecede basit olmasına rağmen, ön sayfalarının sık sık değiştiğini unutmayın.

Note to the Instructor Öğrencinin çalışmalarına not vermeye hazır olduğunuzda farklı ekran çözünürlükleri ile çeşitli cihazlarda görüntüleyebilirsiniz. Bununla birlikte, ayrıca cihaz başına css sağlamalarını sağlıyorsunuzdur.

Bu konuda, masaüstündeki StackExchange sayfalarından birine karşı bir telefon görüntüleyebilirsiniz. Ve bir şok için, bazı sayfaların kaynak ve stil sayfalarına bakın.

2 comments
1 Luke Sawczak 07/31/2017
Fonksiyonlarla karşılaştırma iyidir. Sanırım söz konusu günahın doğrudan kaynak HTML'de stil nitelikleri sağladığı düşünülmektedir. Eğer öyleyse, bir yöntemin gövdesini alıp yöntemi çağırdığınız yere yapıştırabilirsiniz. Aşırı derecede verimsiz.
no comprende 08/01/2017
Gerçek bir şok için, Microsoft sayfalarının ve Moodle kaynak ve stil sayfalarına bakın! Yüzlerce satır uzunluğunda olabilirler. Orijinal HTML kavramı "henüz var olmayan" aygıtlarda çalışmasıydı. Ve şu an çok fazla ekran boyutu var ve bu da yalnızca bir değişken olabilir.

AnoE 07/30/2017.

Onların CSS ile tek başına neler yapabileceğini anlamalarını sağlamak için - only başka bir CSS dosyasını değiştirerek - CSS Zen Bahçesine götürün. Her sayfa için tam olarak aynı HTML ve only .css dosyası değiştirildiğinde saçma vahşi sayfalar elde edersiniz. Sakin küçük hiçlikten 3D kaydırmalı küplere kadar ...

Sonra onlara, beceri setinin HTML'yi yapması gerektiğini, bunun yerine (özellikle de aşırı gibi) beceri setinin CSS çok farklı olduğunu ve HTML'nin sadece bilgi taşıyıcı olarak işlev gördüğünü açıklayın.

Aynı şekilde, aynı HTML'nin yüksek sesle konuşulduğunda "nasıl göründüğünü" göstermek için, kör kullanım için sınırlı bir ekran okuyucu (kör için) yüklemek de faydalı olacaktır.

Ayrıca, görme özürlüler için kullanılan bu araçların, örneğin yapılandırılmışsa, HTML'den link metinleri vb. Çıkarabildiklerini ve bu da yalnızca bir sayfa ile gezinmenizi mümkün kıldığına dikkat çekiyor; Görme iyi olmasına rağmen çok eğimli.

Son olarak, içeriğin ve stilin iyi ayrılmış olduğu bir sayfanın, taşınabilir aygıtlarda çalışmak için daha yüksek bir şans olduğuna dikkat edin - anahtar kelime, içeriğin gerektiğinde herhangi bir çözünürlüğe özgürce akışı olabilen yanıt veren tasarım olmasıdır.


thehayro 07/30/2017.

Daraltmak için, açıkça öğretmenin öğrencilerin web sayfalarını nasıl daha kolay stil yapabileceğini gösteren örnekler veya açıklamalar arıyorum. Tercihen bir açıklama.

Richard'ın söylediği gibi, öğrenciler stildeki basit bir düzenlemenin her unsuru nasıl değiştirebileceğini görebilirler.

Örnek olarak, öğrencilerinizin stilin html'den ayrılmasının faydasını hissetmelerine izin verebilirsiniz. Bu da demektir ki, bazı öğeleri (örneğin, elemanın arka planını renklendirmek) html'sinde stil oluşturması gereken bir egzersiz yapmalısınız. Daha sonra her elementi başka bir renge çevirelim. Ders, stili html'den ayırırsanız, bu görece çok daha az zaman harcayabileceğini anlamalarını sağlamaktır. Daha sonra, tüm öğelerin arka plan rengini değiştiren CSS'deki bir satırı nasıl değiştireceğinizi gösterebilirsiniz.

4 comments
thesecretmaster♦ 07/30/2017
Selam thehayro! Bilgisayar Bilimi Eğitimcilerine Hoş Geldiniz!
Puppy 07/30/2017
Alternatif olarak, kodlarını aklı başında bir kişi gibi kullanarak HTML'lerini üretebilirler; bu durumda, her bir öğenin rengini ayrı stil sayfaları olmadan değiştirmek önemsizdir.
1 thehayro 07/30/2017
Emin. Bu, web sayfasının görüntülenmesi gereken koşullara (mobil / masaüstü) göre değişir. Ancak şunu anladığım kadarıyla, HTML ve CSS ayrımına neden ve nasıl bir ihtiyaç olduğunu açıklayacaktım.
no comprende 08/01/2017
CSS öğrenirken kendime büyük boyutlu bir satranç tahtası oluşturma görevleri ve üstbilgi ve altbilgi ile kanonik bir üç sütunlu sayfa düzeni verdim.

SpiritBH 07/31/2017.

Kendinize şu soruyu sorun: Neden her hangi bir kod biçiminde bir şeyi birbirinden ayırmalıyız?

Neredeyse her programlama / betik dili içinde ayrılık ve delegasyon vardır. Tüm kodları daha kolay takip edebildiğinden ve sorunları daha kolay tanımlayabildiğinden emin olmak için bunu yaparız (kaçınılmaz olarak filizlenir, çünkü hiçbir programcı inanılmazdır)

Bence CSS üzerinde özel bir ders yapmak iyi bir fikirdir, çünkü onlardan sorumlu olanı anlamalarına yardımcı olur. Kaynağa baktığınızda tüm HTML doğruysa ancak tüm makyaj hala karışık ise, CSS'ye bakmaları gerekir.

Bunun üzerine CSS, geniş, esnek ve her şeyde hoş bir sınır koymaktan çok daha fazlasını yapabiliyor. Sınıfın neler yapabileceğini ve ne kadar karmaşık olabileceğini göstermek için, HTML ve CSS'yi çok derinden harmanlamanın akıllıca olmadığı noktayı ileriye taşıyacaktır.

Sonuçta, CSS'nin HTML'den ayrılması (veya bu konuda herhangi bir kod) bir geliştirme mevzuatıdır; Onun oluşturulmasıyla ilgili değil (daha iyi), geliştiricisi kendi yaratımı üzerinde daha fazla ve daha kolay denetime sahip olmakla ilgilidir.

Belki de denemek ve sınıfın birbirlerini kontrol etmesini sağlamak istediğiniz notta, bir ekiple çalışırken temiz delege kod verilmesinin nasıl önemli olduğunu görmelerine yardımcı olur.

1 comments
ItamarG3 07/31/2017
Çok ilginç bazı noktalar yükseltirsiniz. Teşekkürler! Ve Bilgisayar Bilimleri Eğitimcilerine Hoşgeldiniz

gabe3886 07/31/2017.

Buna biraz farklı şekilde bakmak, DRY kodunu tanıtmak olabilir (Yinelemeyin).

Stili yapmak için CSS'yi kullanarak, bir HTML öğesine yalnızca bir sınıf ekleyerek stilin tutunmasını sağlamanız gerektiğini bilirsiniz. Elle hepsini eklemek zorunda kaldıysanız, o zaman bir parçayı değiştirmeniz gerektiğinde, çok daha fazlasını değiştirmelisiniz.

W3 Okullarından illüstrasyon fikrini çalmak için, paragrafların farklı arka plan renklerine sahip olmasını isterseniz, bunu şu şekilde yapabilirsiniz:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Ancak siparişi 2,4,3,1 değerine kadar değiştirmek, ancak boyayı korumak istersem, her bir etikete yerleşik stillerin tümünü değiştirmem gerekiyor. Bu birden fazla sayfaya yayılmışsa iş yükü büyük olabilir.

CSS'de yaptım, aşağıdakileri yapabilirim:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Şimdi artık içeriğin ne olduğunu umursamıyor, onlara nasıl olduğumu ve stilin hala çalıştığını emrediyorum. Çok çaba değişti. Siparişi yoksayarak, daha mantıklı renklere dönüştürmek istediklerinden kolayca okunabilir hale getirmek istedim, CSS'deki değeri bir kez değiştirdim ve eşleşen her DOM öğesine uygulandı.

Bunun ötesinde (CSS, kafa etiketinde HTML içine gömülebilir) bir dosyaya bölmek ve buna dahil olmak demek, benim (şimdi daha mantıklı) CSS'yi çeşitli dosyalara, her biri için klasör yapılarına tekrarlamak zorunda kalmamı sağlaması anlamına geliyor Sahip olduğum sayfa. CSS dosyasını başlığa ekledim ve stiller yürürlüğe girdi. Şimdi renklerde değişiklikler yapmam gerekiyorsa veya ek stiller eklersem, satır içi stilleri kullanmamam gerektiğinde kopyalanmamamla aynı yararları elde ederim.

Ayrı sorumluluklardan uzakta, ayrı bir dosyaya sahip olmaktan elde edilen bir diğer yararı performans. Tarayıcılar dosyaların önbelleğe alınmasında oldukça başarılıdır; bu nedenle, siteye tek tek (ideal olarak küçültülmüş) bir CSS dosyası indirirse, daha sonra tekrar uygulayabilir, diğer sayfalar için indirilecek daha az şey olur. Performans, özellikle mobil taramadaki artışla birlikte insanlar için daima bir göz olmalıdır. Bir web sayfasında bir sürü CSS varsa, kaynak doğal olarak büyüktür. Bu indirme ve / veya kullanılabilir hale gelmek için daha uzun sürüyor; bu da beklemenin kabul edilemez hale geldiği anlamına geliyor.


ncmathsadist 08/01/2017.

Web sayfasında üç katman bulunduğunu öğretiyoruz: yapı, görünüm ve davranış. Yapı, iyi oluşturulmuş HTML5 biçimlendirmesiyle oluşturulmuş DOM tarafından belirlenir. HTML'yi öğrendiğimizde hemen bir belge ağacı çizmeye başlarız, böylece bir sayfadaki öğelerin birbirleriyle nasıl ilişkili olduğunu anlayabiliriz.

Görünüm, sayfayı biçimlendirmek ve stil oluşturmak için DOM'a erişen CSS tarafından belirlenir. Bu, ilgili bir sayfa grubu tarafından paylaşılabilmesi için ayrı bir dosyada saklanır. HTML, id ya da class kullanarak ad hoc durumları ele alır. Bunları kullanmak, sayfaları korumayı kolaylaştırır, çünkü bu nitelikleri taşıyan öğeler için stil bir CSS dosyasında one place yapılır.

Üçüncü katman, bir JavaScript dosyasında görünmesi gereken davranıştır. JavaScript'in bir sayfada never görünmesi gerekmez; olayları işleme kodundan işlev çağırmak için kaydedin. Hatta bu bir JS dosyasına eklenebilir. Öğrencilerinizin load olayları ve load erkenden bildiklerinden emin olun, böylece sayfa öğeleri bulunana kadar kod çağrısını geciktirebilirler.

Düğüm'ü yüklerseniz, komut satırında JS kodu testleri çalıştırabilir ve oluşturduğunuz işlevler için test süitleri geliştirebilirsiniz.

Üç katmanı ayırmak şeyleri düzgün kılar ve kodun yeniden kullanılmasını en üst düzeye çıkarır.


user1639154 07/31/2017.

Buradaki birçok cevap, stil konusundaki kalıtım noktasına değinmemektedir, çünkü bu da öğretilmelidir. Temel kural, son okunan şeyin uygulanacağıdır.

Yüklenecek ilk önce belgenin başındaki dış sayfa olur. Belgenin başında bağlantı verilen bir stil sayfası, html gövdesinde yer alan stiller tarafından üstesinden gelecek ve doğrudan sırayla DOM öğesine yerleştirilen stiller tarafından geçersiz kılınacaktır. ! Important etiketi de bu davranışı değiştirmek için kullanılabilir.

Çoğu, tüm css'lerini kendi dosyasına koyar çünkü bakımı daha kolaydır ve güncellendiğinde / değiştirildiğinde fazla çalışma gerektirmez.

DÜZENLEME: Biraz daha açıklığa kavuşturmak için, satır içi metnin altını çizmek için bir stil eklerseniz, sınıflar içinde birbiriyle çakıştıracak / geçersiz kılacak, yalnızca eşleşen belirli stiller olur; bu, sınıfın harici sayfadaki sınıfta değildir. Örnek sadece ekstra stil katacak. Sınıflar doğrudan birbirlerinin yerini almaz, birbirlerine karışırlar.

5 comments
1 ItamarG3 07/31/2017
Vay. Bilgisayar Bilimleri Eğitimcilerine Hoşgeldiniz. Bu gerçekten düşünmediğim bir şey. Bunu gösteren bazı örnekler veya açıklamalar eklerseniz sevinirim. (Kendim yazabilirim, ancak düşünebildiğini görmek daha çok ilgileniyorum). Bu gerçekten ilginç bir cevap :)
1 ItamarG3 07/31/2017
İlişkisiz: neden turumuza katılmıyorsun? Eminim ilginç buluyordur.
user1639154 07/31/2017
Biraz yanlış aldım, önce dış stil sayfasını, daha sonra belge stillerini ve ardından öğe üzerinde, beynim asla sabahın sabahında% 100 olmadı. :)
ItamarG3 07/31/2017
affet ve unut ;). Cevabınızı düzenleyebilirsiniz. Doğrudan cevabınızın altında bir edit düğmesi \ link var. Siz buna hazırlanırken, cevabınızın ne ifade ettiğini göstermek için bir örnek eklemek ister misiniz? Gerçekten çok daha iyi bir cevap haline getirir: D
user1639154 07/31/2017
Maalesef şu an vaktim yok. Sadece css'in önemli bir unsuru olduğu için, css'in kalıtımından bahsetmek istedim.

rackandboneman 08/03/2017.

Sonuçta same document İKİ tamamen farklı görünümleri olan bir proje yapın, örneğin büyük bir monitörde harika görünen bir sürüm ve bir iPhone'da mükemmel görünen başka bir sürüm.

Statik bir web sayfası değil, bilgisayar tarafından üretilen güncelleştirilebilir belgeler kullanmak, belgeyi oluşturan kişiye stil bilgisi katarak görsel açıdan daha karmaşık hale getireceği için stil ile karışıklık yaratmak için yalnızca belge generator Ilgili tüm güçlükler veya tam da stylesheet olan stylesheet . Daha da iyisi: Doküman oluşturmayı ve stil sayfası kısımlarını yapmak için odanın ayrı köşelerinde two grup atayın - ve spesifikasyonların ikisi arasında nasıl iletildiğini düzenleyin.

4 comments
ItamarG3 08/03/2017
Bu inanılmaz. Vay.
rackandboneman 08/03/2017
Peki, bunu inanılır yapın.
ItamarG3 08/03/2017
Açıklayamayacağım koşullarla ilgili bir sorunu çözdüğü için inanılmaz (okul işleri), ancak soruyu exactly ele almamaktadır ...
1 rackandboneman 08/03/2017
Oh ve tartışmada öğretmen değil, aynı zamanda bir BT uzmanı gibi davranmaya başlıyorum - anlattığım şey, işte, öğretmek istediğiniz teori gibi, neden işin bittiğidir :)

Chris M. 08/02/2017.

Burada çok sayıda iyi cevap var. Henüz görmediğim bir nokta, içeriğin ve tasarımın genellikle ayrı kişiler veya ekipler tarafından oluşturulması ve böylece her biri kendi araçları ve dili ile tanımlanarak gerekli ayrı iş akışlarına izin verilmesidir.

4 comments
ItamarG3 08/02/2017
Vay. Ben bunu düşünmemiştim. Bunu, CSS stil sayfalarını kullanmayla ilgili ayrı bir derste nasıl açıklayabileceğim üzerine biraz genişletebilir misiniz?
Chris M. 08/02/2017
Bir benzetme kullanardım. Otomotiv mühendisleri araba renklerini seçmezler. Senaristler genellikle kostüm tasarımı yapmazlar.
ItamarG3 08/02/2017
Anlıyorum. Belki cevabı, cevabı düzenleyerek benzetmeleri dahil etmeniz gerekir.
1 Buffy 08/03/2017
Aslında bundan daha kötüdür. Önemli bir web varlığı olan bazı büyük şirketlerde, hem içerik hem de düzen ekipleri üzerinde oturan bir standart ekibi var. Düzen standart dışı bir piksel ise, bunu baştan yaparsınız. Bir piksel.

thesecretmaster 08/03/2017.

Satır içi stillerin kötü olmasının önemli bir nedeni, kodun okunabilirliği, basit ve basittir. Bu durumda, bu noktayı kanıtlamak için bir örnek yeterlidir:

  
The Title
This is a super great article

Nazaran:

  
The Title
This is a super great article

Bu örneğe ek olarak, sınıfları ve kimlikleri kullanmadan DOM'u javascript kullanarak daha zor hale getiriyorsunuz ve sahte elemanlar ve bazıları gerçekten güzel CSS seçicilerinin imkansız hale getiriyorsunuz :nth-child() ve :first-child , birkaç isim.


Puppy 07/31/2017.

Tamamen katılmıyorum - stil HTML'de doğrudan yapılmalıdır.

Birincil sorun, stilin uzaktan HTML yapısından bağımsız olmadığıdır. Stilleri fiziksel olarak ayrı bir dosyaya yazmanız bunu değiştirmez. İyi bir örnek, mobil cihaz desteğidir. Teorik olarak, bir mobil CSS dosyası oluşturabilirsiniz. Ancak gerçekte, muhtemelen bir mobil cihazda iyi bir deneyim elde etmek için tamamen ayrı bir kullanıcı ara yüzü tasarımına ve ardından bunu desteklemek için ayrı bir HTML yapısına ve ardından ayrı bir stil setine ihtiyacınız olacaktır. "Düğmeyi aynı yapın ancak biraz daha küçük yapın" yalnızca en küçük parçalar için çalışır.

Doğru UI'yi üretmek, ihtiyaç duyduğunuz stilleri destekleyen HTML yapısını üretmeyi içerir. Aslında ikisi birbirine yakından bağlı olduğundan, onları kolonileştirmek, şeylerin anlaşılması kolay ve hepsini tek bir yerde yapar.

Dahası, kodunuzu kullanarak HTML'nizi ürettiğiniz varsayıldığı için, kod üreticiniz bütün gün stilleri tüketebildiğinden, çoğaltılan stiller içeren HTML üretirken sorun yaşamazsınız.

Çiğ CSS'ye sahip olmak, stiller tamamen rastgele ve küresel kapsamda olduğundan ve yeniden kullanımı zor olduğundan büyük problematiktir. Hiç kimsenin kullanmadığı umuduyla sınıf ismini veriyorsunuz. Bu sorunu biraz çözmeye çalışmak için kendi sınıflarınızı bu öğenin içersinde yerleştiriyorsunuz, ancak şu anda doğru DOM yapısında olmadığı için bu sınıfları başka yerlerde tekrar kullanamazsınız. Sonra, sayfanızın tamamen ayrı bölümündeki bazı rastgele adamın size bildirmeden sınıfınızı kullandığını ve şimdi stilinizi değiştirerek parçaladığınızı öğrenebilirsiniz. Ve tür denetimi, IDE desteği, vb. display: -webkit-flex iyi şanslar. Örneğin, parametreleştirilmiş sınıflar oluşturmak veya değiştirmeleri genel olarak uygulamak zordur, örn display: flex with display: flex ve display: -webkit-flex for iOS.

Stilleri başa çıkmanın doğru yolu, diğer kodlarda olduğu gibi onlarla başa çıkmaktır; bunları bazı işlevlerde kapsüller.

5 comments
1 thesecretmaster♦ 07/31/2017
Selam Köpek, Bilgisayar Bilimleri Eğitimcilerine hoşgeldiniz! Başka bir köpekle tanışmak isterseniz sohbet ettiğinizde buldog kim olan Buffy'ye merhaba diyebilirsiniz. Bu ilginç bir cevap, burada görüşünüzü paylaştığınız için teşekkür ederiz!
2 richard 07/31/2017
Söylediğin her şeye katılmıyorum. Meselenizi anlıyorum. Özellikle son satır (bence bunu genişletmelisin). Nasıl yapılacağını düşündüğünüzü bize gösterin. % 100 katılıyorum olmasa bile bir şeyler öğrenebiliriz.
no comprende 08/01/2017
Cevaben bana bir soru soran zamanı hatırlatıyor ve birisi "Latince Kütüğü okursanız" dedi. İşleri yapmak için pek çok 'doğru' yol vardır ve bakış açınızdan üretilen HTML ile gerçekten fark etmez. Ancak çoğu eğitmen, oluşturulan HTML öğretmez, tıpkı çoğu programcı derleyiciyi nasıl yazacağınızı öğrenmezler. HTML dosyalarının bakımını kolaylaştırmak için eklediğimiz katman, HTML'yi atmakla gereksizdir. Ben de bir şeyler üretmekten hoşlanıyorum, fakat çok geniş bir azınlığa sahibim. Belki Alan Adı Belirli Diller hakkında bir ara konuşabilir miyiz?
Puppy 08/01/2017
Üretilen HTML öğretmeyen öğretmenler yararlı HTML öğretmiyorlar.
ItamarG3 08/02/2017
@Puppy öyle değil mi?

HighResolutionMusic.com - Download Hi-Res Songs

1 (G)I-DLE

POP/STARS flac

(G)I-DLE. 2018. Writer: Riot Music Team;Harloe.
2 Ariana Grande

​Thank U, Next flac

Ariana Grande. 2018. Writer: Crazy Mike;Scootie;Victoria Monét;Tayla Parx;TBHits;Ariana Grande.
3 Imagine Dragons

Bad Liar flac

Imagine Dragons. 2018. Writer: Jorgen Odegard;Daniel Platzman;Ben McKee;Wayne Sermon;Aja Volkman;Dan Reynolds.
4 Backstreet Boys

Chances flac

Backstreet Boys. 2018.
5 Clean Bandit

Baby flac

Clean Bandit. 2018. Writer: Jack Patterson;Kamille;Jason Evigan;Matthew Knott;Marina;Luis Fonsi.
6 BTS

Waste It On Me flac

BTS. 2018. Writer: Steve Aoki;Jeff Halavacs;Ryan Ogren;Michael Gazzo;Nate Cyphert;Sean Foreman;RM.
7 Fitz And The Tantrums

HandClap flac

Fitz And The Tantrums. 2017. Writer: Fitz And The Tantrums;Eric Frederic;Sam Hollander.
8 BlackPink

Kiss And Make Up flac

BlackPink. 2018. Writer: Soke;Kny Factory;Billboard;Chelcee Grimes;Teddy Park;Marc Vincent;Dua Lipa.
9 Calum Scott

No Matter What flac

Calum Scott. 2018. Writer: Toby Gad;Calum Scott.
10 Lady Gaga

I'll Never Love Again flac

Lady Gaga. 2018. Writer: Benjamin Rice;Lady Gaga.
11 Kelly Clarkson

Never Enough flac

Kelly Clarkson. 2018. Writer: Benj Pasek;Justin Paul.
12 Imagine Dragons

Machine flac

Imagine Dragons. 2018. Writer: Wayne Sermon;Daniel Platzman;Dan Reynolds;Ben McKee;Alex Da Kid.
13 Diplo

Close To Me flac

Diplo. 2018. Writer: Ellie Goulding;Savan Kotecha;Peter Svensson;Ilya;Swae Lee;Diplo.
14 Cher Lloyd

None Of My Business flac

Cher Lloyd. 2018. Writer: ​iamBADDLUCK;Alexsej Vlasenko;Kate Morgan;Henrik Meinke;Jonas Kalisch;Jeremy Chacon.
15 Ashley Tisdale

Voices In My Head flac

Ashley Tisdale. 2018. Writer: John Feldmann;Ashley Tisdale.
16 Bradley Cooper

Always Remember Us This Way flac

Bradley Cooper. 2018. Writer: Lady Gaga;Dave Cobb.
17 Halsey

Without Me flac

Halsey. 2018. Writer: Halsey;Delacey;Louis Bell;Amy Allen;Justin Timberlake;Timbaland;Scott Storch.
18 Little Mix

Woman Like Me flac

Little Mix. 2018. Writer: Nicki Minaj;Steve Mac;Ed Sheeran;Jess Glynne.
19 Little Mix

Told You So flac

Little Mix. 2018. Writer: Eyelar;MNEK;Raye.
20 Frida Sundemo

Apologize flac

Frida Sundemo. 2018.

Related questions

Hot questions

Language

Popular Tags