CSS in Depth 笔记-第一章

最新推荐文章于 2022-06-15 16:28:38 发布

weixin_34405925

最新推荐文章于 2022-06-15 16:28:38 发布

阅读量188

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b8a5561e51d451eeb4414cc

版权

作为一个前端仍找不到工作小菜鸡，决定好好学CSS，于是搞了本CSS in Depth来读一读，并且记录笔记，从而监督自己，不过英文看起来真难受，作为一个四级都没过的人，只能勉勉强强地看，我会用尽量少的文字来表达出书中的意思，也希望可以给想读此书的朋友提供一些帮助，如有错误，还望指出。

这里是代码的第一部分，这里主要讲的是有关级联的问题

  <header class="page-header">Page 
    <h1 id="page-title" class="title">Wombat Coffee Roasters</h1> 
    <nav>       
    <ul id="main-nav" class="nav">   
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffees</a></li>
        <li><a href="/brewers">Brewers</a></li>
        <li><a href="/specials" class="featured">Specials</a></li>   
      </ul>
	 </nav>	
  </header> 
复制代码

//Tag ID CLASS选择器
h1 {           
  font-family: serif;
}
#page-title {  
  font-family: sans-serif; }
.title {      
  font-family: monospace;
}
复制代码

级联又可以被称为规则集，当我们定义了诸多的属性到同一元素上的时候，级联就可以帮助我们解决其中的冲突。书中有一句话

Although most experienced developers have a general sense of the cascade, parts of it are sometimes misunderstood.

尽管很多开发者对于级联的存在有着一定的感觉，但是有时候还是可能会存在一定的误解。那么到底什么是级联，级联又存在着什么样的作用呢。

当我们的页面交给浏览器去解析渲染的时候，我们会知道先解析成DOM树，然后去配合CSS来渲染，这个时候，浏览器会对我们的CSS做出如下的考虑:

css是来自哪里,能否与浏览器默认的一起应用
选择器的优先级
样式在css中的顺序这样说的话，就会感觉亲切很多

行内样式为：1000
ID选择符为：0100
类选择符、每个属性选择符(形如[attr=value]等)、每- 个伪类(形如:hover等)：0010
类型选择符（即标签元素或伪元素）为：0001
其它选择符包括全局选择符*，加0000。相当于没加，不过这也是一种specificity 某一样式权重的最终确立取决于各选择器相加的结果，如：

h1 {color:blue;}	 1
p em {color:purple;}	 1+1=2
.apple {color:red;}	 10
p.bright {color:yellow;} 1+10=11
p.bright em.dark {color:brown;}	 1+10+1+10=22
#id316 {color:yellow}	 100
<a style="color:yellow"> 1000
复制代码

样式表的来源

当我们为我们的网页定义了属性的时候，页面往往会有与我们所预期不同的地方，因为我们所添加的样式并不是唯一样式表，因为不同的浏览器尤其不同的默认样式，又或者可以说是用户代理样式，不过这一样式的优先级特别低，可以由用户去覆盖，所以一般来说，页面的样式不会轻易脱出开发者的控制，然后生出以下的优先级顺序

用户定义! important
用户定义
用户代理(浏览器默认)

当我们需要去覆盖一个样式的时候，我们可以通过在一个更高级别的样式中去重写，从而覆盖他。

当我们真正开发的时候，有几条法则：

尽量避免使用ID，因为即时是ID也会有许多的特异性，特别是当我们需要重写的时候，会相对麻烦，对浏览器的渲染造成影响
尽量不要使用!important，因为这类比ID更难处理，不仅在之后的覆写中需要添加它，还需要去处理特异性。

继承

CSS中的继承是依赖与DOM的父子关系，父亲总会留一部分东西给后代，所以说总会有一些东西不会被继承，比如padding``margin``border。不过就算父级不给你，还是有一些是可以抢过来的，这可能就是主动继承。

inherit：该值将应用到选定元素的属性值设置为与其父元素一样。
initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 - inherit，否则就是表现得像 initial。
revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置），否则属性值被设置成用户代理的默认样式。

注意: initial 和 unset 不被IE支持。

献上本书第一章的最终一份代码

<body>
  <header class="page-header">
    <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
    <nav>
      <ul id="main-nav" class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffees</a></li>
        <li><a href="/brewers">Brewers</a></li>
        <li><a href="/specials" class="featured">Specials</a></li>
      </ul>
    </nav>
  </header>
  <footer class="footer">
    &copy; 2016 Wombat Coffee Roasters &mdash;
    <a href="/terms-of-use">Terms of use</a>
  </footer>
</body>
复制代码

body {
  font-family: sans-serif;
}
a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: red;
}
h1 {
  color: #2f4f4f;
  margin-bottom: 10px;
  font-weight: bold;
}
.nav {
  margin-top: 10px;
  list-style: none;
  padding-left: 0;
}
.nav li {
  display: inline-block;
}
.nav a {
  color: white;
  background-color: #13a4a4;
  padding: 5px 15px;
  border-radius: 2px;
  text-decoration: none;
}
.nav .featured {
  background-color: orange;
  box-shadow: 10px 2px #6f9090;
}
.footer {
  color: #666;
  background-color: #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
}
.footer a {
  color: inherit;
  text-decoration: underline;
}
复制代码

有关本章内的东西，如有疑惑，可以提出，我会回复。有关canvas的那一系列，目前脱一脱坑，我先把工作找到了.再填...

weixin_34405925

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS in Depth 笔记-第一章

作为一个前端仍找不到工作小菜鸡，决定好好学CSS，于是搞了本CSS in Depth来读一读，并且记录笔记，从而监督自己，不过英文看起来真难受，作为一个四级都没过的人，只能勉勉强强地看，我会用尽量少的文字来表达出书中的意思，也希望可以给想读此书的朋友提供一些帮助，如有错误，还望指出。这里是代码的第一部分，这里主要讲的是有关级联的问题 &lt;header class="page-head...
复制链接

扫一扫