《精通CSS:高级Web标准解决方案》 知识点汇总

Unsplash
  • 已访问链接和未访问链接的简写方式
a:visited:hover {color:#fff};
  • 子选择器在IE7和更高版本中均支持子,但在IE7中有一个小 bug,如果父元素和子元素之间有 HTML 注释,就会出问题
  • 为了使注释更有意义,可以使用关键字来区分重要的注释,如使用 @todo 来表示某些东西需要在以后进行修改、修复或复查,用 @bugfix 来表示代码或特定浏览器遇到的问题,用 @workaround 表示并不完善的权宜之计
  • 为了尽可能提高页面的可访问性,在定义鼠标悬停状态时,最好在链接上添加 :focus 伪类,再通过键盘移动到链接上是,这让链接显示的样式与鼠标悬停时相同
  • 在下面的例子中,两个规则具有相同的特殊性,所以 :link:visited 样式将覆盖 a:hovera:active 样式,为了确保不会发生这种情况,最好按照以下次序应用链式样式:a:link, a:visited, a:hover, a:focus, a:active
a:hover, a:focus, a:active {text-decoration: underline;}
a:link, a:visited {text-decoration: none;}
  • 从易用性和可访问性的角度来说,通过颜色之外的某些方式让链接区别于其他内容是很重要的,这是因为许多有视觉障碍的人很难区分对比不强烈的颜色,尤其是在文本比较小的情况下,例如,有色盲症的人无法区分具有相似亮度或饱和度的某些颜色,因此,默认情况下,链接是有下划线的,但是,前端攻城狮们往往不喜欢链接的下划线,因为下划线让页面看上去比较乱,如果决定去掉链接的下划线,那么可以让链接显示为粗体,当鼠标悬停在链接上或激活链接时,可以重新应用下划线,从而增强其交互状态
a:link, a:visited {
    text-decoration: none;
    font-weight: bolder;
}
a:hover, a:focus, a:active {
    text-decoration: underline;
    font-weight: bolder;
}
  • 多使用 calc() 函数
.box {
    border: 1px solid #000;
    width:calc(100%-2px);
}
  • 匹配下标是奇偶子元素
li:nth-child(odd)
li:nth0child(even)
  • 属性选择器 [attr^=abc],匹配属性/键为 attr,值为 abc 开头的所有元素 [attr$=abc],匹配属性/键为 attr,值为 abc 结尾的所有元素 [attr*=abc],匹配属性/键为 attr,包含 abc 字符的所有元素
  • 伪类选择器 :nth-child(n) 在所有兄弟元素的排列 :nth-of-type(n) 在相同类型的元素的排列
.box_1 p:nth-child(2) {
    color: red;
}
.box_2 p:nth-of-type(2) {
    color: red;
}

<section class="box_1">
    <p>我一直在寻找不停奔跑</p>
    <p>跨过山间和海的问号</p>
</section>
<section class="box_2">
    <p>穿越苦涩只为和你拥抱</p>
    <p>微笑煎熬最后的美好</p>
</section>

运行结果_1

.box_1 p:nth-child(2) {
    color: red;
}
.box_2 p:nth-of-type(2) {
    color: red;
}

<section class="box_1">
    <span>追梦的蚂蚁</span>
    <p>我一直在寻找不停奔跑</p>
    <p>跨过山间和海的问号</p>
</section>
<section class="box_2">
    <span>追梦的蚂蚁</span>
    <p>穿越苦涩只为和你拥抱</p>
    <p>微笑煎熬最后的美好</p>
</section>

运行结果_2

  • 转义字符 & &amp; &yan; < &lt; > &gt; 空格 &nbsp; &emsp;
  • 线性渐变
background-image: linear-gradient(black, blue);
background-image: linear-gradient(-45deg, black 0%, blue 20%, red 50%);
  • 径向渐变
background-image: radial-gradient(at 400px 400px, black, white);
background-image:  radial-gradient( ellipse 200px 100px at 100px 10px,  black, white);
background-image: radial-gradient(circle 200px at 0 100%, blue, orange);
  • 阴影
box-shadow: 0 0 10px blue;
  • 倒影
-webkit-box-reflect: below 20px;
  • 蒙版
-webkit-mask-image: linear-gradient(rgba(123,123,1,1) 20%, rgba(122,0,34,0.2));
-webkit-mask-image: url(./img/mask.png);
-webkit-mask-repeat: no-repeat;

运行结果

  • 箭头
div {
    border-top: 1px solid red;
    border-left: 1px solid red;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
  • 电话,短信,邮件
<a href="tel:18897778730">18897778730</a>
<a href="sms:10086">10086</a>
<a href="mailto:abc@qq.com">邮件</a>

本篇的内容到这里就全部结束了,常用的 CSS 样式重置文件我已经发到了 GitHub Reset.css,本篇文章知识点来源 精通CSS:高级Web标准解决方案(第2版).pdfCSS速查总表 已上传至百度网盘,有需要的同学可自行下载

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿凯的Excel

动态显示下拉框内容

过了冬至,你在北方瑟瑟发抖,我在广东秋风瑟瑟~ 最近小编经常梦回母校~放一张母校的美图! 年底了,又到了预订报刊的时候! 肯定有人会问,这年头还有谁看报刊...

31230
来自专栏王磊的博客

jQuery 计时器(jquery timers)简单应用

jquery timers 代码(版本1.2): /** * jQuery.timers - Timer abstractions for jQuery *...

31730
来自专栏机器学习算法与Python学习

Python:matplotlib

原文链接:http://blog.csdn.net/ywjun0919/article/details/8692018 来源于书籍:《Python科学计算》 ...

42780
来自专栏Windows Community

New UWP Community Toolkit - RangeSelector

概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 RangeSelect...

36970
来自专栏猿说1024

Markdown 语法

16740
来自专栏Coding迪斯尼

VUE+WebPack前端游戏设计:能量气泡的螺旋升腾特效

20530
来自专栏静晴轩

Vue 各类数据绑定

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会;更是对待现实工作不懈渴求,乃至苛求。因为这已不是遁隐修行,而是职场卖命,唯有先快速...

41570
来自专栏Google Dart

Flutte部件目录-基本部件(一)

一个容器首先用padding包围子组件(由decoration中出现的所有边框填满),然后将附加constraints应用于填充范围(将width和height...

44020
来自专栏Java3y

AJAX应用【股票案例、验证码校验】

股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中,它会显示具体的信息。 我们首先来看一下要做出来的效果: ? 服务器端分...

455100
来自专栏菩提树下的杨过

silverlight中"制作逐帧动画"/"播放gif"收集

“逐帧动画”与“播放GIF”貌似二个风马牛不相干的问题,其实不然! 因为silverlight中的image控件不支持直接把gif动画做为source,所以象做...

22670

扫码关注云+社区

领取腾讯云代金券