css属性.docx
- 文档编号:26448508
- 上传时间:2023-06-19
- 格式:DOCX
- 页数:20
- 大小:35.25KB
css属性.docx
《css属性.docx》由会员分享,可在线阅读,更多相关《css属性.docx(20页珍藏版)》请在冰豆网上搜索。
css属性
CSS3新属性
1.css2中的背景属性
Background-color背景颜色
Background-image背景图片
Background-position背景图片的位置
Background-position-x背景图片的x位置
Background-position-y背景图片的y位置
Background-repeat背景图片的重复方式
Background-attachment背景图片的绑定方式
Background:
背景图片的综合属性设定
CSS3中新增的属性:
多背景属性
格式:
background:
url(图片地址)重复设定定位属性等,
url(图片地址)重复设定定位属性等,
url(图片地址)重复设定定位属性等....
Background-origin:
背景原点定位属性
Padding-box:
padding开始的位置为原点(默认)
Border-box从最外面边框开始的位置为原点
Content-box:
从内容开始的位置为原点
Background-clip:
背景图片切割属性
Border-box从边框开始切割(默认,不切割)
Padding-boxpadding向外(边框)的内容不现实
Content-box:
内容向外(边框和padding)不显示
text:
文字切割(需要使用浏览器前缀)
Background-size:
设置背景图片的大小
值为长度单位即可
Auto背景图片原始大小默认值
cover适当缩放图片使得图片刚好能覆盖元素
contain适当缩放图片使得元素刚好包含图片
关于颜色
CSS2中的颜色表示方式
英文单词:
red,green,blue,pink....
rgb模式:
rgb(红色值,绿色值,蓝色值)所有值为0-255
HEX模式:
#红色值绿色值蓝色值(所有值为00-FF)
CSS3中新增的颜色表示方式
rgba模式
增强的RGB模式,在RGB模式的基础上增加了A值,A表示透明度,取值为0-1之间的数值,0为完全透明,1为完全不透明
格式:
rgba(红色值,绿色值,蓝色值,透明度)
hsl模式
HSL模式也叫做色轮模式
H色调选择颜色种类取值0-360
S饱和度0%-100%
L亮度0%-100%
注意:
HSL模式的目的是为了无限的接近自然界颜色种类的表示方式。
hsla模式
在HSL模式的基础上添加的透明度值的新的颜色表示方式
H色调选择颜色种类取值0-360
S饱和度0%-100%
L亮度0%-100%
A透明度0-1之间的小数
新的颜色属性
Opacity:
设置透明度属性
设置元素的透明值,取值为0-1之间的小数
新的颜色值
Transparent透明属于英文单词颜色
关于浏览器前缀
浏览器:
IE浏览器-ms-前缀
火狐浏览器-moz-前缀
chrome浏览器-webkit-前缀
safari浏览器-webkit-前缀
opera浏览器-o-前缀
标准的实验性质属性书写规范:
-webkit-CSS属性;
-moz-CSS属性;
-o-CSS属性;
-ms-CSS属性;
CSS属性;
新的图像表示方式
渐变:
分为四种线性渐变、径向渐变、重复的线性渐变和重复的径向渐变。
注意:
渐变本质是图像。
不是一种颜色。
线性渐变
最简单的颜色渐变
Linear-gradient(开始颜色,结束颜色);
改变方向的颜色渐变
Linear-gradient(方向,开始颜色,结束颜色);
注意:
方向值可以使用位置单词,一共八个方向,left.right.,top,bottom,lefttop,leftbottom,righttop,rightbottom。
多颜色渐变
Linear-gradient(方向,开始颜色,中间色....,结束颜色)
制定渐变颜色的位置
Linear-gradient(方向,开始颜色位置点,中间色位置点....,结束颜色位置点)
注意:
位置点可以是像素可以是百分比,只要是长度就行...
径向渐变
最简单的径向渐变
Radial-gradient(开始颜色,结束颜色)
带有制定原点
Radial-gradient(原点,开始颜色,结束颜色)
注意:
原点为坐标,可以是像素可以是百分比也可以是英文单词.
设定渐变的形状
Radial-gradient(原点,形状,开始颜色,结束颜色)
circle圆形
ellipse椭圆形默认值
设定渐变的大小
Radial-gradient(原点,形状大小,开始颜色,结束颜色)
Closest-side最近的边
Closest-corner最近的角
Farthest-side最远的边
Farthest-corner最远的角
cover覆盖
contain包含
多颜色渐变
Radial-gradient(原点,形状大小,开始颜色,,中间色...结束颜色)
制定渐变颜色的位置
Radial-gradient(原点,形状大小,开始颜色位置点,中间色位置点...结束颜色位置点)
重复的线性渐变
Repeating-linear-gradient(方向,开始颜色,中间色...结束色位置点)
注意:
结束颜色的位置点决定渐变的重复次数,例如,50%重复2次,20%重复5次
重复的径向渐变
Repeating-radial-gradient(方向,开始颜色,中间色...结束色位置点)
注意:
结束颜色的位置点决定渐变的重复次数,例如,50%重复2次,20%重复5次
角度单位:
deg度,一个圆周为360度
turn圈/周一个圆周就是1turn
grad梯度一个圆周400梯度
rad弧度一个圆周2N弧度(基本不用..)
文本属性:
text-transform:
设定大小写转换的属性
auto原始大小
capitalize首字母大写
uppercase转化为大写字母
lowercase转化为小写字母
full-width适用于拉丁字符...
white-space:
设置元素内部空白字符的处理方式
normal正常
nowrap强制内容超过元素不换航
pre设置元素内部空白为与格式化模式,超过不换航
Pre-wrap:
设置元素内部为预格式化模式,超出换行
Tab-size:
设置tab键的长度
值为整数或者长度单位
注意:
设置整数值表示tab键的N倍。
Letter-spacing设置字符间距
值为长度单位(对汉字有效)
Word-spacing设置单词间距
值为长度单位(对汉字单词无效)
Word-break:
设置是否允许在一个单词内部断开换行
normal正常
break-all允许断开单词
Word-wrap:
设置一行内单词的断开设置(overflow-wrap)
normal正常
Word-break:
允许单词断开
注意:
word-break属性是在元素的边界处直接断开单词。
Word-wrap如果能够换行就换行处理,没办法时就断开单词。
Text-fill-color:
设置文字的填充颜色
Text-stroke:
设置文字的描边效果
格式:
text-stroke:
颜色粗细
Text-stroke-width:
设置描边的宽度
Text-stroke-color:
设置描边的颜色
边框背景图片
边框背景图片切割及对应视图
Border-image-source设置边框背景图像的资源
格式:
border-image-source:
url(图片地址)
Border-image-width:
设置边框背景图像的宽度
值为长度值
border-image-slice:
设置用于当作背景图的切割点
注意:
改值默认单位为像素,但是不可以添加单位,避免和宽度冲突。
Border-image-repeat:
设置边框背景图片的重复或者覆盖方式
stretch拉伸(默认值)
repeat重复图片
round重复图片,保证图片个数为整数个,会进行适当的缩放
Border-image-outset:
设置边框背景图片的外移值。
值为长度单位
Border-image:
边框背景图片的综合设定属性
格式:
Border-image:
url(图片地址)切割点/宽度重复
边框圆角属性:
Border-radius:
一次性设置四个角的圆角
格式1:
(四角)
Border-radius:
一个值
设定所有角的水平和垂直半径都是当前这个值
格式2:
(对角线)
Border-radius:
值1值2;
设置左上角和右下角的水平和垂直半径为值1
设置右上角和左下角的水平和垂直半径为值2
格式3:
Border-radius:
值1值2值3;
设置左上角的水平和垂直半径为值1.
设置右上角和左下角的水平和垂直半径为值2
设置右下角的水平和垂直半径为值3
格式4;
Border-radius:
值1值2值3值4:
从左上角到左下角顺时针的设定每个角的水平和垂直半径分别为值1值2值3值4.
格式5:
格式5:
(四角)
Border-radius:
值1/值2
设置四个角的每个角的水平半径为值1,垂直半径为值2
备注:
在格式5的基础上值1可以变为1-4个值,值2也可以写成1-4个值分别表示每个角的设定方式。
综合起来border-radius一共20种设定方式
Border-top-left-radius:
设置左上角的圆角
格式:
一个值的设置方式
Border-top-left-radius:
水平和垂直半径值;
两个值的设置方式
Border-top-left-radius:
水平半径值垂直半径值;
Border-top-right-radius设置右上角的圆角
格式:
一个值的设置方式
Border-top-right-radius:
水平和垂直半径值;
两个值的设置方式
Border-top-right-radius:
水平半径值垂直半径值;
Border-bottom-left-radius设置左下角的圆角
格式:
一个值的设置方式
Borde-bottom-left-radius:
水平和垂直半径值;
两个值的设置方式
Border-bottom-left-radius:
水平半径值垂直半径值;
Border-bottom-right-radius:
设置右下角的圆角
格式:
一个值的设置方式
Border-bottom-right-radius:
水平和垂直半径值;
两个值的设置方式
Borde-bottom-right-radius:
水平半径值垂直半径值;
定位属性:
clip定位元素切割属性
auto默认不切割
rect矩形切割
Rect(上,右,下,左)
上值:
从上倒下切多少
下值:
从上到下留多少
左值:
从左到右切多少
右值:
从左到右留多少
注意:
当前属性仅在元素是绝对定位时有效。
尺寸属性:
Width:
设置元素内容的宽度
Height:
设置元素内容的高度
Max-width:
设置元素的最大宽度
Max-height:
设置元素的最大高度
当前元素没有内容时,高度为0,添加内容后,元素会变高,但是一旦达到了最大高度,则不再继续变大,内容会超过元素。
Min-width:
设置元素的最小宽度。
Min-height:
设置元素的最小高度
当元素没有内容或者内容高度没有达到最小高度时,元素默认为最小高度,一旦内容超过元素的最小高度,则会增加元素的高度用来包含内容。
注意:
min和max的宽度设置较少使用。
盒子大小:
Box-sizing:
设置接受宽高的盒子的位置
Content-box:
宽高为盒子的content部分设定(默认)
Border-box:
宽高为盒子的所有部分(border、padding、content)设定,增加边框或者padding都会使得content发生变化
文本修饰:
Text-decoration:
文本修饰属性
Text-decoration-line:
设定文本修饰线的位置
underline下划线overline上划线line-through删除线
text-decoration-color:
设定文本修饰线的颜色
Text-decoration-style:
设定文本修饰线的风格
值和边框的风格一样。
Text-shadow:
设置文字的阴影属性
格式:
text-shadow:
水平偏移垂直偏移模糊程度颜色。
盒子阴影
Box-shadow:
设置元素的阴影
格式:
box-shadow:
水平偏移垂直偏移模糊程度增大尺寸颜色内置阴影.
书写模式:
Writing-mode:
设置文本的书写方向
Lr-tb从左到右,从上到下书写
Tb-rl从上倒下,从右到左书写。
direction:
设置文本流的方向
ltr正常方向,从左到右
rtl从右到左
Unicode-bidi设置文本内容的显示方向
normal正常
Override-bidi:
设置和direction方向一致
用户界面:
Cursor设定鼠标的样式
值:
有很多
pointer小手
none原装箭头
move十字键头
Url(图片地址)xy,pointer
Ime-mode:
设置输入法切换方式
值:
auto任意切换输入法
disabled禁止切换输入法,只能输入英文
Outline轮廓线综合属性
Outline-style:
设置轮廓线的样式
值和边框样式一样。
Outline-width设置轮廓线的宽度
Outline-color设置轮廓线的颜色
Outline-offset设置轮廓线的偏移位置
注意:
默认位置为0,在边框之外,可以设置正数或者负数,向外或者向内移动轮廓线,常用在表单中。
。
Resize:
设置元素的可调整大小属性
none禁止调整大小除了textarea都是默认值
both可以水平和垂直方向调整textarea的默认值
horizontal水平方向可以调整
vertical垂直方向可以调整
text-overflow:
设置文本溢出的处理方式(文本本身)
Clip:
超出文字切割处理
Ellipsis:
超出部分变成...
Zoom:
设置元素的放大或者缩小倍数。
值为整数或者小数,用来表示扩大或者缩小的倍数。
尽量不要使用该属性改变元素大小。
User-select:
设定用户是否可以选中文本内容
none禁止选中所有内容
text仅允许选中文本
element可以选中文本单受范围约束
All:
可以选中所有内容
注意:
ie69-都无法实现该属性,但是可以使用事件解决,onselectstart=”returnfalse”
变换属性
Transform-origin:
设置元素的变换的原点位置
transform:
设置元素的变换属性
none不变换
rotate()设置元素的旋转角度
格式:
rotate(角度值)
scale()设置元素的缩放变换
格式:
scale(水平缩放倍数,垂直缩放倍数)
ScaleX()设置元素水平方向的缩放变换
格式:
scaleX(倍数)
ScaleY()设置元素的垂直方向缩放变换
格式:
scaleY(倍数)
Translate()设置元素的平移变化
格式:
translate(水平位移,垂直位移)
TranslateX()设置元素水平方向的平移变化
格式:
translateX(长度)
TranslateY()设置元素垂直方向的平移变化
格式:
translateY(长度)
Skew()设置元素在x轴和y轴的扭曲方式
格式:
skew(x轴角度,y轴角度)
SkewX()设置元素在x轴的扭曲方式
格式:
skewX(角度)
SkewY()设置元素在y轴的扭曲方式
格式:
skewY(角度)
matrix()矩阵变换
格式:
matrix(水平伸缩比例,纵向扭曲,横向扭曲,垂直伸缩比例,水平偏移量,垂直偏移量)
matrix的默认值为matrix(1,0,0,1,0,0)
过度属性:
transition设置元素的过度属性
格式:
Transition:
变换的属性变换的时间变换的方法延迟开始时间
格式:
Transition:
变换的属性变换的时间变换的方法延迟开始时间,
变换的属性变换的时间变换的方法延迟开始时间,
变换的属性变换的时间变换的方法延迟开始时间,
...
Transition-delay:
设置变换开始之前的等待时间(延迟)
Transition-duration:
变换的过度时间
Transition-property:
设置变换的css属性
none无属性参与过度
all制定所有css属性
某个属性
transition-timing-function:
设置变换的函数(方法)
linear线性过度
ease平滑过度
Ease-in由慢到快
Ease-out由快到慢
ease-in-out先慢在快再慢
动画属性:
Animation:
动画的综合属性设定
Animation-name:
设定动画的名称
注意,要和@keyframe语法一起使用
animation-duration:
设置动画的播放时间
值为时间,单位一般用秒
animation-timing-function:
设置动画的过度方式
linear线性过度
ease平滑过度
ease-in由慢到快
Ease-out由快到慢
ease-in-out由慢到快再到慢
cubic-bezier():
自定义贝塞尔曲线
animation-delay:
设置动画开始的延迟时间
值的开始播放动画之前的延迟事件
animation-iteration-count:
设定动画播放的次数
可以写整数次,也可以也infinite(无限次)
animation-direction:
动画播放的方式是否允许反向
normal正常,不反向
alternate可以反向播放
多列布局:
column-count:
设置列的数量
设置列数,宽度自动调整
column-width:
设置列的宽度
设置宽度,列数自动调整
column-gap:
设置列与列之间的间隙
值为长度单位
column-rule:
设置列与列之间的分割线的样式宽度和颜色
column-rule-style设置列与列之间的分割线的样式
solid实线
dashed虚线
double双线
和border的取值基本一致
column-rule-width设置列与列之间的分割线的宽度
column-rule-color设置列与列之间的分割线的颜色
column-fill:
设置每列的高度是否一致
Auto:
自动设置
Balance:
统一每列的高度
注意:
基本没浏览器支持.,
column-span:
设置元素的跨列属性
none不横跨所有列
all横跨所有列,一般用于标题设置
column-break-after:
在制定元素的列尾部设置是否断行
auto:
默认值,自动设定如果有空间就跟随
Always:
强制断行,不允许其他元素在该元素后跟随
column-break-before:
设置元素的头部是否断行
auto:
默认值,自动设定如果有空间就跟随
Always:
强制断行,不允许其他元素在该元素前跟随
column-break-inside:
暂不支持
Columns:
用于设置列的宽度或者列的数量属性
注意:
同时只能设置一个属性数量或者宽度,同时设置无效。
伸缩盒子模型
Flex-grow:
设置盒子的扩展比率
值是数字
每个元素的扩展空间=总剩余空间/(子元素比例和)*当前元素的比例;
Flex-shrink:
设置盒子的收缩比例
每个元素的收缩空间=总超出空间/(子元素的比例和)*当前元素的比例
Flex-direction:
设置子元素的排列方式
row横向排列
Row-reverse横向倒序排列
column纵向排列
Column-reverse纵向倒序排列
Flex-wrap:
设置超出的元素的换行方式
Nowrap:
不换航处理,伸缩子元素
Wrap:
超出的子元素换行
Wrap-reverse超出子元素反向换行(原行和超出行交换位置)
Flex-flow:
设置元素的换行及超出处理方式
格式:
flex-flow:
方向换行处理方式
Order:
设置子元素在伸缩盒子内的排列顺序
值为数字,可以正数可以负数,数值越大越靠后。
Align-items:
设置子元素的在纵轴方向的对齐方式
stretch拉伸子元素占满位置(默认)
Flex-start伸缩盒子的开始位置(注意方向)
Flex-end伸缩盒子的结束位置(注意方向)
center伸缩盒子的中间位置(注意方向)
baseline效果和flex-start基本一致
注意:
要设置在伸缩盒子的外层盒子上而非子元素上
Align-slef:
设置当前元素在伸缩盒子内的纵轴的对方i方式
auto默认值
stretch拉伸子元素占满位置
Flex-start伸缩盒子的开始位置(注意方向)
Flex-end伸缩盒子的结束位置(注意方向)
center伸缩盒子的中间位置(注意方向)
baseline效果和flex-start基本一致
注意:
要设置在伸缩盒子的子元素上而非外层盒子
Justify-content:
设置伸缩盒子的子元素的水平对齐方式
Flex-start伸缩盒子的开始位置
Flex-end伸缩盒子的结束位置
center伸缩盒子的中间位置
Space-between伸缩盒子的两端对齐位置
Space-around每个子元素平均分布在盒子中
Flex-basis设置元素的伸缩基准值
值为长度
如果元素的所有基准值超过总盒子的长度,所有子元素会按照基准值的比例伸缩子元素。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 属性
![提示](https://static.bdocx.com/images/bang_tan.gif)