《精通CSS:高级Web标准解决方案》学习笔记(下)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《精通CSS:高级Web标准解决方案》学习笔记(下)相关的知识,希望对你有一定的参考价值。

1.

 background-position: left center;

两个参数分别是x和y轴方向的position

 

2.

  background-position: 10% 20%;

用百分数表示时,定位点并不是元素的左上角,而是background上距左边10%,距右边20%的点

 

3.圆角框,略。内容太多,以后单独开一篇。

 

4.犹如下css代码:

1 a:link,a:visited {
2     text-decoration: none;
3 }
4 a:hover,a:focus,a:active{
5     text-decoration: underline;
6 }

若调换选择器的顺序,如下:

1 a:hover,a:focus,a:active{
2     text-decoration: underline;
3 }
4 a:link,a:visited {
5     text-decoration: none;
6 }

则鼠标悬停和激活样式就不起作用,这是由层叠造成的,根据w3c标准,当两个规则具有相同特殊性时,后定义的规则优先。关于优先性排序,以后我也会另开一篇。

 

5.锚

<a href="http://www.taoshen.com/index.html#image">image</a>

#后接元素id,且css3允许使用:target伪类为目标元素定义样式,如:

1 a:target{
2     background-color: yellow;
3 }

 

6.绝不要使用a标签来更新服务器,否则spider的爬取可能会造成误操作。a和button不要混用。

 

以上是关于《精通CSS:高级Web标准解决方案》学习笔记(下)的主要内容,如果未能解决你的问题,请参考以下文章

精通 CSS 第 7 章学习笔记(上)

精通css 高级web标准解决方案——可视化格式模型

精通css 高级web标准解决方案——可视化格式模型-定位模型

Vue.js知识结构图

推荐20个让你学习并精通CSS的网站

精通 CSS 第 8 章 响应式布局 学习案例