CSS模块化设计—从空格谈起

多言无悔

多言无悔

2016-02-19 20:28

下面图老师小编跟大家分享一个简单易学的CSS模块化设计—从空格谈起教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

      一、空格运算符

      (1)CSS语言

      简单地说,CSS语言类似JS语言,是通过客户端下载后,通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言,离JS这种基于对象的比较完善的“弱类型”语言,还差相当一段距离。要知道CSS样式是定义出来的,而样式的呈现是根据文档流顺序和CSS优先级别,浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能(尤以IE为甚),所以样式定义的语法有错误,并不影响浏览器正常工作,只不过显示不出应有的效果罢了。在我们设计定义样式的时候,排错是比较令人苦恼的,其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的,所以我们就更应该注重CSS定义的严禁,才能出较少的错误,较快更好的完成工作。

      (2)CSS的运算符

      首先说,CSS语言的运算符就不多,有.#{}:";还有一个非常重要的空格。这几个运算符,都是常用的定义声明符号。而在CSS样式定义中,空格就有点特殊,我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说,我们可以把空格视为路径指向的箭头,表明HTML标签的父子级别关系。CSS是与HTML想关联的,也就是说,CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应,而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”;一个HTML标签也可以“复合调用”多个样式类。所以说,CSS样式定义的复杂性与关联的HTML是密不可分。

      (3)实例说明 

以下是引用片段:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

style type="text/css"
td .b { 
       color:#00ff00; 
}
th.b {  
       color:#ff0000;
       font-family:黑体;
       font-size:20px;
}
.b {
       color:#0000ff;
       font-size:12px;
}
/style
table
       tr
              
              tddiv class="b"第一个类b的类路径是th .b/div/td 
              th class="b"第二个类b的类路径是th.b/td
              td class="b"第三个类b的类路径是 .b/th
       /tr 
/table
div class="b"第三个类b的类路径是 .b/div

      讲解:

      1、第一个类b的类路径是td .b,定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。

以下是引用片段:
td .b { 
       color:#00ff00; 
}

      定义的是tddiv class="b"text/div/td这组代码块中的b类,class="b"是包含在td标签内的,是td的子级,所以在这里要用“空格”指向明确表明父子级别关系。

      2、第二个类b的类路径是th.b,定义的是该HTML文档内所有的带class="b"的th标签的样式。

以下是引用片段:
th.b {  
       color: #FF0000
}

      定义的是th class="b"text/td,在这里的代码中,th和class='b'是平级的,先th后.b组成一个同级类路径th.b,所以没有空格代表“HTML类”和“自定义类”具有同级路径!

      3、第三个类b的类路径是 .b,定义该HTML文档内所有的td标签的样式,它是该文档的一个全局样式,是body .b的简写。

以下是引用片段:
.b {
       color:#0000ff;
       font-size:12px;
}

      定义了td class="b"第三个类b的类路径是td.b/th和div class="b"第三个类b的类路径是 .b/div这两处的b类没有明确的路径指向,优先级别要比有明确路径的低。

      4、大家可以看到,在HTML代码中,同样都是class="b",但是在CSS定义时,采用的类路径不同,作用就不同了。类路径越完整,优先级越高。在具体应用的时候,我们可以,使用完整类路径来定义某HTML代码块某一些特殊地方,做异化处理。例如本例表头th的黑体字显示效果。

      二、HTML中复合调用样式类

      (1)在一个HTML标签内,可以复合调用多个样式类,也是用空格做运算符,复合类名总字符不能超过256。

      (2)示例:

以下是引用片段:
style type="text/css"
.myTxt {
       font-size:50px;       
       font-family:Arial Black;
}
.txtRed {
       color:red; 
}
.txtOrange {
       colorrange;
}
.txtGreen {
       color:green;
}
.txtBlue {
       color:blue;
}
/style
ul
       li class="myTxt txtRed"123/li
       li class="myTxt txtOrange"Text/li
       li class="txtGreen"Text/li
       li class="myTxt txtBlue"Text/li
/ul

      (3)应用:

      对于某些多数样式属性累同,仅有几个不同样式属性的定义,可以用这个方法来缩写。也可以在某个不改变某个通用样式类的同时,用HTML调用复合类,突出局部特例。

      三、CSS+HTML的模块化设计

      (1)举个简单例子:

      .classNameA .classNameB .classNameC

      就是一个类包路径,A包含B,B包含C. 意思就是,在A块内的全部HTML代码(包括B块、C块),先应用样式classNameA; 然后,在B块内的全部HTML代码(包括C块),先应用样式classNameA,之后再先应用样式classNameB; 最后,在C块内的全部HTML代码,先应用样式classNameA,再先应用样式classNameB,最后应用样式classNameB;

      (2)在样式表中,关于类包的路径,对于某些复杂的HMTL代码,最后写绝对路径,就是每一个类名都不要拉下。这样可读性更强,错误率更小;当然,宽容度就越低。

      例如

以下是引用片段:
style type="text/css" 
/*控制 li 的样式*/ 
.a1 ul li { 
    color:red; 
}

/*控制class="a"的div块内,全部连接 a 的样式*/
.a1 a {
    font-size:20px;
}

/*控制class="a"的div块内,一个一个为 class="mylink"的样式*/
.a1 .myLink {
       font-size:12px;
}

/*控制 li 内连接a的样式*/
.a1 ul li a {
       font-size:40px;
}

/*控制名 li 内,一个为 class="mylink"的连接的样式 */
.a1 ul li .myLink {
       font-size:60px;
       font-family:黑体;
}

/*b1样式*/
.b1 {
      color:blue;
}
/*控制 li 内 b1 的样式*/
.a1 ul li .b1 {
     color:green;
}
/style

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

div class="a1"
      a href="#"linkText/a
      a href="#" class="myLink"titleText/a
      div class="b1"b11111111/div
      ul
            li
                   a href="#"titleText/a
                   div class="b1"nameCN/div
            /li
            li
                   a href="#" class="myLink"titleText/a
                   div class="b1"nameCNspan class="c1"nameEN/span/div
            /li
            lititleText/li
            lititleText/li
            lititleText/li
      /ul
/div  

      样式,按*.HTML从内层到外层;按*.CSS上下文,从下文到上文;按内联样式表上下文,从下文到上文;按内嵌内联外联的优先级;

叠加覆盖计算最终显示效果。

      CSS语句,严格说是JS代码的一类,换句话说,CSS语句也是“弱类型”的,空格是一个“运算符”,由于“弱类型”不严谨,所以,没有空格的时候,虽然不报错,也有显示效果,但那是按错误逻辑运算的,有时歪打正着,但确莫名其妙。再加上有很多满足各浏览器的HACK语法,CSS语句就更加零乱不堪。所以,写的时候,尽量在满足宽容度的情况下,严禁一些。

展开更多 50%)
分享

猜你喜欢

CSS模块化设计——从空格谈起

Web开发
CSS模块化设计——从空格谈起

CSS模块化设计—从空格谈起

Web开发
CSS模块化设计—从空格谈起

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS模块化如何实现?

Web开发
CSS模块化如何实现?

CSS模块化的理解

Web开发
CSS模块化的理解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS模块化思想的优势

Web开发
CSS模块化思想的优势

模块化字体设计欣赏

平面设计 海报设计 海报设计素材 广告设计 平面设计素材
模块化字体设计欣赏

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows7任务栏电源图标不显示解决

Windows7任务栏电源图标不显示解决

javascript之eval函数

javascript之eval函数
下拉加载更多内容 ↓