| CSS3

初学CSS3

边框

阴影 box-shadow

语法：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
参数：
参数

颜色相关

rgba颜色值

rbga(r,g,b,a)
rgb就不用说了，a是指alpha透明度参数，比如0.5就是半透明

CSS3渐变色彩

linear-gradient(a,b,c)

  • a:渐变方向，可用角度或者英文来定义
    渐变方向定义
  • b:渐变的起始点
  • c:渐变的结束点（在渐变的起始点和结束点之间可以添加多个颜色值）

文字与字体

嵌入字体@font-face

语法：

1
2
3
4
@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

注意：设置@font-face中font-family同样的值

文本阴影text-shadow

语法：
text-shadow: X-Offset Y-Offset blur color;

  • X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
  • Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
  • Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
  • Color：是指阴影的颜色，其可以使用rgba色。

与背景相关的样式

background-origin

用于设置背景图片的起始位置
语法：
background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
效果图：
效果图:

background-clip

用于将背景图片做适当裁剪
语法：
background-clip:border-box | padding-box | content-box | no-clip
参数解释：
上面四个值分别表示从边框，内边距，内容区域向外裁剪背景，最后是不裁剪
注意：
border-box 和 no-clip效果相同，默认值为border-box
效果图：
效果

background-size

用于设置背景图片的大小，可以用像素，百分比，cover,contain ,auto表示
语法：
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

multiple background

设置多重背景属性
语法缩写如下：

1
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

1
2
3
4
5
6
7
8
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

CSS3选择器

属性选择器

CSS3新增了3个属性选择器，使得属性选择器有了通配符的概念
3个属性选择器：
属性选择器
^:匹配开头
$:匹配结尾
*:包含

结构伪类选择器——root

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html。
“:root”选择器等同于元素，简单点说：

1
2
:root{background:orange}
html {background:orange;}

得到的效果等同。
建议使用:root方法。
另外在IE９以下还可以借助“:root”实现hack功能。

结构化伪类选择器not

:not选择器 ，顾名思义，就是选择除了某个元素之外的所有元素
比如在form中将除了submit按钮之外的所有input标签添加红色边框，代码可以这样写：

1
2
3
input:not([type="submit"]){
					border:1px solid red
						  }

结构性伪类选择器—empty

选择内容为空的元素，就算有一个空格也不算内容为空
比如：
HTML代码：

1
2
3
<p>我是一个段落</p>
<p> </p>
<p></p>​

CSS代码：

1
2
3
4
5
6
7
p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}​

演示结果：
结果

结构性伪类选择器—target

这里我是这样理解的，target相对于一个点击事件，当一个ID绑定了点击事件，触发点击事件后为特定的目标元素设定样式。
比如：

1
2
3
#brand:target p{
background:red;
}

上面就是当href=”brand”的a标签被点击后，就会为id=”brand”的元素的下面的P元素设置背景色，注意：这里div的ID也必须为brand

结构性伪类选择器—first-child

即选择第一个子元素

结构性伪类选择器—last-child

即选择最后一个子元素

结构性伪类选择器—nth-child(n)

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词奇偶(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
注意：当n是表达式时，n的起始值是0，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

结构性伪类选择器—nth-last-child(n)

与上面相反，就是从最后一个元素开始计算

first-of-type选择器,nth-of-type(n)选择器,last-of-type选择器，nth-last-of-type(n)选择器

与first-child,nth-child(n),last-child，nth-last-child(n)相似，但要匹配元素类型
比如：
div p:first-of-type表示选择div子元素中第一个p元素

only-child选择器

匹配的元素的父元素只有一个子元素

only-of-type选择器

与only-child 相似，只是要匹配特定类型

:enabled选择器,:disabled选择器

选择form表单中处于enabled状态,disabled的元素

:checked选择器,

选择form表单中处于checked状态的元素

::selection选择器

为鼠标选中的元素添加样式

:read-only选择器,:read-write选择器

:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了readonly=’readonly’
:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。