解释为什么样式不应该直接在HTML中完成

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

我最近注意到根据这个网站已经从html中弃用了 。 从堆栈溢出的这个答案 ,选取框替换是由CSS。 给出的变化的解释是,html是关于文档结构,布局和动画和样式等应该从CSS完成。

这让我想到:

是否明确地教导了设置html标签的style属性与通过CSS实现CSS之间的差异,对于提高学生对CSS和HTML连接的理解有用?

为了缩小范围,我正在寻找示例或解释如何明确教授它可以让学生更容易地设计他们的网页 。 最好是解释。

通过“明确教学”,我的意思是实际上用“通过.CSS进行造型”或类似的标题进行教学。

有些情况下,如果需要的话:

学生学习基本的网页设计:HTML,JavaScript(非常基本),JSP和SQL。 他们学习这些为1年,在年底他们应该有一个网站(他们获得成绩)。 我想知道如果完全关于CSS的教训可能最终导致更好看的网站。

5 Comments
3 Puppy 07/30/2017
这里的核心问题是,你认为样式不应该直接在HTML中完成,并且使用CSS更好。 这些都不是真的。
ItamarG3 07/31/2017
好吧,问题的一部分是我是否应该单独教授它。 如果我不这样做,那么他们不会使用样式表。 但是,你认为任何地方的任何网站实际上硬编码所有的CSS在HTML? Every div在其style属性中Every div代码?
1 David Spence 07/31/2017
这个网站展示了保持css独立的能力。 csszengarden.com - 相同的结构,不同的CSS样式表。
ItamarG3 07/31/2017
@DavidSpence很好。 我一定会使用它
1 no comprende 07/31/2017
不管你做什么,不要向他们展示这篇关于用正则表达式解析HTML的帖子 。 可以给他们做噩梦!

12 Answers


richard 07/30/2017.

我喜欢制作几张样式表的想法,让学生将它们应用到他们的HTML中。 然后他们可以看到分开样式表的力量。

然后他们可以开始编辑样式表,并且看到一个小改变的力量可以改变每个标题或每个段落等。

我也在过去写过一个HTML文件,底部有一组按钮。 这些按钮会触发不同的CSS文件加载。 这是一些非常简单的JavaScript。

要回答他们应该分开

保持风格和内容的独立性,由W3和其他人推荐。 它实现了顾虑和单一责任的分离。 这两个非常重要的软件设计模式。

要回答你应该投入一课来分离CSS文件。

是。 如果把它们分开是很重要的,那么你应该教导学生将它们分开。 通过不教他们与HTML混合来节省时间(这样可以节省两次时间,因为您不必去解除它)。


我只有一两个人(不是班级)完成这个任务。

5 comments
ItamarG3 07/30/2017
第二段听起来特别有用。 但是,这并不能回答我是否应该真正投入教训来教导如何以及为什么要编写一个css样式表,而不是内联html style属性。
richard 07/30/2017
为If添加了部分答案,并为此添加了一个教训。
1 Buffy 07/30/2017
我同意,非教学是对每个人时间的特别浪费。 在坏习惯建立和加强之前,最好抓住误解。
1 richard 07/30/2017
@tim,这只是一个负载optimisation 。 它应该保持独立的概念性。 不过谷歌说的是把它放在同一个文件中。 他们并不是说你应该分开设计每一个位。 他们正在说什么可以在一个CSS文件中,并将其添加到HTML的<style>部分。
1 Darren 07/31/2017
与其给学生提供各种影响其代码的样式表,我会尝试相反的方法。 在向他们教授HTML中的内联样式之后,给他们一个依赖于CSS样式的页面,并要求他们为它制作他们自己的样式表(使用他们从使用内联HTML学到的相同技术 - 只需标注样式并把它们放在一起)。 然后,每个人都可以在一个共同的测试主题(您提供的)上比较他们的样式表并查看可能性。

Buffy 07/30/2017.

如果你只想构建一个简单且特设的页面,并且在将来永远不会改变,并且只会在某种设备上看到,那么确保将样式直接构建到html中。 当你编写一个只能在一台设备上运行一次才能得到答案的程序时,程序就变得过时了。 那么,没有理由仔细编码。 “快速和肮脏”适用于这种事情。

However事情确实发生了变化,并且在具有不同屏幕尺寸的设备上甚至颜色模型上查看网页。 未来可能会在尚不存在的设备上查看它们。

因此,如果您想构建重要且持久的网站,并且这些网站必须在未来得到维护,请使用CSS。 你可能不会编写一个重要的C程序,但至少可以将那些必须是相同但被重用的东西分解出来。 在简单的C编程中,我们将这些功能分解出来。 在HTML中,我们将样式化。 在更深层次上,服务器端也将大部分数据分解出来等等。这使得本来应该是相同的东西保持不变,并且让我们可以独立于其他层次修改一个设计级别。

这不完全相同,但请看一下Google首页的底层代码。 我不知道他们用什么来整合并维护它,但我怀疑它只是一个文本编辑器。 请注意,他们的首页 ,虽然布局非常简单,但经常变化。

Note to the Instructor当您准备好对学生的作业进行评分时,请使用不同的屏幕分辨率在各种设备上查看。 不过,我不建议你也让他们提供每个设备的CSS。

对于这个问题,查看桌面和手机上的一些StackExchange页面。 对于一个令人震惊的人来说,看一些页面的源代码和样式表。

2 comments
1 Luke Sawczak 07/31/2017
与功能的比较是好的。 我认为所讨论的罪是直接在源HTML中提供样式属性。 如果是这样,它可以被拿来作为一个方法的主体,并坚持你将要调用该方法的地方。 适得其反。
no comprende 08/01/2017
对于一个真正令人震惊的人来说,看一下微软网页和Moodle的源代码和样式表! 它们可以长达数百行。 HTML的最初概念是,它可以在“尚不存在”的设备上工作。 而且目前有这么多的屏幕尺寸,它可能只是一个变量。

AnoE 07/30/2017.

为了让他们真正理解你可以用CSS做什么 - only替换另一个CSS文件 - 把它们带到CSS Zen Garden 。 对于每个页面,使用完全相同的HTML, only .css文件被替换,您会得到荒谬的通配符。 从宁静的小虚无到3D滚动立方体......

然后向他们解释,制作HTML所需的技能,与CSS(特别是那些极端的CSS)的技能相比,差别很大,并且HTML仅作为信息载体。

更好的办法是安装一个屏幕阅读器(用于盲人) - 有一些免费使用有限的 - 向他们展示当大声说出相同的HTML“看起来”时。

还要指出,如果视觉障碍者的工具结构良好,那么这些工具可以从HTML中提取链接文本等,并且这也使得仅使用键盘导航页面成为可能 - 这对于如果即使视力良好,也是如此倾斜。

最后,指出一个内容和样式分离很好的页面在便携式设备上工作的机会更大 - 关键词是响应式设计,内容可以根据需要自由流入任何分辨率。


thehayro 07/30/2017.

为了缩小范围,我正在寻找示例或解释如何明确教授它可以让学生更容易地设计他们的网页。 最好是解释。

正如理查德所说,学生们可以看到一种风格的简单编辑如何改变每一个元素。

作为一个例子,你可以让你的学生“感受到”从HTML中分离风格的好处。 这意味着,给他们一个练习,他们需要在html中设置一些元素的样式(例如为元素背景着色)。 然后让他们将每个元素改为另一种颜色。 我们的教训是让他们明白,如果您将样式与html分开,则此任务可能会非常耗时。 然后,您可以演示如何更改CSS中的一行,这会更改所有元素的背景颜色。

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! 欢迎来到计算机科学教育工作者
Puppy 07/30/2017
或者,他们可以通过代码来生成他们的HTML,就像一个理智的人一样,在这种情况下,在没有单独的样式表的情况下更改每个元素的颜色是微不足道的。
1 thehayro 07/30/2017
当然。 这取决于网页应显示的要求(移动/桌面)。 但就我的理解而言,这个问题是如何解释为什么以及如何分离HTML和CSS。
no comprende 08/01/2017
当我学习CSS时,我给自己创建了一个可重新定义的棋盘的任务,以及带有页眉和页脚的规范三列页面布局。

SpiritBH 07/31/2017.

那么问自己:为什么我们要用任何形式的代码来分离任何东西?

几乎每一种编程/脚本语言都有分离和委派。 我们这样做是为了确保更容易跟踪所有的代码,并且能够更轻松地识别问题(由于没有程序员是绝对可靠的,所以不可避免地会出现问题)

所以我认为CSS上的专门课程是一个好主意,因为它可以帮助他们理解哪些是负责任的。 这有助于他们理解,如果所有的HTML在查看源代码时都是正确的,但所有的化妆仍然混乱,他们需要查看CSS。

最重要的是,CSS体积大,灵活,并且可以做很多事情,而不仅仅是围绕事物建立一个良好的边界。 为了向课堂展示它可以做什么,以及它可以获得多么复杂,将会将这一观点带入更深层次的地步,那就是如何将HTML和CSS融合得太深是不明智的。

最后,从HTML(或任何代码)分离CSS是一个开发指南; 它不是关于创建功能(更好)它关于开发人员更多,更容易控制他们的创作。

也许在这个笔记上你想尝试让班级互相检查其他人的工作,这将有助于他们了解在团队中工作时如何获得干净的委托代码是非常重要的。

1 comments
ItamarG3 07/31/2017
你提出了一些非常有趣的观点。 谢谢! 欢迎来到计算机科学教育工作者

gabe3886 07/31/2017.

一个稍微不同的看待它的方式可能是引入DRY代码(不要重复你自己)。

通过使用CSS来进行样式设计,您知道只需向HTML元素添加一个类,样式就会占据上风。 如果您必须手动添加全部内容,那么当您需要更改一个部分时,您需要更改很多甚至更多。

为了从W3学校窃取插图的想法,如果你想让段落具有不同的背景颜色,你可以这样做:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

但是,如果我想改变顺序,所以它是2,4,3,1,但保持着色,然后我必须更改内置到每个标签的所有样式。 如果这是跨越多个页面,那么工作量可能会变得很大。

如果我在CSS中完成,我可以执行以下操作:

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

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

现在它不再关心内容是什么,我可以订购它们,我喜欢它,样式仍然适用。 很多努力改变了。 忽略排序,如果我想将它们更改为更明智的颜色以便它们易于阅读,那么我会更改CSS中的值一次,并将其应用于每个匹配的DOM项目。

除此之外(因为CSS可以嵌入到head标签中的HTML中),将它分成一个文件并包含这个意思,我不必将我的(现在更明智的)CSS重复到各种文件中,直到每个文件的文件夹结构我有网页。 我将CSS文件包含在标题中,样式生效。 现在,如果我需要对颜色进行更改或添加其他样式,则可以获得不需要重复使用内联样式的功能。

具有单独文件的另一个好处是远离分裂责任,就是性能。 浏览器在缓存文件方面非常出色,所以如果它必须下载一个可以重新应用的网站的CSS文件(理想缩小版),那么下载其他网页就不那么简单了。 性能应该始终是人们的考虑因素,尤其是随着手机浏览量的增加。 如果一个网页中有很多CSS,那么来源自然很大。 这需要更长的时间才能下载和/或变得可用,这可能使人们无法接受,等待变得不可接受。


ncmathsadist 08/01/2017.

我们教导网页有三层:结构,外观和行为。 结构由DOM来确定,DOM由格式良好的HTML5标记创建。 当我们了解HTML时,我们立即开始绘制文档树,以便了解页面上的元素如何相互关联。

外观由CSS决定,访问DOM来格式化和设置页面的样式。 这是保存在一个单独的文件,以便它可以由相关的一组页面共享。 HTML处理使用idclass特殊情况。 使用它们可以使页面更容易维护,因为具有这些属性的项目的样式是在CSS文件中的one place制作的。

第三层是行为,应该出现在JavaScript文件中。 JavaScript never不需要出现在页面上,除了从事件处理代码调用函数之外。 即使这可以附加在JS文件中。 确保你的学生知道load事件并尽早load ,这样他们可以延迟调用代码直到存在页面元素。

如果你安装Node,你可以在命令行运行JS代码测试,并为你创建的函数开发测试套件。

分离三层可以保持整洁,并最大限度地重用代码。


user1639154 07/31/2017.

看起来,这里的许多答案并没有解决造型上的继承问题,因为这也应该被教授。 基本规则是最后读取的内容将被应用。

第一个加载通常是文档头部的外部表单。 在文档头部链接的样式表将被置于html主体中的样式覆盖,反过来,这些样式也将被直接放置在DOM元素上的样式覆盖。 !重要的标签也可以用来改变这种行为。

大多数人会把他们的所有CSS放入自己的文件中,因为它更容易维护,并且在更新/更改时不需要做太多的工作。

编辑:只是为了进一步澄清,它只是在相互冲突/相互覆盖的类中匹配的特定样式,如果内联添加样式以强调文本,这不属于外部工作表中的类例如它会添加额外的样式。 这些类不直接相互替换,而是相互融合。

5 comments
1 ItamarG3 07/31/2017
哇。 欢迎来到计算机科学教育工作者 。 这真的是我没有考虑过的事情。 如果你可以添加一些可以证明这一点的例子或描述,我会很喜欢它。 (我can自己写,但我更感兴趣的是看到你能想到的东西)。 这真的是一个有趣的回答:)
1 ItamarG3 07/31/2017
不相关:你为什么不参加我们的旅行 ? 我相信你会发现它很有趣。
user1639154 07/31/2017
我稍微弄错了,它的外部样式表,然后是文档样式,然后是元素,我的大脑在星期一早上从来没有100%。 :)
ItamarG3 07/31/2017
原谅和忘记 ;)。 你可以编辑你的答案。 在您的答案下直接有一个edit按钮\链接。 当你处理它时,你想添加一些例子来说明你的答案是什么? 它真的会使它成为一个更好的答案:D
user1639154 07/31/2017
不幸的是我现在没有时间。 我只想提及css的继承,因为它是css的重要方面。

rackandboneman 08/03/2017.

制作一个项目,其结果是两个完全不同的same document视图,例如一个在大屏幕上看起来很棒的版本,另一个在iPhone上看起来很棒。

使用不是一个静态网页,但计算机生成的,可更新的文档将推动更多的点,因为在文档生成器中嵌入样式信息将使其明显更复杂 - 唯一的选择混乱风格将要么改变文档generator所有麻烦涉及或stylesheet正是你想要的。 甚至更好:在房间的不同角落分配两组以完成文档生成和样式表部件 - 并规定两者之间如何传送规范。

4 comments
ItamarG3 08/03/2017
这难以置信。 哇。
rackandboneman 08/03/2017
那么,让它可信。
ItamarG3 08/03/2017
这是令人难以置信的,因为它解决了我无法透露的情况(学校的东西)的问题,但它并没有exactly解决这个问题......
1 rackandboneman 08/03/2017
噢,我在干扰讨论时不是老师,而是IT专业人员 - 我所描述的是为什么事情在实践中完成,就像您想要教的理论说的那样:)

Chris M. 08/02/2017.

这里有很多很好的答案。 我还没有看到的一点是,内容和设计通常由不同的人员或团队创建,因此每个人都使用自己的工具和语言来定义内容和设计,从而实现必要的单独工作流程。

4 comments
ItamarG3 08/02/2017
哇。 我没有想到这一点。 请介绍一下如何在关于使用CSS样式表的单独课程中解释这个问题吗?
Chris M. 08/02/2017
我会用一个比喻。 汽车工程师不会选择汽车颜色。 编剧通常不会做服装设计。
ItamarG3 08/02/2017
我懂了。 也许你应该通过编辑答案在你的答案中包含这样的类比。
1 Buffy 08/03/2017
其实它比这还糟糕。 在一些拥有重要网站的大型公司中,有一个标准团队位于内容和布局团队之上。 如果布局与标准相差一个像素,则可以结束。 一个像素。

thesecretmaster 08/03/2017.

内联样式不好的一个重要原因是代码的可读性,简单明了。 在这种情况下,一个例子应该足以证明你的观点:

  
The Title
This is a super great article

相比:

  
The Title
This is a super great article

除了这个例子之外,如果不使用类和标识符,使得使用javascript操作DOM变得更加困难,并且使得不可能使用伪元素和一些非常好的CSS选择器,例如:nth-child():first-child ,仅举几例。


Puppy 07/31/2017.

我完全不同意 - 样式应该直接在HTML中完成。

主要的问题是造型甚至不能独立于HTML结构。 只需将这些样式写入物理上独立的文件中并不会改变这一点。 移动设备支持就是一个很好的例子。 从理论上讲,你可以制作一个手机CSS文件。 但实际上,您可能需要完全独立的UI设计才能在移动设备上获得良好体验,然后使用单独的HTML结构来支持此设计,然后再使用单独的一组样式。 “使按钮相同,但稍小”只适用于最小的部分。

生成正确的用户界面涉及到生成支持所需样式的HTML结构。 因为这两者实际上是紧密结合的,所以让他们共处一点就能让事情变得容易理解,并且在一个地方。

此外,由于您大概是通过代码生成HTML,所以生成具有重复样式的HTML没有问题,因为您的代码生成器可以整天吐出样式。

原始CSS是非常有问题的,因为样式完全随机且在全球范围内,并且难以重复使用。 你希望没有人使用过它的类名。 您将自己的类嵌套到该元素中以尝试解决这个问题,但现在您不能在其他位置重用这些类,因为它们不在正确的DOM结构中。 然后你会发现,在你的网页的一些完全独立的部分,一些随机的家伙在没有通知你的情况下使用了你的课程,现在你已经通过改变你的风格来破坏它。 并且祝好运得到类型检查,IDE支持等。创建例如参数化类或全局应用替代品也很困难,例如display: flex display: flexdisplay: -webkit-flex for iOS。

处理样式的正确方法是像处理其他代码一样处理它们 - 在某些函数中封装它们。

5 comments
1 thesecretmaster♦ 07/31/2017
嗨小狗,欢迎来到计算机科学教育工作者 ! 如果你想要再见一只小狗,你可以和Buffy 聊聊 ,他是一个斗牛犬。 这是一个有趣的答案,谢谢你在这里分享你的观点!
2 richard 07/31/2017
虽然我不同意你说的一切。 我明白你的观点。 特别是最后一行(我认为你应该扩大这一点)。 向我们展示你认为应该如何完成。 即使我们不100%同意,我们也可以学到一些东西。
no comprende 08/01/2017
你的回答让我想起了我问一个问题的时间,而有人说:“如果你读了拉丁文的Mass。” 有许多“正确”的方式来做事,从你的角度来看,使用生成的HTML,确实没有什么区别。 但是大多数教师不会教导生成的HTML,就像大多数程序员不知道如何编写编译器一样。 我们添加的用于维护HTML文件更容易的层是多余的HTML文件。 我也喜欢创造事物,但我处于极少数。 也许我们可以在某个时候谈论域特定语言?
Puppy 08/01/2017
不教授生成的HTML的教师不会教授有用的HTML。
ItamarG3 08/02/2017
@Puppy是这样吗?

Related questions

Hot questions

Language

Popular Tags