图解CSS3核心技术与案例实战(by 大漠)阅读笔记

本文链接：https://blog.youkuaiyun.com/lysunnyrain/article/details/79225422

本文是关于CSS3核心技术的阅读笔记，涵盖了渐进增强、选择器、边框等核心概念。重点讲解了强大的CSS3选择器，如后代选择器、伪类选择器，以及边框的新特性，如border-radius、box-shadow和border-image。

第一章

对于尚不完全支持CSS3的浏览器，将引入渐进增强的概念。渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

1.css3新特性

a.强大的css3选择器

新增属性选择器、伪类选择器、过滤选择器

b.添加图片视觉效果

圆角(border-radius)、阴影(text-shadow、border-shadow)、渐变背景、半透明、图片边框(border-image)

c.容器变换

tranform: rotate skew scale translate

d.过渡效果

transtion: property duration timing-function delay;

e.动画

animate
keysframe

f.颜色与透明度

rgba
hsl(hue saturation lightness)
hsla(hue saturation lightness alpha)

g.web字体和web font图标

font-face的引入

h.媒体查询与响应式布局

@media的运用

第二章 CSS3选择器

1. 新增选择器

属性选择器
伪类选择器
过滤选择器

2. CSS3选择器分类

a. 基本选择器
b. 层次选择器
c. 伪类选择器（动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素伪类选择器、结构伪类选择器、否定伪类选择器）
d. 伪元素
e. 属性选择器

2.1 基本选择器

选择器	类型	功能描述
*	通配符选择器
E	元素选择器
#id	id选择器
.class	类选择器
selector1,selectorN	群组选择器	匹配为selector1和selectorN的所有元素

注意：selector1 selectorN是后代选择器，表示selectorN所有元素为selector1的后代元素。

/*css代码*/
<style>
    .parent,.div{
        background-color:yellow;
    }
    .parent .child{
        color:red;
    }
</style>

/*html代码*/
<ul class="parent">
    <li class="child">1</li>
    <li class="child">2</li>
    <li class="child">3</li>
    <li class="child">4</li>
    <li class="lastChild">5</li>
</ul>
<div class="div">test</div>

效果图如下：

2.2 层次选择器

选择器	类型	功能描述
E F	后代选择器	作用于所有后代元素
E>F	子选择器	只作用域第一代子元素
E+F	相邻兄弟选择器	F元素与E元素相邻，且在E元素之后（仅1个）
E~F	通用选择器	E元素的所有兄弟元素，且在E元素之后（一个或多个）

/*后代选择器*/
div p{
  background-color:yellow;
}
/*子选择器*/
div>p{
    background-color:yellow;
}
<div>
  <p>第一行</p>
  <span><p>第二行</p></span>
</div>

后代选择器效果图如下：

子选择器效果图如下：

2.3 伪类选择器

2.3.1 动态伪类选择器

选择器	类型	功能描述
E:link	链接伪类选择器	未被访问过
E:visited	链接伪类选择器	已被访问过
E:active	用户行为伪类选择器	元素E已被激活
E:hover	用户行为伪类选择器	鼠标悬浮在E上，IE6仅支持a:hover
E:focus	用户行为伪类选择器	元素E获得焦点

锚点伪类需遵守LoVe/HAte规则，即“link-visited-hover-active”

2.3.2 目标伪类选择器

选择器	功能描述
E:target	这是动态选择器，只有存在URL指向该匹配元素时，样式才会生效

应用：手风琴效果

2.3.3 语言伪类选择器

根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从CSS指定。

<!DOCTYPE HTML>
<hmtl lang="zh-CN">

2.3.4 结构伪类选择器

选择器	功能描述
E:first-child	E元素的第一个子元素
E:last-child	E元素的最后一个子元素
E:root	E所在文档的根元素，在HTML文档中，根元素始终是html
E F:n-child(n)	E元素的第N个子元素F，需满足两个条件，子元素+子元素在指定位置
E F:nth-lst-child(n)	E元素的倒数第N个子元素F
E:nth-of-type(n)	父元素内具有指定类型的第n个E元素，应用于子元素有多种类型
E:nth-last-of-type(n)	父元素内具有指定类型的倒数第n个E元素
E:first-of-type	父元素内具有指定类型的第一个E元素
E:last-of-type	父元素内具有指定类型的倒数第一个E元素
E:only-child	父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	父元素只包含一种子元素，且该子元素匹配E元素
E:empty	没有子元素的元素，且无文本节点，应用：高亮提示用户搜索出来的结果为空

其中，n的取值可以分为7种情况

a.具体数值 //n>0
b.n*length //n=0,1,2...
c.n+length //n=0,1,2...
d.-n+length //n=0,1,2...
e.n*length+b //n=0,1,2...``
f.odd //奇数
g.even //偶数

2.3.5 否定伪类选择器

选择器	功能描述
E:not(F)	匹配所有除F元素以外的E元素

2.3.6 伪元素

::first-letter //第一个字母
::first-line   //第一行文本
::before       
::after
::selection //CSS3新增，用来匹配突出显示的文本，仅接受background和color属性

2.3.7 属性选择器

选择器	功能描述
E[attr]	具有attr属性的E元素
E[attr=val]	attr属性为val的E元素，必须完全匹配
E[attr\|=val]	attr属性为val，或者以val-开头的E元素，注意，-不可省略
E[attr~=val]	attr属性拥有多个以空格隔开的值，其中一个值等于val的E元素
E[attr*=val]	attr属性值的任意位置包含了val字符串的E元素
E[attr^=val]	attr属性值以val开头的E元素
E[attr$=val]	attr属性值以val结尾的E元素

第三章 CSS3边框

3.1 边框的基本属性

border: border-width border-style border-color;
//例如
border: 1px solid #ccc;
border-width的默认值是medium(大约是3-4px)
border-color的默认值是字体的颜色

border-style的属性值

<html>
<head>
<style type="text/css">
p.none{border-style: none}
p.dotted {border-style: dotted}  //点状边框

p.dashed {border-style: dashed}  //虚线边框
p.solid {border-style: solid}    //实线边框
p.double {border-style: double}  //双线边框
p.groove {border-style: groove}  //3D凹槽边框
p.ridge {border-style: ridge}    //3D垄状边框
p.inset {border-style: inset}    //3Dinset边框
p.outset {border-style: outset}  //3Doutset边框
p.inherit {border-style: inherit} //从父元素继承边框样式，部分浏览器不支持
</style>
</head>

<body>
<p class="none">A none border</p>

<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

</html>

示例图如下：

3.2 CSS3边框颜色属性

/*border-color标准写法*/
border-color: [<color> | transparent]{1,4} | inherit

3.3 border-image属性的语法及参数

border-image 属性是一个简写属性，用于设置以下属性：
    border-image-source
    border-image-slice
    border-image-width, 使用同border-width
    border-image-outset
    border-image-repeat
    标准写法为：
    border-image : none | <image> [<number> | <percentage>] {1,4} [/<border-width>{1,4}] ?[stretch | repeat | round] {0,2}
    repeat:重复边框背景图片
    round:平铺边框背景图片
    stretch:默认值，拉伸边框背景图片
    在webkit内核的浏览器（Chrome、Safari）下，repeat和round两者效果无区别。

border-image-slice的计算方式如下图

3.4 border-radius属性

语法
border-radius: none | <length> {1,4} [/<length>{1,4}]
如果反斜杠符号"/"存在，"/"前面的值是设置元素圆角的水平方向半径，"/"后面的值是设置元素圆角的垂直方向半径

3.5 box-shadow属性

box-shadow: h-shadow v-shadow blur spread color inset;

属性值	描述
h-shadow	必需。水平阴影的位置
v-shadow	必需。垂直阴影的位置
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影(outset)改为内部阴影