CSS3的选择器和其他属性

CSS3的选择器和其他属性

一、CSS3概念和优势

1、CSS3的含义: 是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

2、css3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）

3、渐进增强与优雅降级的描述与区别

（1）渐进增强（progressive enhancement）：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

（2）优雅降级 （graceful degradation）：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

（3）区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

二、CSS3选择器

1、CSS属性选择器

目的：通过元素的标签属性来获取页面中的元素

写法：[属性="属性值"]

（1）[属性]

含义：匹配页面中带有该属性的元素

/* 匹配的是页面中带有class属性的元素 */
[class] {
    background-color: red;
}

（2）[属性="属性值"]

含义：匹配的是页面中带有该属性，并且有对应的属性值的元素

/* 匹配的是带有class属性并且取值为sp1的元素 */
[class="sp1"] {
    background-color: aqua;
}

（3）E[属性]

含义：E-----元素；匹配某一类元素或者某一种标签里面带有该属性的元素

/* 匹配的是span标签中带有class属性的元素 */
span[class] {
    background-color: orange;
}

（4）E[属性="属性值"]

含义：匹配的是某一类元素或者某一类标签中带有该属性、并且有对应的属性值的元素

/* 匹配的是span标签中带有class属性，并且属性值为sp1的元素 */
span[class="sp1"] {
    background-color: yellow;
}

（5）[属性^="值"]

含义：匹配属性值中以对应的这个值开始的元素

<div class="box">我是一个普通的div元素</div>
写法：[class^="b"]

（6）[属性$="值"]

含义：匹配属性值中以对应的值为结尾的元素

<div class="box">我是一个普通的div元素</div>
写法：[class$="x"]

（7）[属性~="值"]

含义：属性值是一个以列表形式进行显示的，可以有多个取值，匹配的是多个值中的一个值

    <div class="sp1 spp">我是一个普通的div元素</div>
    写法：[class~="spp"]

（8）[属性*="值"]

含义：属性值中包含了这个值的元素

    <div class="bobo">我是一个普通的div元素</div>
    写法：[class*="ob"]

（9）[属性|="值"]

含义：匹配的是页面中元素名字以对应value值或者是value-值开头的元素

    1----<div class="bobo-1">我是一个普通的div元素</div>
    2----<div class="bobo-box">我是一个普通的div元素</div>
    3----<div class="bobo">我是一个普通的div元素</div>
    写法：[class|="bobo"],以上三种都可匹配上

2、结构伪类选择器

（1）匹配元素内部，第一个子元素

写法：选择器:first-child{}

（2）匹配元素内部，最后一个子元素

写法：选择器:last-child{}

（3）匹配元素内部，第几个子元素

写法：选择器:nth-child(参数){}

参数写法分为三种：数字、倍数、字母

数字：数值为几，则代表第几个元素（超出范围则无法匹配）

倍数：如2n、2n-1/2n+1、3n、4n、5n等等

字母：

odd----奇数

even---偶数

（4）匹配元素内部，倒数第几个子元素

写法：选择器:nth-last-child(参数){}

参数写法同上

（5）选择的元素里面没有任何内容

写法：选择器:empty{样式规则}

备注：选择的是空元素，没有任何文本、没有任何标签（空格属于文本）

（6）选择的元素是它的父元素的唯一一个子元素

写法：选择器:only-child{样式规则}

备注：该元素是父元素底下的唯一的元素，才可以被选中，（若除了该元素，父元素底下还有其他元素，则不满足条件）

（7）选择一个元素是它的上级元素的唯一一个相同类型的子元素

写法：选择器:only-of-type{样式规则}

备注：选中的是父元素底下只有一个该类型的元素，对父元素下总共存在几个元素不做判断

（8）匹配同类型里面的第一个标签

写法：选择器:first-of-type{样式规则}

（9）匹配同类型里面的最后一个标签

写法：选择器:last-of-type{样式规则}

（10）匹配同类型中的第几个标签

写法：选择器:nth-of-type(参数){样式规则}

（11）匹配根目录元素

写法： :root{样式规则}

3、UI伪类选择器

（1）匹配可用元素

写法：input:enabled{可用状态下的样式}

（2）匹配禁用元素

写法：input:disabled{禁用状态下的样式}

（3）匹配焦点元素

写法：input:focus{获取焦点}

（4）匹配选中状态下的元素

写法：input:checked{选中状态下的样式}

（5）修改选中文本的样式

写法：选择器::selection{修改选中文本样式}

备注：只能修改背景颜色和文本颜色

4、否定伪类选择器

（1）匹配：可以让你定位不匹配该选择器的元素

（2）写法：:not(){}

5、目标伪类选择器

（1）匹配：使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用（即点击锚点跳转时实现对应的样式效果）

（2）写法：选择器:target{样式规则}

备注：该选择器必须配合锚点链接实现效果

6、关系选择器

（1）后代选择器

基本语法： 选择器1 选择器2{样式规则} ------符号：空格

（2）子代选择器

基本语法： 选择器1>选择器2{样式规则} ------符号：>

（3）匹配相邻的一个兄弟（向后匹配）

基本语法： 选择器1+选择器2{样式规则} ------符号：+

注意：匹配的是相邻的，因此只能找后面的相邻的那一个兄弟

（4）匹配后面所有的兄弟（向后匹配）

基本语法： 选择器1~选择器2{样式规则} ------符号：~

三、CSS3浏览器前缀

1、浏览器的兼容

（1）浏览器对比：如chrome浏览器和IE浏览器对比

不同点：
1-背景图不一样
2-输入框不一样
3-圆角效果不一样
4-文本字体不一样

（2）不同点原因：浏览器之间存在兼容的问题

2、浏览器的内核

（1）概念：浏览器最重要或者说核心的部分是"Rendering Engine"，可大概译为"渲染引擎"，不过我们一般习惯将之称为"浏览器内核"

（2）浏览器内核分类

@ rident内核
    代表作品：IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
@ Gecko内核
    代表作品：Mozilla Firefox 是开源的,它的最大优势是跨平台
@ Webkit内核
    代表作品：Safari、Chrome ， 是一个开源项目
@ Presto内核
    代表作品：Opera
@ Blink内核（了解即可）
    Webkit的分支，由Google和Opera Software开发的浏览器排版引擎，2013年4月发布

3、CSS3浏览器前缀

（1）-webkit：webkit核心浏览器，包括Chrome、Safari等

（2）-moz：火狐（Ferefox）浏览器

（3）-ms：IE浏览器

（4）-o：Opera浏览器

示例：
1、-ms-	   -ms-box-shadow	IE浏览器专属的CSS属性需添加-ms-前缀
2、-moz-	   -moz-box-shadow	所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
3、-o-	   -o-box-shadow	Opera浏览器专属的CSS属性需添加-o-前缀
4、-webkit-   -webkit-box-shadow	所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀

四、CSS3新增加的属性

1、文字阴影

（1）属性：text-shadow

（2）属性取值：text-shadow:h-shadow v-shadow blur color;

h-shadow-----水平反向上的阴影位置
    正数：向右走
    负数：向左走
v-shadow-----垂直方向上的阴影位置
    正数：向下走
    负数：向上走
blur---------阴影的模糊距离
color--------阴影的颜色
示例：
    text-shadow: 20px 20px 2px red;
多个阴影也可添加，示例如下：
    text-shadow: 20px 20px 2px red,-10px -30px 5px blue;

注意事项：前面的影子在上面，后面的影子在下面

2、盒子阴影

（1）属性：box-shadow

（2）属性取值：box-shadow:h-shadow v-shadow blur size color inset;

h-shadow-----水平方向上的阴影位置（*）
    正数：向右走
    负数：向左走
v-shadow-----垂直方向上的阴影位置（*）
    正数：向下走
    负数：向上走
blur---------阴影的模糊距离
size---------延展半径
color--------阴影的颜色
inset--------内阴影设置，不设置则代表外阴影
示例：
    box-shadow: 30px 30px 5px 40px blue inset;
多个阴影也可添加---取值同文本阴影一致，中间使用逗号分隔开
示例：
    box-shadow: 30px 30px blue,-30px -30px yellow;

3、CSS设置中英文大小写的属性

（1）控制文本的大小写

属性：text-transform
属性值：
    text-transform:capitalize;-----文本中的每个单词以大写字母开头
    text-transform:uppercase;------文本中所有字母都变成大写字母
    text-transform:lowercase;------文本中所有字母都变成小写字母
    text-transform:none;-----------默认值，无大小写转换

（2）小型大写字符

属性：font-variant
属性值：
    font-variant:normal;---------默认值
    font-variant:small-caps;-----浏览器会显示小型大写字母的字体
    

注意事项：切换小型大写字符时只将小写字母切换至大写并显示小型大写字体，之前就是大写字母的则保持原样

4、CSS3的圆角

（1）目的：为了设置圆角

（2）属性：

border-radius（复合属性）/border-垂直方向-水平方向-radius（单角属性）

复合属性
属性取值：数值px
取值：v1;--------------实现四个方向的圆角
取值：v1 v2;-----------实现四个方向的圆角显示，v1代表左上右下，v2代表右上左下
取值：v1 v2 v3;--------实现四个方向的圆角显示，v1代表左上，v2代表右上左下，v3代表右下
取值：v1 v2 v3 v4;-----实现四个方向的圆角显示，v1代表左上，v2代表右上，v3代表右下，v4代表左下
规律：从左上角开始，顺时针旋转记忆
示例
    设置一个角的时候：border-radius: 30px 0 0 0;

单角属性---只设置一个角 
border-垂直方向-水平方向-radius
    垂直：top、bottom
    水平：left、right
        border-top-left-radius---------左上
        border-top-right-radius--------右上
        border-bottom-left-radius------左下
        border-bottom-right-radius-----右下

（3）用法说明：

圆角的水平半径和垂直半径

border-radius:x/y;
    x-------所有角的水平半径
    y-------所有角的垂直半径
示例：
border-radius:x1 x2 x3 x4/y1 y2 y3 y4;
    /前面代表的是每一个角的水平半径
    /后面代表的是每一个角的垂直半径

注意：水平半径和垂直半径设置的时候，只会应用在复合属性上（border-radius），不会应用在单角属性上

（4）长方形/正方形应用

@ 正方形

取值为实际总宽度的一半时，会变成一个正圆
要想使得正方形变成一个圆形，可以直接设置取值为50%
即：
    border-radius: 50%;

@ 长方形

实际开发时，长方形盒子设置圆角时，不会给百分比取值，除非想实现椭圆的效果 
要想实现操场跑道效果，则取值要给出实际数值-----（高度+边框）的一半
即：
    width: 500px;
    height: 200px;
    border: 10px solid gray;
    border-radius: 110px;-----110px为高度+边框后的一半

5、CSS3的背景

（1）属性：background-size----背景图大小

（2）属性取值：

background-size:200px  100px; 或者 background-size:200%  100%;
background-size:cover;----把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；但是背景图像的某些部分也许无法显示在背景定位区域中--显示不全
background-size:contain;----保持背景图像本身的宽高比例不变进行缩放；但是可能会存在留白问题

6、CSS3的字体图标书写

（1）引入外部字体

原因：浏览器里面有一部分字体不支持不显示，但是我们想要让它显示出来则需要引入外部字体

引入方法：
    CSS基本语法
        @font-face {
            font-family:自己命名;
            src:url(字体路径);
            font-weight:normal;
            font-style:normal;
        }

示例：

<style>
        /* 引入外部字体 */
        @font-face {
            font-family: 字体1;
            src: url(outFont/ARDECODE.ttf);
        }
        @font-face {
            font-family: 字体2;
            src: url(outFont/HYC6GFM.TTF);
        }
        
        div {
            font-size: 20px;
            /* 修饰字体 */
            font-family: 字体1;
        }
        p {
            font-size: 30px;
            font-family: 字体2;
        }

    </style>

（2）引入字体图标

字体图标：
默认的是一个图，但是遵循所有的字体属性，字体图标经常应用在移动端布局上面
字体图标也被称为iconfont字体图标
        
如何引入如何使用icon字体图标（提示：你的font文件夹需要放在站点里面）
1、在使用的文件中，需要使用link引入font文件夹里面的iconfont.css
<link rel="stylesheet" href="font/iconfont.css">

2、给对应元素起对应名字即可：icon名字（在浏览器中查看）
<div class="box iconfont icon-***">

7、CSS3渐变效果

CSS3渐变效果分为线性渐变以及径向渐变

8、渐变的兼容性

表中的数字指定了完全支持该属性的第一个浏览器版本，后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本

9、背景的线性渐变

（1）属性：

属性：
background：linear-gradient(to 方向词,col1,col2,col3)

注解：
to 方向词：到达某一个方向
        to top:从下面开始到达上面
        to bottom:从上面开始到达下面
        to left:从右侧开始到达左侧
        to right:从左侧开始到达右侧
col1,col2,col3------渐变的颜色
        col1:开始的颜色
        col2:中间的颜色
        col3:结束的颜色

（2）线性渐变方向

• to 方向词;------------到达某一个方向

示例：

    background: linear-gradient(to bottom,red,green,blue);

• to 方向词1 方向词2;----到达某一个角

to top left;-------从右下角开始，到达左上角

to top right;------从左下角开始，到达右上角

to bottom left;----从右上角开始，到达左下角

to bottom right;---从左上角开始，到达右下角

示例：

background: linear-gradient(to top left,red,green,blue);

• 不跟任何参数也能实现，默认是从上向下进行渐变的

示例：

background: linear-gradient(red,green,blue);

• 沿着一个度数/角度进行渐变-numdeg 其中num代表数值，deg代表度数单位

示例：

background: linear-gradient(10deg,red,green,blue);    

备注：如果不跟度数以及方向词，则默认180度

10、线性渐变重复

示例：

background: repeating-linear-gradient(to left,red,yellow 10%,green 20%);

11、背景的径向渐变

（1）属性：

background: radial-gradient(center, shape, size, co1,col2,col3) 

（2）属性值拆解

center---渐变位置
    渐变起点的位置，可以为百分比，默认是图形的正中心
    
shape---渐变形状
    ellipse表示椭圆形，circle表示圆形，默认为ellipse；
    如果元素形状为正方形的元素，则ellipse和circle显示一样
    
size---渐变大小
    closest-side：最近边；
    farthest-side：最远边；
    closest-corner：最近角；
    farthest-corner：最远角

col---渐变颜色
    col1开始颜色; col2中间颜色; col3结束颜色

示例：

/* 到达最近的边结束 */
.box1 {
    background: -webkit-radial-gradient(100px 50px,closest-side,red,green,blue);
}
/* 到达最近的边结束 */
.box2 {
    background: -webkit-radial-gradient(100px 50px,farthest-side,red,green,blue);
}
/* 到达最近的角结束 */
.box3 {
    background: -webkit-radial-gradient(100px 50px,closest-corner,red,green,blue);
}
/* 到达最远的角结束 */
.box4 {
    background: -webkit-radial-gradient(100px 50px,farthest-corner,red,green,blue);
}

12、径向渐变重复

示例：

background: repeating-radial-gradient(red,green 10%,blue 20%);