我的CSS3学习笔记

Posted 2021-04-09 网页制作

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的CSS3学习笔记相关的知识，希望对你有一定的参考价值。

1.元字符使用：

[]: 全部可选项

||：并列

|：多选一

?: 0个或者一个

*：0个或者多个

{}: 范围

2.CSS3属性选择器：

E[attr]：存在attr属性即可；

E[attr=val]：属性值完全等于val

E[attr*=val]：属性值里包含val字符并且在“任意”位置

E[attr^=val]：属性值里包含val字符并且在“开始”位置

E[attr$=val]：属性值里包含val字符并且在“结束”位置

3.CSS3伪类选择器：

P:first-child：P元素的父元素的第1个子元素（第一个元素必须是p标签，否则无效）

P:last-child：其父元素的最后1个子元素

P:nth-child(n): 其父元素的第n个子元素（n遵循线性变化，其取值0、1、2、3、4...）

P:nth-last-child(n): 其父元素的第n个子元素（倒着数）

4.伪类：

E:empty ：空伪类；选中没有任何子节点的E元素；（使用不是非常广泛）

E:target ：目标伪类；结合锚点进行使用，处于当前锚点的元素会被选中；

E:not(selector) ：排除伪类；除selector（任意选择器）外的元素会被选中；

5.伪元素：

1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

2、E::first-line 文本第一行；

3、E::selection 可改变选中文本的样式；

4、E::before和E::after：在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

6.颜色：

RGBA：Red、Green、Blue、Alpha（红、绿、蓝、透明度）

HSLA：Hue、Saturation、Lightness、Alpha（色调（0-360）、饱和度（0%~100%）、亮度（0%~100%）、透明度（0~1））

注意：Alpha透明度相较opacity不可继承，不会影响子元素的透明度。

关于CSS透明度：

1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；

2 、transparent 不可调节透明度，始终完全透明

7.文本阴影 text-shadow（水平偏移量，垂直偏移量，模糊度，颜色）

如：text-shadow: 2px 2px 2px #CCC;（模糊度是不能为负值）

8.盒模型

1、box-sizing: border-box 盒子大小为 width

2、box-sizing: content-box 盒子大小为 width + padding + border

9.边框圆角 border-radius

10.边框阴影 box-shadow（水平偏移量，垂直偏移量，模糊度，颜色）

如box-shadow: 5px 5px 5px #CCC（模糊度是不能为负值；inset可以设置内阴影）

11.边框图片 border-image

参数详解

1、border-image-source

指定图片路径

2、border-image-repeat

指定裁切好的虚拟图片的平铺方式

a) round会自动调整尺寸，完整显示边框图片

b) repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。

3、border-image-slice

4、border-image-width

设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。

12.背景

1.background-size：背景图片大小

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

2、background-origin：背景图片定位的(background-position)参照原点

参数：

border-box以边框做为参考原点；

padding-box以内边距做为参考原点；

content-box以内容区做为参考点；

3、background-clip：对背景区域进行裁切，改变背景区域大小

参数：

border-box裁切边框以内为背景区域；

padding-box裁切内边距以内为背景区域；

content-box裁切内容区做为背景区域；

13.渐变

1.线性渐变（横向的）：linear-gradient【必要元素：方向、起始色、终止色、渐变距离】

2.径向渐变（由一个中心点开始扩散）：radial-gradient【必要元素：圆半径，中心点、起始色、终止色、渐变范围】

注：

注意：a 关于中心点

中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。

b 关于辐射范围

其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。

14.过渡 transition

过渡属性详解：

设置过渡属性：transition-property: all；

设置过渡时间：transition-duration: 2s;

过渡延时：transition-delay: 3s;

过渡速度：transition-timing-function: linear;

15.2D转换

1.移动 translate(X轴方向移动的距离，Y轴方向移动的距离)，单位像素值或者百分百，当为百分比时，是相对于自身的宽度和高度；

2.缩放scale(水平缩放，垂直缩放)，值可以取小数。

3.旋转 rotate(deg) ：正值为顺时针，负值为逆时针；

4.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

5.矩阵matrix() 把所有的2D转换组合到一起，需要6个参数（了解）。

6.transform-origin可以调整元素转换的原点

连写：transform: translate() rotate() scale() 顺序会影响转换的效果。

16.3D转换

rotateX：绕X轴旋转

rotateY：绕Y轴旋转

rotateZ.：绕Z轴旋转

translateX：在X轴移动

translateY：在Y轴移动

translateZ：在Z轴移动

用法：transform: rotateX(180deg); 表示绕X轴转180度

其他：

透视：perspective：

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素

b) 作为transform属性的一个值，做用于元素自身

transform-style: preserve-3d; 让元素在3D空间展示

backface-visibility：设置元素背面是否可见

学习文档：CSS3动画库；animate.css

17.CSS3动画

原理：设置多个节点来精确控制一个或者一组动画。

1.必要元素：

a、通过@keyframes指定动画序列；

/*定义动画序列*/

@keyframes rotate {

0% {

transform: rotateZ(0deg) scale(1);

}

50% {

}

100% {

transform: rotateZ(360deg) scale(2);

}

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2.关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度，linear、ease等

e、animation-play-state动画播放状态，running、paused等

f、animation-direction动画逆播，alternate等

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等

h、animation-iteration-count动画执行次数，inifinate等

i、steps(60) 表示动画分成60步完成

3.连写：animation: rotate 3s infinite linear;

18.伸缩布局 display：flex

1、必要元素：

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴，也可改变方向

2、各属性详解

a、flex-direction调整主轴方向（默认为水平方向）

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

f、flex-flow是flex-direction、flex-wrap的简写形式

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大

19.Web字体

五种字体类型：

A .ttf

B .otf

C .woff

D .eot

E .svg

查找中文字体的网站：http://www.zhaozi.cn/、http://www.youziku.com/

20.字体图标

用法：

1.定义字体，名字随便起

如：@font-face {

font-family: peach;

/* 指定字体文件，保证所有浏览器都能识别 */

src: url(../fonts/MiFie-Web-Font.ttf) format("truetype"), url(../fonts/MiFie-Web-Font.svg) format("svg"), url(../fonts/MiFie-Web-Font.woff) format("woff")

}

2.用乱码

.icon-mobilephone::before {

content: "\e908";

}

参考：

Font Awesome 使用介绍

http://fontawesome.dashgame.com/

定制自已的字体图标库：

过程：UI倒出svg格式的图片（矢量图）-->上传至iconfont.cn/其他-->生成字体图标-->生成字体文件

其他：

http://iconfont.cn/