CSS3

2023-04-08 23:22| 来源: 网络整理| 查看: 265

第1章选择器 1.1.基本选择器 1.1.1子元素选择器 1)定义：只能选择某元素的子元素 2)语法：父元素>子元素 1.1.2相邻兄弟选择器 1)定义：可以选择紧接着在另外一个元素后的元素，而且他们具有一个相同的父元素 2)语法：元素 + 相邻兄弟元素 1.1.3通用兄弟选择器 1)定义：选择某元素后边的所有兄弟元素，而且他们具有一个共同的父亲 2)语法：元素 ~ 后面所有兄弟元素 1.1.4群组选择器 1)定义：将具有相同样式的元素分组在一起，每个选择器之间用逗号，隔开

语法：元素1，元素2，元素3，....... 1.2.属性选择器 1.2.1 element[attribute] 1)定义：为带有attribute属性的元素设置样式 2)语法：element[attribute] 1.2.2 element[attribute='value'] 定义：为attribute='value'属性的元素设置样式 2)语法：element[attribute='value'] 1.2.3 element[attribute~='value'] 定义：选择attribute属性包含单词value的元素,并设置样式语法：element[attribute~='value'] 1.2.4 element[attribute^='value'] 定义：设置attribute属性值，以value开头的所有元素样式 2)语法：element[attribute^='value'] 1.2.5 element[attribute$='value'] 定义：设置attribute属性值，以value结尾的所有元素样式语法：element[attribute$='value'] 1.2.6 element[attribute='value'] 1)定义：设置attribute属性值，包含value的所有元素，并为其设置样式 2)语法：element[attribute='value'] 1.3.动态伪类 1.3.1 锚点伪类 1):link 2):visited 1.3.2 用户行为伪类 :hover :active :focus 1.3.3 目标伪类 :target 当我们点击锚链接时，对应ID的元素会显示在视口 1.3.4 checked状态伪类 checkbox:只能设置宽度和高度，不能设置背景颜色和边框清除input的默认样式 appearance: none; 1.3.5 CSS3结构类 first-child：选择属于其父元素的首个子元素的每个element元素，并为其设置样式（element:first-child） last-child：选择属于其父元素的最后一个子元素的每个element元素，并为其设置样式（element:last-child） nth-child(n)：选择某元素下第number个element元素（n是一个简单的表达式，不能用其他字母代替，n从0开始计算） 1.nth-child(odd) : 可用于匹配下标是奇数的元素的关键字 2.nth-child(even):可用于匹配下标是偶数的元素的关键字 nth-last-child()：匹配属于其元素的第n个元素的每个元素，从最后一个子元素开始计数(element:nth-last-child(n)) nth-of-type()：匹配属于父元素的特定类型的第n个子元素（element:nth-of-type()） nth-last-of-type()：选匹配属于父元素的特定类型的第n个子元素，从最后一个开始计数(element:nth-last-of-type()） first-of-type()：匹配属于其父元素的特定类型的首个子元素的每个元素（element：first-of-type()） last-of-type()：匹配属于其父元素的特定类型的最后一个子元素的每个元素（element：last-of-type()） :only-child：匹配属于其父元素的唯一子元素的每个元素（element:only-child） :only-of-type：匹配属于其父元素特定类型的唯一子元素的每个元素（element :only-of-type） :empty：匹配没有子元素（包括文本节点）的每个元素（element :empty ---- div:empty） 1.4.否定选择器 1.4.1 定义匹配非元素或者选择器的每个元素 1.4.2 语法父元素：not(子元素或者选择器) 1.4.2 案例 ul :not(span) 1.5.伪元素 1.5.1 element::first-line 对元素的第一行文本进行设置，只能用于块级元素 1.5.2 element::first-letter 用于向文本的首字母设置特殊样式，只能用于块级元素 1.5.3 element::before 在元素的内容前面插入新内容，常与content配合使用 1.5.4 element::after 在元素的内容后面插入新内容，常与content配合使用 1.5.5 element::selection 用于设置浏览器中选中文本后的背景色与前景色 1.5.6 伪元素与元素的区别无法通过JS获取其DOM，无法通过浏览器直接查看伪元素默认是 inline 1.5.7 使用伪元素注意事项 1)使用伪元素before,after必须设置content 2)使用伪元素before,after显示背景图，一定要使用display设置为块元素 3)使用伪元素before,after设置为display:inline_block,需要再次设置vertcal-align:middle 1.1. CSS权重（优先级） 1.6.1 定义

当很多规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程

1.6.2 权重的等级与权值

行内样式（1000）> ID选择器（100）>类，属性选择器和伪类选择器（10）> 元素选择器和伪元素选择器（1）>通配符选择器（0）

1.6.3 CSS权重规则当多个选择器发生冲突时，会选择权重高的选择器来显示，权重越高越优先显示比较时需要将多个选择器的权重进行相加在进行比较，如果权重一样，后面的会覆盖前面的样式权重相加不可能超过他的最大数量级，例如无论多少个元素组成的选择器，都没有一个class选择器权重高可以在样式后边添加一个！important ，这样该样式将会拥有最大的权重，其他样式都不能将其覆盖（注意：尽量不要使用！important）第2章边框圆角 2.1 Border-radius 2.1.1定义

可以为元素添加圆角边框（块元素，行内块元素，行内元素）

2.1.2 语法使用四个值：左上角右上角右下角左下角三个值：左上角右上角和左下角右下角 3)两个值：左上角和右下角右上角和左下角 4)一个值：4个角都生效 2.2****圆形与椭圆形一旦使用百分比，参照的是元素本身的高度与宽度当拿50%时，宽等于高 ---- 圆形宽不等于高 --- 椭圆形椭圆形：border-radius: x轴半径 / y轴半径第3章盒阴影 3.1 Box-shadow 3.1.1定义可以控制一个或多个下拉阴影的框 3.1.2 语法使用 box-shadow: 水平方向的偏移量垂直方向的偏移量模糊程度扩展程度颜色是否具有内阴影如果设置多个阴影，各项参数使用逗号分开 3.2内阴影 inset(默认没有，也就是默认是外阴影) 加上inset,由元素本身的位置先里挤效果注意问题：扩展程度可为负值，但是模糊不可以第4章背景 4.1背景裁剪 4.1.1定义 background-cilp：指定背景的绘制区域 4.1.2 语法使用 background-cilp：border-box / padding-box / content-box border-box:默认值 4.2背景原始起始位置 4.2.1定义 background-origin：设置背景图像的原始起始位置 4.2.2 语法使用 background-origin：border-box / padding-box / content-box padding-box:默认值 4.2.3 注意问题 background-position:定义背景图片的位置，水平与垂直方向上面的偏移量（参考点与这三个有关系） 4.3背景图像的大小 4.3.1定义 background-size：指定背景图像的大小 4.3.2 语法使用 background-size：number / % / cover / contain 4.3.3 属性说明 background-size：宽度高度（如果只写一个数值，第二个数值默认auto）百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小 cover：将背景图片以容器最远边进行缩放，如果高度达到一定比例100%，宽度多出的会溢出 contain：将背景图片以容器最近边进行缩放，如果高度达到一定比例100%，宽度部分就会出现空白 4.4多重背景 4.4.1定义 background-image：CSS3允许您为元素使用多个背景图片 4.4.2 语法使用 background-image: url('1.jpg),url('2.jpg') ... 使用逗号把图片分开 4.4.3 注意问题元素引入多个背景图片，前面图片会覆盖后面的图片第5章渐变 5.1线性渐变 5.1.1定义

background-image：是沿着一根轴线改变颜色，从起点到终点进行顺序渐变

5.1.2 语法使用

background-image:linear-gradient(方向，开始颜色，结束颜色)

5.1.3 方向分类从上到下（默认）：background: linear-gradient(red,blue); 从左到右：background: linear-gradient(to right,red,blue); 对角：background: linear-gradient(to right bottom,red,blue); 角度： 5.1.4 颜色结点

默认每个颜色均匀分布

background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%); 从0%到10%，为红色，从10%到20%为红色到蓝色的渐变，从20%到30%为蓝色到绿色的渐变，从30%到40%，为绿色到黄色的渐变 background: linear-gradient(red 50%,blue); 从0%到50%，为红色，从50%到100%为红色到蓝色的渐变，最后如果不写具体数值，默认到100% background: linear-gradient(red,blue 30%); 从0%到30%，为红色到蓝色的渐变，如果第一个不写，默认数值是 0% background: linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1)); 由透明色变为不透明色 5.1.5 重复渐变

background: repeating-linear-gradient(90deg,red 0%,blue 20%); 或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

5.1.6 注意问题

渐变本质绘制的是一张图片（背景图片），所以使用background或者使用background-image 百分比：把元素渐变方向的整体长度看成100%

5.****2径向渐变 5.2.1定义

background-image：从起点到终点，颜色从内向外渐变

5.2.2 语法使用

background:radial-gradient(形状尺寸，开始颜色，结束颜色)

5.2.3 形状分类圆形circle 椭圆形ellipse 注意：当元素的高和宽一样时，参数无论设置谁，都是圆形 5.2.4 颜色结点

background: radial-gradient(circle,red 30% ,blue 70%); 注意：此时的百分比,指的是圆心到元素最远端的距离（角度）

5.1.5尺寸大小 closest-side最近边 background: radial-gradient(closest-side circle,red , blue); farthest-side 最远边 background: radial-gradient(farthest-side circle,red , blue); closest-corner最近角 background: radial-gradient(closest-corner circle,red , blue); farthest-corner最远角 background: radial-gradient(farthest-corner circle,red , blue); 5.1.6 重复渐变

background: repeating-radial-gradient(red 0%,blue 20%); background: repeating-radial-gradient(red 0%,blue 10%,red 20%); 第6章过渡 6.1定义允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画改变css的属性值 6.2属性 6.1.1 transition-property

定义：设置对象中的参与过渡的属性语法：transition-property：none | all | property 参数说明： none：没有属性改变 all : 默认值，所有属性都改变 property：元素的属性名 color等 6.1.2 transition-duration 定义：设置对象过渡的持续时间语法：transition-duration：time 参数说明：规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0 6.1.3 transition-timing-function 定义：设置对象中过渡的动画类型语法：transition-timing-function：动画类型（只能使用一种）参数说明： linear:线性过渡（匀速）cubic-bezier(0,0,1,1) ease:平滑过渡（慢--快--慢），默认值 cubic-bezier(0.25,0.1,0.25,1) ease-in:慢--快 cubic-bezier(0.42,0,1,1) ease-out:快--慢 cubic-bezier(0,0,0.58,1) ease-in-out:慢--快--慢 cubic-bezier(0.42,0,0.58,1) 贝塞尔曲线 6.1.4 transition-delay 定义：设置对象延迟的过渡时间语法：transition-delay：time 参数说明：指定秒或者毫秒数之前要等待切换效果的开始，默认是0 6.1.5 transition 定义：设置对象变换时的过渡语法：transition：property timing-function duration delay；参数说明：时间顺序不能乱，其他参数位置不限如果想给多个属性添加不同的过度，参数之间使用逗号分开第7章变换 7.1定义让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素 7.2 2D变换 7.2.1 旋转定义：通过指定一个角度参数，对元素指定一个2D的旋转语法：transform：rotate(angle) 单位deg 注意：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转 7.2.2 平移定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动语法： transform：translateX() --- 仅水平方向移动 transform：translateY() --- 仅垂直方向移动 transform：translate( X, Y) --- 水平方向和垂直方向同时移动单位px 注意：如果只写一个参数，第二个默认是0，也就是只设置了水平方向上的位移 7.2.3 缩放定义：设置元素的缩放程度语法： transform：scaleX() --- 仅水平方向缩放 transform：scaleY() --- 仅垂直方向缩放 transform：scale(x,y) --- 使元素垂直和水平方向同时缩放没有单位语法：如果只写一个参数，元素垂直和水平方向同时缩放 7.2.4 扭曲/倾斜定义：设置元素的倾斜状态语法： transform：skewX() --- 仅使元素在水平方向上扭曲变形 transform：skewY() --- 仅使元素在垂直方向上扭曲变形 transform：skew(x,y) --- 使元素在水平方向和垂直方向上扭曲变形单位deg 语法： 0deg与180deg 效果一样 7.2.5 变换基点定义：元素变换的基准点语法： transform-origin：水平方向垂直方向默认值： rotate 几何中心点 skew 几何中心点 scale 几何中心点 translate 本身位置 7.3 3D变换 7.3.1 开启3D空间 transform-style: preserve-3d（一般对父元素设置） 7.3.2 3d变换设置 rotateX()：指对象在X轴上的旋转角度（变换基点： 50% 50% 0） rotateY()：指对象在Y轴上的旋转角度（变换基点： 50% 50% 0） rotateZ()：指对象在Z轴上的旋转角度（变换基点： 50% 50% 0） translateZ()：指对象在Z轴上面的平移（变换基点： 50% 50% 0） scaleZ():指对象在Z轴上面的缩放（变换基点： 50% 50% 0） 7.3.3 景深(灭点) 1)定义：实现元素在3D空间中的近大远小的效果 2)设置：父元素设置景深：perspective: 300px; 子元素设置景深：transform:perspective(300px) translateZ(-200px); 3)景深分析图 7.3.4 变换基点 1)默认值： 50% 50% 0 2)语法使用：可以使用关键字（top,bottom,left,right）,百分比，具体像素值等 3)注意：立体3d盒子 Z：只能使用具体的长度，不能使用百分比和关键字 4)案例：旋转的立体盒子 7.3.5 景深中心点 1)定义：改变观察者视角 2)语法使用： perspective-origin: top right; perspective-origin: top; 7.3.6 元素背面是否可见 backface-visibility:visible ;（默认值：可见） backface-visibility: hidden; 不可见第8章动画 8.1定义使元素从一种样式逐渐变化到另外一种样式的效果 8.2原理视觉暂留原理：人类具有”视觉暂留“的特征，人的眼睛在看到一幅画或一个物体后，在0.34s 内不会消失动画原理：通过把人物的表情，动物变化等动作，分解成许多动作瞬间的画幅，利用视觉原理，在一幅画还没消失前播放下一副画，就会给人造成一种流畅的视觉变化效果 8.3关键帧@keyframes 1)定义：keyframes关键帧，用来决定动画变化的关键位置（注意：keyframes 控制关键位置，并不是所有的位置） 2)语法： @keyframes animationname{ keyframes-selector{ cssStyles; } } 3)参数说明： animationname：必写项，定义动画的名称 keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间，或者使用from和to关键字也可以设置，from代表0%，to代表100% 8.4 animation属性 8.4.1 animation-name 1)定义：设置对象所应用的动画名称 2)语法：animation-name：keyframename | none 3)参数说明： keyframename：指定要绑定到选择器的关键帧的名称 8.4.2 animation-duration 1)定义：设置对象动画的持续时间 2)语法：animation-duration：time 3)参数说明：指定对象播放完成需要花费的时间，默认值是0 8.4.3 animation-timing-function 1)定义：设置对象动画的过渡类型 2)参数说明： linear:线性过渡（匀速） ease:平滑过渡（0--慢--快--慢），默认值 ease-in:慢--快 ease-out:快--慢 ease-in-out:慢--快--慢贝塞尔曲线

8.4.4 animation-delay 1)定义：设置对象动画的延迟时间 2)语法：animation-delay：time 3)参数说明：可选值，定义动画开始前等待的时间，以秒或者毫秒数计数，默认值是0 8.4.5 animation-iteration-count 1)定义：设置对象动画的循环次数 2)语法：animation-iteration-count ： infinite | number 3)参数说明： number为数字，其默认值是1 infinite：无限循环次数 8.4.6 animation-direction 1)定义：设置对象动画是否反向运动 2)语法： animation-direction：normal , reverse , alternate , alternate-reverse 3)参数说明： Normal:正常方向 reverse :反向运动 Alternate:先正常运动在反向运动，并持续交替运行，需要配合循环属性使用 alternate-reverse:先反向运动在正常运动，并持续交替运行，需要配合循环属性使用 8.4.7 animation-play-state 1)定义：设置对象是否正在运行或已暂停 2)语法：animation-play-state：paused | running 3)参数说明： paused ：指定暂停动画 running : 默认值，制定正在运行的动画 8.4.8 animation-fill-mode 1)定义：设置对象动画外的状态 2)语法：animation-fill-mode：backwards | both | forwards 3)参数说明： backwards ：让元素一开始与 form 状态保持一致 both : 让元素一开始与 form 状态保持一致,结束时候与to状态保持一致 forwards: 结束时候与to状态保持一致 8.4.9 animation 1)定义：设置对象所应用的动画特效 2)语法： animation ： name duration timing-function delay interation-count direction play-state 第9章伸缩盒模型 9.1新版本与老版本对比 9.1.1 flex容器新版: display: flex; display: -webkit-flex; 老版: display: box; display: -webkit-box; 9.1.2 主轴的布局方向新版: flex-direction: row; --- 主轴默认值 flex-direction: column; --- 主轴与侧轴发生对调老版: -webkit-box-orient: horizontal; --- 主轴默认值 -webkit-box-orient: vertical; --- 主轴与侧轴发生对调 9.1.3 主轴的排列方向新版: flex-direction: row-reverse; --- 主轴从左到右，start与end对调 flex-direction: column-reverse; --- 主轴与侧轴发生对调，主轴start与end对调老版: -webkit-box-direction: normal; --- 元素排从左到右，默认方向 -webkit-box-direction: reverse; --- 元素排从右到左，但是元素整体都在左边

9.1.4 富裕空间的管理（主轴）新版: justify-content: flex-start; --- 富裕空间在右侧 justify-content: flex-end; --- 富裕空间在左侧 justify-content: center; --- 富裕空间在两边 justify-content: space-around; --- 富裕空间在左侧包含每一个伸缩项目 justify-content: space-between; --- 每一个伸缩项目包含富裕空间

老版: -webkit-box-pack: start; --- 默认值：富裕空间在右边 -webkit-box-pack:end; --- 富裕空间在左边 -webkit-box-pack:center; --- 富裕空间包含伸缩项目的整体，使伸缩项目整体在中间，富裕空间在两边 -webkit-box-pack:justify; --- 伸缩项目包含富裕空间 9.1.5 富裕空间的管理（侧轴）新版:伸缩项目的高度又自身内容撑开 align-items: flex-start; --- 富裕空间在下边 align-items: flex-end; --- 富裕空间在上边 align-items: center; --- 富裕空间在两边 align-items: baseline; --- 富裕空间被基线分开 align-items: stretch; --- 拉伸，默认值老版: -webkit-box-align: start; --- 富裕空间在下边 -webkit-box-align: end; --- 富裕空间在上边 -webkit-box-align: center; --- 富裕空间在上下两边，富裕空间包含伸缩项目的整体，使伸缩项目整体在中间 9.1.6 弹性空间（伸缩项目）新版: flex-grow: 1; --- 将富裕空间分配到项目上老版: -webkit-box-flex: 1; --- 弹性空间，将富裕空间分配到项目上 9.2新版本特有属性 9.2.1 项目实现换行（flex容器） flex-wrap: nowrap; --- 默认值，父元素宽度不够，子元素自身宽度会被压缩 flex-wrap: wrap; --- 父元素宽度不够，子元素会进行换行 flex-wrap: wrap-reverse; --- 子元素换行的同时，侧轴的start与end发生对调出现flex-wrap：wrap；之后，出现单行的富裕空间注意：align-items 每一行的富裕空间，align-items: flex-start; 9.2.2 控制整体侧轴的富裕空间（flex容器） align-content: flex-start; --- 项目整体进行打包，放在整体侧轴的start处 align-content: flex-end; --- 项目整体进行打包，放在整体侧轴的end处 align-content: center; --- 项目整体进行打包，放在整体侧轴的center处注意：align-items 与 align-content 发生冲突时，看元素是否换行如果没有换行align-items 生效如果有换行align-content 生效 --- 打包 align-content 生效条件： 1)在伸缩容器中产生换行flex-wrap: wrap; 2)同时设置足够高的容器高度（因为需要整体打包才能看见效果，所以需要高度） 9.2.3 控制主轴和侧轴的位置及方向（flex容器） flex-flow 是 flex-wrap 与 flex-direction 的缩写 flex-flow:wrap-reverse column-reverse; 与flex-wrap: wrap-reverse;flex-direction: column-reverse;实现效果一样 9.2.4 项目的排列顺序（flex项目） order: 1; order排序，把排序元素先单独拿出来，让剩余元素先正常排列，排完之后，order元素在其后边再进行顺序排列 order是沿着主轴方向进行排序的

9.2.5 项目自身侧轴的富裕空间（flex项目）每一个项目控制自身的侧轴 align-self: flex-start; align-self: flex-end; align-self: center; 9.2.6 收缩率（flex项目）当伸缩项目设置宽度，比容器宽度还要大时，元素并没有发生溢出的情况，那此时就出现一个东西叫收缩因子（收缩率） flex-shrink:拉伸银子 0 ---不拉伸 flex-shrink:收缩因子默认值：1 --- 收缩 9.2.7 基准值（flex项目）子元素的基准值 flex-basis：0

第10章多列 10.1定义

使用CSS3，能够创建多个列来对文本进行布局 ( 就像报纸那样)

10.2属性 10.2.1 column-count

1)定义：规定元素应该被分隔的列数 2)语法：column-count: number;

10.2.2 column-****fill

1)定义：规定如何填充列 2)语法：column-fill: balance | auto;

10.2.3 column-gap

1)定义：规定列之间的间隔 2)语法：column-gap: 像素值;

10.2.4 column-rule

1)定义：所有 column-rule-* 属性的简写属性(颜色，样式，宽度) 2)语法：column-rule: 颜色，样式，宽度;

列之间规则的颜色：column-rule-color 列之间规则的样式：column-rule-style 列之间规则的宽度：column-rule-width 10.2.5 column-span

1)定义：元素应该横跨的列数 2)语法：column-span:number

10.2.6 column-width

1)定义：列的宽度 2)语法：column-width:像素值

【本文地址】

公司简介

联系我们