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环境下实现

1. 创建一个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;
}

1. 将预处理less文件编译成css文件

lessc style.less style.css

1. 引入style.css

8.2 在浏览器环境下实现

1. 引入less.css文件

<link rel="stylesheet/less" href="css/style.less">

1. 第二步：引入less.js文件

<script src="js/less.js"></script>

js文件如下

less.js

1. vscode安装live server插件，在服务器中打开

8.3 vscode插件自动编译

1. vscode安装Easy LESS插件
2. 配置settings.json文件 （文件 - 首选项 - 设置 - 搜索设置settings.json）

加入如下代码

{ //settings.json

 
    "less.compile": {
       "out": "${workspaceRoot}\\css\\"
    }
}

${workspaceRoot} 代表当前项目的根目录，后面路径自行配置

保存后会自动在项目根目录下的css文件夹下编译生成style.css