CSS3新增选择器
1. 新增选择器
1.1 属性选择器
/* 可以自定义属性 */
/* 1、[x] 选择所有带有x属性元素 */
[class] {}
/* 2、[x=y] 选择所有使用x="y"的元素 */
[class=head1] {}
/* 3、[x|=y] 选择 x 属性以 y- 为开头的所有元素 */
[name|=eng] {}
/* 4、[x^=y] 选择每一个x属性的值以"y"开头的元素 */
a[href^="http"] {}
/* 5、[x$="y"] 选择每一个x属性的值以"y"结尾的元素 */
[href$="com"] {}
/* 6、[x*="y"] 选择每一个x属性的值包含字符串"y"的元素 */
[href*="www"] {}
1.2 伪元素选择器
/* 1、::before 在每个元素之前插入内容(里边的前边) */ [box]::before {} /* 2、::after 在每个
元素之后插入内容 */ [box]::after {} /* 3、::first-letter 选择每一个
元素的第一个字母或者第一个汉字 */ /* 4、::first-line 选择每一个
元素的第一行 */
1.3 伪类选择器
/* 1、p:nth-child(2) 选择p元素的父元素的第二个子元素 */
.list li:nth-child(2) {}
/* 2、p:nth-last-child(2) 选择p元素的父元素的倒数第二个子元素 */
.list li:nth-last-child(2) {}
/* 3、p:first-child 选择p元素的父元素的第一个子元素 */
.list li:first-child {}
/* 4、p:last-child 选择p元素的父元素的最后一个子元素 */
.list li:last-child {}
/* 5、:nth-of-type(n) p:nth-of-type(2) 选择每个p元素的父元素的第二个p元素 */
.list li:nth-of-type(5) {}
2. 新增样式
2.1 颜色标识
/* hsl(色调(0-360)，饱和度(0-100%)，明度(0-100%)) */ background-color: hsl(281, 100%, 50%);
2.2 文本效果
/* 省略号 */ /* 强制文本同一行显示 */ white-space: nowrap; /* 溢出内容隐藏 */ overflow: hidden; /* 省略号 (缺一不可)*/ text-overflow: ellipsis; /* 水平阴影尺寸、垂直阴影属性、阴影的模糊程度、阴影的颜色 */ text-shadow: 10px 20px 5px hsl(120, 100%, 80%); /* 滚动条 */ overflow: scroll; /* 超出显示滚动条 */ overflow: auto; /* 超出显示滚动条，不超出不显示 */
2.3 盒子效果
/* 盒子阴影: 水平阴影尺寸、垂直阴影尺寸、阴影的模糊程度、颜色 */
box-shadow: 20px 20px 20px violet;
/* 怪异盒模型：边框，内边距不影响元素尺寸*/
box-sizing: border-box;
/* *边框图片 80为边框尺寸 */
border-image: url(images/莫甘娜.jpg) 80 round;
/* 三角形: 盒子的宽高设为0，边框填满盒子、transparent 边框透明 */
width: 0px;
height: 0px;
border-top: 100px solid violet;
border-bottom: 100px solid transparent;
border-left: 100px solid violet;
border-right: 100px solid transparent;
/* 按钮禁用 */
3. 渐变过渡
3.1 渐变
/* 渐变：两个及以上的颜色之间的平稳过渡 */
/* 渐变的分类：线性渐变、径向渐变 */
/* 线性渐变: */
background-image: linear-gradient(to top,violet,blue);
/* 默认从上到下
从下到上 to top,
从左下到右上 to right top, */
/* 径向渐变：*/
background-image: radial-gradient( ellipse,violet,blue);
/* 由内向外
默认圆形 circle、椭圆 ellipse*/
/* 背景图默认不占内边距 */
background-origin: content-box;
/* 默认背景图占内边距 */
background-origin: padding-box;
/* 背景图占边框 */
background-origin: border-box;
/* 背景色默认占边框和内边距 */
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
3.2 过渡
/* 过渡属性名 */ transition-property: background-color; /* 过渡周期 */ transition-duration: 0.5s; /* 过度延迟 */ transition-delay: 1ms; /* 过渡时间曲线 */ transition-timing-function: linear; /* 过渡总写 属性、周期、延迟、时间曲线 */ transition: background-color,0.5s,1ms,linear; /* 兼容浏览器 */ -webkit-transition: ; -moz-transition: ; -o-transition: ; -ms-transition: ;
4. 转换
/* 定位的层叠属性 z-index: 默认为零 大的在上边 */ z-index: 1;
4.1 旋转
/* 设置中心 */ transform-origin: left top; /* 旋转 rotate(度数deg): 默认顺时针，负逆时针、以盒子正中心旋转 */ transform: rotate(-30deg);
4.2 平移
/* 平移：水平，垂直 */ transform: translate(80px,-30px);
4.3 缩放和拉伸
/* 缩放拉伸: 倍数*/ transform: scale(0.8,0.7);
4.4 扭曲
/* 扭曲:水平、垂直 */ transform: skew(30deg,0);
5. 动画
5.1 创建
/* 动画属性 animation */ /* 创建 */ /* 动画名属性 */ animation-name: firstAnimation; /* 动画周期 */ animation-duration: 5s; /* 动画延迟 */ animation-delay: 0; /* 动画时间曲线 匀速 linner、默认 慢快慢过渡 ease*/ animation-timing-function: linear; /* 动画次数 无穷 infinite*/ animation-iteration-count: infinite; /* 动画暂停 默认running*/ animation-play-state: paused; /* 综合设置 */ animation: firstAnimation 4s linear infinite;
5.2 设置
@keyframes firstAnimation {
/* 开始 */
from {
background-color: turquoise;
}
/* 结束 */
to {
background-color: blue;
border-radius: 50%;
}
/* 百分比 */
0% {
background-color: turquoise;
transform: rotate(0deg);
}
100% {
background-color: hotpink;
transform: rotate(180deg);
}
}
5.3 浏览器兼容
- -moz代表firefox浏览器私有属性
- -ms代表IE浏览器私有属性
- -webkit代表chrome、safari私有属性
- -o代表opera私有属性
6. 弹性容器
/* 当子元素宽度和大于父元素时，不会超出父元素，子元素宽度弹性变小*/ display: flex; /* 容器主轴排列方向 从左到右 row、从右到左 row-reverse*/ /* 从上到下 column、从下到上 column-reverse*/ flex-direction: row; /* 设置主轴是否换行 换行 wrap、不换行 nowrap、换行反转 wrap-reverse */ flex-wrap: wrap; /* flex-direction、flex-wrap的简写*/ flex-flow: row wrap; /* 主轴对齐方式 flex-start 左对齐、flex-end 右对齐*/ justify-content: space-between; /* 在交叉轴(主轴的垂直方向)上对齐方式 */ align-items: center;
7. 响应式布局
7.1 viewport
响应式布局：根据不同的设备展示不一样的网页布局
viewport：可视区域。
7.2 响应式布局案例
网格视图
首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。
Document Chania
- The Flight
- The City
- The Island
- The Food
The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
Resize the browser window to see how the content respond to the resizing.
7.3 媒体查询
/* 使用 @media 查询来制作响应式设计 */
/* @media only screen and (media feature) {
} */
@media only screen and (max-width:700px) and (min-width:400px) {
/* 屏幕的宽度0到500px的样式 */
body {
background-color: blue;
}
8. less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
使用less前需要先安装node.js，然后通过cnpm安装less。cnpm install -g less
以通过三种方法实现less的编译工作
8.1 在本地node环境下实现
- 创建一个less文件，类似于这样
@size: 200px;
@sizeHeight: 100px;
@bgcolor1: red;
@bgcolor2: blue;
@fontsize: 30px;
h1 {
width: @size;
height: @sizeHeight;
background-color: @bgcolor1;
}
h3 {
width: @bgcolor1;
height: @size;
background-color: @bgcolor2;
font-size: @fontsize;
}
- 将预处理less文件编译成css文件
lessc style.less style.css
- 引入style.css
8.2 在浏览器环境下实现
- 引入less.css文件
- 第二步：引入less.js文件
js文件如下
less.js
- vscode安装live server插件，在服务器中打开
8.3 vscode插件自动编译
- vscode安装Easy LESS插件
- 配置settings.json文件 （文件 - 首选项 - 设置 - 搜索设置settings.json）
加入如下代码
{ //settings.json
"less.compile": {
"out": "${workspaceRoot}\\css\\"
}
}
${workspaceRoot} 代表当前项目的根目录，后面路径自行配置
保存后会自动在项目根目录下的css文件夹下编译生成style.css