详解Html/CSS中的符号学

所属分类: 网页制作 / CSS 阅读数: 860
收藏 0 赞 0 分享

本文从索绪尔语言哲学等理论高度认为不需要CSS中的class属性。

CSS的好处是:HTML元素可以在不依赖class属性的情况下实现各种风格的样式化,文章试图证明class属性是过时的,不适合于布局,不用class可以训练我们创建更多可用,可重用的内容。

如果同一类型的两个元素属于出现在相同的上下文中,则它们是相似的 ,怎么办?

索绪尔对语言作为一个系统的理解基于两种基本关系; 范式和语段(聚合关系和组合关系):

范式

范式是是一组词 ,具有功能相似性但在含义上有细微或根本的差异。比如“螃蟹位于龙虾旁边”,“位于”这个词属于一种替代词的范式,还可以代指包括“休息于”和“蹲伏于”以及“站立于”,这是一种替代关系。

在英语中替换有一定的规则,动词不能用名词替换,就像在HTML中一样,内联元素(表示内联这样的动作动词)不能总是用块级元素(名词)替换。

语段

一个语段基本上是一个由范式选择组成的结构段。在英语中,句子,段落,章节和书籍都是语段。在HTML中,由您选择的元素组成的代码块可以被视为一种语段。

每个语段都有自己的语义系统,较小的语段可以属于较大的语段系统,就像一个段落可以属于一个章节,

用处?

索绪尔的语言模型可以识别或写出数TB的小说,小说,散文和戏剧,不必发明新词或重新定义旧词。如果这个模型对于诸如英语之类的自然语言来说已经足够好了,那么它对于诸如HTML之类的简单元语言来说已经足够好了。当然,随着时间的推移,新词会被创造出来,就像HTML规范中慢慢引入新元素一样,但这是通过仔细的审议和共识来完成的。class没有这样的授权过程。

索绪尔模型为我们提供了足够的优雅和发明空间,并禁止我们做出错误的选择。通过根据它们的内容和位置what and where来构造元素的样式从而组成我们文档,那么现在误导或混淆用户就变得极其困难,我们所做的只是使用CSS来显示页面的固有结构。

语境的重要性

从符号学的角度来看,也许两个相似的事物之间唯一真正的区别在于它们的背景:它们被发现的环境。英国本土人和法国本地人在基因上相似但在文化上有所不同。他们的国籍背景使他们以许多值得注意的方式不相同。

下面这段Html/CSS:

<font><i>// HTML:</i></font><font>

<article>
   <h1 <b>class</b>=</font><font>"main-title"</font><font>>Article Title</h1>
   <aside>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h1>
   </aside>
</article>

</font><font><i>// CSS:</i></font><font>
.main-title {
   font-size:30px;
}
</font>

创造class类型为.main-title,我们创建了一个翻译器来帮助我们轻松地为所有顶级标题设置相似的样式。但是,我们示例中的两个标题h1并不相似,任何理解HTML5解析器的人都会知道,有一个标题h1属于aside组合,而另外一个标题h1直接属于article内,这两种关系哪个最重要?

直接属于article:
 

<article>
   <h1 <b>class</b>=<font>"main-title"</font><font>>Article Title</h1>
</font>

直接属于aside, aside属于article:

<article>
   <h1 <b>class</b>=<font>"main-title"</font><font>>Article Title</h1>
   <aside>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h1>
</font>

解析器将把aside的h1标题视为仅仅是副标题,属于第一个标题之后的副标题。

这个例子中的class是多余的:我们可以使用h1 style属性来设置元素的样式如font-size: 30px。关键是如果我们根据上下文区分这两个元素,那么区分上下文的办法是使用 派生选择器 :aside h1,那么CSS将绑定到HTML的结构(aside h1是一种结构,h1属于小语段,aside属于大语段,h1小语段被包含在大语段aside中),并且元素的外观将与其计算的含义一致。

模块化和可移植性

使用Class属性的方法其实是一种面向对象方法,面向对象的方法是想让一个元素在任何地方都看起来一样,不受环境背景的影响,这如同一个英国人移民到其他国家,拒绝说当地语言,这是不恰当的。

我不认为CSS是面向对象的; 我认为它是面向接口的。CSS的目的不是让单个项目看起来像我们想要的那样,而是提供一个接口来样式化HTML文档,这些接口具有说服力和可读性。为了使接口具有最佳可理解性,所有组件应该礼貌地协同工作,并且应该尊重整体视觉结构,无论组件来自何处。

简而言之,我们的目标应该是真正区分样式和内容,允许内容在不同样式界面接口之间传播,但样式界面仍然不动。在任何格式正确的文档中,属性应该是表达内容来源的(class作为元素属性却不是表达内容来源,而是表达内容来源的类型)。

以上所述是小编给大家介绍的Html/CSS中的符号学,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多