德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流(https://www.wxclwl.com)
日期:2023/03/26 01:44作者:柯乔喜人气:
1、属性选择器
[attribute=value] 用于选取带有指定属性和值的元素。
[title=W3School]{ border:5px solid blue; }
[attribute~=value] 包含指定词汇的元素。后代选择器
[title~=hello] { color:red; }
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[lang|=en] { color:red; }<p lang="en">Hello!</p><p lang="en-us">Hi!</p>
[attribute^=value] 匹配属性值以指定值开头的每个元素。
a[src^="https"]
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
a[src$=".pdf"]
[attribute*=value] 包含指定值的每个元素。
a[src*="abc"]
2、伪类选择器
:nth-child(n) ——p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 适用于给父类名使用
:nth-last-child(n)—— p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n) ——p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) ——p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
3、颜色
RGBA、HSLA模式
优点:相较opacity,不具有继承性,即不会影响子元素的透明度
background-color: hsla(182, 44%, 76%, .5);
background-color: rgba(166, 218, 220, .5);
HSLA模式:
H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。
S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高
L是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。
A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。
4、文字阴影text-shadow、 圆角边框border-radius、阴影box-shadow和倒影box-reflect
text-shadow
x-shadow 必需。 水平阴影的位置。允许负值。
y-shadow 必需。 垂直阴影的位置。允许负值。
distance 可选。 模糊的距离
color 可选。 阴影的颜色
box-shadow
x-shadow 必需。阴影水平偏移量,可正可负,正值表示阴影在右边,负值表示阴影在左边。
y-shadow 必需。阴影垂直偏移量,可正可负,正值表示阴影在上边,负值表示阴影在下边。
distance 可选。阴影模糊距离。只能为正值,值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊。
size 可选。阴影扩展半径。可正可负,正值表示整个阴影都延展扩大,负值表示缩小。
color可选。阴影的颜色。
inset可选。将外部阴影 (outset) 改为内部阴影。
box-reflect
向框添加一个或多个倒影。
(1)direction:定义倒影的方向,取值包括:
above:倒影在对象的上边。
below:倒影在对象的下边。
left:倒影在对象的左边。
right:倒影在对象的右边。
(2)offset:定义倒影与对象之间的间隔,可正可负,默认为0。取值包括:
长度值
百分比(根据对象的尺寸进行确定)
(3)mask-box-image:定义遮罩图像,该图像将覆盖投影区域,默认为无遮罩。
<url>:使用绝对或相对地址指定遮罩图像。
<linear-gradient>:使用线性渐变创建遮罩图像。
<radial-gradient>:使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。
5、word-break
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
6、text-overflow
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
7、transition
旋转(rotate):
rotate支持一个参数,一个角度值 0-360deg
#demo { transform:rotate(180deg) ;/*实现旋转,左上角的东西会在右下角显示*/}缩放(scale):
scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正常,<1为缩放,>1为放大;
#demo { transform:scale(1.2);/*放大1.2倍*/ transform:scale(.8);/*缩小为正常的0.8倍*/}scale提供两个子方法,scaleX,scaleY,用来分别设置x或y的缩放;
倾斜(skew):
skew支持两个参数(x,y),参数类型为角度(deg),如果不填y的话,则默认为0(与缩放不同);
#demo { transform:skew(45deg);/*文本沿x轴向左倾斜45°*/ transform:skew(0,45deg);/*文本沿y轴向下倾斜45°*/}如果仅设x或y,可直接使用两个子方法,skewX与skewY;
平移(translate):
translate接收两个参数(x,y)为平移的距离,如不填y值,则默认为0,支持所有css内有效的长度单位(使用translate用来移动元素不会触发重排,只有重绘);
#demo { transform:translate(20px,5vh);/*向左移动二十像素,向下移动百分之五的视窗高度*/}同样有两个子方法,translateX,translateY;
8、animation
通过animation属性指定@keyframe来完成关键帧动画;
@keyframe用法:
@keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% { top: 0; }/*100%可用to关键字替代*/}由于是CSS3,所以不出意外的各种前缀:
单个帧中可填写多个属性,而且不需要保证一致,如:
@-webkit-keyframes identifier { from { top: 0; } 50% { top: 10px;background-color:red; } to { top: 20px;color:red; } }/*这是一个完全有效的关键帧定义*/需要注意的有几点:
关键帧中有效的属性为可动画属性;如出现不可动画属性,会忽略该属性,不影响其余属性的动画,
如属性后跟有 !important,则会忽略该属性,
某个关键帧如果重复定义,则取后定义的帧,
@-webkit-keyframes identifier { from { top: 0; } 50% { top: 10px; /*该属性会动画*/ background-color:red !important; /*因为有!important字样,所以该条将被忽略*/ text-align:center; /*由于该属性不为可动画属性,因此也被忽略*/} to { top: 20px;color:red; } 100% {color:green; } /*由于to关键字表示100%,所以该动画只会执行改变颜色为green,而to所对应的属性全部被忽略*/}帧数范围为0%-100%,不属于这个范围的则被忽略(经实验,关键帧定义可以不按顺序来,可以正确执行,但是可读性不太好);
Animation用法:
animation-name:设置动画的名称,就是@keyframe后跟的标识;
animation-duration:设置动画花费的时间,//这两个为必填属性,第一个不解释了,第二个必填的原因为默认值是0s,0s是不会产生动画效果的,所以为必填;
animation-timing-function:设置动画的速度曲线,默认值为 ease,可选值有数个,可通过cubic-bezier函数来自定义,这里有一些定义好的,可以直接拿来用的函数,传送阵;
animation-delay:设置动画开始前的等待时间,默认为0s;
animation-iteration-count:设置动画执行次数,默认为1,使用 infinite 关键字可以使动画无限循环;
animation-direction:设置动画执行完后时候倒序执行,默认为normal,使用 alternate 关键字开启倒序执行//仅有animation-iteration-count值为infinite时才会激活,倒序执行消耗时间为animation-duration设置的时间;
animation-play-state:设置动画当前状态,默认是 running ,为执行状态,可以设置为 paused 为暂停,
animation-fill-mode:设置动画执行完后的状态(复原(none),保持第一帧(backwards)以及保持最后一帧(forwards),还有一个both值 MDN说是同时backwards和forwards,原谅我没有试出它与forwards的区别...,)
//设置animation-iteration-count值为infinite时将导致该属性失效;
animation的简写方式对顺序要求特别严格,规格如下:
animation:name duration timing-function delay iteration-count direction play-state fill-mode;
使用时需注意:
各种前缀...@keyframe里边如果用到了transform,也是需要加前缀的,如:
@-webkit-keyframe demo { from {-webkit-transform:rotate(7deg);} to {-webkit-transform:rotate(14deg);} }