CSS3

2021-05-07 02:03:13 阅读：220 来源： 互联网

标签：CSS3 box color 元素 width background col

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文件如下

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

标签：CSS3,box,color,元素,width,background,col
来源： https://www.cnblogs.com/recreyed/p/css3.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS3

CSS3

1. 新增选择器

1.1 属性选择器

1.2 伪元素选择器

1.3 伪类选择器

2. 新增样式

2.1 颜色标识

2.2 文本效果

2.3 盒子效果

3. 渐变过渡

3.1 渐变

3.2 过渡

4. 转换

4.1 旋转

4.2 平移

4.3 缩放和拉伸

4.4 扭曲

5. 动画

5.1 创建

5.2 设置

5.3 浏览器兼容

6. 弹性容器

7. 响应式布局

7.1 viewport

7.2 响应式布局案例

7.3 媒体查询

8. less

8.1 在本地node环境下实现

8.2 在浏览器环境下实现

8.3 vscode插件自动编译