重拾CSS(三):样式基础

块级元素可以设置widthheight,如果没有定义width,那么就是父级元素的width

行级元素是不能设置上面说的两个属性的!!并且text-align: right;也是无效的。

行级元素的widthheight就等于一行内容的宽度和高度,所以不能设置,把当前元素看成一个div的话,那么它里面的内容就是一个居中状态,所以text-align也无效。

行内块级元素可以设置宽高,并且是在一行上显示,又称内联元素,如:imginput等。

CSS三大特性

层叠性

.box {
    font-size: 500px;
}

.boy {
    font-size: 16px;
}
<div class='box boy'>这是测试</div>

当多个不同的样式同时作用到同一个对象上时,如果样式之间的属性发生了冲突,那么后面的样式(这里是boy)就会覆盖之前样式(box)与它冲突的属性,如果没有发生冲突,那么属性就会累加。这就是层叠性

这个应该不难理解吧?举一个例子:

领导跟你说:你用五分钟的时间,把这桶垃圾给倒了。

领导想了几秒,又说:

你用十分钟的时间,把这桶垃圾给倒了

这个时候,你觉得你应该是花五分钟倒了呢,还是花十分钟倒了?还是说要花十五分钟??

影响默认层叠

第一个是重要性!important,被这个单词修饰的属性,应用的优先级最高。

#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

第二个是专用性:不同的选择器,专用性也不一样,选择的范围越广,专用性越低。(也是CSS三大特性之一:优先级

专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。

专用性计算分为四种:

  1. style:这是内联样式,级别最高,只能作用于当前元素,它可以作为千分位表示。如果元素使用了style,那就在千分位 + 1
  2. #:这是ID选择器,除了style,它的专用性最高,可以作为百分位,如果对该元素使用了ID选择器,就在百分位上 + 1.
  3. .:类选择器,当前,在这十分位上,如果对元素使用了类选择器、属性选择器、或者伪类,都在此分位上 + 1.
  4. 个位的话,那就是元素选择器,或者伪元素,只要使用了这两个,个位就 + 1.

最后根据值的大小来决定层叠关系。

通用选择器 ( * ), 复合选择器 (+, >, ~, ' ') 和否定伪类 (:not) 在专用性中无影响。

<div id="outer" class="container">
  <div id="inner" class="container">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div>
/* specificity: 0101 */
#outer a {
  background-color: red;
}

/* specificity: 0201 */
#outer #inner a {
  background-color: blue;
}

/* specificity: 0104 */
#outer div ul li a {
  color: yellow;
}

/* specificity: 0113 */
#outer div ul .nav a {
  color: white;
}

/* specificity: 0024 */
div div li:nth-child(2) a:hover {
  border: 10px solid black;
}

/* specificity: 0023 */
div li:nth-child(2) a:hover {
  border: 10px dashed black;
}

/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
  border: 10px double black;
}

a {
  display: inline-block;
  line-height: 40px;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  margin-bottom: 10px;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

第三个是源码次序,后来居上,就是那个倒垃圾的例子。

继承性

继承性发生的前提是元素和元素之间是父子容器的关系。(继承属性生效也有一个前提:元素自己本身没有那个属性,如果有,就会使用自身的)

  • 文字相关的可以继承

    • 文字颜色可以继承。
    • 文字大小可以继承。
    • 字体可以继承。
    • 字体粗细可以继承。
    • 文字风格可以继承。
    • 行高也能继承。

控制继承

CSS为处理继承提供了三种特殊的通用属性值:

  • inherit: 标明一个属性需要继承父级元素的值。(针对非继承属性)
  • initial :使用浏览器规定的值。(针对继承属性)IE不支持
  • unset :如果属性是可继承属性,那么就相当于inherit,如果该属性是不可继承属性,那么就等于initialIE不支持
Last modification:March 18th, 2018 at 07:59 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment