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 在每个<p>元素之前插入内容(里边的前边) */
[box]::before {}
/* 2、::after 在每个<p>元素之后插入内容 */
[box]::after {}
/* 3、::first-letter 选择每一个<P>元素的第一个字母或者第一个汉字 */
/* 4、::first-line 选择每一个<P>元素的第一行 */
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;
/* 按钮禁用 */
<!-- disabled 元素的属性 按钮禁用 -->
<!-- disabled
disabled=“disabled”
disabled=“true” -->
<button disabled></button>
<input type="button" value="按钮" disabled="true">
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。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
header {
background-color: purple;
padding: 35px 10px;
color: #fff;
font-size: 30px;
}
[class^="col-"] {
float: left;
padding: 10px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.row ul {
list-style: none;
padding: 0;
}
.row ul>li {
background-color: #33b5e5;
margin-bottom: 20px;
padding: 15px;
color: #fff;
}
.row ul>li:hover {
background-color: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<header>Chania</header>
<div class="row">
<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>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.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
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文件
<link rel="stylesheet/less" href="css/style.less">
- 第二步：引入less.js文件
<script src="js/less.js"></script>
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