CSS教程:详解CSS特定值

2016-02-20 00:16 2 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)以前我从来没有具体的谈到这个问题


     最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。
     这是一个简单的例子 无序的列表:
 <ul id="summer-drinks">

<li>Whiskey and Ginger Ale/li</li>

<li>Wheat Beer</li>

<li>Mint Julip</li>

</ul>

现在你想指定他们中间你最喜欢的酒并且把它的样式做一点变化,你需要通过这个列表元素上的一个类名来实现它。

   <ul id="summer-drinks">

<li class="favorite ">Whiskey and Ginger Ale/li</li>

<li>Wheat Beer</li>

<li>Mint Julip</li>

</ul>

现在,你打开CSS写出你的新样式类:

.favorite
{
  color: red;
  font-weight: bold;
}


然后你你看着自己的工作,但是不幸的是,他并不起作用,你喜欢酒的文本没有变为红色或则加粗。一些可以的东西在起作用。在CSS样式中你会发现还有下面的这个语句:


你的麻烦在这,两个不动的Css选择器竟然同时定义了字体的颜色和字体的粗细。说明字体大小的语句只有一个。所以很明显起作用的只有一个选择器。两个选择器不是在战斗,但是浏览器不需要决定它们中间那一个语句是荣耀的。浏览器是根据具体规则的标准设置。我想这困惑这一些初学者,因为他们还没有完全理清这些东西。他们可能认为.favorite是胜利的哪一个:favorite语句是进一步的CSS样式,或者是因为在HTML中class=favorite 离实际文本近一些。

但是,事实上,在CSS中选择器的顺序扮演者一个重要的角色而且进一步的的那个语句事实上是胜利的当特定值是一样的精确。

.favorite

 {


 }

字体的颜色将是黑色的。。。。但是我却不敢不苟同。

这里的重点在:对于你的每一个机会,你要尽可能的详细使它是有意义的。尽管用这个简单的例子可以代表上面的例子。   但是它更明显的显示 :简单的运用一个类名来指向 favorite drink ,是不能覆盖红色的字体属性。它也将不会是非常安全的即使它是起作用的。下面的用法可能是明智的:     

}

这就是我叫的你要尽可能的详细使它是有意义的。你实际上可以使用更确切的方法使用这些属性,像这样:

}

但是它是从顶部开始的,它使你的CSS样式不具有易读性并且产生真正的好处。



刚才为什么我们第一次尝试改变字体的大小和颜色失败了呢? 随着我们的学习,它是因为标签自己简单的运用类名,拥有较低的特性值,被其他的指向这个无序列表的具有ID值的选择器压倒。在那个句子中,重要的字眼是class和 ID。CSS不关心用class 和IDs做什么,但是它却给他们赋予不同的特定权重。事实上,一个ID拥有比一个class大10倍的特定权重。让我们看看特定值是怎么计算的:

 



假如元素有内联样式,那它将自动的拥有100点 每一个ID值100点 每一个类名(或者伪类,属性选择器),10点 每一个元素1点     










注意事项:

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

以上的例子是非常接近的CSS是如何计算的特殊性价值,但是那是重要的例外。数字并不是真正的像在十进制中加在一起,而是基于一种无限方式的组合在一起,所以231实际上像2,3,1。重要的区别在(points out)假如任意一个数字超过了9,将不像十进制那样向前进一位。所以一个选择器的特定值可以是2,11,1.它不能被计算成311,谢谢下面的 也谢谢 Eric关于这种区别的页面。

资源:Smashing Magazine has a pretty comprehensive article on CSS Specificity W3 specs IE Quirks (try viewing this page in Fx and then IE) Fuzzy Specificity Hack: IE (even beta 8!) and older Opera browsers have a bug honoring the correct selector under specific circumstances.
译者注:由于译言发布译文是会自动解释示例HTML代码所以,用了很多方式都不是太理想,最后译者把标签的用全角的< >代替所以代码示例不是很美观,还请见谅,还希望译言早日支持HTML源码显示。

来源:https://www.tulaoshi.com/n/20160220/1631567.html

延伸阅读
标签: Web开发
什么是CSS? CSS是CascadingStyleSheets(层叠样式表)的缩写。它的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。   谁需要学习CSS? 对于想要使用XHTML制作符合W3C国际Web标准网站的站长,CSS是必须学习的,它几乎是你定义网页外观的唯一工具;而对于那些毫不关心Web标...
标签: Web开发
CSS 盒模型 网页设计中的每个元素都是长方形的盒子。 盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。 这个图表很好地展示了作用于页面上任意盒子的数值。 注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影...
标签: Web开发
前面一篇介绍了网页制作的CSS的作用 宣告CSS样式的语法如下: 選擇器{ 选择器{ 屬性:設定值; 属性:设定值; ... } 在一個選擇器(Selector) 中,可以設定的屬性數目沒有限制。在一个选择器(Selector)中,可以设定的属性数目没有限制。 選擇器主要有三種:型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种:型类...
一、 认识CSS CSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。 网页设计最初是用HTML标记来定义页面文档及格式,例如标题<h1、段落<p、表格<table、链接<a等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(The World Wide Web Consortium)颁布HT...
标签: Web开发
写完第七课,因为时间问题没有继续写第八课有关浏览器兼容方面的文章,以为大家可以自己掌握这方面的知识,不过发现有很多同学找了很多资料,很多文章去研究,费时费力的,效果也不好,今天是星期六,我呢就再给大家补写这篇教程,带领大家用最短的时间掌握CSS Hack! 说到浏览器兼容性问题,就必须说CSS Hack!提到Hack大家肯定会想到电脑...

经验教程

751

收藏

11
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部